MockJs结合json-server模拟后台数据


Posted in Javascript onAugust 26, 2020

本文实例为大家分享了MockJs结合json-server模拟后台数据的具体代码,供大家参考,具体内容如下

说明

Mock.js 是一款模拟数据生成器,可以根据模板生成数据、模拟网络请求,返回模拟数据等
更多细节参考

官网
示例

1. 安装

下载

mkdir moke-test
cd moke-test
npm init
sudo npm install --save-dev json-server mockjs ip
mkdir server #创建本地服务文件夹

2. 配置 json-server

moke-test/server 下创建 index.js

// index.js
const path = require('path');
const jsonServer = require('json-server');
const ip = require('ip').address();
const DB = require('./db.js');
const server = jsonServer.create();
const router = jsonServer.router(DB()); // 将所创建的数据对象传入,以之生成相应的路由
const middlewares = jsonServer.defaults();

 server.use(jsonServer.bodyParser);
 server.use(middlewares);

 server.use(router);

 server.listen({
 host: ip,
 port: 3122
 }, function() {
 console.log(`JSON Server is running in http://${ip}:3122`);
 });

在相同目录下(moke-test/server)下创建 db.js 文件用于通过 mockjs 生成数据

// mock.js
 const Mock = require('mockjs');
 const Random = Mock.Random;

 module.exports = function () {
 const data = Mock.mock({
  'id|+1': 0
 });

 return {data};
 }

3. 使用 mockjs 动态生成假数据

生成假数据有两种方式

数据模板定义
数据占位符定义

1. 数据模板定义

基本结构如下,详情可以查看官网

Mock.mock({
 'name|rule': value
 })
 /*
 name: 属性名
 rule: 生成规则
 value: 属性值
 */

2. 数据占位符定义

占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中

1)、用 @ 来标识其后的字符串是占位符,占位符之间空格隔开
2)、占位符是 Mock.Random 中的方法
3)、使用 Mock.Random.extend() 扩展占位符
4)、占位符 也可以引用 数据模板 中的属性,并且优先使用。

Mock.mock({
 'list|5': [{
  first: '@FIRST', // 可以是大写的
 }]
 })

3. Mock.Random 工具类详解

// mock.js
 const Mock = require('mockjs');
 const Random = Mock.Random;

 module.exports = function () {
 // Random.extend 用于自定义扩展 
  Random.extend({
  courses: ['音乐课', '舞蹈课', '地理课'],
  course: function(date){
  return this.pick(this.courses)
  }
 });

 const courses = Mock.mock({
  startClass: '@bool', // 布尔值,可以传入参数设置频率
  token: '@string("upper", 2, 8)', // 随机字符串
  createData: '@datetime("yyyy-MM-dd A HH:mm:ss")', // 返回日期
  image: '@image("200x100")', // 模拟图片 'x'链接 
  manager: '@cname', // 中文名
  'partners|3': [
  '@name' // 英文名
  ], 
  website: '@url',
  email: '@email',
  'password|2': '**', // 数据模板下,值为字符串表示按照规则重复字符串
  'contents|1-20': [{ // 数据模板下,值为数组或者对象 rule 部分都规定了显示的元素数量
  'id|+1': 0, // 数据模板下,值为数值表示初始值或者底数(按招规则细分)
  courseType: '@COURSE ', // 使用扩展
  courseName() { // 值可以是一个函数,用来细致模拟数据
   return this.courseType + ' ' + Random.natural(1, 10) + '班'
  },
  name: '@courseType @natural(1, 10) 班', // 可以同时使用多个占位符,用空格隔开
  'teacher': '@cname',
  position: '@courseType 第 @id 教室', // 引用当前数据模板中的内容
  students: /\d{5,10}/, // 使用正则规定数据格式
  classTime: '@datetime("M月d日起 每周三 HH:mm")'
  }]
 })

 return {courses};
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
Js 本页面传值实现代码
May 17 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 #Javascript
mock.js模拟前后台交互
Jul 25 #Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 #Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 #Javascript
vue使用代理解决请求跨域问题详解
Jul 24 #Javascript
Vue父组件如何获取子组件中的变量
Jul 24 #Javascript
mock.js模拟数据实现前后端分离
Jul 24 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
XAMPP安装与使用方法详细解析
2013/11/27 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
JS实现商品倒计时实现代码
2013/05/03 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
django和vue实现数据交互的方法
2019/08/21 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
学校元旦晚会方案
2014/02/19 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
婚礼新人答谢词
2015/01/04 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
MySQL导致索引失效的几种情况
2022/06/25 MySQL