mock.js 生成后端api数据

上面几个文章里面学习了一些vue的基础。后面的文章我们将会学到vue中进行ajax获取远程数据
在前后端分离开发方式中，如果后端api不能够及时上线，我们就不能进行请求


image.png

这时我们可以使用mock.js生成一段数据（而且上线后api地址不需要更改）并且前端可以进行拦截，这时前端开发就不用写成ip端口形式的接口地址了


image.png

之前几个章节里我们使用的都是script方式直接引入vue的核心脚本文件
实际开发时我们都会使用commonjs方式进行开发
下面演示下安装mockjs

首先创建一个文件夹


image.png

cd命令 进入这个文件夹
image.png

输入npm init
一路回车
安装mock
npm install mockjs
用webStorm打开这个文件夹
创建一个index.js文件
下面演示下创建一个商品数据
image.png

index.js写入如下


image.png

package.json中写入
image.png

表示使用node来运行index.js
接着在cmd窗口中执行
输入npm run mock
运行结果
image.png

连续输出3遍string类型数据
我们生成的api数据一般都是一个数组里面包含若干个对象
接下来看下如何生成一个数组
image.png

运行结果
image.png

可以看见一个大的对象 key是booklist值是一个数组 循环了5遍
下面演示下输出图书id
image.png

运行结果
image.png

其中booklist为名字 book_id相当于字段 后面的+1表示自增
image.png

@title表示生成随机字符串
如果想生成中文书名

则用@ctitle表示chinese


image.png

运行结果
image.png

显示图书对象其他元素（需求）
image.png

image.png

其中"book_price|50-100.1-2":0
50-100表示价格在50-100之间 .1-2表示小数1-2位 后面的0可以是任意数字 表示类型为数字而不是字符串
还剩下一个出版社字段
假设这个很重要 在实际开发时是需要进行选择出版社的
那就会在代码里面写入一些已经存在的出版社 然后去选
如下
image.png

其中"book_press|1":presslist表示从presslist数组中随机选取一个
运行效果
image.png

出版时间字段
image.png

@date('yyyy-mm-dd') 年月日
运行效果
image.png

以上就是使用mockjs生成一段api数据
实际开发时 还可能会生成一些新闻api 或者用户api
所以可以根据需求输出具体的数据
image.png

还可能是输出data["userlist"]等等
运行效果
image.png

后面我们会在vue中使用ajax操作 并结合mockjs生成api数据
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容