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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
深入PHP curl参数的详解
2013/06/17 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
VueRouter导航守卫用法详解
2017/12/25 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
关于JS解构的5种有趣用法
2019/09/05 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python网络编程 Python套接字编程
2017/09/13 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
机械设计制造专业个人求职信
2013/09/25 职场文书
网络工程师职业规划
2014/02/10 职场文书
排查整治工作方案
2014/06/09 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
丧事答谢词
2015/01/05 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书