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("*");
    }

这样就可以获取数据在这里插入图片描述

Logo

前往低代码交流专区

更多推荐