MOCK随机生成json数据

vue—json-server+mock模拟数据

我们在写好前端页面时，往往有些时候没有数据，这时候我们可以借助，mock随机生成数据，帮助我们快速的测试功能

一、前期准备工作

首先我们需要安装

node.js

这俩的安装 请参照其他文章

二、mock.js安装

mock 用于随机生成数据

官方地址：http://mockjs.com/

里面有具体的示例

这里采用npm安装

npm install mockjs --save

三、json-server安装

json-server的作用快速建立一个接口，以供请求

npm i  json-server 

四、生成随机json数据

在vue中新建muck文件夹，并新建俩个json文件

在testMock.js中引入mock.js

注意这里采用的是node.js的格式

根据mock官方文档写你需要随机生成的文件

const Mock = require('mockjs') // 引入mockjs
 
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
 
let data = [] // 用于接受生成数据的数组

for(let i = 0; i < 30; i ++) { // 可自定义生成的个数
  let template = {
    //随机生成1-12的整数
    'month':Random.integer(1,12),
    // 'nationKey':'',
     //随机生成省份
    'nationName':Random.province(),
    // 'peopleKey':'',
     //随机生成中文名
    'peopleName':Random.cname(),
   	   'totalConsumption':Random.integer(10000,100000000),
    'year':2021
  }
   //将json数据加入数组中
  data.push(template)
}
let one = Mock.mock(data) // 根据数据模板生成模拟数据
let newarry = JSON.stringify(one)
                      
//利用写入文件
 const fs =require('fs')
const path =require('path')
let dir = path.join(__dirname,'data2.json')//这里写你要存入哪个文件的路径
fs.writeFile(dir,newarry,'utf8',(err)=>{
    console.log("写入成功"+err);
})
console.log(one);

执行node testMock.js

数据就出来了，我们看我们的data.js文件

格式化文档一下

五、启动json-server服务开启端口

json-server --watch --port 7777 data.json

watch：是让端口一直开启

port：开启的端口号是多少

这里需要注意一下 json-server 必须要是一个object对象才能开启

在文件前添加 {“name”

文件结尾添加 }

启动服务