vue请求后端数据和跨域问题解决
作者：萧熙
最近遇到的一个问题 后端写好的接口，前端怎么获取数据呢？
这是我后端的接口：GET 接口
这是我前端运行的项目地址：
简单使用：
咱门前端使用 颇受好评的 axios 来发起请求
这是它的官网：https://www.axios-http.cn/
不过要在vue中使用它，就需要先安装 打开终端 输入一下命令
npm install axios
然后在需要使用的 页面 <script> 中标签 引入 axios就行了
import axios from 'axios'
然后在methods中 创建一个函数：代码如下
a() {
// const axios = require('axios'); // 官方给出的例子 这段话类似于 import
axios.get('http://localhost:8088/user') // 这里填写后端的地址
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});
}require 和 import 具体详情，可以查阅相关资料
写完之后在 div中写一个 <button> 标签<button @click="a()">点我 a</button>
打开控制台可以看到，data里面有三条数据
看到这里，我们就请求到了后端数据（后端一定要允许跨域请求）
改进
写完你这里例子之后，又写了几个请求，发现呢，每次都要复制黏贴，还有好多重复性代码，就想到，应该可以把这个axios封装一下
先去网上查找一些封装的案例，发现，，，，看不懂（并不难的鸭子）
然后自己手动 简单封装一下 axios
在src 目录下新建一个 utils 目录，然后再建一个 request.js 文件在里面写一下代码
/*引入axios*/
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8088' // 接口服务器地址
});
// // 创建实例后修改默认值
// instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// //前端采用export.default，在写后端代码时用module.export
export default request在src中新建一个 api 目录， 在目录中新建有一个 demo.js ( 根据接口作用取名字，这里为测试demo )写入以下代码
import request from '../utils/request' // 引入 request 类（模块）
export function getList(params={}) {
return request({
methods:'GET',
url:'/user',
params,
})
}在url中，可以直接 用 / 和接口 地址拼接 然后设置methods 方式 ，axios 中默认为 get，getList是一个方法名
回到vue的页面上，在我们需要的vue中写 import { getList } from "../api/demo" 导入这个方法
然后再methods中创建一个函数 ，重写这个方法
b(){
getList().then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
});
}最后这个方法可以用于点击事件，如果与crated中，就必须是使用回调函数
getList(){
listUser()
.then(response =>{ // 回调函数使用箭头函数来使用。(responde)=>{}
this.tableData = response.data;
})
},跨域问题解决：
凡事不要慌，能解决的事，那都不是事~
我是在后端Controller 层加了 @CrossOrigin 注解
跨域报错：
如有问题，后续更新，先记录一下
到此这篇关于vue请求后端数据和跨域问题的文章就介绍到这了,更多相关vue请求后端数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！