医院信息化与智能化系统(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"
    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>

现在在前端界面可以看到表格数据了，但是只有单页，想要添加多页，可以继续使用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>