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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
smarty中post用法实例
2014/11/28 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python读取csv文件实例解析
2019/12/30 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python中的整除和取模实例
2020/06/03 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
采购主管工作职责
2013/12/12 职场文书
小学教师培训感言
2014/02/11 职场文书
小学端午节活动方案
2014/03/13 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
预防传染病方案
2014/06/14 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
党支部三会一课计划
2014/09/24 职场文书
关于颐和园的导游词
2015/01/30 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
python b站视频下载的五种版本
2021/05/27 Python
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技