VUE搭建分布式醫(yī)療掛號系統(tǒ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)引入項目到項目工作區(qū)
使用vscode打開空文件夾yygh_admin，將文件夾另存為工作區(qū)yygh_admin。然后將下載好的前端模板放入工作區(qū)。完成后vscode中的目錄結(jié)構(gòu)如下：
(2)根據(jù)package.json下載依賴
將vue-element-admin項目使用終端打開后，使用npm install 命令，下載js依賴。
(3)啟動創(chuàng)建好的前端項目
使用npm run dev 命令啟動前端項目，
項目啟動后，默認(rèn)訪問本地9528端口：
二、前端環(huán)境目錄結(jié)構(gòu)
前端項目啟動時，使用npm run dev命令后，經(jīng)過一系列的調(diào)用，最終會去調(diào)用main.js入口：
(1)總體目錄概覽
(2)關(guān)鍵文件
package.js
類似于后端Maven的pom.xml文件，包含項目信息，項目依賴，項目啟動相關(guān)腳本。啟動項目的命令：
npm run dev
dev腳本：
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
webpack-dev-server：一個小型的基于Node.js的http服務(wù)器，可以運(yùn)行前端項目
--inline：一種啟動模式
--progress：顯示啟動進(jìn)度
--config build/webpack.dev.conf.js：指定webpack配置文件所在位置
build/webpack.dev.conf.js
webpack的配置文件，包含項目在開發(fā)環(huán)境打包和運(yùn)行的相關(guān)配置。
引用了 webpack.base.conf.js
定義了項目打包的入口文件main.js，和打包后的文件，默認(rèn)是app.js。
在HtmlWebpackPlugin配置html模板，生成的js就會自動插入到模板中。如下面的配置，
生成的js文件會被自動插入到名為index.html的頁面中。
index.html
此文件為項目默認(rèn)的html頁面。
src/main.js
項目js入口文件，項目的所有前端功能都在這個文件中引入和定義，并初始化全局的Vue對象。
config/dev.env.js
定義全局常量值。
因此，在項目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主機(jī)地址。
src/utils/request.js
引入axios模塊，定義全局的axios實例，并導(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四個方法，具體修改如下。
登入方法改造
// 登入
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) { // 驗證返回的roles是否是一個非空數(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) { // 驗證返回的roles是否是一個非空數(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ī)制，然后重啟前端項目，
以上就是分布式醫(yī)療掛號系統(tǒng)之搭建后臺管理系統(tǒng)頁面的詳細(xì)內(nèi)容，更多關(guān)于分布式醫(yī)療掛號系統(tǒng)后臺管理頁面搭建的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue使用高德地圖實現(xiàn)實時定位天氣預(yù)報功能
這篇文章主要介紹了vue使用高德地圖實現(xiàn)實時天氣預(yù)報功能,根據(jù)定位功能，使用高德地圖實現(xiàn)定位當(dāng)前城市的天氣預(yù)報功能，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
Vue源碼解讀之Component組件注冊的實現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue封裝localStorage設(shè)置過期時間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時間的相關(guān)資料,在這個示例中,我們在MyComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
今天小編就為大家分享一篇Vue實現(xiàn)push數(shù)組并刪除的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了前端框架封裝Vue第三方組件的三個技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue3.0 CLI - 2.6 - 組件的復(fù)用入門教程
這篇文章主要介紹了 vue3.0 CLI - 2.6 - 組件的復(fù)用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了詳解Vue中過度動畫效果應(yīng)用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
今天給大家分享的是，如何在最短的時候內(nèi)實現(xiàn)右鍵菜單。高效實現(xiàn)需求，避免重復(fù)造輪子。感興趣的可以了解一下2021-10-10
UniApp是一個基于Vue.js開發(fā)的跨平臺應(yīng)用開發(fā)框架,它可以使用一套代碼同時構(gòu)建iOS、Android和Web應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何使用vue3+uni-app封裝音樂播放插件的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了在Vue中使用icon 字體圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06