一般项目做法:



<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. redis集群搭建踩坑笔记
			
    推荐参考教程:https://blog.csdn.net/pucao_cug/article/details/69250101 错误: from /usr/lib/ruby/2.3.0/rubygem ...
    
			
    2. 
						
  2. Dijkstra 路径规划 C#
			
    示例无向图如下:(起始点为v0) 邻接矩阵为: 注意:其中没有连接的边和自己到自己的点权值用10000表示. 代码: static void Main(string[] args) { , , , , ...
    
			
    3. 
						
  3. Collectd+InfluxDB+Grafana监控系统搭建
			
    环境配置 节点 配置 类型 操作系统 Sched 2G 2CPU 50GB ens3=>192.168.200.11 KVM虚拟机 CentOS 7 Nova 4G 2CPU 50GB ens3 ...
    
			
    4. 
						
  4. python测试模块-pytest介绍
			
    1.pytest介绍 pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高. 它具有如下特点: •非常容易 ...
    
			
    5. 
						
  5. python之05 操作系统用户密码修改
			
    ubuntu的操作系统修改密码的操作方法: 一.在系统启动时按住shift键,出现下图的界面 二.按下e进入命令行,找到下图红色框中的文字并修改成rw init=/bin/bash 然后按F10启动, ...
    
			
    6. 
						
  6. CacheManager 概述
			
    1. CacheManager 管理缓存,而缓存可以是基于内存的缓存,也可以是基于磁盘的缓存 2. CacheManager 需要通过 BlockMananger 来操作数据: 3. 当 Task 运 ...
    
			
    7. 
						
  7. linux的防火墙端口配置
			
    健忘啊,记下来吧 Red Hat Linux系统 此类型系统包括red hat的各类衍生及相关不版本,包括RHEL.CentOS.Fedora等等. 防火墙配置文件: /etc/sysconfig/i ...
    
			
    8. 
						
  8. /etc/hosts文件修改后如何生效
			
    修改/etc/hosts之后正常情况应该是保存之后立即生效的,但是有时不是.使用uname -a 可以查看hostname是多少,就可以知道是否修改生效了.如果没有这时的策略有:1) 重启机器2) 重 ...
    
			
    9. 
						
  9. h5自定义播放器得实现原理
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    10. 
						
  10. Docker Flie
			
    七.Docker File .dockeringore:打包忽略的文件列表,每行写一个文件的路径,可使用通配符 FROM指令:指定基础镜像 FROM <repository>[:<t ...
    
			
    11.