一般项目做法:



<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. layui 文件上传加进度条
			
    1.页面 <div class="layui-row layui-col-space5"> <div class="layui-form-item&qu ...
    
			
    2. 
						
  2. 【Qt官方例程学习笔记】Application Example（构成界面/QAction/退出时询问保存/用户偏好载入和保存/文本文件的载入和保存/QCommandLineParser解析运行参数）
			
    The Application example shows how to implement a standard GUI application with menus, toolbars, and  ...
    
			
    3. 
						
  3. 关于UsedRange方法选中了空区域的解决方案
			
    使用worksheet.usedrange属性去制作数据透视表的时候会出现blank项,debug时发现它选中了空的区域. 解决方案: 属性usedrange包含着带格式的.空白的单元格(即使设置过单 ...
    
			
    4. 
						
  4. Servlet和HTTP请求协议
			
    Servlet和HTTP请求协议 Servlet和HTTP请求协议 Servlet和HTTP请求协议 有待补充... servlet servlet applet 概念 servlet是运行在服务器上 ...
    
			
    5. 
						
  5. JMETER CSS JQUERY EXTRACTOR
			
    我想如果你在这里,你可能已经访问了我们关于变量提取的JMeter系列: XPath Extractor:使用XPath Expressions从XML响应中提取内容, Regexp Extractor ...
    
			
    6. 
						
  6. BestCoder Round #86 1003
			
    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5806 题意:有多少个区间里的第 k 大的数不小于 m 解法:尺取法,首先我们用dp[i]保存到i的位置有多 ...
    
			
    7. 
						
  7. SerializeUtil
			
    import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.ObjectInpu ...
    
			
    8. 
						
  8. 查询rabbitmq
			
    package com.yunda.app.service; import java.io.InputStream; import java.net.HttpURLConnection; import ...
    
			
    9. 
						
  9. Java local 转UTC时间
			
    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...
    
			
    10. 
						
  10. Unity UGUI暂停按钮切换图片代码
			
    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
    
			
    11.