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 相关文章推荐
jQuery之自动完成组件的深入解析
Jun 19 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python 算法 排序实现快速排序
2012/06/05 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python中的字符串替换操作示例
2016/06/27 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python爬虫可以爬什么
2020/06/16 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
会计应聘求职信范文
2013/12/17 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL