項(xiàng)目已同步至gitHub與gitee：

• https://github.com/Guoqianliang/yygh_admin
• https://gitee.com/guo-qianliang/yygh_admin

vue-admin-template

在《基于分布式的醫(yī)療掛號(hào)系統(tǒng)》中沃疮，后臺(tái)管理的接口在之前的文章中已經(jīng)寫好舔糖，接下來開發(fā)后臺(tái)管理的前端頁面，前端頁面這里選用github上開源的vue-element-admin進(jìn)行搭建。

• 這套前端頁面主要使用了Vue.js和element-ui技術(shù)腥光。
  
  vue-element-admin

一、搭建前端環(huán)境

(1)引入項(xiàng)目到項(xiàng)目工作區(qū)

使用vscode打開空文件夾yygh_admin糊秆，將文件夾另存為工作區(qū)yygh_admin武福。然后將下載好的前端模板放入工作區(qū)。完成后vscode中的目錄結(jié)構(gòu)如下：

引入項(xiàng)目到項(xiàng)目工作區(qū)

(2)根據(jù)package.json下載依賴

將vue-element-admin項(xiàng)目使用終端打開后扩然，使用npm install 命令艘儒，下載js依賴聋伦。

npm install下載依賴

(3)啟動(dòng)創(chuàng)建好的前端項(xiàng)目

使用npm run dev 命令啟動(dòng)前端項(xiàng)目夫偶，

npm run dev啟動(dòng)項(xiàng)目

http://localhost:9528

二觉增、前端環(huán)境目錄結(jié)構(gòu)

前端項(xiàng)目啟動(dòng)時(shí)兵拢，使用npm run dev命令后，經(jīng)過一系列的調(diào)用逾礁，最終會(huì)去調(diào)用main.js入口：

npm run dev命令最終調(diào)用了magin.js

(1)總體目錄概覽

vue-element-admin-master目錄結(jié)構(gòu)

(2)關(guān)鍵文件

package.js

類似于后端Maven的pom.xml文件说铃，包含項(xiàng)目信息，項(xiàng)目依賴嘹履，項(xiàng)目啟動(dòng)相關(guān)腳本腻扇。啟動(dòng)項(xiàng)目的命令： npm run dev

dev腳本：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

• webpack-dev-server：一個(gè)小型的基于Node.js的http服務(wù)器，可以運(yùn)行前端項(xiàng)目
• --inline：一種啟動(dòng)模式
• --progress：顯示啟動(dòng)進(jìn)度
• --config build/webpack.dev.conf.js：指定webpack配置文件所在位置
  
  package.js

build/webpack.dev.conf.js

webpack的配置文件砾嫉，包含項(xiàng)目在開發(fā)環(huán)境打包和運(yùn)行的相關(guān)配置幼苛。

• 引用了 webpack.base.conf.js
  
  webpack.dev.conf.js
• 定義了項(xiàng)目打包的入口文件main.js，和打包后的文件焕刮，默認(rèn)是app.js舶沿。
  webpack.dev.conf.js
• 在HtmlWebpackPlugin配置html模板，生成的js就會(huì)自動(dòng)插入到模板中配并。如下面的配置括荡，
  生成的js文件會(huì)被自動(dòng)插入到名為index.html的頁面中。
  
  webpack.dev.conf.js

index.html

此文件為項(xiàng)目默認(rèn)的html頁面溉旋。

index.html

localhost:9528/#/login

src/main.js

項(xiàng)目js入口文件畸冲，項(xiàng)目的所有前端功能都在這個(gè)文件中引入和定義，并初始化全局的Vue對象。

src/main.js

config/dev.env.js

定義全局常量值邑闲。

config/dev.env.js

config/dev.env.js

src/utils/request.js

引入axios模塊监憎，定義全局的axios實(shí)例纱意，并導(dǎo)出模塊。

src/utils/request.js

src/api/login.js

引用request模塊鲸阔，調(diào)用遠(yuǎn)程api偷霉。

src/api/login.js

三、登錄改造

下面將登陸相關(guān)請求接口改為靜態(tài)數(shù)據(jù)褐筛，不請求接口类少。修改文件\src\store\modules\user.js 修改Login、GetInfo渔扎、LogOut硫狞、FedLogOut四個(gè)方法，具體修改如下晃痴。

(1)登入方法改造

    // 登入
    Login({ commit }, userInfo) {
      // 硬編碼
      const data = { 'token': 'admin' }
      // 將token存儲(chǔ)在cookie中
      setToken(data.token)
      commit('SET_TOKEN', data.token)

      // const username = userInfo.username.trim()
      // return new Promise((resolve, reject) => {
      //   login(username, userInfo.password).then(response => {
      //     const data = response.data
      //     setToken(data.token)
      //     commit('SET_TOKEN', data.token)
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    }

獲取用戶信息方法改造

// 獲取用戶信息
    GetInfo({ commit, state }) {

      // 硬編碼
      const data = { 'roles': 'admin', 'name': 'admin', 'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif' }
      if (data.roles && data.roles.length > 0) { // 驗(yàn)證返回的roles是否是一個(gè)非空數(shù)組
        commit('SET_ROLES', data.roles)
      } else {
        reject('getInfo: roles must be a non-null array !')
      }
      commit('SET_NAME', data.name)
      commit('SET_AVATAR', data.avatar)

      // return new Promise((resolve, reject) => {
      //   getInfo(state.token).then(response => {
      //     const data = response.data
      //     if (data.roles && data.roles.length > 0) { // 驗(yàn)證返回的roles是否是一個(gè)非空數(shù)組
      //       commit('SET_ROLES', data.roles)
      //     } else {
      //       reject('getInfo: roles must be a non-null array !')
      //     }
      //     commit('SET_NAME', data.name)
      //     commit('SET_AVATAR', data.avatar)

      //     resolve(response)
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    }

登出方法改造

// 登出
    LogOut({ commit, state }) {

      // 硬編碼
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()

      // return new Promise((resolve, reject) => {
      //   logout(state.token).then(() => {
      //     commit('SET_TOKEN', '')
      //     commit('SET_ROLES', [])
      //     removeToken()
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    }

前端登出方法改造

// 前端 登出
    FedLogOut({ commit }) {
      // 硬編碼
      commit('SET_TOKEN', '')
      removeToken()
      resolve()


      // return new Promise(resolve => {
      //   commit('SET_TOKEN', '')
      //   removeToken()
      //   resolve()
      // })
    }

最后修改\src\util\request.js文件：

\src\util\request.js

四残吩、測試

可以將index.js文件中的useEslint屬性改為false，關(guān)閉檢測機(jī)制倘核，然后重啟前端項(xiàng)目泣侮，

npm run dev

可以成功登入/退出項(xiàng)目