项目已同步到gitHub和gitee :
3359 github.com/guoqian Liang/yygh _ admin https://gitee.com/Guo-Qian Liang/yygh _ admin
医疗接待系统后台管理|前端环境构建1、前端环境构建(1)将项目引入项目工作区；2 )基于package.json下载依赖)3)创建的前端项目前端环境的目录结构)1)总体目录概述)2)重要文件package.js build/web pack.dev.conf.js index.html src/main.js config//
在《基于分布式的医疗挂号系统》中，后台管理界面在以前的文章中已经写好了。 接下来开发后台管理的前端页面。 前端页面在这里选择github上的开源vue-element-admin进行构建。
此前端页面主要使用Vue.js和element-ui技术。
另一方面，构建前端环境(1)将项目引入项目工作区，使用vscode打开空文件夹yygh_admin，并将文件夹另存为工作区yygh_admin。 然后，将下载的前端模板放置在工作区中。 完成后的vscode的目录结构如下。
)2) package.json下载依赖项在终端上打开vue-element-admin项目后，使用npm install命令下载js依赖项。
)3)启动创建的前端项目使用npm run dev命令启动前端项目，
项目启动后，默认情况下访问本地9528端口。
二、前端环境目录结构前端项目启动时，使用npm run dev命令后，经过一系列调用，最终去调用main.js入口。
)1)总体目录概述
)2)密钥文件package.js类似于后端Maven的pom.xml文件，包含项目信息、项目依赖关系和项目启动相关脚本。 启动项目命令： npm run dev
dev脚本： web pack-dev-server---inline---- progress---config build/web pack.dev.conf.js
webpack-dev-server :前端项目--inline :启动模式--progress :显示启动进度- -可以运行config build/web pack.dev.cooks
build/web pack.dev.conf.js web pack的配置文件。 包含在开发环境中打包和运行项目的配置。
引用了webpack.base.conf.js
用于定义项目打包的门户文件main.js和打包后的文件缺省为app.js。 在HtmlWebpackPlugin中配置html模板时，生成的js将自动插入到模板中。 如下配置
生成的js文件将自动插入到名为index.html的页面中。
index.html此文件是项目的默认html页面。
src/main.js项目js门户文件。 项目的所有前端功能都将部署到此文件中、定义并初始化全局Vue对象。
config/dev.env.js定义全局常数值。
因此，可以使用process.env.BASE_API常量在项目中的任何位置直接表示后端接口的主机地址。
src/utils/request.js部署axios模块、定义全局axios实例和导出模块。
src/api/login.js引用请求模块并调用远程api。
三、登录改造以下，登录相关要求界面改为静态数据，不要求界面。 修改文件srcstoremodulesuser.js更改四种方法： Login、GetInfo、LogOut和FedLogOut。 具体变更如下。
(1)登录方法改造//登录login({commit}、userinfo(//constdata ) (token':'admin ) )将token存储在cookie中的set token (commit ) ) set_tooken () ) ) coookie 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() // }) }最后修改srcutilrequest.js文件：
可以将index.js文件中的useEslint属性改为false，关闭检测机制，然后重启前端项目，