mockjs,json-server一起搭建前端通用的数据模拟框架教程


Posted in Javascript onDecember 18, 2017

无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的。本篇文章就是基于此原因而产出的。希望对有这方面的需求的同志有所帮助。

一、使用的组件包

1. mockjs:用于模拟查询结果

2. json-server:搭建模拟服务器,以及模拟CRUD的相关操作接口

二、具体的实现1. 建立项目,并安装相应的依赖

cnpm install --save-dev mockjs json-server

上述命令为安装依赖,下图为项目结果:

mockjs,json-server一起搭建前端通用的数据模拟框架教程

说明:

data:此文件夹存放的为利用mockjs模拟的查询结果,dataProvider后面单独简单

lib:包含的一个jquery文件,用于模拟ajax请求用

route:json-server的路由表,用于模拟crud操作用,没搞清楚如何实现多个db.json

index.js:模拟服务器入口文件

test.html:测试cors

2. 搭建基础的json-server服务器

var JsonServer = require('json-server');
var path = require('path')

var Server = JsonServer.create();
var defaultMid = JsonServer.defaults({
 "noCors": false,
 "static": path.join(__dirname, "/lib")
});

var router = JsonServer.router(path.join(__dirname, '/route/db.json'));

Server.use(defaultMid);
Server.use(router);
Server.listen(8009);
console.log('start 8009.....');

此部分内容完全按照json-server的官方说明编写,值得注意的是static和noCors的设置,他是作为一个中间件来完成的。

3. 增加mockjs的应用

在这里mockjs只作为参生数据的基石,而dataProvider.js却提供了统一外部访问接口的能力。也就是把模拟数据以module(相当于mvc中的controller)和func(相当于mvc中的action)来进行分隔。不知这种实现是否可行(本人现在项目中暂时是这样使用的。)

3.1 首先,在data文件夹中建立emp.js文件,编写了如下内容:

 

var mockjs = require('mockjs');

module.exports = {
 list: function(){ 
 var data = mockjs.mock({
 'list|3':[
 {
  'id|+1':1
 }
 ]
 });
 return data.list;
 }
}

 此处就是对mockjs的使用

3.2 dataProvider使用实现模块的收集

var emp = require('./emp');

var moduels = {
 emp: emp
}

module.exports = {
 execute: function(m, f, args){
 return moduels[m][f].call(moduels[m], args);
 }
}

 3.3 json中增加get方法,用于获取数据

var provider = require('./data/dataProvider');

Server.get('/data',function(req,res){
 var moduleName = req.body ? req.body.moduleName : req.query.moduleName;
 var funName = req.body ? req.body.funName : req.query.funName;
 var arg = null;
 res.json(provider.execute(moduleName, funName));
 res.end();
});

如果要访问emp下的List,则地址为:http://localhost:8009/data?moduleName=emp&funName=list

4. 总结

1. json-server的db.json文件只能有一个,这里可以配置多个数据实体,他是以get为获取,post为写入http协议来实现数据的CRUD的

看到这里,你是否有感觉到搭建一个数据模拟服务器如此简单,当然只是webapi的。下载示例代码

以上这篇mockjs,json-server一起搭建前端通用的数据模拟框架教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 #Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 #Javascript
分析JavaScript数组操作难点
Dec 18 #Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 #Javascript
JavaScript模块详解
Dec 18 #Javascript
webpack打包js文件及部署的实现方法
Dec 18 #Javascript
react+redux的升级版todoList的实现
Dec 18 #Javascript
You might like
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php实现读取内存顺序号
2015/03/29 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python 实时遍历日志文件
2016/04/12 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Django 拆分model和view的实现方法
2019/08/16 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
经典婚礼主持开场白
2014/03/13 职场文书
内科护士节演讲稿
2014/09/11 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书