mockjs

作用

1 拦截ajax
2. 生成伪随机数据

首先就是安装mockjs

在你的vue文档里面输入

npm i mockjs -D

即可完成安装

在vue脚手架的根目录里的 main.js 文件中导入

import '@/mock/mock.js'

开始操作

首先我们在src里面新建一个utils的文件夹

在utils文件夹中新建一个request.js的文件

//request.js// 目的：ajax基本默认配置，请求和响应拦截等
import axios from 'axios';// 默认配置
const request = axios.create({baseURL: '/',timeout: 5000,headers: {post: {"Content-Type": "application/x-www-form-urlencoded"}}
})
// 拦截请求
// 拦截1如果有loading加载loading
request.interceptors.request.use(function(config) {config.headers.Token = localStorage.getItem("token");return config;
}, function(err) {Promise.reject(err)
})
// 拦截响应，如果有loading 关闭，统一弹出错误
request.interceptors.response.use(function(data) {return data
}, function(err) {Promise.reject(err)
})// 导出默认 request
export default request;

然后再views文件夹里我们新建一个MockView.vue的文件

<template><div><h1>mock数据</h1></div><div v-for="item in list" :key="item.id"><p>{{item.name}}</p><p>{{item.date}}</p><p>{{item.pdate}}</p><p>{{item.now}}</p><p>{{item.add}}</p><img :src="item.pic" ></div>
</template><script setup>import request from "@/utils/request.js"import {ref} from 'vue'const list = ref([]);request.get("/api/random?name=粥猫&age=18").then(res=>{console.log(res.data,"random");list.value = res.data.list;})request.get("/api/getData").then(res=>{console.log("mockdata",res.data);})
</script><style>
</style>

然后我们再新建一个mock文件夹并在里面新建一个mock.js的文件

// 导入mockjs
import Mock from 'mockjs';
import qs from 'qs'
// 拦截 接口地址/api/getData  拦截get方法
// 并返回数据
Mock.mock(/\/api\/random/, function(options) {var str = options.url.slice(options.url.indexOf("?") + 1);str = qs.parse(str);console.log(str)return Mock.mock({status: 0,name: str.name,"list|10": [{"name": "@cname", //随机中文名"age|1-200": 1, //生成1-200的随机数"price|200-500.2-5": 1, //生成小数"star|1-5": "❤", //字符串随机"chart|2": "我爱我的祖国","love|1": true, //随机布尔值"girl|2": ["小红", "小黄", "小梅", "兰姐"], //随机数组（1随机1个，2复制两份）"wife": {"h|150-170": 1,"w|40-45": 1,"weight|85-150": 1,"money|1000-9999": 1},"aprice": function() {return this.price + this.name},"tel": /1\d{10}/,"pic": function() {return Mock.Random.dataImage('200x100', this.name)},"date": "@date('yyyy/MM/dd')","tiem":Mock.Random.time(),"pdate":"@datetime()","now":"@now()","des":"@cparagraph(1,3)","keyword":"@cword(3,5)","title":"@ctitle(5,12)","url":"@url()","email":/[a-z]{8,12}@\.(126|163|qq)\.(com|cn|org)/,"ip":"@ip","add":"@county(true)"}]})
})Mock.mock("/api/getData", "get", function() {return {"name": "mumu","age": 18}
})

看下效果图

后端接口没完成？只有接口文档怎么办？3分钟教会你mockjs让你快后端一整年，再也不用等后端相关推荐

大牛推荐丨积分活动工具接口：积分商城api文档
什么是积分?自积分概念提出以来,积分活动已经成为一种非常流行的运营工具.对于积分,现在已经有一个比较完善和成熟的积分商城体系,在企业运营者的眼里,积分活动自然成为一种良好的积分商城运营模式. 利用积分 ...
php登录接口开发文档,登录接口 - 阿里TV开放平台文档 - php中文网手册
账号相关接口的demo在TestAccount.java里授权查询接口说明:判断用户是否授权,该接口立即返回当前授权状态.若未授权可调用登录授权接口. 前置条件:无函数原型:public s ...
java 文档比较功能_Java 12 新特性介绍，快来补一补
Java 12 早在 2019 年 3 月 19 日发布,它不是一个长久支持(LTS)版本.在这之前我们已经介绍过其他版本的新特性,如果需要可以点击下面的链接进行阅读. Switch 表达式 (JEP ...
怎么把Excel转换成Word文档？一分钟就能教会你
怎么把excel表格转换成word文档呢?大家在工作中往往会遇到各种各样的文件格式转换需求,一般的文件格式转换相信大家都找到了自己喜欢的转换方式,但是遇到比较少见的文件格式转换时,很多小伙伴就会感到束 ...
为PDF文档添加页眉页脚的方法，快来学学
PDF文档在职场上越来越流行,驾驭PDF文档的技巧也越拉越多,这其中给PDF文档添加页眉页脚的方法有些小伙伴还不清楚,今天就跟着小编一起来学习吧! 1.准备一款PDF编辑器,比如福昕PDF编辑器: 2 ...
转换文档参数_1分钟教会你将Excel转换成Word，简单高效，办公人士必备神技
现在不管是在学习上还是工作中,我们和Word文档.Excel表格的接触是越来越多了.有一些小伙伴在用Excel做完表格数据以后,有的时候会因为便于查看等等原因需要用Word打开Excel表格.这时候我 ...
python readline_16.8. readline — GNU readline 接口 — Python 2.7.18 文档
16.8.readline - GNU readline 接口¶ The readline module defines a number of functions to facilitate com ...
通联支付php7,通联支付接口疑难问题处理开发者文档.pdf
1 如何接入网关测试环境 A :技术人员在本地开发环境,加载压缩包中的程序代码: B: 找到程序代码中的 post.html,修改 merchantId.key.pickupUrl.receiveUr ...
tv端h5_H5展现接口 - 阿里TV开放平台文档 - php中文网手册
APP启动自动显示H5接口接口说明: APP启动时可自动打开推广页,需要阻塞APP,等到onWebClose的回调后再继续.数娱后台可配置有效或无效该H5页面函数原型: public static ...

后端接口没完成？只有接口文档怎么办？3分钟教会你mockjs让你快后端一整年，再也不用等后端

mockjs

开始操作

后端接口没完成？只有接口文档怎么办？3分钟教会你mockjs让你快后端一整年，再也不用等后端相关推荐

最新文章

热门文章