關於vue 框架與後臺框架的混合使用的嘗試

時間 2019-12-14

標籤關於 vue 框架後臺混合使用嘗試简体版

原文原文鏈接

這幾天我在研究前臺框架和後臺框架融合的問題,進行了一些嘗試;javascript

我前臺選擇的是 vue,固然也能夠選擇 react 等其餘 mvvm 框架,不過 vue 對於我來講是最熟悉的;php

後臺話,我選擇的是 php 的 lumen 框架,他是laravel 的簡化版,由於比較輕量,因此這也是個人選擇;html

先說下我這邊的環境:vue

系統:Mac os 10.12;java

服務器:apache 2.2;node

php:7.0;react

lumen:5.4;webpack

vue:2.0以上;laravel

這是 lumen 的官網 https://lumen.laravel-china.org/docs/5.3git

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 就能夠部署項目了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。