分布式医疗挂号系统(五) | 搭建后台管理系统页面

深藏阁楼爱情的钟 2022-11-17 14:32 316阅读 0赞

> 项目已同步至gitHub与gitee：
> 
>  *  [https://github.com/Guoqianliang/yygh\_admin][https_github.com_Guoqianliang_yygh_admin]
>  *  [https://gitee.com/guo-qianliang/yygh\_admin][https_gitee.com_guo-qianliang_yygh_admin]

![vue-admin-template][]

### 医疗挂号系统后台管理 | 前端环境搭建 ###

*  一、搭建前端环境
 *   *  (1)引入项目到项目工作区
     *  (2)根据package.json下载依赖
     *  (3)启动创建好的前端项目
 *  二、前端环境目录结构
 *   *  (1)总体目录概览
     *  (2)关键文件
     *   *  package.js
         *  build/webpack.dev.conf.js
         *  index.html
         *  src/main.js
         *  config/dev.env.js
         *  src/utils/request.js
         *  src/api/login.js
 *  三、登录改造
 *   *  (1)登入方法改造
     *  获取用户信息方法改造
     *  登出方法改造
     *  前端登出方法改造
 *  四、测试

--------------------

在《基于分布式的医疗挂号系统》中，后台管理的接口在之前的文章中已经写好，接下来开发后台管理的前端页面，前端页面这里选用github上开源的[vue-element-admin][]进行搭建。

*  这套前端页面主要使用了`Vue.js`和`element-ui`技术。  
    ![vue-element-admin][vue-element-admin 1]

# 一、搭建前端环境 #

## (1)引入项目到项目工作区 ##

使用vscode打开空文件夹`yygh_admin`，将文件夹另存为工作区`yygh_admin`。然后将下载好的前端模板放入工作区。完成后vscode中的目录结构如下：

![引入项目到项目工作区][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]

## (2)根据package.json下载依赖 ##

将vue-element-admin项目使用终端打开后，使用`npm install` 命令，下载js依赖。  
![npm install下载依赖][npm install]

## (3)启动创建好的前端项目 ##

使用`npm run dev` 命令启动前端项目，  
![npm run dev启动项目][npm run dev]  
项目启动后，默认访问本地9528端口：  
![http://localhost:9528][http_localhost_9528]

# 二、前端环境目录结构 #

前端项目启动时，使用`npm run dev`命令后，经过一系列的调用，最终会去调用`main.js`入口：  
![npm run dev命令最终调用了magin.js][npm run dev_magin.js]

## (1)总体目录概览 ##

![vue-element-admin-master目录结构][vue-element-admin-master]

## (2)关键文件 ##

### package.js ###

类似于后端Maven的pom.xml文件，包含项目信息，项目依赖，项目启动相关脚本。启动项目的命令： `npm run dev`

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

*  `webpack-dev-server`：一个小型的基于Node.js的http服务器，可以运行前端项目
 *  `--inline`：一种启动模式
 *  `--progress`：显示启动进度
 *  `--config build/webpack.dev.conf.js`：指定webpack配置文件所在位置  
    ![package.js][]

### build/webpack.dev.conf.js ###

webpack的配置文件，包含项目在开发环境打包和运行的相关配置。

*  引用了 `webpack.base.conf.js`  
    ![webpack.dev.conf.js][]
 *  定义了项目打包的入口文件`main.js`，和打包后的文件，默认是app.js。![webpack.dev.conf.js][webpack.dev.conf.js 1]
 *  在`HtmlWebpackPlugin`配置html模板，生成的js就会自动插入到模板中。如下面的配置，  
    生成的js文件会被自动插入到名为index.html的页面中。  
    ![webpack.dev.conf.js][webpack.dev.conf.js 2]

### index.html ###

此文件为项目默认的html页面。  
![index.html][]  
![localhost:9528/\#/login][localhost_9528_login]

### src/main.js ###

项目js入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的Vue对象。  
![src/main.js][src_main.js]

### config/dev.env.js ###

定义全局常量值。  
![config/dev.env.js][config_dev.env.js]  
![config/dev.env.js][config_dev.env.js 1]  
因此，在项目中的任意位置可以直接使用 `process.env.BASE_API` 常量表示后端接口的主机地址。

### src/utils/request.js ###

引入axios模块，定义全局的axios实例，并导出模块。  
![src/utils/request.js][src_utils_request.js]

### src/api/login.js ###

引用request模块，调用远程api。  
![src/api/login.js][src_api_login.js]

# 三、登录改造 #

下面将登陆相关请求接口改为静态数据，不请求接口。修改文件`\src\store\modules\user.js` 修改Login、GetInfo、LogOut、FedLogOut四个方法，具体修改如下。

## (1)登入方法改造 ##

// 登入
        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是否是一个非空数组
            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是否是一个非空数组
          // 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][src_util_request.js]

# 四、测试 #

可以将index.js文件中的`useEslint`属性改为false，关闭检测机制，然后重启前端项目，

![npm run dev][npm run dev 1]  
![可以成功登入/退出项目][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]

[https_github.com_Guoqianliang_yygh_admin]: https://github.com/Guoqianliang/yygh_admin
[https_gitee.com_guo-qianliang_yygh_admin]: https://gitee.com/guo-qianliang/yygh_admin
[vue-admin-template]: /images/20221022/ee4d1705a43845cb97eff6e0ab08392c.png
[vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[vue-element-admin 1]: /images/20221022/e757e619041f49199f41edb525386489.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]: /images/20221022/46346084f33f42039511add7a066473d.png
[npm install]: /images/20221022/5c8fecbeb281431c98d3a92ef4b1081e.png
[npm run dev]: /images/20221022/69d16c8df6884256be082b6c8a17d64b.png
[http_localhost_9528]: /images/20221022/f1cf742b60c54d1fa58dd51cb7c71030.png
[npm run dev_magin.js]: /images/20221022/822c4a78e9564de5ac4c194889b9999d.png
[vue-element-admin-master]: /images/20221022/360b79747411493493c8e4b53d1934a7.png
[package.js]: /images/20221022/882188474e22454bb1a020f73c82b1c8.png
[webpack.dev.conf.js]: /images/20221022/3cf23f1971604198ab8f7f07145b11f5.png
[webpack.dev.conf.js 1]: /images/20221022/17f0af9e657c42f6b10f576cb4184b93.png
[webpack.dev.conf.js 2]: /images/20221022/65af2c1e7b8e476a8bd389ff1cd883c5.png
[index.html]: /images/20221022/77b31af532a14890bb39958b228ee4cb.png
[localhost_9528_login]: /images/20221022/0b31cd48d77d45b3bec0c631a1366983.png
[src_main.js]: /images/20221022/1c374957cd684925bcf53c02bc582e32.png
[config_dev.env.js]: /images/20221022/70c1e508841f4d3e8a608ebd74f22d2c.png
[config_dev.env.js 1]: /images/20221022/8b5d47ba12bd41c684f8cdca008729d5.png
[src_utils_request.js]: /images/20221022/3db6bdbd67a345e9a724a5acd302f5d4.png
[src_api_login.js]: /images/20221022/fe0efe293dc24c9dbee139b8794fac85.png
[src_util_request.js]: /images/20221022/0a90e6d9643a43fa9b46e815cdec1cab.png
[npm run dev 1]: /images/20221022/a5ad632a027243e4b83df7e984a7b34b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]: /images/20221022/f97a84a82eef4427894ab4e7d13e8122.png