非常简单直接看代码,不懂的直接扣我
前端页面
直接引入axios就可以:
<script>
import axios from 'axios'
// console.log(axios.prototype);
export default {
name:'AxiosBase',
data() {
return {
list:''
}
},
methods: {
getData(){
// 发送基本请求
// axios.get('http://localhost:4000/data')
// .then((res)=>{
// console.log(res);
// })
// .catch((err)=>{
// })
// axios默认get请求
// axios('http://localhost:4000/data')
// .then((res)=>{
// console.log(res);
// })
// .catch((err)=>{
// })
// 指定get请求的参数
// axios('http://localhost:4000/data?id=1')
// .then((res)=>{
// console.log(res);
// })
// .catch((err)=>{
// })
// 这里加的这个id没有用的需要后端提供接口
axios('http://localhost:4000/data',{
// 指定get请求的参数,进行拼接
params:{
id:1
}
})
.then((res)=>{
// console.log(res);
this.list = res.data
})
.catch((err)=>{
})
},
postData(){
// 后台是以Form Data方式处理数据的
// 不用这个URLSearchParams,post后台收不到这个数据,处理方式有很多种
var stu = new URLSearchParams()
// 设置值 键名 值
stu.append('name','123'),
stu.append('sex','男')
axios.post('http://localhost:4000/user',stu)
.then((res)=>{
console.log(res);
})
.catch((err)=>{
})
}
},
}
</script
后端是node的express框架
这里后端node把跨域问题已经处理
// 引入express
const express = require('express');
//这个组件用于接收post数据
const bodyParser = require('body-parser');
// 创建服务器对象
const app = express();
// 注册中间件
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json({type:'application/*+json'}))
//本地服务器解决跨域,不可缺
app.all('*',function(req,res,next){
res.header('Access-Control-Allow-Origin','*')
res.header('Access-Control-Allow-Headers','Content-Type')
res.header('Access-Control-Allow-Methods','*');
res.header('Content-Type','application/json;charset=utf-8');
next();
})
// 处理get请求
app.get('/data',(req,res)=>{
// 设置请求头,解决跨域,上面已经都解决了
// res.setHeader('Access-Control-Allow-Origin','*');
res.json({
todos:[
{
"id":1,
"name":"chen",
"age":20,
"sex":"男"
},
{
"id":2,
"name":"xin",
"age":10,
"sex":"女"
},
]
})
})
// req后台向前台请求
// res后台向前台响应
app.post('/user',(req,res)=>{
res.json({
user:req.body,//前端传什么数据,后台就传什么数据给你
msg:'post请求成功',
})
console.log('接收',req.body);
})
//开启监听
app.listen(4000,()=>{
console.log('4000端口已经启动。。。');
}
公众号:前端老实人,获取更多学习资料以及与众多大佬交流机会