Springboot+Vue数据传递的流程

最新推荐文章于 2024-10-23 23:05:59 发布

置顶一起_java

最新推荐文章于 2024-10-23 23:05:59 发布

阅读量7.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： java vue.js spring boot node.js

本文链接：https://blog.csdn.net/qq_38189467/article/details/105583395

本文详细介绍了如何使用SpringBoot和Vue实现前后端分离的项目搭建过程，包括Vue项目的创建、目录结构解析、利用axios从后端获取数据并展示，以及SpringBoot配置跨域访问，帮助读者掌握前后端数据交互的核心流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Springboot+Vue数据传递的流程

一、前后端分离
大概的意思就是将一个程序变成前端和后台的两个应用。
二、搭建Vue项目
这个是Vue搭建的一个比较好的解释
注意点：1、在这里插入图片描述
下载好了node就可以直接操作，在cmd中运行第一个第二个，然后项目创建成功。
三、目录解释
1、build：存放项目构建脚本
2、config：一般是基本配置的操作
3、node_modules：所有的依赖
4、static：静态资源
5、index.html：首页也是入口
6、package.json：依赖的全部版本以及发布
7、（import）src：存放代码具体靠理解。

四获取后台数据进行展示
利用axios来执行（npm install axios安装axios）
1、在main.js页面引用

import axios from 'axios';

Vue.prototype.$http=axios;

2、在获取数据的页面

created:function(){
      this.$http.get('http://localhost:8088/selectClass').then(resp=>{
          console.log(resp);
      })
  }

注意：两个端口号要设置不一样
3、在后台加上配置类

@Configuration
public class MyConfig implements WebMvcConfigurer {

public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }