一般项目做法:



<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. 把Nutch爬虫部署到Hadoop集群上
			
    原文地址:http://cn.soulmachine.me/blog/20140204/ 把Nutch爬虫部署到Hadoop集群上 Feb 4th, 2014 | Comments 软件版本:Nutc ...
    
			
    2. 
						
  2. Spring入门第一课
			
    今天先不讲Spring是什么. Spring网址:http://projects.spring.io/spring-framework/ Eclipse 安装开发IDE 在Eclipse Market ...
    
			
    3. 
						
  3. sqlserver2012——游标
			
    游标:一种数据访问机制,允许用户访问单独的数据行而不是对整个行集进行操作.用户可以通过单独处理每一行逐条收集信息并对数据逐行进行操作,这样可以将降低系统开销. 游标主要有以下两部分: 游标结果集:由定 ...
    
			
    4. 
						
  4. jquery对象访问
			
    jquery对象访问 方法名 说明 语法 (callback 执行的函数,object指定元素的对象.) each() 用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数 jQu ...
    
			
    5. 
						
  5. 与"shark"相关的表达
			
    The word shark can be used to describe someone who is tricky and uses other people. Shark这个单词可以用来形容一 ...
    
			
    6. 
						
  6. Unity应用的iOS热更新
			
    Unity应用的iOS热更新 作者:丁治宇 Unity TechnologiesChina Agenda •  什么是热更新 •  为何要热更新 •  如何在iOS 上对Unity 应用进行热更新 • ...
    
			
    7. 
						
  7. [转] ios打包IPA的各种问题和解决方法
			
    最近做了一个东西,在打包ipa文件时遇到了各种问题,纠结了我好几天. 由于我一直是做android的,在打包时以为ios打包也和android一样:用IDE(eclipse)生成一个签名证书,然后打包 ...
    
			
    8. 
						
  8. MySQL zip安装问题
			
    今天安装mysql的压缩版出现了问题,就是服务总是启动不了,折腾了两三个小时.后面实在是想不明白,就直接把注册表的东西删了. 如果你之前安装过mysql,则进行删除mysql:E:\work\mysq ...
    
			
    9. 
						
  9. react native ios打包到真机，即生产包
			
    参考文章:http://www.devio.org/2017/02/09/React-Native%E5%8F%91%E5%B8%83APP%E4%B9%8B%E6%89%93%E5%8C%85iOS ...
    
			
    10. 
						
  10. AT2657 Mole and Abandoned Mine
			
    传送门 好神的状压dp啊 首先考虑一个性质,删掉之后的图一定是个联通图 并且每个点最多只与保留下来的那条路径上的一个点有边相连 然后设状态:\(f[s][t]\)代表当前联通块的点的状态为\(s\)和 ...
    
			
    11.