前言

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

一、前端的搭建

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,再进行测试,则测试成功!
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐