尚医通项目25-56：医院设置前端

开始时间：2022-05-12
课程链接：【尚医通】

配置VSCODE

官网下载无脑安装就行
装上插件

引入空文件夹来创建工作区

ES6

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）

基本语法就不写了，用到了看不懂现查
因为学了也会忘。。

Vue

Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

axios

axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求

element-ui

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

node.js

通常他会被用来作一个BFF层，即 Backend For Frontend（服务于前端的后端），通俗的说是一个专门用于为前端业务提供数据的后端程序

这个得先安装了

NPM包管理器

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

测试一下
我们刚刚下载了node.js，这个也就随之安装了

打开后就在VSCODE的命令行中键入命令

建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
如果想直接生成 package.json 文件，那么可以使用命令

npm init -y

设置镜像地址：
经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载

npm config set registry https://registry.npm.taobao.org 

查看npm配置信息

npm config list

查看npm配置信息

npm config list

使用 npm install 安装依赖包的最新版，
模块安装的位置：项目目录\node_modules
同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的
默认参数：–save 简写 -S 将当前依赖保存在dependencies节点下

npm install jquery

根据依赖下载安装包

npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本

npm install #根据package.json中的配置下载依赖，初始化项目

模块化开发

ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
所以我们还要先给他转码

安装

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：
npm install -g babel-cli
#查看是否安装成功

babel --version

配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则

{
   
"presets": ["es2015"],
"plugins": []
}

安装转码器

在modularization目录中安装

npm install -D babel-preset-es2015

转码

整个目录转码
–out-dir 或 -d 参数指定输出目录

babel src -d dist

Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

安装vue-admin-template

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
GitHub地址：https://github.com/PanJiaChen/vue-admin-template

2.2安装

如果install报错

则先执行下面的命令，再install

npm i -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

解压压缩包
进入目录
vue-admin-template-master
安装依赖
npm install
启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

记得输入终端命令是在master下而不是test下
打开应该是这个样子

将登陆相关请求接口改为静态数据，不请求接口
修改文件：\src\store\modules\user.js
注释掉：Login、GetInfo、LogOut三个方法，替换为如下代码：

Login({
    commit }) {
   
const data = {
   
'token': 'admin'
}
setToken(data.token)// 将token存储在cookie中
commit('SET_TOKEN', data.token)
},

GetInfo({
    commit }) {
   
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)
  }
  commit('SET_NAME', data.name)
  commit('SET_AVATAR', data.avatar)
},

// 登出
LogOut({
    commit, state }) {
   
return new Promise((resolve, reject) => {
   
    commit('SET_TOKEN', '')
    commit('SET_ROLES', [])
    removeToken()
    resolve()
  })
}

说明：token是我们手动配置的，如果过期后续自行生成，后续会有TokenHelper类生成token，在此不用关注
修改\src\util\request.js

config.headers['token'] = getToken()

项目开发流程

项目效果预览

列表展示

单个删除

批量删除

锁定和取消锁定

添加医院设置

修改医院设置

定义路由模块

如下修改

{
   
    path: '/hospSet',
    component: Layout,
    redirect: '/hospSet/list',
    name: '医院设置管理',
    meta: {
    title: '医院设置管理', icon: 'example' },
    children: [
      {
   
        path: 'list',
        name: '医院设置列表',
        component: () => import('@/views/table/index'),
        meta: {
    title: 'Table', icon: 'table' }
      },
      {
   
        path: 'add',
        name: '医院设置添加',
        component: () => import('@/views/tree/index'),
        meta: {
    title: '医院设置添加', icon: 'tree' }
      }
    ]
  },

创建跳转页面，设置跳转路径

在src下面的views，新建文件夹和两个文件

<template>
  <div class="app-container">
      医院设置添加
</div>