相信很多前端同学都有一个困扰，就是没有后端数据的情况下感觉很多想法都不能动手去实现，这里介绍一个模拟后端数据的工具，可以一定程度上解决我们的困扰。

很多人或多或少的都听说过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的基本使用入门的更多相关文章

  1. 正确开启Mockjs的三种姿势：入门参考（一）

    一.文章初衷 阅读本文章需要注意以下几点: 文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结 想主要介绍如何使用Mockjs,是因为 ...

  2. 学习 | mockjs入门

    最近工作有用到mockjs模拟数据,实现前后端分离,今天系统的把mockjs的API都过了一遍,算是入门吧. 什么是mockjs mockjs就是一个模拟数据,生成随机数据,拦截ajax请求. 为什么 ...

  3. mockjs从入门到精通视频教程

    Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: (1)根据数据模板生成模拟数据 (2)模拟 Ajax 请求,生成并返回模拟数据 (3 ...

  4. web开发 入门

    插件 ,索引文件,js目录,视图目录,资产目录,css目录,数据目录,font-awesome-4.7.0目录,图像目录. 引导程序 框架.字体.layer,mockjs.paging分页.树网格.t ...

  5. 物联网架构成长之路(36)-Vue前端入门

    1. 前言 物联网平台,需要有一个类似大屏看板的功能. 找了一圈,发现阿里已经有对应的DataV产品,但是那个价格有点贵啊.所以找了这个[http://datav.jiaminghi.com/demo ...

  6. vue项目中mockjs的使用

    mock.js是一个库,源码托管:https://github.com/nuysoft/Mock github上的原话:Mock.js是一个模拟数据生成器,可帮助前端开发和原型与后端进度分开,并减少某 ...

  7. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  8. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目（上）

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

  9. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

随机推荐

  1. CentOS7 只下载安装包不安装

    参考文档 yum安装本地rpm软件方案详解 https://www.jb51.net/article/132305.htm createrepo CentOS-Media.repo 本地软件源 --d ...

  2. 给某mooc站点准备的FE大纲

    https://segmentfault.com/a/1190000000465431 https://blog.csdn.net/mike_chen2stockings/article/detail ...

  3. NOIP 2004 联合权值

    洛谷 P1351 联合权值 洛谷传送门 JDOJ 2886: [NOIP2014]联合权值 D1 T2 JDOJ传送门 Description 无向连通图 G有 n个点,n-1条边.点从 1到 n依次 ...

  4. HDU6223 && 2017沈阳ICPC: G. Infinite Fraction Path——特殊图&&暴力

    题意 给定一个数字串,每个位子都能向(i*i+1)%n的位子转移,输出在路径上.字典序最大的.长度为n的串($n \leq 150000$). 分析 先考虑一个暴力的方法,考虑暴力每个x,然后O(n) ...

  5. js面向对象的笼统介绍

    **js进阶大纲**简单的表面组成:**对象的属性分两类,一类是数据属性,一类是访问器属性**1,数据属性用来保存数据.2,访问器属性不用来保存数据,而是定义了get,set两个函数,读取属性时,自动 ...

  6. [RN] React Native 让 Flatlist 支持 选中多个值，并获取所选择的值

    React Native 让 Flatlist  支持  选中多个值,并获取所选择的值 实现效果如下: 实现代码: import React, {Component} from 'react'; im ...

  7. LOJ6625 时间复杂度（min_25筛）

    本人在LOJ的第三题(前两题太水不好意思说了QwQ),欢迎大家踩std. 题目链接:LOJ 题目大意:定义函数 $f$:($minp$ 表示最小质因子) $$f(x)=\begin{cases}0&a ...

  8. 洛谷P5021 赛道修建

    题目 首先考虑二分,然后发现最小长度越大的话,赛道就越少.所以可以用最终的赛道个数来判断长度是否合理.问题转化为给定一个长度,问最多有多少条互不重叠路径比这个给定长度大. 考虑贪心,毕竟贪心也是二分c ...

  9. 第01组 Alpha事后诸葛亮

    目录 一.总结思考 1.设想和目标 ①我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? ②我们达到目标了么(原计划的功能做到了几个? 按照原计划交付时间交付了么? 原 ...

  10. eclipse Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.0.xsd)

        1.情景展示 spring配置文件报错信息如下: Referenced file contains errors (http://www.springframework.org/schema/ ...