分布式医疗挂号系统(六) | 使用Vue开发后台管理系统页面

左手的ㄟ右手 2022-11-18 01:44 334阅读 0赞

### 使用Vue开发后台管理系统页面 ###

*  一、Vue框架的开发流程介绍
 *   *  步骤1：添加路由规则
     *  步骤2：添加要跳转的路径
     *  步骤3：定义接口路径
     *  步骤4：使用axios进行接口调用
 *  二、通过Vue框架调用后端接口实践
 *   *  1.添加医院设置路由
     *  2.添加跳转的路径
     *  3.定义接口路径
     *  4.使用axios进行接口调用
 *  二、测试
 *   *  1.测试后端接口
     *  2.跨域访问问题
     *  3.状态码问题
     *  4.最终测试

--------------------

> 前后端分离开发是目前流行的大趋势，所谓前后端分离，仅从技术层面讲主要是指`前端通过调用后端提供的接口实现页面的交互逻辑。`  
> 具体可以使用nodeJS、axios、ajax等进行交互，使用前后端分离开发主要有`解耦`和`提高性能`两点考虑：
> 
>  *  解耦：实现了前后端的解耦、静态资源与动态资源的分离。
>  *  提高性能：减少了后端服务器压力，不再是全局刷新，而是异步加载局部刷新。

本文从整体上介绍Vue框架的开发流程，结合具体的案例，使用Vue框架调用具体的后端接口。

# 一、Vue框架的开发流程介绍 #

当我们从github上下载一个前端模板框架到本地后，框架中经常会自带有一些跳转显示类的功能，我们可以通过查看这些功能是如何实现的，进而一步步改造为我们需要的样子。在这一开发过程中，主要有4个重要的具体操作，下面依次介绍这4个具体的步骤：  
![Vue框架开发的大致流程][Vue]

## 步骤1：添加路由规则 ##

*  在页面的左边菜单栏，我们点击不同的选项卡，在浏览器的输入框就会自带跳转出不同的url，这一过程就称作"路由"(你当然可以简单的将"路由"理解为是"选路")。  
    ![路由][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70]
 *  这些路由规则需要在`router/index.js` 中编写。  
    在入口文件main.js中，导入了router文件，当我们需要为项目编写路由规则时，就需要在`router/index.js` 中编写。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]

## 步骤2：添加要跳转的路径 ##

在添加路由规则时，通过`component`属性可以设置要跳转的路径，并且需要在对应的路径上创建对应的文件。  
![设置要跳转的路径][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]

## 步骤3：定义接口路径 ##

*  在页面中引入了`api下的js文件`，该文件中定义了`接口路径的一部分`。  
    ![页面中引入了api下的js文件][api_js]
 *  接口路径的另一部分是 `config/dev.env.js` 中的BASE\_API属性，`BASE_API`与`url`共同构成了项目页面的访问路径。  
    ![BASE\_API与url一起构成页面的访问路径][BASE_API_url]

## 步骤4：使用axios进行接口调用 ##

设置好路由规则、要跳转的路径、接口路径之后，我们就需要使用axios进行接口调用，具体是`在页面引入JS文件，使用axios进行接口调用，把接口返回数据在页面显示`。

# 二、通过Vue框架调用后端接口实践 #

继续以《分布式医疗挂号系统》为例，之前的文章中已经完成了医院设置接口的开发，目前已经有了具体的后端接口，下面根据上文配置好前端环境，尝试使用Vue框架调用后端医院设置表的查询接口，进而显示接口中的数据：

## 1.添加医院设置路由 ##

*  在`router/index.js`中设置路由规则：  
    路由医院记录列表：`/hospSet/list`  
    路由医院记录添加：`/hospSet/add`

![添加医院设置路由规则][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 2]

## 2.添加跳转的路径 ##

*  继续在`router/index.js`的component属性中添加跳转的路径：  
    跳转到医院记录列表：`@/views/hospset/list`  
    跳转到医院记录添加：`@/views/hospset/add`

![添加要跳转的路径][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]

## 3.定义接口路径 ##

*  在api文件夹下创建名为`hspset.js`的文件，定义后端接口路径。  
    ![定义接口路径][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 4]

在`config/dev.env.js` 中修改接口ip地址和端口号：

*  注意不要改为https，因为https为加密传输，需要授权后才能操作。  
    ![修改为本机8201端口][8201]

## 4.使用axios进行接口调用 ##

医院设置的接口调用代码写在下图的`list.vue`中，下图显示了前端调用后端的整体过程：

![前端调用接口的过程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 1]

# 二、测试 #

## 1.测试后端接口 ##

首先在一样设置数据库表中准备好4条记录。  
![医院设置数据库表][20210411174511185.png]  
然后将医院设置微服务模块启动，使用swagger进行 `条件查询带分页接口` 的测试：  
![条件查询带分页接口测试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 5]

## 2.跨域访问问题 ##

在前后端整合时，当以下三个部分中存在一个及以上不相同时，会出现跨域问题：

*  `访问协议`
 *  `访问地址`
 *  `访问端口号`

解决跨域问题最简单的方式：使用 `@CrossOrigin` 注解，将其加在发出请求的Controller类上即可。

## 3.状态码问题 ##

编写后端代码时，我们定义了成功状态码为200，而在前端模板中，使用的是20000作为成功状态码。为了前后端统一，可以将前端 `utils/request.js` 中的成功状态码改为200和后端匹配。

## 4.最终测试 ##

![前端整合后端测试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 6]  
可以看到点击医院设置列表后，成功到达后端进而调用了医院设置表的数据库，获得了医院设置表的JSON数据，后续可以通过此JSON数据将其显示在页面上！

[Vue]: /images/20221022/a50ff46b5415447da57572057ebcd944.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70]: /images/20221022/395b05fb9a9d4a2190aff4d0ab5c2ecc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]: /images/20221022/b42d41f32fe1416a8e9922b182227f4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]: /images/20221022/8e860a17ffd84090955cc31cb26e231b.png
[api_js]: /images/20221022/dfe68dacf6ed4a829728a57cb12fd3b1.png
[BASE_API_url]: /images/20221022/85fbf3d27a734656af612dc77f56db89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 2]: /images/20221022/8321c7e00bce4dac84d4efab19fd958d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]: /images/20221022/f279a6bff0c442bb88034fc5bd6f4163.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 4]: /images/20221022/fef2edfd8e104a3c99b9e3323d2fd080.png
[8201]: /images/20221022/f92351c10a1a4c968de02bf0c6d3e842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70 1]: /images/20221022/d0eefd60b39c4e20aeb7555c3bb6ac5f.png
[20210411174511185.png]: /images/20221022/4f8c118894f246f3b6641139856bbd38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 5]: /images/20221022/e24779647aa340d6810301e905899f32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 6]: /images/20221022/b3e0cd391a54431a8d2ec80a562ae5a9.png