初次体验前后端分离

作者: YoonaDa | 来源:发表于2018-08-17 10:46 被阅读5539次

记录第一次体验前后端分离,自己用SpringBoot+Mybatis写了一个接口,然后前端用Vue+axios实现获取数据并渲染到页面。

1.将我们的后端代码跑起来,哈哈哈。

image.png

2.访问测试接口 :http://127.0.0.1:8088/userlist,并对比一下数据库信息。

image.png image.png

3.看一下前端代码


image.png image.png

4.跑起来

image.png

看一下报错,是跨域问题

image.png

5.接下来,我们可以通过给后端代码加入如下内容以解决跨域问题

// 解决跨域问题
@Bean
public WebMvcConfigurer webMvcConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/*").allowedOrigins("");
}
};
}

image.png

6.再一次跑起来之后,刷新前端页面,便可以看到显示出来了

image.png

哈哈哈,谢谢各位点击,下面我来给出源码地址
前端的一个测试Restful风格接口的小demo码云地址:
https://gitee.com/YoonaDa/test_Restful
后端的代码码云地址:
https://gitee.com/YoonaDa/SpringBoot_yoona
希望有帮助,也刚刚自学这一部分,😃。

温馨提示:
源码是我后来为了分享写的,可能有一部分和上面的不全一样。比如,前端部分,我没有弄表格,直接给出测试接口并渲染出来,可能有点丑😂。

image.png

相关文章

  • 初次体验前后端分离

    记录第一次体验前后端分离,自己用SpringBoot+Mybatis写了一个接口,然后前端用Vue+axios实现...

  • 2019-01-11前后端分离

    什么是前后端分离? 为什么前后端分离? 前后端分离的优势? 未分离时期 MVC: 早期JSP+SERVLET中的结...

  • 前后端分离

    什么是前后端分离 前后端分离中前端负责页面路由控制,页面展示,后端处理数据,通过json进行传输。前后端分离并非仅...

  • vivo 商城前端架构升级—前后端分离篇

    本文主要以 vivo 商城项目的前后端分离经验,总结前后端分离思路,整理前后端分离方案,以及分离过程中遇到的问题及...

  • Spring Boot+Vue概述(一)

    前后端分离 前后端分离就是将⼀个应⽤的前端代码和后端代码分开写,为什么要这样做?如果不使⽤前后端分离的⽅式,会有哪...

  • vue前后端分离初体验(-)

    数据库老师说bookstrap太老,太丑了。建议我们用心的框架,后端SSM的增删改查已经做完了,偶然看到一个git...

  • 前后端分离

    方案一 简易前后端分离 前后端分离原则,简单来讲就是前端和后端的代码分离,也就是技术上做分离,我们推荐的模式是最好...

  • 六大接口管理平台,总有一款适合你的!

    前后端分离绕不开的接口测试 先聊一聊前端和后端分离的优点。前后端分离优点如下: 真正的实现前后端解耦,前端服务器使...

  • 使用nginx解决跨域问题

    1.跨域解释 1.1 怎么知道我遇到了跨域问题 如果项目没做前后端分离,是不会有跨域问题的。前后端分离的项目中,前...

  • 前后端分离架构与小程序的环境切换

    前后端分离架构 随着前端应用的越来越复杂,前后端分离架构成为了主流。前后端分离之后,前端并不依赖后端的模板和路由,...

网友评论

本文标题:初次体验前后端分离

本文链接:https://www.haomeiwen.com/subject/ivrzbftx.html