在Vue项目中,有些数据不是后台服务器返回的,所以我们需要在本地建立一个假服务器来存储一些数据
安装mockjs
终端输入: npm i mockjs
准备本地数据
在src
目录下创建一个mock文件夹,文件夹下准备各种json文件,里面存储数据格式
注意:json文件格式不能有空格,需要格式化。json文件不需要对外暴露
[ { "id":"1", "imgUrl":"/images/banner1.jpg" }, { "id":"2", "imgUrl":"/images/banner2.jpg" }, ]
因为我们是模拟的后台数据,但是真正的数据还是在要本地,public/images 里面放置真正的图片
编写服务器
在src\mock/index.js下编写服务代码
// 引入mock import Mock from 'mockjs' // 引入json数据 import name from './name.json' // mock方法两个参数,第一个:请求地址,第二个:请求的数据 Mock.mock('/mock/name', { code:200, data:name
})
编写发送请求的接口
src\api\mockRequest.js下
// 这个配置的是mock内部的请求 import axios from "axios"; const requests = axios.create({ // 所有利用这个配置发请求的都会在前面加上'/mock' baseURL:'/mock', timeout:5000 }); requests.interceptors.request.use((config)=>{ return config }) requests.interceptors.response.use( (res)=>{ return res.data }, (err)=>{ return err }) export default requests
src\api\index.js下
import mockRequests from "./mockRequest.js"; // 写各种接口请求,分别暴露 export const reqGetName = () =>mockRequests.get('/name')
发送请求
async GetTNData({commit}){ let res = await reqGetName(); if(res.code == 200){ data = res.data } },
标签:name,res,json,模拟,后台,mockjs,mock,请求 From: https://www.cnblogs.com/bjpfee/p/17091334.html