前端页面开发

前言

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

一、前端的搭建

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

  • 2
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FanDoKey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值