當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

关于vue 框架与后台框架的混合使用的尝试

發(fā)布時(shí)間：2023/12/1 vue 36 豆豆

生活随笔收集整理的這篇文章主要介紹了关于vue 框架与后台框架的混合使用的尝试小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

這幾天我在研究前臺框架和后臺框架融合的問題,進(jìn)行了一些嘗試;

我前臺選擇的是 vue,當(dāng)然也可以選擇 react 等其他 mvvm 框架,不過 vue 對于我來說是最熟悉的;

后臺話,我選擇的是 php 的 lumen 框架,他是laravel 的簡化版,因?yàn)楸容^輕量,所以這也是我的選擇;

先說下我這邊的環(huán)境:

系統(tǒng):Mac os 10.12;

服務(wù)器:apache 2.2;

php:7.0;

lumen:5.4;

vue:2.0以上;

這是 lumen 的官網(wǎng) https://lumen.laravel-china.org/docs/5.3

lumen 的下載和配置,官網(wǎng)里已經(jīng)有了,我簡單說下,首先要下載 composer, 可以用命令下載最新的版本,也可以直接取 github 上下載其他版本,不過這種方法下載完后要使用命令:

composer update //下載依賴

composer update

直接用命令下載的話不需要;

記得 apache 開啟重寫?
我這邊的虛擬目錄指向:

<virtualhost *:83>DocumentRoot "/Users/apple/Sites/lumen/blog/public"ServerName 127.0.0.1:80<directory "/Users/apple/Sites/lumen/blog/public">Options Indexes FollowSymLinks ExecCGIOrder allow,denyAllow from allAllowOverride All</directory> </virtualhost>

配置好 lumen 之后;

cd 到 public文件夾;

下載 vue;

這邊創(chuàng)建 vue 項(xiàng)目的時(shí)候有2種選擇:

1.vue init webpack-simple projectName

這是沒有 router的簡化版; 在在路由文件或者控制器或視圖中指向?qū)τ车膆tml 資源;

2.vue init webpack projectName

?這是完整的;

在資源指向的時(shí)候通過路由來調(diào)到對應(yīng)的頁面

我選擇的是第二種

再就是三連發(fā)

cd projectName npm install npm run dev

可以看到瀏覽器跳出了一個(gè)頁面正是 vue 成功的頁面;

現(xiàn)在東西都已經(jīng)下載好了

再就是配置;

那么在 apache 中該怎么訪問 vue 的項(xiàng)目呢;

我在網(wǎng)絡(luò)上找了很多方案,最終還是選擇了生成靜態(tài)文件來進(jìn)行訪問,也就是:

npm run build

不過問題又來了, build 之后的修改并沒有熱加載;

那么在 apache 上能實(shí)現(xiàn)么?

我搜索了大半天,并沒有發(fā)現(xiàn)什么能夠?qū)崿F(xiàn)的(也許是我還沒發(fā)現(xiàn));

現(xiàn)在解決的方案我想了一下 webpack 是 node 的,也只能在 npm 上熱加載了(也許有其他的輪子能實(shí)現(xiàn));

這里放下我的解決方案:

lumen 目錄下的 /routes/web.php:

$app->get('index/{id}', 'UserController@show');

這里我添加了一個(gè)路由指向user 控制器下的 show 方法;

lumen 目錄下的 /app/http/controllers/

新建的 UserController.php:

<?phpnamespace App\Http\Controllers;use App\User;use Illuminate\Http\Response;class UserController extends Controller {public function show($id){$content = view('hello',['message'=>'Hello LaravelAcademy']);$status = 200;$value = 'text/html;charset=utf-8';return (new Response($content, $status))->header('Content-Type', $value);} }

lumen目錄下的/resources/views/

新建文件hello.blade.php:

<!DOCTYPE html> <html> <head><title>demo</title> </head> <body> <div>視圖</div> {{$message}}{{include('Grewer/dist/index.html')}}</body> </html>

開啟 apache;

在瀏覽器上輸入 http://127.0.0.1:83/index/1

但是你會發(fā)現(xiàn)vue 的首頁靜態(tài)資源加載成功了

,其他文件加載缺失敗了?

這個(gè)時(shí)候需要對 vue 的 /config/index.js文件進(jìn)行配置:

我這邊是這樣修改的

assetsPublicPath: '/Grewer/dist/'

第一個(gè)路徑為你的項(xiàng)目名稱;

修改完后需要重新生成資源:

使用:

npm run build

這樣打開http://127.0.0.1:83/index/1

發(fā)現(xiàn)已經(jīng)成功了;

在就是熱加載的問題;

開發(fā)的話只能在 npm run dev 上的服務(wù)器進(jìn)行(也許其他的也可以,請告訴我);

使用 npm run dev 啟動頁面:

在該頁面上進(jìn)行調(diào)試;

關(guān)于跨域的問題:

在 npm 上進(jìn)行的ajax 調(diào)用的借口都是apache 服務(wù)器的所以在 vue 的 index.html 上先定義好路徑,比如說:

var app = {root:'http://127.0.0.1:83/' }

在 vue 頁面調(diào)用接口的時(shí)候前綴就是 app.root+"index/1";

在 lumen 目錄下的 /routes/web.php添加:

header("Access-Control-Allow-Origin:*");

我認(rèn)為這是最簡單的跨域解決跨域的方法;

現(xiàn)在的借口都能進(jìn)行調(diào)用獲得數(shù)據(jù)了,然后頁面的話通過 vue 的router;

比如我在vue 項(xiàng)目中的/src/router/index.js 文件中新添加了一個(gè)路徑

{path: '/test',name: 'Hello',component: Hello},

與根目錄指向同一個(gè)文件;

需要跳轉(zhuǎn)的時(shí)候就跳轉(zhuǎn)到這里:http://127.0.0.1:83/index/1#/test

在需要上線的時(shí)候就把 vue 目錄下的 app.root 修改一下,再把路由中的允許跨域關(guān)掉;

再就是 npm run build;

lumen 框架的根目錄可以直接指向 vue 的 index.html;

好了,這就是前臺框架和后臺的混合了;

寫得不好或者粗淺還請見諒;

如果你有更好的方案或者輪子,可以告訴我;

我看到了 laravel 有 mix 可以使用 webpack,下次可以嘗試一下

end;

10.21更新,關(guān)于跨域的方案已經(jīng)有了更好的辦法,就是? webpack 的代理proxyTable,能解決大部分問題;

后續(xù)說明:

本框架里使用的頁面是 php 文件,若能直接引用 html 文件,那就可以直接引用項(xiàng)目 build 之后的 index.html 就可以部署項(xiàng)目了

轉(zhuǎn)載于:https://www.cnblogs.com/Grewer/p/7441733.html

總結(jié)

以上是生活随笔為你收集整理的关于vue 框架与后台框架的混合使用的尝试的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Mybatis处理表关联(懒加载）
下一篇： Vue使用axios无法读取data的解