Springboot+Vue数据传递的流程

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

这样就可以获取数据