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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
js 颜色选择插件
Jan 23 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
javascript实现留言板功能
Feb 08 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
2.PHP入门
2006/10/09 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
PageFactory设计模式基于python实现
2020/04/14 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
什么是聚集索引和非聚集索引
2012/01/17 面试题
大学生职业生涯规划方案
2014/01/03 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python