http://blog.csdn.net/hero82748274/article/details/76100938
vuethink 是一款基于PHP TP5和Vuejs 結(jié)合的后臺(tái)框架严就，設(shè)計(jì)起來是使用較為前沿檩咱。在使用的過程肌似，需要對(duì)這款開源的后臺(tái)做一些調(diào)整和面對(duì)一些細(xì)節(jié)的坑姿鸿。前段時(shí)間也因?yàn)橛许?xiàng)目需求宋列，所以下載了玩了一下珊燎。好矮瘟，下面看看如何安裝使用庐扫。
1 下載源代碼
進(jìn)入到官網(wǎng)到到這個(gè)網(wǎng)頁進(jìn)行下載饭望。
下載完成后，這款后臺(tái)是前后端分離形庭，基于PHP開發(fā)铅辞，以及是Vuejs，解壓后會(huì)frontEnd 和php兩個(gè)安裝包萨醒。forntEnd是前端開發(fā)包斟珊，php是后端開發(fā)代碼包。
2 安裝依賴庫
下載的vuejs代碼包是沒有安裝相應(yīng)的依賴庫富纸。因此囤踩，你需要在這個(gè)時(shí)候?qū)η岸说拇a進(jìn)行安裝依賴庫。
這里使用的vscode開發(fā)IDE晓褪，打開項(xiàng)目后高职，在終端里面使用npm安裝命令進(jìn)行安裝。
npm install
安裝過程會(huì)出現(xiàn)過慢的情況辞州。完成后最后出現(xiàn)一些警告怔锌，這里可以不做處理。完成安裝代碼庫后如下圖。
3 配置數(shù)據(jù)庫
下載到后端并不能馬上使用埃元，還需要對(duì)數(shù)據(jù)庫進(jìn)行調(diào)整到自己適合的涝涤。
首先進(jìn)入php的代碼包，修改config目錄下 database.php配置信息岛杀，這里填寫數(shù)據(jù)庫的配置阔拳，修改數(shù)據(jù)庫名，用戶名 和 密碼类嗤，端口糊肠。如本機(jī)的用戶為root，密碼為空遗锣，端口為3306货裹，數(shù)據(jù)庫建立一個(gè)thinkphp5的標(biāo)記。
'type'=>'mysql',// 服務(wù)器地址'hostname'=>'127.0.0.1',// 數(shù)據(jù)庫名'database'=>'thinkphp5',// 用戶名'username'=>'root',// 密碼'password'=>'',// 端口'hostport'=>'3306',
1
2
3
4
5
6
7
8
9
10
11
將install.sql精偿，安裝到數(shù)據(jù)庫中去弧圆。這里使用Navicat for MySQL 工具先建立一個(gè)名為thinkphp5的數(shù)據(jù)庫，然后通過右鍵運(yùn)行sql文件笔咽，指向install.sql文件搔预，完成后可以看到我們的數(shù)據(jù)庫表已經(jīng)安裝到了。
4 運(yùn)行后端檢測(cè)是否成功
使用這個(gè)后端之前叶组，我們還需要做的一個(gè)環(huán)節(jié)拯田，除了安裝依賴庫，配置數(shù)據(jù)庫連接配置外甩十，需要檢測(cè)一下接口鏈接是否通了船庇，這一步很重要。
在這里枣氧，使用了xampp服務(wù)器溢十，將兩個(gè)文件包frontEnd 和php 放置一個(gè)htdocs里面垮刹，建立一個(gè)文件夾vue达吞。
運(yùn)行如下鏈接
出現(xiàn)vuethink接口字眼 則代表成功了。實(shí)際上這個(gè)路由缺失（miss的）的情況下出現(xiàn)的荒典，這個(gè)時(shí)候?qū)?yīng)好路由請(qǐng)求酪劫，這個(gè)接口字眼就不會(huì)出現(xiàn)的。部署過程僅僅是告知你聯(lián)通是否寺董。
我們?cè)趐hp\application\admin\controller 找到對(duì)應(yīng)base.php
// miss 路由：處理沒有匹配到的路由規(guī)則publicfunctionmiss(){if(Request::instance()->isOptions()) {return;? ? ? ? }else{echo'vuethink接口';? ? ? ? }? ? }
1
2
3
4
5
6
7
8
9
5 運(yùn)行前端第一關(guān)
執(zhí)行npm run dev 運(yùn)行前端覆糟，第一步會(huì)出現(xiàn)
請(qǐng)求超時(shí)，請(qǐng)檢查網(wǎng)絡(luò)情況遮咖。
造成這個(gè)問題滩字，基于前端后分離的情況出現(xiàn)跨域的問題。我們很容易理解，前端把fontEnd當(dāng)成了根目錄麦箍，但是請(qǐng)求的接口就不是在我們的根目錄下面漓藕。
從這個(gè)猜測(cè)，請(qǐng)求接口的路徑已經(jīng)出錯(cuò)了挟裂，默認(rèn)下請(qǐng)求為根目錄享钞。
http://localhost/admin/base/getConfigs
1
可是我們剛才放置根目錄下的二級(jí)目錄vue這個(gè)文件夾。因此诀蓉，我們?cè)L問的路徑應(yīng)該是栗竖，其中php為文件夾，對(duì)應(yīng)的是index.php文件渠啤。
http://127.0.0.1/vue/php/index.php/’
解決這個(gè)問題狐肢，首先在前端找到，main.js 修改兩處請(qǐng)求的地方埃篓。
將axios.defaults.baseURL =HOST
window.HOST = HOST
修改為如下情況处坪。
axios.defaults.baseURL ='http://127.0.0.1/vue/php/index.php/'window.HOST ='http://127.0.0.1/vue/php/index.php/'
1
2
3
4
這里理解為vue 是我們放置的文件夾，里面又放置了兩個(gè)文件架专，分別是forntEnd（前端）和php(后端)
完成修改后同窘，就可以進(jìn)入到后端了。
6.進(jìn)入后臺(tái)
輸入admin 密碼123456 進(jìn)入到相關(guān)的后臺(tái)部脚∠氚睿可以看到這里開發(fā)后端。
7.選擇禁用eslint 報(bào)錯(cuò)
由于vuethink采用了eslint嚴(yán)格的機(jī)制委刘，所以你的代碼一旦不按照這個(gè)機(jī)制寫格式丧没，例如你寫雙引號(hào)，空格不按照對(duì)齊锡移。這個(gè)時(shí)候就會(huì)報(bào)錯(cuò)呕童，報(bào)錯(cuò)。這肯定是受不了淆珊。
如果不需要這個(gè)嚴(yán)格的驗(yàn)證機(jī)制夺饲，那么你可以在這個(gè)機(jī)制上取消這個(gè)驗(yàn)證。搜索前端打開
webpack.base.conf.js 的js 文件
注解一下這個(gè)配置施符。不讓eslint給你添麻煩往声。
eslint: {// configFile: './.eslintrc.json'},module: {? ? preLoaders: [// {//? test: /\.js$/,//? exclude: /node_modules/,//? loader: 'eslint'// },// {//? test: /\.vue$/,//? exclude: /node_modules/,//? loader: 'eslint'// }],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
8.后端路由設(shè)置
開發(fā)過程，我們需要對(duì)路由進(jìn)行設(shè)置開發(fā),設(shè)置不同的路由戳吝，對(duì)應(yīng)好不同的文件浩销。框架提供了配置路由的設(shè)置听哭，這個(gè)文件在慢洋。
php\config\route_admin.php 文件里面塘雳。
// +----------------------------------------------------------------------return[// 定義資源路由'__rest__'=>['admin/rules'=>'admin/rules','admin/groups'=>'admin/groups','admin/users'=>'admin/users','admin/menus'=>'admin/menus','admin/structures'=>'admin/structures','admin/posts'=>'admin/posts',? ? ],// 【基礎(chǔ)】登錄'admin/base/login'=> ['admin/base/login', ['method'=>'POST']],// 【基礎(chǔ)】記住登錄'admin/base/relogin'=> ['admin/base/relogin', ['method'=>'POST']],// 【基礎(chǔ)】修改密碼'admin/base/setInfo'=> ['admin/base/setInfo', ['method'=>'POST']],// 【基礎(chǔ)】退出登錄'admin/base/logout'=> ['admin/base/logout', ['method'=>'POST']],// 【基礎(chǔ)】獲取配置'admin/base/getConfigs'=> ['admin/base/getConfigs', ['method'=>'POST']],// 【基礎(chǔ)】獲取驗(yàn)證碼'admin/base/getVerify'=> ['admin/base/getVerify', ['method'=>'GET']],// 【基礎(chǔ)】上傳圖片'admin/upload'=> ['admin/upload/index', ['method'=>'POST']],// 保存系統(tǒng)配置'admin/systemConfigs'=> ['admin/systemConfigs/save', ['method'=>'POST']],// 【規(guī)則】批量刪除'admin/rules/deletes'=> ['admin/rules/deletes', ['method'=>'POST']],// 【規(guī)則】批量啟用/禁用'admin/rules/enables'=> ['admin/rules/enables', ['method'=>'POST']],// 【用戶組】批量刪除'admin/groups/deletes'=> ['admin/groups/deletes', ['method'=>'POST']],// 【用戶組】批量啟用/禁用'admin/groups/enables'=> ['admin/groups/enables', ['method'=>'POST']],// 【用戶】批量刪除'admin/users/deletes'=> ['admin/users/deletes', ['method'=>'POST']],// 【用戶】批量啟用/禁用'admin/users/enables'=> ['admin/users/enables', ['method'=>'POST']],// 【菜單】批量刪除'admin/menus/deletes'=> ['admin/menus/deletes', ['method'=>'POST']],// 【菜單】批量啟用/禁用'admin/menus/enables'=> ['admin/menus/enables', ['method'=>'POST']],// 【組織架構(gòu)】批量刪除'admin/structures/deletes'=> ['admin/structures/deletes', ['method'=>'POST']],// 【組織架構(gòu)】批量啟用/禁用'admin/structures/enables'=> ['admin/structures/enables', ['method'=>'POST']],// 【部門】批量刪除'admin/posts/deletes'=> ['admin/posts/deletes', ['method'=>'POST']],// 【部門】批量啟用/禁用'admin/posts/enables'=> ['admin/posts/enables', ['method'=>'POST']],// MISS路由'__miss__'=>'admin/base/miss',];
例如我們模塊里面定義個(gè)新路由，那么你就在首先
并在路由里面添加一個(gè)路由設(shè)置普筹。
'admin/hello/index'=> ['admin/hello/index', ['method'=>'GET']],
1
然后在php\application\admin\controller粉捻，新建一個(gè)控制類。
http://127.0.0.1/vue/php/index.php/admin/hello/index
1
admin/hello/index 是我們定義的路由斑芜，采取Get的方式獲取數(shù)據(jù)肩刃。
執(zhí)行運(yùn)行后，可以訪問到我們的前端路由了杏头。
以此類推盈包，可以定義更多路由和設(shè)置更多繼承接口的方法。
默認(rèn)下多個(gè)控制器均繼承了ApiCommon帶接口驗(yàn)證醇王，繼承Common 沒有驗(yàn)證呢燥。Common直接繼承了Controller類。
