SpringBoot+Vue前后端分离常见问题处理

1、elementUI引入出问题

解决：命令行进入vue工程，然后下载elementUI，命令是

npm i element-ui -S
           

然后在main.js中 加入三行代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
           

即可使用elementUI

2、axios引入问题

解决：命令行下载axios

npm install axios
           

然后再main.js中加入三行代码

import axios from "axios";

Vue.use(axios)
Vue.prototype.axios = axios  //这里不能只简单的Vue.use，还要加这句
           

3、前后端交互时的跨域报错问题

解决：提供一种最简单的方法，在你要交互的Controller类上加一个注解@CrossOrigin即可。但是需要每一个交互的都得加。

4、axios中无法为页面中的变量赋值的问题

出错代码：

<template>
  <div>
    <el-button @click="login()">默认按钮</el-button>
    {{mess}}
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "G",
  data() {
    return {
      mess : null
    }
  },
  methods: {
    login: function () {
      axios.get("http://localhost:8081/hello")
      .then(function (res) {this.mess = res.data.success})
      .catch(function (error){console.log(error)})
    }

  }
}
</script>
           

此时会有报错，Cannot set property 'XXX' of defined。这是由于this在回调函数中指向不同并非是vue实例。

解决：在调用axios之前先把this保存下来（我的返回值是{“success”：“success”}，所以这里取值的时候用的是res.data.success)

<template>
  <div>
    <el-button @click="login()">默认按钮</el-button>
    {{mess}}
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "G",
  data() {
    return {
      mess : null
    }
  },
  methods: {
    login: function () {
      var _this = this
      axios.get("http://localhost:8081/hello")
      .then(function (res) {_this.mess = res.data.success})
      .catch(function (error){console.log(error)})
    }

  }
}
</script>