2.java项目-尚医通（2）

前端代码参考：https://github.com/wyj41/yygh_html

前端开发

在idea中新建一个html项目

1.ECMAScript 6

ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准， 2015 年 6 月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1.2 ECMAScript 和 JavaScript 的关系

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）

1.3 基础语法

ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性。本部分只学习项目开发中涉及到ES6的最少必要知识，方便项目开发中对代码的理解。

1.3.1 let声明变量

// var 声明的变量没有局部作用域
// let 声明的变量  有局部作用域
{
    
    
    var a = 1;
    let b = 2;
}
console.log(a)
console.log(b)  //b is not defined

// var 可以声明多次
// let 只能声明一次
var m = 1;
var m = 2;
let n = 10;
let n = 20;  //'n' has already been declared
console.log(m)
console.log(n)

1.3.2 const声明常量（只读变量）

// 1、声明之后不允许改变    
const PI = "3.1415926"
PI = 3     // TypeError: Assignment to constant variable.

// 2、一但声明必须初始化，否则会报错
const MY_AGE  // Missing initializer in const declaration

1.3.3 解构赋值

//1、数组解构
let a = 1,b = 2,c = 3
console.log(a,b,c)
//ES6
let [x,y,z] = [1,2,3]
console.log(x,y,z)

//2、对象解构
let user = {
    
    name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let {
    
     name, age } =  user  //注意：结构的变量必须是user中的属性
console.log(name, age)

1.3.4 模板字符串

模板字符串相当于加强版的字符串，用反引号 `，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

//字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "lucy"
let age = 20
let info = `My name is ${
      
      name} ,
I am ${
      
      age+1}`
console.log(info)

1.3.5 声明对象简写

//传统方式定义对象
const name = "lucy"
const age = 20
const user1 = {
    
    name:name,age:age}
console.log(user1)

//es6
const user2 = {
    
    name,age}
console.log(user2)

1.3.6 对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let person1 = {
    
    name:"Amy",age:15}
let someone1 = {
    
     ...person1}
console.log(someone1)

let age = {
    
    age:15}
let name = {
    
    name:"Amy"}
let person2 = {
    
    ...age,...name}
console.log(person2)

1.3.7 箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
参数 => 函数体
箭头函数多用于匿名函数的定义

//传统方式定义函数
var f1 = function(a){
    
    
    return a
}
console.log(f1(3))

//es6 使用箭头函数进行定义
//参数 => 函数体
var f2 = a => a
console.log(f2(4))

var f3 = function (m,n){
    
    
    return m + n
}

//es6
var f4 = (m,n) => m + n
console.log(f4(4,5))

2.vue入门（重要）

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

2.1 初识Vue.js

导入vue.min.js文件（链接：https://pan.baidu.com/s/1dhXtZSt_JoK04qbAW_IkfQ 提取码：jsxz）

创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <script src="../js/vue.min.js"></script>
      <div id="app">
          <!--插值表达式-->
          {
   
   {message}}
      </div>
      <script>
            new Vue({
      
      
                  el:'#app',
                  data:{
      
      
                    message:'hello vue'
                  }
            })
      </script>
</body>
</html>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

2.2 基本语法

2.2.1 基本数据渲染和指令

v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{ {}}进行数据渲染，也可以使用 v-bind指令，它的简写冒号（:）

<script src="../js/vue.min.js"></script>
<div id="app">
    <div v-bind:style="msg">单向绑定</div>
    <!--简写-->
    <div :style="msg">单向绑定</div>
</div>
<script>
    new Vue({
      
      
        el:'#app',
        data:{
      
      
            msg:'color:red'
        }
    })
</script>

2.2.2 双向绑定

<script src="../js/vue.min.js"></script>
<div id="app">
    {
   
   {keyword}}
    <br>
    <input type="text" :value="keyword">
    <br>
    <input type="text" v-model="keyword">
</div>
<script>
    new Vue({
      
      
        el:'#app',
        data:{
      
      
            keyword:'双向绑定'
        }
    })
</script>

什么是双向数据绑定？

当数据发生变化的时候，视图也会跟着发生变化
数据模型发生了改变，会直接显示在页面上
当视图发生变化的时候，数据也会跟着同步变化
用户在页面上的修改，会自动同步到数据模型中去

2.2.3 事件

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<script src="../js/vue.min.js"></script>
<div id="app">
    <button v-on:click="show()">事件绑定1</button>
    <!--简写-->
    <button @click="show()">事件绑定2</button>
</div>
<script>
    new Vue({
      
      
        el:'#app',
        methods:{
      
      
            show(){
      
      
                console.log("show ...")
            }
        }
    })
</script>

2.2.4 条件渲染

<script src="../js/vue.min.js"></script>
<div id="app">
    <input type="checkbox" v-model="ok">
    <br>
    <div v-if="ok">选中了</div>
    <div v-else>没选中</div>
</div>
<script>
    new Vue({
      
      
        el:'#app',
        data:{
      
      
            ok:false
        }
    })
</script>

2.2.5 列表渲染

<script src="../js/vue.min.js"></script>
<div id="app">
    <div v-for="user in userList">
        {
   
   {user.name}} -- {
   
   {user.age}}
    </div>

    <div v-for="(user,index) in userList">
        {
   
   {index}} -- {
   
   {user.name}} -- {
   
   {user.age}}
    </div>
</div>
<script>
    new Vue({
      
      
        el:'#app',
        data:{
      
      
            userList:[
                {
      
      "name":"lucy","age":20},
                {
      
      "name":"mary","age":30}
            ]
        }
    })
</script>

2.2.6 生命周期

<script src="../js/vue.min.js"></script>
<div id="app">
    {
   
   {msg}}
</div>
<script>
    new Vue({
      
      
        el:'#app',
        data:{
      
      
            msg:"hello"
        },
        created(){
      
      //在页面渲染之前执行
            debugger
            console.log("created...")
        },
        mounted(){
      
      //在页面渲染之后执行
            debugger
            console.log("mounted...")
        }
    })
</script>

3.axios（重要）

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

axios实例
导入axios.mini.js文件（链接：https://pan.baidu.com/s/1XmDH3KnKFDT61sAYJHBCgA 提取码：kqdm）

准备测试数据user.json

{
    
    
  "code": 200,
  "message": "成功",
  "data": {
    
    
    "items": [
      {
    
    "name": "lucy","age": 20},
      {
    
    "name": "mary","age": 30},
      {
    
    "name": "jack","age": 40}
    ]
  }
}

创建 axios.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{
   
   {user.name}}</td>
                <td>{
   
   {user.age}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
      
      
            el:'#app',
            data:{
      
      
                userList:[]
            },
            created(){
      
      //在页面渲染之前执行
                //调用方法，得到返回json数据
                this.getList()
            },
            methods:{
      
      
                getList(){
      
      
                    //使用axios发送ajax请求
                    axios.get("user.json")
                        .then(response => {
      
      //请求成功
                            // console.log(response)
                            this.userList = response.data.data.items
                            // console.log(this.userList)
                        })
                        .catch(error =>{
      
      //请求失败
                            console.log(error)
                        })
                }
            }
        })
    </script>
</body>
</html>

4.element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建
官网： http://element-cn.eleme.io/#/zh-CN

具体ui组件我们在项目中学习

5.Node.js

5.1 JavaScript引擎

浏览器的内核包括两部分核心：
DOM渲染引擎
JavaScript解析引擎
Chrome浏览器内置V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

5.2 什么是node.jS

脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。
Node.js是一个基于Chrome V8引擎的JavaScript运行环境：即Node.js内置了Chrome的V8 引擎，可以在Node.js环境中直接运行JavaScript程序。
在Node.js中写JavaScript和在Chrome浏览器中写JavaScript基本没有什么不一样。哪里不一样呢？
Node.js没有浏览器API，即document，window的等。
加了许多Node.js 专属API，例如文件系统，进程，http功能。

5.3 Node.js有什么用

如果你想开发类似JavaWeb的简单的后端程序，那么学习Node.js是一个非常好的选择。
如果你想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。
通常他会被用来作一个BFF层，即 Backend For Frontend（服务于前端的后端），通俗的说是一个专门用于为前端业务提供数据的后端程序

5.4 BFF

一个前端页面向 Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据，这个服务层叫做BFF。

BFF层的作用是让前端有能力自由组装后台数据，减少大量的业务沟通成本，加快业务的迭代速度。

无论是数据聚合还是数据剪裁，这类程序的特点是不需要太强大的服务器运算能力，但是对程序的灵活性有较高的要求，这两个特点都正好和Node.js的优势相吻合。

5.5 Node.js安装

官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
LTS：长期支持版本
Current：最新版

node-v10.14.2-x64.msi（链接：https://pan.baidu.com/s/1R0ahVHEN5XjkqZBNB2_JTQ 提取码：9e8o）

在cmd中输入node -v查看版本

5.6 控制台查询

创建 01-控制台程序.js

console.log('Hello Node.js')

在终端进入所在目录，输入指令"node 01-控制台程序.js"

D:\java_works\yygh_html\nodejs>node 01-控制台程序.js
Hello Node.js

5.7 服务器端应用开发（了解）

创建 02-server-app.js

//引入http模块
const http = require('http');
//创建服务器
http.createServer(function (request, response) {
    
    
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
    response.writeHead(200, {
    
    'Content-Type': 'text/html'});
// 发送响应数据 "Hello World"
    response.end('<h1>Hello Node.js Server</h1>');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

运行服务器

node 02-server-app.js

服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面
停止服务：ctrl + c

6.npm包管理器

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

安装node.js时自动安装了npm

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

6.1 使用npm管理项目

创建npmdemo目录

6.1.1 项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

6.1.2 修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

6.1.3 npm install命令的使用

基本命令

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

下载特定版本的依赖

#如果安装时想指定特定的版本
npm install [email protected]

下载开发依赖

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint

下载全局依赖

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm install #根据package.json中的配置下载依赖，初始化项目

6.1.4 其他命令

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

7.模块化

背景
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

模块化规范
CommonJS模块化规范（基于ES6语法之前）
ES6模块化规范（使用ES6语法）

7.1 ES6模块化规范

创建 module_demo.src包

导出模块
创建01.js文件

export default{
    
    
    list(){
    
    
        console.log("list...")
    },
    save(){
    
    
        console.log("save...")
    }
}

导入模块
创建02.js

import user from './01.js' //引入
//调用
user.list()
user.save()

ES6使用 export 和 import 来导出、导入模块。

运行程序

node 02.js

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

8.使用Babel转码

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

8.1 安装和使用

在module_demo包下初始化npm

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli
#查看是否安装成功
babel --version

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

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

安装转码器

npm install -D babel-preset-es2015

转码

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src -d dist

运行程序

node .\dist\02.js

8.2 更多的方式

ES6模块化规范还有一些其他的语法格式，常见的另一种写法如下：
src/01.js：

export function getList(){
    
    
    console.log("list...")
}

export function save() {
    
    
    console.log("save...")
}

src/02.js：

import {
    
    getList,save} from "./01";
getList()
save()

9.Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

9.1 Webpack安装

新建目录webpack_demo

#初始化npm
npm init -y

#安装webpack
npm install -g webpack webpack-cli

#查看版本号
webpack -v

9.2 Webpack使用

创建src包
在src下创建common.js
这里使用的是CommonJS模块化方式，这种方式不支持ES6的语法，所以不需要Babel转码

exports.info=function (str) {
    
    
    document.write(str)
}

src下创建utils.js

exports.add=function (a, b) {
    
    
    return a+b
}

src下创建main.js

const common=require('./common')
const utils=require('./utils')
common.info('Hello world!' + utils.add(100, 200))

9.3 JS打包

创建配置文件
webpack_demo包下创建配置文件webpack.config.js
以下配置的意思是：
读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包
打包后的文件放入当前目录的dist文件夹下
打包后的js文件名为bundle.js

const path=require("path") //Node.js内置模块
module.exports= {
    
    
    entry: './src/main.js', //配置入口文件
    output: {
    
    
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js'//输出文件
    }
}

执行编译命令

webpack --mode=development
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    
    
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
 }

运行npm命令执行打包

npm run dev #开发打包
或
npm run prod #生产打包

创建入口页面
index.html，引用bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

浏览器中查看index.html

9.4 CSS打包

安装插件
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install -D style-loader css-loader

修改webpack.config.js

const path=require("path") //Node.js内置模块
module.exports= {
    
    
    entry: './src/main.js', //配置入口文件
    output: {
    
    
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js'//输出文件
    },
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

在src文件夹创建style.css

body{
    
    
    background:pink;
}

**修改main.js **
在第一行引入style.css

require('./style.css')

运行编译命令

webpack --mode=development

浏览器中查看index.html

10.vue-admin-template

vue-element-admin是基于element-ui 的一套后台管理系统集成方案。
GitHub地址：https://github.com/PanJiaChen/vue-element-admin
项目在线预览：https://panjiachen.gitee.io/vue-element-admin

vue-Admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
GitHub地址：https://github.com/PanJiaChen/vue-admin-template
建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

将压缩包解压后拷贝到项目中

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

vue-admin-template-test(已经完成依赖安装以及解决了登录时的network error问题，可直接运行)
(链接：https://pan.baidu.com/s/1CbrTuDwTl04AIWADbdtHmA 提取码：qne9)

项目的目录结构
├── build // 构建脚本
├── config // 全局配置
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置

src
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件，非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具，非公共工具，在各自view下维护
├── views // 各种layout
├── App.vue //项目顶层组件
├── main.js //项目入口文件
└── permission.js //认证入口

11.管理平台前端搭建

在idea中安装vue.js插件
请添加图片描述

#添加几条数据
INSERT INTO `hospital_set` (`hosname`,`hoscode`,`api_url`,`sign_key`,`contacts_name`,`contacts_phone`) 
VALUES
('国际医院','1000_02','http://localhost:9997','nsfoahfioajsaffja','小明','12345678770'),
('妇产医院','1000_03','http://localhost:9996','nsfoahfioajsafnuais','小华','12345214210');

分页功能修改
删除model模块中的com.myproject.yygh.hosp.config.HospConfig
在service_hosp模块中创建com.myproject.yygh.hosp.config.HospConfig并添加分页插件

package com.myproject.yygh.hosp.config;

import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
@MapperScan("com.myproject.yygh.hosp.mapper")
public class HospConfig {
    
    
    //分页插件
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
    
    
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
    }
}

项目开发流程
创建路由（src.router） ==> 创建API（src.api） > 创建页面组件（src.views）> 页面模块和页面脚本

11.1 定义路由模块

src/router/index.js
配置医院设置管理相关路由(在原example上修改)

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

11.2 定义api模块

创建文件 src/api/hospset.js

import request from '@/utils/request'

export default {
    
    
  getHospSetList(current,limit,searchObj){
    
    
    return request({
    
    
      url:`/admin/hosp/hospitalSet/findPage/${
      
      current}/${
      
      limit}`,
      method:'post',
      data:searchObj //使用json
    })
  }
}

11.3 定义页面组件脚本

src/views/hospset/list.vue

<script>
// 引入接口定义的js文件
import hospset from "@/api/hospset";
export default {
  // 定义变量和初始值
  data(){
    return {
      current:1, //当前页
      limit:3, //每页显示记录数
      searchObj:{}, //条件封装对象
      list:[] //每页数据集合
    }
  },
  created(){//在页面渲染之前运行
    //一般调用methods定义的方法，得到数据
    this.getList()
  },
  methods:{//定义方法，进行请求接口调用
    //医院设置列表
    getList(){
      hospset.getHospSetList(this.current,this.limit,this.searchObj)
        .then(response => {//请求成功 response是接口返回数据
          console.log(response)
        })
        .catch(error => {//请求失败
          console.log(error)
        })
    }
  }
}
</script>

11.4 定义页面组件模板

src/views/hospset/add.vue

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

src/views/hospset/list.vue

<template>
  <div class="app-container">
    医院设置列表
    <!-- banner列表 -->
    <el-table
      :data="list"
      stripe
      style="width: 100%">

      <el-table-column type="index" width="50" label="序号"/>
      <el-table-column prop="hosname" label="医院名称"/>
      <el-table-column prop="hoscode" label="医院编号"/>
      <el-table-column prop="apiUrl" label="api基础路径" width="200"/>
      <el-table-column prop="contactsName" label="联系人姓名"/>
      <el-table-column prop="contactsPhone" label="联系人手机"/>

      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {
   
   { scope.row.status === 1 ? '可用' : '不可用' }}
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

11.5 测试数据通信

修改config.dev.env.js文件
将BASE_API改为自己项目的地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
    
    
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8201"',
})

修改src.utils.request.js文件
将34行的res.code !== 20000
改为res.code !== 200

启动项目
命令行执行：npm run dev

打开浏览器调试状态，出现跨域问题

Spring早就给我们提供了解决方案，我们只需要在对应controller上添加一个标签就可以了（@CrossOrigin //跨域）。
我们在HospitalSetController类上添加跨域标签@CrossOrigin，再进行测试，则测试成功！

11.6 分页查询

修改页面组件脚本
修改src/views/hospset/list.vue中的getList方法

getList(current=1){
    
    //添加当前页参数

定义页面组件模板
修改src/views/hospset/list.vue的页面组件
在table组件下面添加分页组件

<!-- 分页 -->
<el-pagination
  :current-page="current"
  :page-size="limit"
  :total="total"
  style="padding: 30px 0; text-align: center;"
  layout="total, prev, pager, next, jumper"
  @current-change="getList"/>

表单查询
在table组件上面添加表单查询

<el-form :inline="true" class="demo-form-inline">
  <el-form-item>
    <el-input  v-model="searchObj.hosname" placeholder="医院名称"/>
  </el-form-item>
  <el-form-item>
    <el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
  </el-form-item>
  <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
</el-form>

11.7 删除功能

添加删除按钮
在table最后添加删除

<!-- banner列表 -->
<el-table
  :data="list"
  stripe
  style="width: 100%">

  <el-table-column type="index" width="50" label="序号"/>
  <el-table-column prop="hosname" label="医院名称"/>
  <el-table-column prop="hoscode" label="医院编号"/>
  <el-table-column prop="apiUrl" label="api基础路径" width="200"/>
  <el-table-column prop="contactsName" label="联系人姓名"/>
  <el-table-column prop="contactsPhone" label="联系人手机"/>

  <el-table-column label="状态" width="80">
    <template slot-scope="scope">
      {
   
   { scope.row.status === 1 ? '可用' : '不可用' }}
    </template>
  </el-table-column>

  <el-table-column label="操作" width="280" align="center">
    <template slot-scope="scope">
      <el-button type="danger" size="mini"
                 icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

编写调用删除的方法，得到删除id值

//删除医院设置的方法
removeDataById(id){
    
    
  alert(id)
}

在api文件夹中的hospset.js定义操作的接口路径

//删除医院设置
deleteHospSet(id){
    
    
    return request({
    
    
        url:`/admin/hosp/hospitalSet/${
      
      id}`,
        method:'delete'
    })
}

调用定义的接口实现功能

//删除医院设置的方法
removeDataById(id){
    
    
  this.$confirm('此操作将永久删除医院设置信息, 是否继续?', '提示', {
    
    
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    
     //确定执行then方法
    //调用接口
    hospset.deleteHospSet(id)
      .then(response => {
    
    
        //提示
        this.$message({
    
    
          type: 'success',
          message: '删除成功!'
        })
        //刷新页面
        this.getList(1)
      })
  })
}

11.8 批量删除

定义api

//批量删除
batchDeleteHospSet(idList){
    
    
    return request({
    
    
      url:`/admin/hosp/hospitalSet/batchRemove`,
      method:'delete',
      data:idList
    })
}

在table组件上添加批量删除

<!-- 工具条 -->
<div>
  <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
</div>

在table组件上添加复选框（同时添加事件绑定）

<el-table
      :data="list"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      
  <el-table-column type="selection" width="55"/>

Data定义数据

multipleSelection:[] //批量选择中选择的记录列表

定义方法

//获取选择复选框的id值
handleSelectionChange(selection){
    
    
  this.multipleSelection = selection
},
//批量删除
removeRows(){
    
    
  this.$confirm('此操作将永久删除医院设置信息, 是否继续?', '提示', {
    
    
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    
     //确定执行then方法
    var idList = []
    //遍历数组得到每个id值，设置到idList里面
    this.multipleSelection.forEach(element => {
    
    
      idList.push(element.id)
    })
    //调用接口
    hospset.batchDeleteHospSet(idList)
      .then(response => {
    
    
        //提示
        this.$message({
    
    
          type: 'success',
          message: '删除成功!'
        })
        //刷新页面
        this.getList(1)
      })
  })
},

11.9 锁定和取消锁定

添加api

//锁定和取消锁定
lockHospSet(id,status){
    
    
    return request({
    
    
      url:`/admin/hosp/hospitalSet/localHospitalSet/${
      
      id}/${
      
      status}`,
      method:'put'
    })
}

在table组件上添加按钮

<el-table-column label="操作" width="280" align="center">
    <template slot-scope="scope">
      <el-button type="danger" size="mini"
                 icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
      <el-button v-if="scope.row.status==1" type="primary" size="mini"
                 icon="el-icon-delete" @click="lockHostSet(scope.row.id,0)">锁定</el-button>
      <el-button v-else type="danger" size="mini"
                 icon="el-icon-delete" @click="lockHostSet(scope.row.id,1)">取消锁定</el-button>
    </template>
 </el-table-column>

添加方法

//锁定和取消锁定
lockHostSet(id,status){
    
    
  hospset.lockHospSet(id,status)
    .then(response => {
    
    
      //刷新
      this.getList(this.current)
    })
}

11.10 添加医院设置

添加api

//添加医院设置
saveHospSet(hospitalSet){
    
    
    return request({
    
    
      url:`/admin/hosp/hospitalSet/saveHospitalSet`,
      method:'post',
      data:hospitalSet
    })
}

在src/views/hospset/add.vue中添加页面组件脚本和模板

<template>
  <div class="app-container">
    医院设置添加
    <el-form label-width="120px">
      <el-form-item label="医院名称">
        <el-input v-model="hospitalSet.hosname"/>
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input v-model="hospitalSet.hoscode"/>
      </el-form-item>
      <el-form-item label="api基础路径">
        <el-input v-model="hospitalSet.apiUrl"/>
      </el-form-item>
      <el-form-item label="联系人姓名">
        <el-input v-model="hospitalSet.contactsName"/>
      </el-form-item>
      <el-form-item label="联系人手机">
        <el-input v-model="hospitalSet.contactsPhone"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import hospset from "@/api/hospset"

export default {
  data(){
    return {
      hospitalSet:{}
    }
  },
  created() {

  },
  methods:{
    //添加
    saveOrUpdate(){
      hospset.saveHospSet(this.hospitalSet)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          //跳转列表页面，使用路由跳转方式实现
          this.$router.push({path:'/hospset/list'})
        })
    }
  }
}
</script>

11.11 修改医院设置

添加编辑医院设置的隐藏路由

{
    
    
    path: '/hospset',
    component: Layout,
    redirect: '/hospset/list',
    name: '医院设置管理',
    meta: {
    
     title: '医院设置管理', icon: 'el-icon-s-help' },
    children: [
      {
    
    
        path: 'list',
        name: '医院设置列表',
        component: () => import('@/views/hospset/list'),
        meta: {
    
     title: '医院设置列表', icon: 'table' }
      },
      {
    
    
        path: 'add',
        name: '医院设置添加',
        component: () => import('@/views/hospset/add'),
        meta: {
    
     title: '医院设置添加', icon: 'tree' }
      },
      {
    
    
        path: 'edit/:id',
        name: '编辑医院设置',
        component: () => import('@/views/hospset/add'),
        meta: {
    
     title: '编辑', noicon: true },
        hidden:true
      }
    ]
},

添加根据id查询和修改医院设置的api

//医院设置id查询
getHospSet(id){
    
    
    return request({
    
    
      url:`/admin/hosp/hospitalSet/getHospSet/${
      
      id}`,
      method:'get'
    })
},
//修改医院设置
updateHospSet(hospitalSet){
    
    
    return request({
    
    
      url:`/admin/hosp/hospitalSet/updateHospitalSet`,
      method:'post',
      data:hospitalSet
    })
}

在list.vue中添加路由跳转功能按钮(“编辑”)

<el-table-column label="操作" width="280" align="center">
    <template slot-scope="scope">
      <el-button type="danger" size="mini"
                 icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
      <el-button v-if="scope.row.status==1" type="primary" size="mini"
                 icon="el-icon-delete" @click="lockHostSet(scope.row.id,0)">锁定</el-button>
      <el-button v-else type="danger" size="mini"
                 icon="el-icon-delete" @click="lockHostSet(scope.row.id,1)">取消锁定</el-button>
    
      <router-link :to="'/hospset/edit/'+scope.row.id">
        <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
      </router-link>
    </template>
</el-table-column>

添加和修改add.vue的页面组件脚本

<script>
import hospset from "@/api/hospset"

export default {
  data(){
    return {
      hospitalSet:{}
    }
  },
  created() {//页面渲染之前执行
    //获取路由id值
    //调用接口得到医院设置信息
    if(this.$route.params && this.$route.params.id){
      const id = this.$route.params.id
      this.getHospSet(id)
    }
  },
  methods:{
    //根据id查询
    getHospSet(id){
      hospset.getHospSet(id)
        .then(response =>{
          this.hospitalSet = response.data
        })
    },
    update(){
      hospset.updateHospSet(this.hospitalSet)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          //清空表单数据
          this.hospitalSet = {}
          //跳转列表页面，使用路由跳转方式实现
          this.$router.push({path:'/hospset/list'})
        })
    },
    save(){
      hospset.saveHospSet(this.hospitalSet)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          //跳转列表页面，使用路由跳转方式实现
          this.$router.push({path:'/hospset/list'})
        })
    },
    //添加
    saveOrUpdate(){
      //判断添加还是修改
      if(!this.hospitalSet.id){//没有id，做添加
        this.save()
      }else{//修改
        this.update()
      }
    }
  }
}
</script>