VUE搭建分布式醫(yī)療掛號(hào)系統(tǒng)后臺(tái)管理頁面示例步驟
前言
項(xiàng)目已同步至gitHub:
https://github.com/Guoqianliang/yygh_admin

在《基于分布式的醫(yī)療掛號(hào)系統(tǒng)》中,后臺(tái)管理的接口在之前的文章中已經(jīng)寫好,接下來開發(fā)后臺(tái)管理的前端頁面,前端頁面這里選用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)啟動(dòng)創(chuàng)建好的前端項(xiàng)目
使用npm run dev 命令啟動(dòng)前端項(xiàng)目,

項(xiàng)目啟動(dòng)后,默認(rèn)訪問本地9528端口:

二、前端環(huán)境目錄結(jié)構(gòu)
前端項(xiàng)目啟動(dòng)時(shí),使用npm run dev命令后,經(jīng)過一系列的調(diào)用,最終會(huì)去調(diào)用main.js入口:

(1)總體目錄概覽

(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配置文件所在位置

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就會(huì)自動(dòng)插入到模板中。如下面的配置,
生成的js文件會(huì)被自動(dòng)插入到名為index.html的頁面中。

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


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

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)請(qǐng)求接口改為靜態(tài)數(shù)據(jù),不請(qǐng)求接口。修改文件\src\store\modules\user.js 修改Login、GetInfo、LogOut、FedLogOut四個(gè)方法,具體修改如下。
登入方法改造
// 登入
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文件:

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


以上就是分布式醫(yī)療掛號(hào)系統(tǒng)之搭建后臺(tái)管理系統(tǒng)頁面的詳細(xì)內(nèi)容,更多關(guān)于分布式醫(yī)療掛號(hào)系統(tǒng)后臺(tái)管理頁面搭建的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue使用高德地圖實(shí)現(xiàn)實(shí)時(shí)定位天氣預(yù)報(bào)功能
這篇文章主要介紹了vue使用高德地圖實(shí)現(xiàn)實(shí)時(shí)天氣預(yù)報(bào)功能,根據(jù)定位功能,使用高德地圖實(shí)現(xiàn)定位當(dāng)前城市的天氣預(yù)報(bào)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue封裝localStorage設(shè)置過期時(shí)間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時(shí)間的相關(guān)資料,在這個(gè)示例中,我們?cè)贛yComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時(shí)間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
Vue實(shí)現(xiàn)push數(shù)組并刪除的例子
今天小編就為大家分享一篇Vue實(shí)現(xiàn)push數(shù)組并刪除的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3.0 CLI - 2.6 - 組件的復(fù)用入門教程
這篇文章主要介紹了 vue3.0 CLI - 2.6 - 組件的復(fù)用,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09

