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>
页面