前端开发框架之Vue开发流程与使用

2021-11-03 AT小白在线中

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

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

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

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

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

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

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

首先在一样设置数据库表中准备好4条记录。

然后将医院设置微服务模块启动，使用swagger进行条件查询带分页接口的测试：

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

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

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

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