非常简单直接看代码，不懂的直接扣我
前端页面
<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框架
1.// 引入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端口已经启动。。。'); })
