SpringBoot+VUE实现前后端分离的实战记录

一,前端VUE项目

这里使用VUE UI创建一个VUE项目

命令行输入vue ui进入

SpringBoot+VUE实现前后端分离的实战记录_第1张图片

手动配置项目

SpringBoot+VUE实现前后端分离的实战记录_第2张图片

选中这三个

SpringBoot+VUE实现前后端分离的实战记录_第3张图片

点击下一步->点击创建项目

用IDEA打开刚才创建的项目

IDEA中的安装vue插件并重启

IDEA控制台中输入vue add axios安装axios

新建一个Show.vue

SpringBoot+VUE实现前后端分离的实战记录_第4张图片

在index,js的routes中配置它的路由

SpringBoot+VUE实现前后端分离的实战记录_第5张图片

编写Show,vue向后端请求数据并展示




二,后端SpringBoot项目

编写一个查询功能

SpringBoot+VUE实现前后端分离的实战记录_第6张图片

controller层返回json数据

SpringBoot+VUE实现前后端分离的实战记录_第7张图片

在spring boot中解决跨域问题

重写WebMvcConfigurer中的addCorsMappings()方法

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

后端测试(注意前后端端口号的区分,VUE占用了8080和8081,在Springboot中修改后端的端口号)

数据输出成功

SpringBoot+VUE实现前后端分离的实战记录_第8张图片

前端发请求拿数据

SpringBoot+VUE实现前后端分离的实战记录_第9张图片

前端拿数据成功!!!

SpringBoot+VUE实现前后端分离的实战记录_第10张图片

总结

到此这篇关于SpringBoot+VUE实现前后端分离的文章就介绍到这了,更多相关SpringBoot+VUE前后端分离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(SpringBoot+VUE实现前后端分离的实战记录)