html调后台接口_前后端分离之让前端开发脱离接口束缚(mock)
2、mock.js
3、gulp-mock-server
方法一:mockjax.js和mockJSON.js
简介:mockjax.js和mockJSON.js都是基于jQuery开发的JavaScript Library;
mockjax主要是可以针对指定的网址进行mock, 当Ajax呼叫网址时拦截并回传假的数据,
mockJSON则是根据我们指定的格式随机数生成回传的Json资料.使用方法:mockjax具体参数和进阶的使用方式可以看官方github https://github.com/jakerella/jquery-mockjax。
var isAjaxMocked = true;
if (isAjaxMocked) {
var one = $.mockjax({
url: 'Api/index/siteInfo', url可以通过正则进行匹配
data: { data用于请求同一接口时,传递的参数不同而返回不同的数据,注:需写多个mockjax
type: 'cook'
},
status: 200, 请求状态
responseTime: 750, 请求时间
responseText: { "user": [{ "id": "1", "name": "david", "birthday": "2001/01/26" }] } 返回数据,此处就可以使用mockJSON来快速创建批量的数据
使用mockJSON创建批量数据的书写方式:
responseText: $.mockJSON.generateFromTemplate({
"user|3-6": [{ 随机3-6个
"id|+1": 1, +1递增
"name": "@MALE_FIRST_NAME", 随机姓名
"birthday": "@DATE_YYYY/@DATE_MM/@DATE_DD" 随机日期
}]
})
});
}
$.mockjax.clear(one); clear方法用于关闭某个mockjax实现
$.get('/Api/index/siteInfo', {type: 'cook'}, function(callback) {
$('.wrap').html(JSON.stringify(callback));
console.log(callback)
})
mockJSON的生成模板规则见 https://github.com/mennovanslooten/mockJSON 这个需要clone下来,看他的index.html,github上没介绍;
方法二、mock.js (相当于方法一的整合版) 推荐使用!
官方地址:http://mockjs.com/#mock简介:mock.js结合了mockjax.js和mockJSON.js,适用于jquery、nodejs、angularjs,有完善的API文档和维护,适用性强用法:简单是试用了jquery下的使用,跟方法一的用法类似,其他环境下没使用过也不好说啥,具体使用方法和介绍可以查看官网或则《使用Mock.js进行独立于后端的前端开发》 https://segmentfault.com/a/1190000003087224 这篇文章;优点:中文API学习方便,适用环境多,mockjson生成方便,多种随机模型,JSON数据修改能马上能应用;缺点:需手动书写多个Mock.mock(几个接口书写几个,相同的除外),对于维护某个特定接口时不易查找;
方法三、gulp-mock-server
简介:github https://github.com/sanyueyu/gulp-mock-server通过使用gulp-mock-server构建本地服务,并拦截AJAX请求,指向定义好的文件目录中(默认是根目录的data文件夹),目录中存放好相同目录结构的json文件,当发起请求时会自动转向指定的文件,获得mockjson;用法:安装node、npm、gulp、gulp-mock-server这些就不细讲了,说下gulpfile.js配置;
var gulp = require('gulp'),
mockserver = require('gulp-mock-server');
gulp.task('mock', function() {
gulp.src('.')
.pipe(mockserver({
host: 'localhost',
path: '/',
open: 'http://localhost:8090/index.html',
port: 8090, 端口号
allowCrossOrigin : true 跨域
}));
})
更多参数请查看 https://github.com/sanyueyu/gulp-mock-server
文件结构:
$.get('/index/siteInfo', function(callback) { url对应了data文件下的目录;
$('.wrap').html(JSON.stringify(callback));
console.log(callback)
})
$.get('/test', function(callback) {
$('.wrap').html(JSON.stringify(callback));
console.log(callback)
})
优缺点:
1、优点:项目中只要启动服务,不需要在代码中引入相关的js文件,接口数据按文件结构分类,方便管理;
2、缺点:①json文件整理,归类繁杂,mockdata生成不方便; ②更新json文件后,需要重启服务才能得到更新;结合以上三种方式的mock,个人比较推荐使用mock.js,如果能根据接口文档自动生成需要的mockdata那就最好了。本文完〜
html调后台接口_前后端分离之让前端开发脱离接口束缚(mock)相关推荐
- vue 回车查询 按钮_前后端分离商城,前端基于Vue后端nodejs包含小程序源码免费分享...
先转发,然后加关注,私信"购物"即可获取源码下载链接 项目简介 本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现 ...
- 你需要来自trustedinstaller的权限才能删除_前后端分离后的权限控制设计方案
近几年随着react.angular.vue等前端框架兴起,前后端分离的架构迅速流行.但同时权限控制也带来了问题.网上很多前.后端分离权限仅仅都仅仅在描述前端权限控制.且是较简单.固定的角色场景,满足 ...
- 原创 - 前后端分离,以及前端的一些操作
前后端分离 可以让我们的代码变得更加清晰以及效率变高 这个概念已经很早就出现了,只不过最近几年才使用的比较普遍了, 作为一名前端开发人员,我们应该尝试一些新颖的技术,完善每一个细节性的问题,不断突破自 ...
- 前后端分离后的前端时代 1
本文从前端开发的视角,聊一聊前后端分离之后的前端开发的那些事儿.阅读全文,大约需要8分钟. 什么是前后端分离 除了前端之外都属于后端了. 你负责貌美如花,我负责赚钱养家 在传统的像ASP,JSP和PH ...
- vue后端必须接口吗_前后端分离模式,后端说开发完才能给接口文档,合理吗
背景: 汇总了下老王在其他平台的原创回复,欢迎关注老王原创公众号[软件老王],关注不迷路. 一.后端开发完接口才给出接口文档,合理吗? 本人所在的项目组做项目过程中,后端不会先给出接口文档,而是要等他 ...
- python后端开发的缺点_前后端分离优缺点
前后端分离优缺点 之前有朋友问我:什么是前后端分离.他说北度搜到的都是大篇幅文章,看完还是很懵. 这里我简单总结下,如果有疏漏和不对的地方还请路过的网友指出. 一.先用一张图来解释 二.为什么要前后端 ...
- 基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台、多租户
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台.多租户.支持MySQL/SQLServer/ ...
- 使用layuimini模块快速开发java后台系统模板(前后端分离)
使用layuimini模块快速开发后台系统模板(前后端分离) 下面已仓库管理系统为例(下面源码可自己下载来看) 1.登录界面login.html 下面的验证码使用的是Hutool 来实现的(Hutoo ...
- java前后端分离的实现方式_采用前后端分离的方式进行开发,实现了几种常用的文件上传功能...
MyUploader-Backend 单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传 简介 采用前后端分离的方式进行开发,实现了几种常用的文件上传功能. 前端采用 vue.js + ...
最新文章
- 基于NB-IoT的智慧路灯监控系统(NB-IoT专栏—实战篇1:项目简介)
- 寒冬之下,做好这六点
- unity如何停止不用字符串方式开启协程的方法
- 我的C语言可变参数的实现
- 给你这张图,你能搜索到来历吗
- python调用系统_python 执行系统命令
- 2020年视频号发展白皮书
- C++程序代码:类实现——【calculator】计算器程序设计
- linux 命令行域名的解析(DNS) —— dig、host
- 谷歌Chrome浏览器开发者工具教程—JS调试篇
- 知识回顾之一:WEB编程语言发展回顾...
- 第七次人口普查数据新鲜出炉,有哪些信息值得关注?
- win10专业版开机画面模糊_新买电脑看起来有点糊?一招教你解决Win10屏幕模糊问题...
- WPS论文编写问题集(参考文献制作、公式居中及编号、公式影响行间距...)_长期更新中ing...
- 筑牢梅雨季用电“安全网”
- 【Dart语言第5篇】运算符
- phpstorm 配置自动编译 less
- Flutter 添加页面渲染完毕回调
- matlab中在同一图形窗口中绘制出一个周期内的正弦曲线和余弦曲线,多选(3分) 在一个图形窗口同时绘制[0,2π]的正弦曲线、余弦曲线,可以使用命令( )。...
- Vue2Editor 中文API
热门文章
- python代码获取今天、昨天、明天的日期
- python代码计算图像的分辨率
- 自然语言处理NLP、自然语言理解NLU、自然语言生成NLG、任务家族
- R语言数据结构之数据框
- Iterative error correction of long sequencing reads maximizes accuracy and improves contig assembly
- 测序技术有4个指标:读长、成本、准确度、通量
- python3和Python2的区别
- 【ES6】正则表达式的拓展
- 数学知识--Methods for Non-Linear Least Squares Problems(第一章)
- GitHub-jekyll静态博客快速构建与优化--jekyll serve --incremental --profile