vue 中mock.js基本使用
1.安装
npm install mockjs
2.使用
新建src/mock/index.js
import Mock from "mockjs";
const baseUrl = "http://localhost:8080";
Mock.mock(`${baseUrl}/login`, "get", data => {
let info = JSON.parse(data.body);
if (info)
return {
code_state: true
};
});
main.js
import './mock/index'
相关参考
import Mock from "mockjs"
Mock.mock("/api/goodslist", "get", {
status: 200,
message: "获取商品列表成功",
"data|3-10": [
// data|n-m 随机生成 多少个
{
"id|+1": 2, // 模拟自增+1
id: "@increment(1)", // 自增的数字
name: "@cname()", // 中文名称
cword: "@cword(2,5)", // 中文字
price: "@natural(10,100)", // 整数
img: "@dataImage(64x64)" // 图片
}
]
})
// 为什么有两个Mock.mock() 因为外层Mock 是请求api的,里面Mock生成数据的
Mock.mock("/api/addgoods", "post", function(option) {
console.log(option)
return Mock.mock({
status: 200,
message: "@word(2,5)"
})
})
Mock.mock(/\/api\/getgoods\//, "get", function(option) {
const arr = /\/api\/getgoods\/(\d+)/.exec(option.url)
console.log("arr", arr)
return Mock.mock({
status: 200,
message: "获取商品列表成功",
data: {
id: arr[1] - 0,
name: "@fruit()",
price: 6,
count: "@increment(1,10)",
img: "@dataImage(64x64)"
}
})
})
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
// Mock.mock( url, post/get , 返回的数据);
Mock.mock('/news/index', 'post', produceNewsData);