vue-element-admin實戰 | 第一篇：移除mock接入後臺，搭建有來商城youlai-mall先後端分離管理平臺

時間 2020-10-27

標籤 javascript 前端 vue java node ios git github web vue-router 欄目 JavaScript 简体版

原文原文鏈接

一. 前言

本篇基於有來商城youlai-mall 微服務項目搭建的後臺前端管理平臺,技術選型Vue+Element-UI實現先後端分離,解決方案選型vue-element-admin。但願經過本篇你能夠改造vue-element-admin工程接入到本身的平臺。javascript

二. 工程改造

1.導入vue-element-admin

導入vue-element-admin至IDEA，直接使用git導入的地址： https://gitee.com/panjiachen/vue-element-admin.git前端

2.設置vue-element-admin中文語言

切換到分支i18n支持國際化分支vue

git checkout i18n

安裝依賴包java

npm install --registry=https://registry.npm.taobao.org

啓動項目node

npm run dev

此時默認瀏覽器會自動打開，也可在瀏覽器地址欄輸入 http://localhost:9527 直接訪問ios

3.移除mock接入後臺接口

vue-element-admin項目默認走的是本地mock接口數據，那怎麼接入到本身平臺的後臺接口呢？git

3.1 mock接口信息

先看下vue-element-admin登陸進入平臺所須要的接口信息，以下圖所示，是有兩個關鍵接口
github

接口一：/user/login 登陸認證獲取tokenweb

{
	"code": 20000,
	"data": {
		"token": "admin-token"
	}
}

接口二：/user/info?token=admin-token 根據token獲取用戶信息vue-router

{
	"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"
	}
}

3.2 後臺接口信息

關於後臺接口首先對youlai-mall開源項目有些瞭解，詳情請拉取下項目，依次啓動nacos-server,youlai-admin,youlai-auth,youlai-gateway項目啓動有啥問題請下方留言，見到第一時間回覆。

接口一：登陸認證獲取token

youlai-mall整合SpringCloud Gateway+Spring Security OAuth2+JWT技術實現的登陸認證接口，調用信息以下：

http://localhost:9999/youlai-auth/oauth/token

接口二：獲取用戶信息

http://localhost:9999/youlai-admin/users/current

以上就是兩個接口的請求以及響應信息，暫先能夠不用顧及其內部實現。本篇側重接入後臺youlai-mall，最好拉取youlai-mall代碼在本地啓動跑一下流程。

若是想自定義接口，只要按照特定數據格式返回便可。

3.3 vue-element-admin移除mock

1. vue.config.js

至於爲何添加配置devServer.proxy進行代理轉發?

由於先後端分離，就算是本地開發，也會由於端口不一樣而知足跨域請求條件的。

通常跨域是瀏覽器禁止的，服務器端之間並不由止跨域（能夠配置禁止）。

配置好代理以後，在項目啓動時本地會啓動一個node服務，瀏覽器先將請求發送到本地node服務，而後經由node服務將請求代理轉發到後臺服務器，這樣就能夠避開瀏覽器禁止跨域的問題。

具體原理詳情可參照：node中跨域代理 proxyTable的原理是什麼？

2. src/main.js

3.4 vue-element-admin接入後臺接口

1. src/api/user.js

接口URL替換： 完成1,2步驟即移除了mock接入到了後臺，修改登陸認證和獲取用戶信息兩個接口的後臺請求路徑，替換後以下圖：

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方法，詳情以下圖：

對比3.2後臺接口，發現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'

修改請求頭

修改爲功響應狀態碼

3.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工程，其餘功能搭建按照一樣方法便可。