mock.js模拟数据实现前后端分离
众所周知，在日常开发中，前后端分离是最常见的开发模式，前端完成页面渲染，后端提供接口数据。
但是起初项目刚开始，后端还没有写好接口数据，前端要构建页面，还得考虑结构以及后期真实数据的问题。
所以前后端统一接口数据和格式是必要的。
而当统一好接口数据和格式后，前端就可以通过mock.js来模拟对应格式的数据，以此来完成页面的搭建，当后端完成接口和数据后，因为前期数据格式都是规范好的，所以只要去除掉mock.js那部分即可，而不需要再更改界面。
那么说了这么多，mock.js到底是什么？
根据官网简单的解释来说，就是：拦截ajax请求，模拟返回自定义格式的数据，实现前后端分离。
说的这么厉害，那么我们来看看具体用法。
这次先看看在原生中怎么使用，下次介绍在vue中的使用。
普通不涉及框架的项目中安装mock.js推荐使用bower安装：
npm install bower -g
bower install mockjs --save
具体使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mock js-demo1</title>
</head>
<body>
</body>
</html>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/ajax.js"></script>
<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
<script>
Mock.mock('http://api.com', {
'users|5': [ {
'name': '@cname', //中文名称
'age|1-100': 100, //100以内随机整数
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(true)' //中国城市
}]
});
// //JQuery方式
$.ajax({
url: 'http://api.com',
dataType: 'json'
}).done(function (data, status, xhr) {
console.log(
JSON.stringify(data, null, 4)
)
});
//原生ajax方式
function ajax(method, url, params, isAsync) {
//创建对象
xhr = new XMLHttpRequest();
//设置请求参数
xhr.open(method, url, isAsync);
//回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
//发送请求
xhr.send();
}
ajax('get','http://api.com','', true);
</script>
这里我引入了通过bower下载的mock.js，然后给mockjs给定一个请求地址（如果有可以给定真实地址，没有可以写个假地址，只要和ajax请求地址一致即可），然后在mock的第二个参数中定义了数据格式，是个随机五位的数组对象，包括姓名、年龄、生日、地址
然后通过ajax正常请求地址，然后返回值就会收到mock.js的拦截，而返回我们自定义格式的数据，而不是后端数据
这样在项目初期，后端没有数据的情况下，我们就可以通过模拟数据完成页面功能的开发。
当后端数据完成后，我们只要删除mock.js部分即可（如果前期接口地址是假的，改一下接口地址即可）
这里推荐把mock.js部分抽离到公共的文件中，引入即可，这样后期可维护性强，只要不引入mock部分即可，而不用来回删代码。
返回数据效果：
具体的请求格式官网写的很清楚，这里就不做赘述了。
附上官网的地址：
好了，这次就介绍到这里，大家去试试吧。
如有问题，请指出，接受批评。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue+mock.js实现前后端分离
之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范,仅供参考. 然后案例讲完后我们讲具体的规范使用 那么一起来看看这个案例吧: <script> import Mock from "mockjs" export default { name: "FunctionsDbSource", methods:{ /
-
mock.js模拟数据实现前后端分离
众所周知,在日常开发中,前后端分离是最常见的开发模式,前端完成页面渲染,后端提供接口数据. 但是起初项目刚开始,后端还没有写好接口数据,前端要构建页面,还得考虑结构以及后期真实数据的问题. 所以前后端统一接口数据和格式是必要的. 而当统一好接口数据和格式后,前端就可以通过mock.js来模拟对应格式的数据,以此来完成页面的搭建,当后端完成接口和数据后,因为前期数据格式都是规范好的,所以只要去除掉mock.js那部分即可,而不需要再更改界面. 那么说了这么多,mock.js到底是什么? 根据官网简
-
vue+mockjs模拟数据实现前后端分离开发的实例代码
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回
-
Vue mock.js模拟数据实现首页导航与左侧菜单功能
目录 一.mock.js的使用 mock.js的使用步骤 1.安装mock依赖 2.添加开发环境及生产环境的配置 3.引入到main.js 二.前台主页面的搭建 2.1 准备相关组件 2.2 配置路由与组件的关系 2.3 导入图片 2.4 测试 三.左侧菜单的收缩功能 3.1 定义一个总线 3.2 改变收缩图标的样式 四.退出功能 4.1 添加点击方法 4.2 测试 一.mock.js的使用 mock.js的使用步骤 ① 下载依赖 npm install mock -d(开发环境使用) ② 引入
-
基于 Node.js 实现前后端分离
基本介绍 首先从一个重要的概念"模板"说起. 广义上来说,web中的模板就是填充数据后可以生成文件的页面. 严格意义上来说,应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面.模板大致分为前端模板(如ejs)和后端模板(如freemarker)分别在浏览器端和服务器端编译. 由于当场有一部分同学对node.js并不是很了解,这里补充一下node.js的相关知识.官网上的给他的定义事件驱动.异步什么的就不说了.这里借用朴灵书上的一张图来解释一下node.js这个玩意的结构.如果懂
-
基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践
淘宝网线上应用的传统软件栈结构为 Nginx + Velocity + Java,即: 在这个体系中,Nginx 将请求转发给 Java 应用,后者处理完事务,再将数据用 Velocity 模板渲染成最终的页面. 引入 Node.js 之后,我们势必要面临以下几个问题: 技术栈的拓扑结构该如何设计,部署方式该如何选择,才算是科学合理?项目完成后,该如何切分流量,对运维来说才算是方便快捷?遇到线上的问题,如何最快地解除险情,避免更大的损失?如何确保应用的健康情况,在负载均衡调度的层面加以管理?承系
-
nginx+vue.js实现前后端分离的示例代码
1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,
-
SpringBoot+Vue.js实现前后端分离的文件上传功能
这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l
-
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前
-
Django+Vue.js搭建前后端分离项目的示例
在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py