VUE搭建分布式醫(yī)療掛號系統(tǒng)后臺管理頁面示例步驟
前言
項(xiàng)目已同步至gitHub：
https://github.com/Guoqianliang/yygh_admin
在《基于分布式的醫(yī)療掛號系統(tǒng)》中，后臺管理的接口在之前的文章中已經(jīng)寫好，接下來開發(fā)后臺管理的前端頁面，前端頁面這里選用github上開源的vue-element-admin進(jìn)行搭建。
這套前端頁面主要使用了Vue.js和element-ui技術(shù)。
一、搭建前端環(huán)境
(1)引入項(xiàng)目到項(xiàng)目工作區(qū)
使用vscode打開空文件夾yygh_admin，將文件夾另存為工作區(qū)yygh_admin。然后將下載好的前端模板放入工作區(qū)。完成后vscode中的目錄結(jié)構(gòu)如下：
(2)根據(jù)package.json下載依賴
將vue-element-admin項(xiàng)目使用終端打開后，使用npm install 命令，下載js依賴。
(3)啟動創(chuàng)建好的前端項(xiàng)目
使用npm run dev 命令啟動前端項(xiàng)目，
項(xiàng)目啟動后，默認(rèn)訪問本地9528端口：
二、前端環(huán)境目錄結(jié)構(gòu)
前端項(xiàng)目啟動時(shí)，使用npm run dev命令后，經(jīng)過一系列的調(diào)用，最終會去調(diào)用main.js入口：
(1)總體目錄概覽
(2)關(guān)鍵文件
package.js
類似于后端Maven的pom.xml文件，包含項(xiàng)目信息，項(xiàng)目依賴，項(xiàng)目啟動相關(guān)腳本。啟動項(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：一種啟動模式
--progress：顯示啟動進(jìn)度
--config build/webpack.dev.conf.js：指定webpack配置文件所在位置
build/webpack.dev.conf.js
webpack的配置文件，包含項(xiàng)目在開發(fā)環(huán)境打包和運(yùn)行的相關(guān)配置。
引用了 webpack.base.conf.js
定義了項(xiàng)目打包的入口文件main.js，和打包后的文件，默認(rèn)是app.js。
在HtmlWebpackPlugin配置html模板，生成的js就會自動插入到模板中。如下面的配置，
生成的js文件會被自動插入到名為index.html的頁面中。
index.html
此文件為項(xiàng)目默認(rèn)的html頁面。
src/main.js
項(xiàng)目js入口文件，項(xiàng)目的所有前端功能都在這個(gè)文件中引入和定義，并初始化全局的Vue對象。
config/dev.env.js
定義全局常量值。
因此，在項(xiàng)目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主機(jī)地址。
src/utils/request.js
引入axios模塊，定義全局的axios實(shí)例，并導(dǎo)出模塊。
src/api/login.js
引用request模塊，調(diào)用遠(yuǎn)程api。
三、登錄改造
下面將登陸相關(guān)請求接口改為靜態(tài)數(shù)據(jù)，不請求接口。修改文件\src\store\modules\user.js 修改Login、GetInfo、LogOut、FedLogOut四個(gè)方法，具體修改如下。
登入方法改造
// 登入
Login({ commit }, userInfo) {
// 硬編碼
const data = { 'token': 'admin' }
// 將token存儲在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文件：
四、測試
可以將index.js文件中的useEslint屬性改為false，關(guān)閉檢測機(jī)制，然后重啟前端項(xiàng)目，
以上就是分布式醫(yī)療掛號系統(tǒng)之搭建后臺管理系統(tǒng)頁面的詳細(xì)內(nèi)容，更多關(guān)于分布式醫(yī)療掛號系統(tǒng)后臺管理頁面搭建的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下2018-08-08
vue路由傳參-如何使用encodeURI加密參數(shù)
這篇文章主要介紹了vue路由傳參-如何使用encodeURI加密參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue 權(quán)限管理幾種實(shí)現(xiàn)方法
本文主要介紹了vue 權(quán)限管理幾種實(shí)現(xiàn)方法,權(quán)限需要前后端結(jié)合,前端盡可能的去控制,更多的需要后臺判斷,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
詳解vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸
這篇文章主要介紹了詳解vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue內(nèi)部渲染視圖的方法，本文通過實(shí)例代碼圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue實(shí)現(xiàn)簡單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動的甘特圖。本文就將用它來實(shí)現(xiàn)簡單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
vue項(xiàng)目history模式刷新404問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目history模式刷新404問題的解決辦法,需要的朋友可以參考下2023-11-11
vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法
在開發(fā)中我們處理數(shù)據(jù)時(shí)會遇到數(shù)據(jù)更新了,但視圖并沒有更新,這種情況往往是數(shù)據(jù)嵌套層數(shù)過多導(dǎo)致的問題,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06