一般项目做法:



<html>


<head>


<script src="http://requirejs.org/docs/release/2.1.16/comments/require.js"></script>


</head>


</html>


<script>


// 配置 Mock 路径

require.config({

    paths: {

        mock: 'http://mockjs.com/dist/mock'

    }

})

// 加载 Mock,可以吧这里另外存为一个文件如mock.js

require(['mock'], function(Mock) {

    // Mock.mock(rurl, template)

    Mock.mock('hello.json', {

        'list|1-10': [{

            'id|+1': 1,

            'email': '@EMAIL',

            'regexp3': /\d{5,10}/

        }]

    })
//需要mock.js的地方处理数据

    $.ajax({

        url: 'hello.json',

        dataType: 'json'

    }).done(function(data, status, jqXHR) {

        $('<pre>').text(JSON.stringify(data, null, 4))

            .appendTo('body')

    })

})


</script>






vue-cli项目




//首先的install mockjs  
//main.js中,引入mockjs

require('./mock')

//mock.js中,引入mockjs

const Mock = require('mockjs')

//组建中使用mock.js

import 'mock.js' //注意路径

示例:
mock.js



const produceData = function(opt) {
  console.log('opt', opt);
  let articles = [];
  for (let i = 0; i < 30; i++) {
    let newArticleObject = {
      title: Random.csentence(5, 30), // Random.csentence( min, max )
      thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
      author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    articles.push(newArticleObject)
  }
  return {
    data: articles
  }
}
Mock.mock('http://localhost:8013/news', /post|get/i, produceData);




export default {
  produceData
};


//vue组建中处理数据


mounted() {


this.$http.post('http://localhost:8013/news')
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }


 


												


											
前端Json数据模拟神器mockJs使用教程的更多相关文章
	

    
								
  1. 后端拜拜，用不到你了，前端开发数据模拟神器nodejs
		
    后端拜拜,用不到你了,前端开发数据模拟神器nodejs 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请 ...
    
		
    2. 
						
  2. sublime text3 --前端工程师必备神器
		
    sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...
    
		
    3. 
						
  3. [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试
		
    原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...
    
		
    4. 
						
  4. OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线
		
    在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...
    
		
    5. 
						
  5. js在前端json字符串和对象互相转化
		
    js在前端json字符串和对象互相转化 //对象转json串 注意:参数必须是对象,数组不起作用,对象格式{'0'=>'a'} JSON.stringify( arr ); //json字符串转 ...
    
		
    6. 
						
  6. 前端JSON请求转换Date问题
		
    目的:记录使用SpringMVC中前端JSON数据中的日期转换成Date数据类型时区产生的问题 记录下遇到过的问题 在使用SpringMVC框架中,使用@RequestBody注解将前端的json数据 ...
    
		
    7. 
						
  7. Mockjs 前端接口数据模拟
		
    在前后端分离的项目中,通常需要启动一个后台服务器来配合前端项目的接口需求.Mockjs的作用是拦截ajax请求并模拟各种数据返回,让前端开发可以更加自由独立. 安装 npm install mockj ...
    
		
    8. 
						
  8. 应用express mockjs模拟前端json数据接口
		
    一.首先需要在项目安装express 1.cnpm install express --save-dev  2.cnpm install mockjs --save-dev 二.在项目根目录下新建pr ...
    
		
    9. 
						
  9. 前端水印图片及文字js教程
		
    前端水印图片文字教程如下,复制代码修改图片地址即可看到效果,工作中遇到总结的,喜欢就关注下哦: <!DOCTYPE html><html> <head> <m ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. vue的安装配置
			
    1.访问vue的官网: https://cn.vuejs.org/v2/guide/installation.html安装配置 2.安装淘宝镜像项目搭建 .安装node  到官网下载安装.  (中)h ...
    
			
    2. 
						
  2. SpringBoot05 数据操作03 -> JPA查询方法的规则定义
			
    请参见<springboot详解>springjpa部分知识 1 按照方法命名来进行查询 待更新... package cn.xiangxu.springboot.repository;  ...
    
			
    3. 
						
  3. 13.Weblogic任意文件上传漏洞（CVE-2018-2894）复现
			
    Weblogic任意文件上传漏洞(CVE-2018-2894)复现 漏洞背景 WebLogic管理端未授权的两个页面存在任意上传getshell漏洞,可直接获取权限.两个页面分别为/ws_utc/be ...
    
			
    4. 
						
  4. C# 写 LeetCode easy #20 Valid Parentheses
			
    20.Valid Parentheses Given a string containing just the characters '(', ')', '{', '}', '[' and ']',  ...
    
			
    5. 
						
  5. 3、jquery_动态创建元素
			
    动态创建元素:$('<b>javier</b>') $('#Button1').append($('<b>javier</b>')) 等价于  $($( ...
    
			
    6. 
						
  6. Windows form UI skinEngine的使用方法
			
    1.安装SkinEngine(这里安装的是3.4.7) 链接: https://pan.baidu.com/s/1-kZ5KgYclshWc17jbuke5w 提取码: bp7n 复制这段内容后打开百 ...
    
			
    7. 
						
  7. Struts2 源码分析-----工作原理分析
			
    请求过程 struts2 架构图如下图所示: 依照上图,我们可以看出一个请求在struts的处理大概有如下步骤: 1.客户端初始化一个指向Servlet容器(例如Tomcat)的请求: 2.这个请求经 ...
    
			
    8. 
						
  8. 浅谈JavaScript--闭包
			
    闭包的概念 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数". 变量的作用域 要理解闭包,首先必须理解J ...
    
			
    9. 
						
  9. vue render & JSX
			
    vue在绝大多数使用template是没问题的,但在某些场合下,使用render更适合. 一.render函数 1.createElement 参数 createElement 可接受三个参数 1){ ...
    
			
    10. 
						
  10. springboot 简单自定义starter -    beetl
			
    使用idea新建springboot项目beetl-spring-boot-starter 首先添加pom依赖 packaging要设置为jar不能设置为pom<packaging>jar ...
    
			
    11.