前言

因为现如今的开发大部分都是前后端分离的开发，而这篇文章将主要讲的是前后端接口的对接过程。

一、前端的搭建

1、模板的引入

我这次项目引用的模板为vue-element-admi，这是一个基于vue-element-admin的一套后台管理系统基础模板。我将在这个模板的基础上进行二次开发。
GitHub地址：https://github.com/PanJiaChen/vue-element-admin
项目在线预览：https://panjiachen.gitee.io/vue-element-admin

2、引入工作区

在将模板下载好之后，就将其解压到工作区的文件夹中

3、前端依赖的下载

使用命令 ：npm install
如果依赖下载失败可能是nodejs的版本过高建议下载低版本

4、前端项目的启动

使用命令：npm run dev
启动。执行后，浏览器自动弹出并访问http://localhost:9527/

二、前端页面开发流程

1、添加路由

这个路由的意思就是我们在地址栏输入的哪个url，配置不同的路由就会由不同的url进入不同的页面。比如下面我配置了/hospSet/list，那么我们点击对应的地方就会进入对应页面。

2、设置跳转页面的路径

到相应的文件路径去编写相应页面的代码，在这里所编写的代码最终会在相应的地址前端页面呈现。

3、编写对应后端api接口代码

在list.vue代码中可以看见import了一个js文件，那个文件中就相当于对后端数据向前端的传输。这样在list.vue中就可以获取到后端所传过来的json数据，从而在页面上回显。

后端中对应代码如下：

三、跨越问题

跨域：浏览器对于javascript的同源策略的限制 。
以下情况都属于跨域：

如果域名和端口都相同，但是请求路径不同，不属于跨域，如：
www.jd.com/item
www.jd.com/goods
http和https也属于跨域
而我们刚才是从localhost:3000去访问localhost:8201，这属于端口不同，跨域了。
如何解决呢？
Spring早就给我们提供了解决方案，我们只需要在对应controller上添加一个标签就可以了（@CrossOrigin //跨域）。
我们在HospitalSetController类上添加跨域标签@CrossOrigin，再进行测试，则测试成功！