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

您所在的位置：网站首页 › spring开发中遇到的问题 › SpringBoot+Vue前后端分离常见问题处理

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

2024-07-14 07:18| 来源: 网络整理| 查看: 265

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中无法为页面中的变量赋值的问题

出错代码：

默认按钮 {{mess}} 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)}) } } }

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

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

默认按钮 {{mess}} 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)}) } } }

【本文地址】

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

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

今日新闻

推荐新闻