初次体验前后端分离
2018-08-17 本文已影响5539人
YoonaDa
记录第一次体验前后端分离，自己用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
