用node做的简单网络接口并用axios调取接口教学易懂

非常简单直接看代码，不懂的直接扣我

前端页面

直接引入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端口已经启动。。。');
})