一般项目做法:



<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. Flask16 项目结构、flask_script插件
			
    1 项目结构 需求:易维护.可扩展 1.1 views 处理逻辑和路由映射 C 1.2 models 模型类 M 1.3 templates 模板文件 V 1.4 static 今天文件,如:js.c ...
    
			
    2. 
						
  2. p2921 Trick or Treat on the Farm
			
    传送门 题目 每年万圣节,威斯康星的奶牛们都要打扮一番,出门在农场的N个牛棚里转 悠,来采集糖果.她们每走到一个未曾经过的牛棚,就会采集这个棚里的1颗糖果.农场不大,所以约翰要想尽法子让奶牛们得到快乐 ...
    
			
    3. 
						
  3. JSP有哪些动作？
			
    JSP使用动作来动态的插入文件,实现重定向和对JavaBean的引用等功能.它公有6个基本动作:jsp:include,jsp:useBean,jsp:setProperty,jsp:getPrope ...
    
			
    4. 
						
  4. idea调试SpringMvc, 出现：”javax.servlet.ServletException: java.lang.IllegalStateException: Cannot create a session after the response has been committed"错误的解决方法
			
    调试拦截器出现以下错误: HTTP Status 500 - javax.servlet.ServletException: java.lang.IllegalStateException: Cann ...
    
			
    5. 
						
  5. SQL Server 查询分析器提供的所有快捷方式（快捷键）
			
    SQL Server程序员经常要在SSMS(SQL Server Management Studio)或查询分析器(2000以前)中编写T-SQL代码.以下几个技巧,可以提升工作效率. 以下说明以SS ...
    
			
    6. 
						
  6. 将前台传回的HttpServletRequest转换成HashMap
			
    import java.util.HashMap;import java.util.Map;import java.util.Map.Entry;import java.util.Set; impor ...
    
			
    7. 
						
  7. Leetcode 第136场周赛解题报告
			
    周日的比赛的时候正在外面办事,没有参加.赛后看了下题目,几道题除了表面要考的内容,还是有些能发散扩展的地方. 做题目不是最终目的,通过做题发现知识盲区,去研究学习,才能不断提高. 理论和实际是有关系的 ...
    
			
    8. 
						
  8. IOS BLE4.0蓝牙和外设连接和收发数据的流程
			
    前言: 苹果在IOS 6系统之后开始支持BLE 4.0,iPhone4s,iPod 5,iPad 3等之后的机型开始内嵌BLE4.0硬件,因此在开发前请先确认你的开发环境符合上述要求,并且苹果在BLE ...
    
			
    9. 
						
  9. 不建议使用Restsharp
			
    Restsharp确实是个优秀的插件,它最大的特点是内置了JsonConverter, 在一定程度上简化了HttpWebRequest的使用,在nuget上面有19.3M的下载量,是个很好的证明. 但 ...
    
			
    10. 
						
  10. 小程序组件交互 -- 传入js
			
    1.父组件(wxml页面)向子组件传递 在子组件中定义需要传入的属性 properties: { count: { type: Number, value: 0, observer:function( ...
    
			
    11.