VUE搭建分布式医疗挂号系统后台管理页面示例步骤

 更新时间:2022年04月24日 16:42:19   作者:Hudie.  
这篇文章主要为大家介绍了分布式医疗挂号系统之搭建后台管理系统页面,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

项目已同步至gitHub:

https://github.com/Guoqianliang/yygh_admin

vue-admin-template

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

这套前端页面主要使用了Vue.jselement-ui技术。

vue-element-admin

一、搭建前端环境

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

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

引入项目到项目工作区

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

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

npm install下载依赖

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

使用npm run dev 命令启动前端项目,

npm run dev启动项目

项目启动后,默认访问本地9528端口:

http://localhost:9528

二、前端环境目录结构

前端项目启动时,使用npm run dev命令后,经过一系列的调用,最终会去调用main.js入口:

npm run dev命令最终调用了magin.js

(1)总体目录概览

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

HtmlWebpackPlugin配置html模板,生成的js就会自动插入到模板中。如下面的配置,
生成的js文件会被自动插入到名为index.html的页面中。

webpack.dev.conf.js

index.html

此文件为项目默认的html页面。

index.html

localhost:9528/#/login

src/main.js

项目js入口文件,项目的所有前端功能都在这个文件中引入和定义,并初始化全局的Vue对象。

src/main.js

config/dev.env.js

定义全局常量值。

config/dev.env.js

config/dev.env.js


因此,在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址。

src/utils/request.js

引入axios模块,定义全局的axios实例,并导出模块。

src/utils/request.js

src/api/login.js

引用request模块,调用远程api。

src/api/login.js

三、登录改造

下面将登陆相关请求接口改为静态数据,不请求接口。修改文件\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是否是一个非空数组
        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

四、测试

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

npm run dev

可以成功登入/退出项目

以上就是分布式医疗挂号系统之搭建后台管理系统页面的详细内容,更多关于分布式医疗挂号系统后台管理页面搭建的资料请关注脚本之家其它相关文章!

相关文章

  • Vue使用轮询定时发送请求代码

    Vue使用轮询定时发送请求代码

    这篇文章主要介绍了Vue使用轮询定时发送请求代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中使用el-dropdown方式

    vue中使用el-dropdown方式

    这篇文章主要介绍了vue中使用el-dropdown方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue的状态管理vuex使用方法详解

    Vue的状态管理vuex使用方法详解

    由于Vue多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue提供了vuex。本文将详细介绍Vue状态管理vuex,需要的朋友可以参考下
    2020-02-02
  • Vue3手动清理keep-alive组件缓存的方法详解

    Vue3手动清理keep-alive组件缓存的方法详解

    这篇文章主要为大家详细介绍了Vue3中手动清理keep-alive组件缓存的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 如何使用yarn创建vite项目+vue3

    如何使用yarn创建vite项目+vue3

    这篇文章主要介绍了如何使用yarn创建vite项目+vue3,详细介绍了使用vite创建vue3过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Electron自动更新失效报错Error: Object has been destroyed的问题解决

    Electron自动更新失效报错Error: Object has been destroyed的问题解决

    本文主要讲解如何解决 Error: Object has been destroyed 这个 Electron 中最常见的问题,以及 Electron 自动更新的流程,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2024-01-01
  • Vue.JS入门教程之列表渲染

    Vue.JS入门教程之列表渲染

    这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • VUE简单的定时器实时刷新的实现方法

    VUE简单的定时器实时刷新的实现方法

    这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 一文详解VueUse中useAsyncState的实现原理

    一文详解VueUse中useAsyncState的实现原理

    在Vue 3 Composition API中,我们可以使用自定义钩子函数来封装可复用的逻辑,useAsyncState是一个用于管理异步状态的自定义钩子函数,本文将给大家介绍一下useAsyncState的实现原理,感兴趣的朋友可以参考下
    2024-01-01
  • Vxe-Table开发中的各种坑以及避坑指南

    Vxe-Table开发中的各种坑以及避坑指南

    vxe-table是一个全功能的Vue表格,满足绝大部分对Table的一切需求,与任意组件库完美兼容,下面这篇文章主要给大家介绍了关于Vxe-Table开发中各种坑以及避坑的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论