mockjs的基本使用入门
相信很多前端同学都有一个困扰,就是没有后端数据的情况下感觉很多想法都不能动手去实现,这里介绍一个模拟后端数据的工具,可以一定程度上解决我们的困扰。
很多人或多或少的都听说过mockjs,都知道是一个模拟后端接口的工具,但是去看官网的时候上边各种安装,各种模块化,对于初学者很不友好,结果就这么放弃了。
下边的例子直接复制粘贴然后打开页面控制台就能看到效果,结合代码就能知道大概mockjs是做了什么事了
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
</head> <body>
<script src="http://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
<script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript">
var url = 'http://api.com'
var data = Mock.mock(url, {
"user|5-10": [{
'name': '@cname', //中文名称
'age|1-100': 100, //100以内随机整数
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(false)' //中国城市
}]
});
$.ajax({
url: url,
type: 'post',
contentType: 'text/plain',
dataType: 'json',
success: function(res) {
console.log(res)
}
});
</script>
</body>
</html>
一下是控制台打印的结果
结合html中的data中的定义大概知道整体过程是什么样的了。
在此基础上了解更多的mockjs的用法可以去查看官网中的示例http://mockjs.com/examples.html
mockjs的基本使用入门的更多相关文章
- 正确开启Mockjs的三种姿势:入门参考(一)
一.文章初衷 阅读本文章需要注意以下几点: 文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结 想主要介绍如何使用Mockjs,是因为 ...
- 学习 | mockjs入门
最近工作有用到mockjs模拟数据,实现前后端分离,今天系统的把mockjs的API都过了一遍,算是入门吧. 什么是mockjs mockjs就是一个模拟数据,生成随机数据,拦截ajax请求. 为什么 ...
- mockjs从入门到精通视频教程
Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: (1)根据数据模板生成模拟数据 (2)模拟 Ajax 请求,生成并返回模拟数据 (3 ...
- web开发 入门
插件 ,索引文件,js目录,视图目录,资产目录,css目录,数据目录,font-awesome-4.7.0目录,图像目录. 引导程序 框架.字体.layer,mockjs.paging分页.树网格.t ...
- 物联网架构成长之路(36)-Vue前端入门
1. 前言 物联网平台,需要有一个类似大屏看板的功能. 找了一圈,发现阿里已经有对应的DataV产品,但是那个价格有点贵啊.所以找了这个[http://datav.jiaminghi.com/demo ...
- vue项目中mockjs的使用
mock.js是一个库,源码托管:https://github.com/nuysoft/Mock github上的原话:Mock.js是一个模拟数据生成器,可帮助前端开发和原型与后端进度分开,并减少某 ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
随机推荐
- 04-cmake语法-STREQUAL
STREQUAL 用于比较字符串,相同返回 true .
- 【Linux】netstat命令
https://www.cnblogs.com/ftl1012/p/netstat.html这个讲的不错 https://www.linuxprobe.com/netstat-common-metho ...
- windows10下Docker开启nginx服务访问页面没有反应
网址不要输入localhost,而是输入docker quickstart terminal登陆成功后给你的ip地址.
- Oracle EBS11i的下载
1.登陆Oracle eDelivery https://edelivery.oracle.com/osdc/faces/Home.jspx 2.需要账号登录才能进行下载 chaomu@css.com ...
- Python错误“ImportError: No module named MySQLdb”解决方法
这个错误可能是因为没有安装MySQL模块,这种情况下执行如下语句安装: pip install MySQLdb 如果安装时遇到错误“_mysql.c:29:20: 致命错误:Python.h:没有那个 ...
- 网络协议 4 - 交换机与 VLAN:拓扑结构
上一次,我们通过宿舍联网打魔兽的需求,认识了如何通过物理层和链路层组建一个宿舍局域网.今天,让我们切换到稍微复杂点的场景,办公室. 在这个场景里,就不像在宿舍那样,搞几根网线,拉一拉,扯一扯就 ...
- 【BZOJ3711】Druzyny
[BZOJ3711]Druzyny 题面 bzoj 题解 首先我们有一个\(O(n^2)\)的\(dp\): 设\(f_i\)表示现在已经分好了\(1...i\)的组,且\(i\)作为一组的结尾的最大 ...
- JVM 发生内存溢出的 8 种原因、及解决办法
阅读本文大概需要 2.3 分钟. 出处:割肉机 cnblogs.com/williamjie/p/11164572.html Java 堆空间 GC 开销超过限制 请求的数组大小超过虚拟机限制 Per ...
- kafka(四) 网络通讯
参考文章 http://www.jianshu.com/p/eab8f15880b5 kafka nio通信机制:http://ifeve.com/kafka-nio/ 通讯协议:tcp 网络模型:
- centos7 df 命令卡死
登录服务器想查看磁盘使用情况,使用了df,但卡住半天没有响应. 运行strace df -h,发现最后卡在了 stat("/proc/sys/fs/binfmt_misc", 无法 ...