一、Vue框架开发流程介绍当我们从github上下载一个前端模板框架到本地时，该框架往往会出现一些跳转展示的功能.我们可以看看这些功能是如何实现的，然后一步一步的转化成我们需要的。在这个开发过程中，前端训练主要有4个重要的具体操作。下面依次介绍4个具体步骤：第一步：添加路由规则?在页面左侧的菜单栏中，我们点击不同的标签页，在浏览器的输入框中会自动跳转到不同的url。这个过程称为“路由”（当然你可以简单地将“路由”理解为“路由”）。路由?这些路由规则需要写在router/index.js中。在入口文件main.js中，引入了路由器文件。当我们需要为项目编写路由规则时，需要写在router/index.js中。导入路由规则第二步：添加要重定向的路径在添加路由规则时，可以通过组件属性设置要重定向的路径，需要在相应的路径上创建相应的文件。第三步：定义接口路径?页面中引入了api下的js文件，在该文件中定义了一部分接口路径。api下的js文件引入页面?接口路径的另一部分是config/dev.env.js中的BASE_API属性，BASE_API和url一起构成了项目页面的访问路径。BASE_API和url共同构成页面的访问路径第四步：使用axios调用接口axios调用接口，将接口返回的数据显示在页面上。2.通过Vue框架调用后台接口的实践继续以《分布式医疗挂号系统》为例。上一篇已经完成了医院设置界面的开发。现在有一个特定的后端接口。接下来按照上面配置前端环境。尝试使用Vue框架调用后端医院设置表的查询接口，然后在界面中显示数据：（1）添加医院设置路由?在router/index.js中设置路由规则：routehospital记录列表：/hospSet/listroute添加医院记录：/hospSet/add(2)添加跳转路径?继续在router/index.js的组件属性中添加跳转路径：跳转到医院记录列表：@/views/hospset/listjump添加到医院记录：@/views/hospset/add(3)定义接口路径?在api文件夹下创建一个名为hspset.js的文件来定义后端接口路径。在config/dev.env.js中定义接口路径，修改接口ip地址和端口号：?注意不要改成https，因为https是加密传输，需要授权后才能操作。修改为本机8201端口(4)使用axios调用接口首先准备4条记录在同一个设置数据库表中。然后启动hospitalsetting的微服务模块，使用swagger测试带分页接口的条件查询：(2)前后端集成跨域访问问题时，当有以下三个部分中的一个或多个时不同，就会出现跨域访问问题。域问题：?访问协议?访问地址?访问端口号解决跨域问题最简单的方法：使用@CrossOrigin注解，将其添加到请求的Controller类中。(3)状态码??问题在写后端代码的时候，我们定义了成功状态码为200，但是在前端模板中，我们使用了20000作为成功状态码。为了前后端统一，可以将前端utils/request.js中的success状态码改为200来匹配后端。(4)最后测试可以看到，点击医院设置列表后，成功到达后台调用医院设置表的数据库，获取医院设置表的JSON数据，可以显示稍后在页面上通过这个JSON数据！
