学习使用|学习使用 json-server 和 mockjs 学习使用json-server和mockjs

文章图片
mockjs官网
前言： json-server 类似数据库富查询的接口。 mockjs 生成数据。
一、mockjs 生成数据首先安装： mock.js

npm install --save mockjs

在创建一个 app.js 文件。我们只需要用 node 运行这个文件就行了。文件内容如下：

// 使用 Mock const Mock = require('mockjs'); // 使用Random这个api var random = Mock.Random; // 随机生成一个中国人的名字 console.log(random.cname());

node app.js 运行程序：

C:\Users\Administrator\Desktop\mock_makedata>node app.js 谢娜

这样就可以编程拿到我们平时写程序需要访问的数据库了。

// 使用 Mock const Mock = require('mockjs'); // 引入node内置的文件系统 const fs = require('fs'); // 使用Random这个api var random = Mock.Random; var arr = []; for(let i = 0; i < 100; i++){ // 随机56个民族 let national = random.pick(["汉族","蒙古族","回族","藏族","维吾尔族","苗族","彝族","壮族","布依族","朝鲜族","满族","侗族","瑶族","白族","土家族","哈尼族","哈萨克族","傣族","黎族","僳僳族","佤族","畲族","高山族","拉祜族","水族","东乡族","纳西族","景颇族","柯尔克孜族","土族","达斡尔族","仫佬族","羌族","布朗族","撒拉族","毛南族","仡佬族","锡伯族","阿昌族","普米族","塔吉克族","怒族","乌孜别克族","俄罗斯族","鄂温克族","德昂族","保安族","裕固族","京族","塔塔尔族","独龙族","鄂伦春族","赫哲族","门巴族","珞巴族","基诺族"]); // 随机中文名字 let name = random.cname(); // 随机一种颜色作为前景色 let c1 = random.color(); // 随机一种颜色作为背景色 let c2 = random.color(); // 随机一个图片 let avatar = random.image( "100x100", c1 , c2 , name); // 是否是团员 let member = random.pick(["是","否"]); // 随机年龄的取值范围 let age = random.integer(18,28); // 随机省份 let province = random.province(); // 随机出身份证号码 let idcare = random.id(); // 随机出性别 let sex = random.pick(["男","女"]); // 随机出受教育程度 let education = random.pick(["初中","高中","大专","本科","研究生"]); // 数据放入数组arr arr.push({ "id" : i, name, age, province, idcare, sex, education, national, avatar, member}) }; // 文件写入 fs.writeFile("./db.json",JSON.stringify({"students":arr}),function(){ console.log("一百条信息录入成功！"); }); //还可以加入 // member团员 // blood 血型 // constellation星座 //学号等等

运行程序成功，我们会把一百条生成的数据写入 db.json 文件里面。mockjs 的API 不多，其中最重要的就是Mock.Random，来熟悉一下它的用法：

random.boolean() 百分之五十的几率返回 true 或 false
random.boolean( 1, 9, true ) 表示有 1/(1+9) 的概率出现 true。
random.natural() 返回一个随机的自然数（大于等于 0 的整数），十六位的整数。
random.natural( min, max ) 指定范围
random.integer() 返回一个随机的整数，可正可负。
random.integer( min, max )指定返回整数的范围
random.float() 返回随机的浮点数
Random.float( min, max, dmin, dmax ) dmin小数部分位数的最小值。默认值为 0。dmax 小数部分位数的最大值。默认值为 17。
random.character() 返回一个随机字符。
random.character( pool )
pool 字符串。表示字符池，将从中选择一个字符返回。

如果传入了 'lower' 或 'upper'、'number'、'symbol'，表示从内置的字符池从选取：

{ lower: "abcdefghijklmnopqrstuvwxyz", upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", number: "0123456789", symbol: "!@#$%^&*()[]" }

如果未传入该参数，则从 lower + upper + number + symbol 中随机选取一个字符返回。

Random.character() // => "P" Random.character('lower') // => "y" Random.character('upper') // => "X" Random.character('number') // => "1" Random.character('symbol') // => "&" Random.character('aeiou') // => "u"

random.range 返回一个整型数组 random.range( start, stop, step ) 必填 start 数组中整数的起始值。``stop 可选，数组中整数的结束值（不包含在返回值中）。step，可选数组中整数之间的步长。默认值为 1。
日期与时间

random.date("yyyy年MM月dd日")//1985年10月29日 random.date()//2002-01-12 console.log(random.time("yyyy-MM-dd A HH:mm:ss")) //1998-08-02 PM 12:05:36 console.log(random.time("yyyy-MM-dd HH:mm:ss")) //1970-02-28 17:34:01 console.log(random.time())//12:38:48

生成一个随机的图片地址，生成的网址可进行访问。

// console.log(random.image( size, background, foreground, format, text )); //size图片大小，可为一个数组。//background背景色foreground前景色format图片格式默认.png，text 图片上的文字 console.log(random.image( '240x240', '#f46', "#cfc", ".png", "avatar" )); //dataImage 生成 base64 格式的图片 random.dataImage( size, text )

随机颜色值

random.hex() 随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。 random.rgb() random.rgba()

随机文本
随机姓名

random.clast() 随机生成一个常见的中文姓。 random.cfirst() 随机生成一个常见的中文名。 random.cname() 随机生成一个常见的中文姓名。全部去掉 c 就是英文格式的

random.email 随机生成一个邮件地址。
random.id 随机生成一个 IP 地址
随机地址

随机生成一个（中国）大区。 Random.region() // => "华北" Random.province() 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。 Random.province() // => "黑龙江省" Random.city() // => "唐山市" Random.city(true) // => "福建省漳州市"

random.pick( arr )

random.pick( arr ) 从数组中随机选取一个元素，并返回。

二、json-server 挂载服务器首先全局安装：json-server

npm install -g json-server

直接运行使用 mockjs 生成的文件 db.json。

json-server --watch db.json

如果想自定义端口号，加个 --port 就例如：json-server --watch db.json --port 3
得到如下结果：

C:\Users\Administrator\Desktop\mock_makedata>json-server --watch db.json\{^_^}/ hi!Loading db.json DoneResources http://localhost:3000/studentsHome http://localhost:3000Type s + enter at any time to create a snapshot of the database Watching...

按提示的要求打开 http://localhost:3000/students 就会得到一个大 json。
更为牛 XX 的是，json-server 自带富查询。简单介绍下使用：
如果运行成功直接访问 http://localhost:3000/ 会看到官网自定义的页面：

文章图片

我们的数据在 students ，所以直接访问 http://localhost:3000/students 一共是我们上面用 mockjs 生成的全部数据，如果还有其他的数据表那么就只需要提花端口号后面的数据。
最简单的富查询和我们通常认识的 GET 请求接口是差不多的。

http://localhost:3000/students?id=99 ：students 里面所有 id=99 的
http://localhost:3000/students?_page=1 ：students 的第一页默认显示十条数据
http://localhost:3000/students?_page=1&_limit=10 ：students 的第一页且（&）限制为十条。如果查询的是http://localhost:3000/students?age=18&age=19 &前后查询的字段一致那么 & 就是或的意思了。
http://localhost:3000/students?_sort=age&_order=asc ：students 里面的字段 age ，进行正序排列（asc）倒叙（desc）。如果多个可http://localhost:3000/students?_sort=age,id&_order=asc,desc
http://localhost:3000/students?_start=20&_end=30 从第二十条截取到第三十条。其中_end 可以用 _limit 代替。注意的是：使用 _start 和 _end 或者 _limit (response中会包含 X-Total-Count)。
http://localhost:3000/students?q=女 查询所有的女生。
http://localhost:3000/students?age_gte=19&age_lte=20 查询所有年龄大于 19 且小于 20 的人。