共计 1507 个字符，预计需要花费 4 分钟才能阅读完成。
一、Vue 框架的开发流程介绍
当咱们从 github 上下载一个前端模板框架到本地后，框架中常常会自带有一些跳转显示类的性能，咱们能够通过查看这些性能是如何实现的，进而一步步革新为咱们须要的样子。在这一开发过程中，次要有 4 个重要的前端培训具体操作，上面顺次介绍这 4 个具体的步骤：
步骤 1：增加路由规定
• 在页面的右边菜单栏，咱们点击不同的选项卡，在浏览器的输入框就会自带跳转出不同的 url，这一过程就称作 ” 路由 ”(你当然能够简略的将 ” 路由 ” 了解为是 ” 选路 ”)。
路由
• 这些路由规定须要在 router/index.js 中编写。
在入口文件 main.js 中，导入了 router 文件，当咱们须要为我的项目编写路由规定时，就须要在 router/index.js 中编写。
导入路由规定
步骤 2：增加要跳转的门路
在增加路由规定时，通过 component 属性能够设置要跳转的门路，并且须要在对应的门路上创立对应的文件。
步骤 3：定义接口门路
• 在页面中引入了 api 下的 js 文件，该文件中定义了接口门路的一部分。
页面中引入了 api 下的 js 文件
• 接口门路的另一部分是 config/dev.env.js 中的 BASE_API 属性，BASE_API 与 url 独特形成了我的项目页面的拜访门路。
BASE_API 与 url 一起形成页面的拜访门路
步骤 4：应用 axios 进行接口调用
设置好路由规定、要跳转的门路、接口门路之后，咱们就须要应用 axios 进行接口调用，具体是在页面引入 JS 文件，应用 axios 进行接口调用，把接口返回数据在页面显示。
二、通过 Vue 框架调用后端接口实际
持续以《分布式医疗挂号零碎》为例，之前的文章中曾经实现了医院设置接口的开发，目前曾经有了具体的后端接口，上面依据上文配置好前端环境，尝试应用 Vue 框架调用后端医院设置表的查问接口，进而显示接口中的数据：
(1)增加医院设置路由
• 在 router/index.js 中设置路由规定：
路由医院记录列表：/hospSet/list
路由医院记录增加：/hospSet/add
(2)增加跳转的门路
• 持续在 router/index.js 的 component 属性中增加跳转的门路：
跳转到医院记录列表：@/views/hospset/list
跳转到医院记录增加：@/views/hospset/add
(3)定义接口门路
• 在 api 文件夹下创立名为 hspset.js 的文件，定义后端接口门路。
定义接口门路
在 config/dev.env.js 中批改接口 ip 地址和端口号：
• 留神不要改为 https，因为 https 为加密传输，须要受权后能力操作。
批改为本机 8201 端口
(4)应用 axios 进行接口调用
医院设置的接口调用代码写在下图的 list.vue 中，下图显示了前端调用后端的整体过程：
二、测试
(1) 测试后端接口
首先在一样设置数据库表中筹备好 4 条记录。
而后将医院设置微服务模块启动，应用 swagger 进行条件查问带分页接口的测试：
(2)跨域拜访问题
在前后端整合时，当以下三个局部中存在一个及以上不雷同时，会呈现跨域问题：
• 拜访协定
• 拜访地址
• 拜访端口号
解决跨域问题最简略的形式：应用 @CrossOrigin 注解，将其加在发出请求的 Controller 类上即可。
(3)状态码问题
编写后端代码时，咱们定义了胜利状态码为 200，而在前端模板中，应用的是 20000 作为胜利状态码。为了前后端对立，能够将前端 utils/request.js 中的胜利状态码改为 200 和后端匹配。
(4)最终测试
能够看到点击医院设置列表后，胜利达到后端进而调用了医院设置表的数据库，取得了医院设置表的 JSON 数据，后续能够通过此 JSON 数据将其显示在页面上！
