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数据