vue-element-spring Boot前后端分离

一、下载element
官网：https://element.eleme.cn/#/zh-CN/component/installation
1.在项目的目录下，下载element，当然你可以不用，下了更方便

cnpm i element-ui -S

2.在main.js中写

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

二、下载axios
官网：http://www.axios-js.com/docs/
1.用axios来发送和请求，下载axios

 cnpm install axios

2…在main.js中写

import axios from 'axios'
Vue.prototype.$axios = axios

最后main.js是这样的

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.use(ElementUI)
Vue.prototype.$axios = axios
Vue.config.productionTip = false

三、后台创建和部署的话，太多，我太懒,而且每个人学的习惯，和写发方式不一样，不误导
四、其他的不说，就说一下跨域、前端请求、后台获取数据、后台传给前台json、前台接收数据
1.跨域，我就要先说跨域，可以说都是要做的
在config下找到index.js,然后找到在

在proxyTable中写

proxyTable: {
      '/api': {
              target: 'http://localhost:8080',//地址，公共部分
              changeOrigin: true,
              pathRewrite: {
                '^/api': '/' //把地址里的api替换成/
              }
            }
    },

在到main.js中写

Vue.prototype.HOST = '/api'

在地址前加上就跨域完成

this.HOST

2、前端请求和接收

 		var url=this.HOST+"/user/list";//地址，跨域加上this.HOST
      var that=this;//在成功后无法用this
      this.$axios.post(url,{
      //参数
        username:that.userInfo.username,
        password:that.userInfo.password
      })
      .then(function (response) {
        console.log(response.data);
        //userlist，接收数据
        that.userlist=response.data
      })
      .catch(function (error) {
        console.log(error);
      });

3.后台获取和返回json

	@ResponseBody
    @RequestMapping(value = "/list",method = RequestMethod.POST)
    public List<User> list(@RequestBody User user){//注意这里用@RequestBody
        System.out.println(user);
        return userService.list(user);
    }