医院信息化与智能化系统(7)

这里只描述对应过程，和可能遇到的问题及解决办法以及对应的参考链接，并不会直接每一步详细配置
如果你想通过文字描述或代码画流程图，可以试试PlantUML，告诉GPT你的文件结构，让他给你对应的代码

预约挂号微服务模块搭建

前端知识点补充，此章节不会详细讲具体前端的每个知识点

1、医院设置–前端列表

先在 router下的index.js文件添加医院设置路由，仿照之前的example写即可。

在这里插入图片描述

在views文件夹创建hospset文件夹，里面存放add.vue和list.vue文件，对应医院设置列表和医院设置添加的跳转，别忘记在router中的index.js上做相应的修改。

在创建的这两个文件内先添加一些内容，仿照table.vue，这里面的app-container是src/sytles下的index.scss文件中的类

<template><div class="app-container">医院设置列表</div>
</template>

接着创建一个api文件下的hospset.js定义后端接口路径(这里以后端条件查询带分页函数为例)

这里说几个点

首先current,limit指的是当前页，每页记录数，默认以url形式传递

searchObj 是查询封装实体类形参，在后端是以@RequestBody修饰，即以JSON形式传递

import request from '@/utils/request'export default {getHospSetList(current,limit,searchObj){return request({url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,method:'post',data: searchObj //使用json传递//如果你使用 params 来传递参数，查询参数会被拼接到 URL 的末尾})}
}

随后的工作是更改端口号和ip，我们本地的服务端口设置的是8201

在config/dev.env.js

BASE_API: '"http://localhost:8201"'，这里不能用https，那是加密传输，需要额外操作。

既然我们已经在hospset.js提供了接口，接着就在list.vue中进行调用

这里注释说的很清楚

<templete>...</templete>
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=>{//responce是接口返回数据console.log(response)})//请求成功调用.catch(error =>{//error是返回的错误信息console.log(error)})//请求失败调用}}
}

在进行测试之前，可以现在后端启动项目，使用swagger测试，其中发现，在使用mybatis-plus分页时，需要在HospConfig配置文件中正确注册该分页插件。

现在使用前端访问后端，首先面临的是跨域问题

跨域问题通常指的是在浏览器中，出于安全考虑，阻止一个域名的网页去请求另一个域名的资源。

访问协议不同(http)、访问地址不同、端口号不同，都将产生跨域问题。

解决方法是，在后端HospitalSetController类上添加@CrossOrigin注解，表示允许跨域访问

同时还要考虑的地方是请求状态码，在后端我们设置了一系列状态及对应状态码，在前端的utils/reque.js文件中对状态码进行了一定的设置，我们需要根据自己设置的状态码，进行对照修改。

    /*** code为非200是抛错 可结合自己业务进行修改*/if (res.code !== 200) {Message({message: res.message,type: 'error',duration: 5 * 1000}

注意：这里在试前端的代码功能时，出了一个问题。后端调用的函数报了空指针异常

原因：HospitalSetQueryVo hospitalSetQueryVo这个查询条件可能为空，所以在赋值hosname、hoscode前要先判断查询实例是否为空！！

  if(hospitalSetQueryVo!=null){String hosname = hospitalSetQueryVo.getHosname();//医院名称String hoscode = hospitalSetQueryVo.getHoscode();//医院编号if(!StringUtils.isEmpty(hosname)) {wrapper.like("hosname",hospitalSetQueryVo.getHosname());}if(!StringUtils.isEmpty(hoscode)) {wrapper.eq("hoscode",hospitalSetQueryVo.getHoscode());}}

最终实现了效果，在医院设置列表界面，右键检查,查看控制台，后续在list.vue中的方法getList，将响应的结果赋值给list和total,前者表示查询的结果，后者表示查询到的个数

在这里插入图片描述
获取到了的数据，需要在前端以表格的形式展现，之前已经引入了element-ui，可以在该网站挑选好喜欢的表格风格，可以直接复制代码，在基础代码上做修改即可

网址：https://element.eleme.cn/#/zh-CN/component/table

前端展示页代码

<el-table>是 Element UI（一个基于 Vue.js 的组件库）提供的表格组件，用于展示数据。

stripe：这个属性是 el-table 的一个布尔属性，用来控制表格是否具有斑马条纹效果。如果你设置了这个属性，表格的每一行将交替显示不同的背景颜色

<el-table-column type="index" width="50" label="序号"/>Element UI 会自动生成行号，并按顺序排列,表头名字叫序号

<el-table-column prop="hosname" label="医院名称"/>prop 属性绑定表格中每行的数据属性，也就是说，它会从 list 数据中找出每一行的 hosname 字段并展示。

判断代码:状态列存储的数据是0和1，===表示值和类型都相等判断

<template><div class="app-container"><!-- banner列表 --><el-table:data="list"stripestyle="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>

现在在前端界面可以看到表格数据了，但是只有单页，想要添加多页，可以继续使用Element-ui中的分页组件

在此之前，我们先在getList()方法上做一些修改，给它添加一个形参page，用于控制分页数，因为之前的current只有默认值1，不添加此处，后续无法修改。

在表格组件下方写分页代码
@current-change表示每次页数跳转都自动调用getList方法，并且page + 1

 <!-- 分页 --><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"/>

随后显示表单查询功能，根据条件进行查询。

v-model双向绑定，在输入医院名称、医院编号的时候，赋值给查询类实例searchObj，在点击查询后，按钮绑定getList()函数

该代码应在表格数据展示代码之前

    <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>