Taro 项目里面添加 Mock 数据

安装Mock依赖库

yarn add mocker-api mockjs --dev

比如我们想用Mock模拟用户信息以及小说列表，
我们在项目根目录新建 mock 文件夹，新建 index.js book.js

index.js

const delay = require('mocker-api/utils/delay'); // 延时 模拟请求异步问题
const mockjs = require('mockjs');
const BookData = require('./book');/**
|--------------------------------------------------
| @hasOwnProperty
| 返回一个布尔值
| 指示对象自身属性中是否具有指定的属性（也就是是否有指定的键）
|
| @trim
| 返回的是一个新的字符串
| 从一个字符串的两端删除空白字符 在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）
|--------------------------------------------------
*/const Query = (options, dataSource) => {let { current, pageSize, ...other } = options;current = current || 1;pageSize = pageSize || 10;for (let key in other) {if ({}.hasOwnProperty.call(other, key)) {dataSource = dataSource.filter(item => {if ({}.hasOwnProperty.call(item, key)) {return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1}return true})}}return { current, pageSize, dataSource }
}const data = {'GET /api/user': {data: {id: 1,username: 'kenny',sex: 6},statusCode: '200'},'GET /api/hi': (req, res) => {res.json({id: 1,//query 方法获取Get参数,如 /api/hi?name=tonyusername: req.query["name"],})},//可以直接使用mockjs生成mock数据'GET /api/mock': mockjs.mock({'list|10-100': 1,}),'GET /api/book/list': (req, res) => {const { query } = req;const { current, pageSize, dataSource } = Query(query, BookData.data.lists);res.status('200').json({data: {lists: dataSource.slice((current - 1) * pageSize, current * pageSize),pageInfo: {current: Number(current),pageSize: Number(pageSize),total: dataSource.length,maxCurrent: dataSource.length % pageSize >= 0 ? Math.ceil(dataSource.length / pageSize) : dataSource.data.length / pageSize}},statusCode: '200'})}
}
//使用delay方法可以延迟返回数据
module.exports = delay(data, 1000)

book.js

/**
|--------------------------------------------------
| @book
| Mock 数据集合
|--------------------------------------------------
*/const delay = require('mocker-api/utils/delay');
const Mock = require('mockjs');const Random = Mock.Random;const titles = Random.shuffle(["Brother's Rainbow","A Dream of Justice","A Marriage Collection","Midwife and Light","The Trophy Failure","Destiny's Cut","Rakehell's Fog","The Ragged ","Thread","The Thug Chaser","Church in the Glass","Destiny's Hero","Cat in the Underworld","Triumph of the Empire","Sapphire Raiders","The Time of War","冬天的早班飞机","我们始终没有牵手旅行","不想告别的夏天","最初的爱情","最后的仪式","十一种孤独","一部法国小说","还乡之谜","地下时光","给樱桃以性别","天使与昆虫","在路上","绿皮书","老人与海","追风筝的人","小王子","百年孤独","人类简史","时间简史","心有林夕","麦田里的守望者"
]);const images = ["http://qiniu.library-online.cn/image1.jpg","http://qiniu.library-online.cn/image10.jpeg","http://qiniu.library-online.cn/image12.jpeg","http://qiniu.library-online.cn/image13.jpeg","http://qiniu.library-online.cn/image14.jpg","http://qiniu.library-online.cn/image16.jpg","http://qiniu.library-online.cn/image17.jpg","http://qiniu.library-online.cn/image2.jpg","http://qiniu.library-online.cn/image20.png","http://qiniu.library-online.cn/image21.png","http://qiniu.library-online.cn/image22.png","http://qiniu.library-online.cn/image23.png","http://qiniu.library-online.cn/image24.png","http://qiniu.library-online.cn/image3.jpg","http://qiniu.library-online.cn/image4.jpg","http://qiniu.library-online.cn/image5.jpg","http://qiniu.library-online.cn/image6.jpeg","http://qiniu.library-online.cn/image7.jpg","http://qiniu.library-online.cn/image8.png","http://qiniu.library-online.cn/image9.jpg"
];const authors = (function () {let t = ["[哥]加西亚·马尔克斯", "[英]毛姆", "[法]圣-埃克苏佩里"];for (let i = 0; i < 10; i++) t.push(Random.name());return Random.shuffle(t);
})();const data = Mock.mock({'lists|80-100': [{id: "@increment","title|+1": titles,isbn: "@natural(9781782910284, 9981782910284)",publisher: "上海人民出版社",pubdate: "@date","author|+1": authors,translator: "@cname",binding: "精装",price: "@float(60, 100, 2, 2)",pages: "@integer(60, 100)",words: "@integer(60, 100)",tags: ["小说", "文学", "名著"],score: "@float(0, 10, 1, 1)",review_num: "@integer(60, 100)","image|+1": images,introduction:"12岁的阿富汗富家少爷阿米尔与仆人哈桑情同手足。然而，在一场风筝比赛后，发生了一件悲惨不堪的事，阿米尔为自己的懦弱感到自责和痛苦，逼走了哈桑，不久，自己也跟随父亲逃往美国。\n成年后的阿米尔始终无法原谅自己当年对哈桑的背叛。为了赎罪，阿米尔再度踏上暌违二十多年的故乡，希望能为不幸的好友尽最后一点心力，却发现一个惊天谎言，儿时的噩梦再度重演，阿米尔该如何抉择？\n故事如此残忍而又美丽，作者以温暖细腻的笔法勾勒人性的本质与救赎，读来令人荡气回肠。"}]
})module.exports = {data
}

数据创建完成以后，还有很重要的一点，要使用 node 启动本地 mock 服务，才能使用。

修改package.json文件，在scripts下新增一行：

"mock": "mocker ./mock"

打开新的 powershell 窗口输入命令

npm run mock

你会看到一下界面

> mocker ./mock
> Server Listening at Local: http://localhost:3721/
>             On Your Network: http://192.168.18.105:3721/

这说明你的mock本地服务已经开启，你可以在浏览器进行测试：
http://localhost:3721/api/user

{"id":1,"username":"kenny","sex":6}

http://localhost:3721/api/book/list

lists: [{id: 92, title: "百年孤独", isbn: 9862023825827, publisher: "上海人民出版社", pubdate: "1998-08-26",…},…]
0: {id: 92, title: "百年孤独", isbn: 9862023825827, publisher: "上海人民出版社", pubdate: "1998-08-26",…}
1: {id: 93, title: "Sapphire Raiders", isbn: 9961722412184, publisher: "上海人民出版社", pubdate: "1985-05-11",…}
2: {id: 94, title: "Thread", isbn: 9782748718675, publisher: "上海人民出版社", pubdate: "1978-03-28",…}
3: {id: 95, title: "Church in the Glass", isbn: 9947427120465, publisher: "上海人民出版社",…}
4: {id: 96, title: "最后的仪式", isbn: 9819760035833, publisher: "上海人民出版社", pubdate: "1974-05-09",…}
5: {id: 97, title: "A Marriage Collection", isbn: 9835318737981, publisher: "上海人民出版社",…}
6: {id: 98, title: "我们始终没有牵手旅行", isbn: 9894147842790, publisher: "上海人民出版社", pubdate: "1998-10-07",…}
7: {id: 99, title: "Cat in the Underworld", isbn: 9966908076203, publisher: "上海人民出版社",…}
8: {id: 100, title: "冬天的早班飞机", isbn: 9884402184420, publisher: "上海人民出版社", pubdate: "2006-05-16",…}
9: {id: 101, title: "人类简史", isbn: 9794492166636, publisher: "上海人民出版社", pubdate: "1986-07-19",…}

接下来我们就可以愉快的进行自己项目开发了。

我用 Mock 和 Taro 一起开发的，代码已经上传 git代码仓库.

关于更多信息请自行参考 Taro开发文档和 Mock 开发文档自行研究。

Taro 项目里面添加 Mock 数据相关推荐

Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
vue项目 mock数据
一.mock文件 1.安装mock开发环境 npm i mockjs -D 2.在src目录下新建mock目录,结构如下: 3.json数据格式,即userInfo.json内容如下: {" ...
在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js.vue中拦截ajax的方法,介绍是必看的,也是一些基础 mockjs介绍总结 mockjs拦截ajax 在vue项目中使用mock拦截axios请求这一篇 ...
IntelliJ IDEA 如何知道项目中的模块数据_如何从项目源中选择模块加入当前项目中（添加模块）_如何移除项目中的模块（移除模块/删除模块）
文章目录 IDEA 如何获取项目的模块数据从项目源中选择模块加入当前项目中如何移除项目中的模块方式一,选择模块的根目录(Content Root),鼠标右键 Remove 方式二,打开[项目结构 ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
关于vue-cli创建项目（小白）(2)mock数据
mock数据,好处,前后端分离,不用等后端的真实接口,就可以用axios(ek sju s 好像这么读,原谅本人总是根据读音写单词)请求数据了. 一,安装所需插件根据不同需求选择安装环境,mockj ...
vue前端用服务器上路径的图片展示_5分钟教你用nodeJS手写一个mock数据服务器
对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码,启动web服务器),因此本文所要描述的 ...
antd pro中如何使用mock数据以及调用接口
antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步在dva中主要分为3层 services models components models层用于存放数据 ...

Taro 项目里面添加 Mock 数据

安装Mock依赖库

Taro 项目里面添加 Mock 数据相关推荐

最新文章

热门文章