Axios + Mockjs

Mock 可以用来模拟服务端响应请求，让前端人员自己测试接口

直接上案例：

Axios

// request.js
import Axios from 'axios'
// 先创建一个 axios 实例，无需配置 baseURL，只是模拟后端
const http = Axios.create({
    // baseURL: "XXX"
})
export default http

Mock

可以看到，简单实用Mock其实不复杂，Mock.mock 方法即可模拟请求

Mock 还提供了多种模拟数据，详见Mock.js (mockjs.com)

// 引入mock
import Mock from 'mockjs'

// 生成数据
let arr = (() => {
    let newlist = []
    for (let i = 0; i < 5; i++) {
        newlist.push({
            // 生成的数据（ Mock 模拟数据 ）
            name: Mock.Random.cname(),
            age: Mock.Random.integer(0, 100)
        })
    }
    return newlist
})()

// 定义函数-处理新增数据
const handleAddName = (opt) => {
  // post传递过来的参数
  // console.log(opt.body) //json字符串 需要转成对象
  let { name, age } = JSON.parse(opt.body)

  arr.push({
    name: name,
    age: age
})
  return arr
}

// 定义接口
// mock方法--三个参数
// 1. 拦截请求地址
// 2. 请求方式
// 3. 返回数据
// 查询接口--get
Mock.mock('/mock/news','get',arr)
// 新增接口--post
Mock.mock('/mock/addNews','post',handleAddName)

Vue

// main.js
...
import "./untils/mock.js"
...

<template>
    <div>
        <button @click="getData">get</button><br>
        <input type="text" v-model="postName">
        <input type="text" v-model.number="postAge"><br>
        <button @click="postData">post</button>
    </div>
</template>
<script>
// 引入 Axios 实例
import http from '../untils/request.js'

export default {
    name: "Test",
    data(){
        return {
            postName:"",
            postAge:""
        }
    },
    methods:{
        getData(){
　　　　　　  // get 请求
            http.get("/mock/news").then((res) => {
                console.log(res.data);
            })
        },
        postData(){
　　　　　　  // post 请求
            http.post("/mock/addNews",{
                name: this.postName,
                age: this.postAge
            }).then((res) => {
                console.log(res.data);
            })
        }
    },
}
</script>

页面