這幾天我在研究前台框架和后台框架融合的問題,進行了一些嘗試;
我前台選擇的是 vue,當然也可以選擇 react 等其他 mvvm 框架,不過 vue 對於我來說是最熟悉的;
后台話,我選擇的是 php 的 lumen 框架,他是laravel 的簡化版,因為比較輕量,所以這也是我的選擇;
先說下我這邊的環境:
系統:Mac os 10.12;
服務器:apache 2.2;
php:7.0;
lumen:5.4;
vue:2.0以上;
這是 lumen 的官網 https://lumen.laravel-china.org/docs/5.3
lumen 的下載和配置,官網里已經有了,我簡單說下,首先要下載 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 ExecCGI
Order allow,deny
Allow from all
AllowOverride All
</directory>
</virtualhost>
配置好 lumen 之后;
cd 到 public文件夾;
下載 vue;
這邊創建 vue 項目的時候有2種選擇:
1.vue init webpack-simple projectName
這是沒有 router的簡化版; 在在路由文件或者控制器或視圖中指向對映的html 資源;
2.vue init webpack projectName
這是完整的;
在資源指向的時候通過路由來調到對應的頁面
我選擇的是第二種
再就是三連發
cd projectName npm install npm run dev
可以看到瀏覽器跳出了一個頁面正是 vue 成功的頁面;
現在東西都已經下載好了
再就是配置;
那么在 apache 中該怎么訪問 vue 的項目呢;
我在網絡上找了很多方案,最終還是選擇了生成靜態文件來進行訪問,也就是:
npm run build
不過問題又來了, build 之后的修改並沒有熱加載;
那么在 apache 上能實現么?
我搜索了大半天,並沒有發現什么能夠實現的(也許是我還沒發現);
現在解決的方案我想了一下 webpack 是 node 的,也只能在 npm 上熱加載了(也許有其他的輪子能實現);
這里放下我的解決方案:
lumen 目錄下的 /routes/web.php:
$app->get('index/{id}', 'UserController@show');
這里我添加了一個路由指向user 控制器下的 show 方法;
lumen 目錄下的 /app/http/controllers/
新建的 UserController.php:
<?php
namespace 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
但是你會發現vue 的首頁靜態資源加載成功了
,其他文件加載缺失敗了
這個時候需要對 vue 的 /config/index.js文件進行配置:
我這邊是這樣修改的
assetsPublicPath: '/Grewer/dist/'
第一個路徑為你的項目名稱;
修改完后需要重新生成資源:
使用:
npm run build
這樣打開http://127.0.0.1:83/index/1
發現已經成功了;
在就是熱加載的問題;
開發的話只能在 npm run dev 上的服務器進行(也許其他的也可以,請告訴我);
使用 npm run dev 啟動頁面:
在該頁面上進行調試;
關於跨域的問題:
在 npm 上進行的ajax 調用的借口都是apache 服務器的所以在 vue 的 index.html 上先定義好路徑,比如說:
var app = {
root:'http://127.0.0.1:83/'
}
在 vue 頁面調用接口的時候前綴就是 app.root+"index/1";
在 lumen 目錄下的 /routes/web.php添加:
header("Access-Control-Allow-Origin:*");
我認為這是最簡單的跨域解決跨域的方法;
現在的借口都能進行調用獲得數據了,然后頁面的話通過 vue 的router;
比如我在vue 項目中的/src/router/index.js 文件中新添加了一個路徑
{
path: '/test',
name: 'Hello',
component: Hello
},
與根目錄指向同一個文件;
需要跳轉的時候就跳轉到這里:http://127.0.0.1:83/index/1#/test
在需要上線的時候就把 vue 目錄下的 app.root 修改一下,再把路由中的允許跨域關掉;
再就是 npm run build;
lumen 框架的根目錄可以直接指向 vue 的 index.html;
好了,這就是前台框架和后台的混合了;
寫得不好或者粗淺還請見諒;
如果你有更好的方案或者輪子,可以告訴我;
我看到了 laravel 有 mix 可以使用 webpack,下次可以嘗試一下
end;
10.21更新,關於跨域的方案已經有了更好的辦法,就是 webpack 的代理proxyTable,能解決大部分問題;
后續說明:
本框架里使用的頁面是 php 文件,若能直接引用 html 文件,那就可以直接引用項目 build 之后的 index.html 就可以部署項目了