文章目录
前言
本系列主要是记录我在做前端项目学习到的一些常用组件或功能,方便后面复习时用;同时也是想把我学习到的内容做一个总结,或许能帮到有需要的人,或许能有大佬指出我的错误,让我能能及时更正学习;希望与大家一起共勉!
本文并非零基础入门,需要学习例如promise、axios、vue-cli等基础知识
一、mock.js是什么?
用官网的话来说,就是生成随机数据,拦截 Ajax 请求。
在开发中,如果后端还没有开发好接口,那么我们就可以先用mock.js来模拟数据接口。
等后端准备好了,直接用后端接口替换模拟数据的接口就好。
二、使用步骤
1.在本地下载依赖包
npm install mockjs
安装完以后,可以在vue脚手架的package.json文件中查看是否安装上了
感觉开发中是不是应该用-save-dev命令安装在devDependencies会比较好
2.创建mock文件夹
一般都会把mock.js相关的文件放在src目录下的mock文件夹中
3.设计JSON数据结构
直观点来看JSON的数据结构就好像对象数组,这个是不能变的。
但对象里面的键值对可以根据自己的需求来编写。
例如我要给我的轮播图组件写一个模拟接口,那么我要创建个名为banners的json文件,记得放在mock文件夹里。
轮播图因为是通过v-for来展示图片,所以需要图片的路径和id(提供给:key)
大致格式如下:
[{
"id": "1",
"imgUrl": "/images/banner1.jpg"
},
{
"id": "2",
"imgUrl": "/images/banner2.jpg"
},
{
"id": "3",
"imgUrl": "/images/banner3.jpg"
},
{
"id": "4",
"imgUrl": "/images/banner4.jpg"
}
]
建议安装插件格式化文档,整理下代码的格式,我之前就是因为有回车空格导致json文件读取错误
4.json文件需要的图片放到静态资源文件夹下
vue有个专门的public文件夹来放静态资源,图片存放的路径要与你json文件写的一样,我放在images这个文件夹里了。
5.创建mockServer.js文件
接下来就是用mockjs来模拟数据接口
因为我自己准备了数据,我只需要模拟接口就可以了,所以接下主要介绍的是mockjs里的Mock.mock()方法。
Mock.Random()等其他方法的具体使用语法可以参考官方中文文档
在mock文件夹下创建mockServer.js文件,里面代码如下:
import Mock from 'mockjs'
import banners from './banners.json'
Mock.mock('/mock/banners', {
code: 200,
data: banners
})
首先是要引入mockjs和json文件。
然后Mock.mock()里有两个参数,第一个是rurl,第二个是数据模板 template,作用是当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
6.在入口文件引入mockServer
入口文件一般是main.js,至少我是;在这个文件里引入mockServer,在其他文件里就不用再写一次了
7.封装请求mock接口的axios
axios的封装是项目很重要的一环,之后再写一篇文章单独讲一下。
现在我们要做的就是专门封装一个单独访问mock接口的axios文件。
也不用做什么太多的操作,就是baseURL设置成’/mock’,然后添加请求拦截器和响应拦截器,最后将请求方法暴露出去让别的文件能访问到就行。
首先在api文件夹下创建mockAjax.js文件
具体代码如下:
import axios from 'axios';
const mockAjax = axios.create({
baseURL: '/mock',
timeout: 10000
})
mockAjax.interceptors.request.use((config) => {
return config;
})
mockAjax.interceptors.response.use((response) => {
return response.data;
}, (error) => {
return Promise.reject(error);
})
export default mockAjax
mockAjax就是一个创建axios请求的方法
然后在index文件里调用该方法发送axios请求,method为get,url为mockServer.js里设置的路径banners,具体代码如下:
import mockAjax from './mockAjax'
export const reqBanners = () => {
return mockAjax.get('/banners')
}
8.测试是否能获得模拟数据
我的项目里,从接口获得的数据是存放在vuex里的,为了避免一篇文章的篇幅过长,我这里先测试下能不能获得axios返回的promise对象和结果data,具体存储数据,展示在轮播图上就下一篇文章再介绍。
在App.vue这个文件下的生命周期函数mounted里直接调用reqBanners()
可以用async/await直接获取promise对象里的值
import { reqBanners } from '@/api';
methods: {
async getBanners() {
let result = await reqBanners();
console.log(result);
},
},
mounted() {
this.getBanners();
},
输出结果如下:
总结
以上就是今天要讲的内容,本文介绍了mock.js的使用,算是一个比较基础的使用,目的就是能快速入手模拟接口进行项目开发,更详细的random随机生成数据等之后有时间研究研究再说吧。
如果本文有哪里说错了,欢迎提出指正和批评,我们一起共勉!