1、先安装mockjs插件,参考mock.js安装流程
2、建一个mock.js模拟数据
// 引入mock.js
const Mock = require('mockjs')
// 获取mock.Random 对象
const Random = Mock.Random
// 模拟数据,包括标题、内容、创建时间
const data = function() {
let dataList = []
for (let i = 0; i < 20; i++) {
let dataObject = {
title: Random.ctitle(), //Random.ctitle(min,max) 随机产生一个中文标题,长度默认在3-7之间
content: Random.cparagraph(), //Random.cparagraph(min,max) 随机生成一个中文段落,段落里句子个数默认3-7个
createdTime: Random.date(), //Random.date() 指定生成的日期字符串格式
img: Random.image(), // 生成默认图片
username: Random.cname() //生成默认名字
}
dataList.push(dataObject)
}
return dataList
}
// 请求该url,就可以返回dataList
Mock.mock('http://localhost:8080/mock/index', data)
3、把mock.js引入到main.js中
import './utils/mock'
4、新建请求模拟数据方法:/mock/mockServer
import axios from "axios";
// 请求模拟数据
export const reqMockData = () => axios.get('http://localhost:8080/mock/index')
5、Index.vue中输出数据
import { reqMockData } from "../mock/mockServer"; //引入模拟数据
export default {
mounted() {
reqMockData().then(res => {
console.log(res);
});
}
};
vue项目生产环境中使用mock数据(mockjs和vite-plugin-mock)
上面是“mock.js用法实例”的全面内容,想了解更多关于 mockjs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2086.html
workflows工作流
一座生动的点彩主义灯塔ComfyUI工作流
完整海报生成comfyui工作流
一只被水晶包围的小动物ComfyUI工作流
一辆停在混凝土墙前运动型SUV捷豹概念车
一个女人站在海边的岩石上,飞来一只鸟
一只可爱的草莓味冰淇淋卷筒
城市里出现一只可爱的小生物ComfyUI工作流
一个美丽的女孩穿着花瓣做的衣服
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

利用CSS3代码编写45款按钮效果
SVG路径动画效果
用ascii字符画图像
纯css制作卡通头像(随鼠标转头)
3d文字360度旋转
用canvas实现画板涂鸦效果
数字滚动效果(兼容IE6/IE8)
制作一个好玩的倒计时










