一. 前言
本篇基於有來商城youlai-mall 微服務項目搭建的后台前端管理平台,技術選型Vue+element-ui實現前后端分離,解決方案選型vue-element-admin。希望通過本篇你可以改造vue-element-admin工程接入微服務接口實現前后端分離。
二. vue-element-admin下載啟動
1. 下載
下載 vue-element-admin的i18n分支支持中文，下載地址https://github.com/PanJiaChen/vue-element-admin/tree/i18n
2. 啟動
導入vue-element-admin至IDEA，執行npm install,如果安裝慢或網絡差的情況下請參考安裝cnpm設置npm淘寶鏡像源這篇文章安裝cnpm，然后執行cnpm install安裝依賴包。
依賴包安裝完成之后，執行npm run dev本地啟動項目,默認自動打開瀏覽器或者在瀏覽器打開地址欄輸入http://localhost:9527
三. vue-element-admin后台接入
vue-element-admin項目默認走的是本地mock接口數據，那怎么接入到自己平台的后台接口呢？
1. mock接口信息
先看下vue-element-admin登錄進入平台所需要的接口信息，如下圖所示，是有兩個關鍵接口
接口一：/user/login 登錄認證獲取token
{
"code": 20000,
"data": {
"token": "admin-token"
}
}
接口二：/user/info?token=admin-token 根據token獲取用戶信息
{
"code": 20000,
"data": {
"roles": ["admin"],
"introduction": "I am a super administrator",
"avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
"name": "Super Admin"
}
}
2. 后台接口信息
按照上面的mock接口的數據格式編寫對應的后台接口返回對應的數據格式
接口一： 登錄認證獲取token
youlai-mall整合SpringCloud Gateway+Spring Security OAuth2+JWT技術實現的登錄認證接口，調用信息如下：
http://localhost:9999/youlai-auth/oauth/token
接口二： 獲取用戶信息
http://localhost:9999/youlai-admin/users/current
以上就是按照mock數據制作的后台接口。
3. 移除mock
1. vue.config.js
為什么添加配置devServer.proxy進行代理轉發?
因為前后端分離，就算是本地開發調試，也會因為端口不同而滿足跨域請求條件，而瀏覽器禁止跨域請求。
配置代理之后，在項目啟動時本地會啟動一個node服務，瀏覽器先將請求發送到本地node服務，然后經由node服務將請求代理轉發到后台，這樣就可以避開瀏覽器跨域限制的問題。
具體原理詳情可參照：node中跨域代理 proxyTable的原理是什么？
2. src/main.js
4. 替換mock為后台接口請求
1. src/api/user.js
接口URL替換： 修改登錄認證和獲取用戶信息兩個接口的后台請求路徑，替換后如下圖：
2. src/store/modules/user.js
認證接口參數： 首先看下登錄入口: src/views/login/index.vue的handleLogin方法
this.$store.dispatch是Vuex狀態管理中調用方式，具體操作是分發actions->調用mutations->改變state,其中action包含了異步操做，這是action與mutation的區別，也是dispatch和commit的區別。
// dispatch 異步操作
this.$store.dispatch('actions的方法'，args)
// commit 同步操作
this.$store.commit('mutations的方法'，args)
明白this.$store.dispatch是做actions的分發，分發路徑是/user/login，找到user模塊文件src/store/modules/user.js，在文件中actions找到login方法，詳情如下圖：
OAuth2認證認證接口還需補上3個參數：
| 參數值 | 參數名 | 參數描述 |
|---|---|---|
| grant_type | password | OAuth2授權方式：密碼式 |
| client_id | client | 客戶端ID |
| client_secret | 123456 | 客戶端密鑰 |
補全參數后如下：
3.src/utils/request.js
修改數據上傳默認為JSON格式
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
修改請求頭
修改成功響應狀態碼
5. 接入后台登錄測試
到這里就完成了vue-element-admin移除mock接入到后台的功能
四. 搭建管理前端
通過上面步驟，我們已成功改造vue-element-admin接入到后台接口，接下來我們以管理平台的用戶管理功能為例講述如何使用vue-element-admin搭建我們自己的管理平台。
1. 刪除多余文件
刪除mock文件夾
刪除views下除了dashboard、error-page、login、profile、redirect之外的文件夾
2. 引入用戶管理
新增user.js接口、user/index.vue用戶頁面，完整代碼文章結尾獲取，結構如下圖所示：
3. 路由配置
修改路由配置文件 src/router/index.js，其中有靜態路由constantRoutes和權限路由asyncRoutes需要修改。
靜態路由刪減保留如下：
export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index')
}
]
},
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/auth-redirect',
component: () => import('@/views/login/auth-redirect'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/error-page/404'),
hidden: true
},
{
path: '/401',
component: () => import('@/views/error-page/401'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'Dashboard',
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
}
]
},
{
path: '/profile',
component: Layout,
redirect: '/profile/index',
hidden: true,
children: [
{
path: 'index',
component: () => import('@/views/profile/index'),
name: 'Profile',
meta: { title: 'Profile', icon: 'user', noCache: true }
}
]
}
]
權限路由刪減，並新增用戶管理路由如下：
export const asyncRoutes = [
{
path: '/admin',
component: Layout,
redirect: '/admin/user',
alwaysShow: true, // will always show the root menu
name: 'Admin',
meta: {
title: '系統管理',
icon: 'documentation',
roles: ['admin', 'editor'] // you can set roles in root nav
},
children: [
{
path: 'user',
component: () => import('@/views/admin/user'),
name: 'User',
meta: {
title: '用戶管理',
roles: ['admin'] // or you can only set roles in sub nav
}
}
]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
4. 驗證用戶管理
執行npm run dev再次打開系統，登錄后界面如下：
可以看到，管理平台中的用戶管理已成功集成到我們改造后的vue-element-admin工程，其他功能搭建按照同樣方法即可。
五. 結語
本篇就如何改造vue-element-admin接入到后台實現youlai-mall后台前端管理平台的搭建。其中涉及的前后端分離解決瀏覽器跨域問題的解決原理，vuex、vue-router的應用，覺得很有意義去親手實踐一下。最后附上完整代碼下載地址，出現問題可比對改造完成的項目：