一般项目的方法

<html>

<head>

<script>

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

</script>

</head>

</html>

<script>

// 配置 Mock 路径
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
})

// 加载 Mock
require(['mock'], function(Mock) {

// Mock.mock(rurl, template)
Mock.mock('hello.json', {
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
})
$.ajax({
url: 'hello.json',
dataType: 'json'
}).done(function(data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
})

</script>

vue-cli项目中

在src目录里面创建一个utils/mock.js

相关.vue文件引用

import './utils/mock.js'

import axios from 'axios'

另main.js引入import axios from 'axios'

注意这点,使用  Vue.prototype.$http = axios

mock.js编写示例如下,数据和暴露url

  1. //src/utils/mock.js
  2. //mock.js
  3. import Mock from 'mockjs'
  4. var url='/news',
  5. export default(url,{
  6. 	'list|1-10': [{
  7.             'id|+1': 1,
  8.             'email': '@EMAIL',
  9.             'regexp3': /\d{5,10}/
  10.         }]
  11. })

.vue组件里面请求

  1. mounted() {
  2.     //alert(1)
  3.     this.$http.post('/news')
  4.       .then(function(response) {
  5.         console.log(response);
  6.       })
  7.       .catch(function(error) {
  8.         console.log(error);
  9.       });
  10.   }

mockjs模拟数据请求的更多相关文章

  1. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  2. vue+mockjs 模拟数据，实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  3. 使用mockjs模拟分页请求

    首先安装mockjs npm install mockjs --save-dev 创建mock.js //mock.js const Mock = require("mockjs" ...

  4. vue 利用mockJs 模拟数据

    工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE +  Element-ui + springboot 写的,由于需求没有定,先画一个de ...

  5. php模拟数据请求

    php:模拟后台接受数据的步骤<?php> 1.连接数据库 $host="localhost"; $uname="root"; $upwd=&quo ...

  6. 在vue-cli下读取模拟数据请求服务器

    写此记录时vue脚手架的webpack是3.6.0 此文章方法亦可用于vue-cli3,直接在vue.config.js里面添加 本记录使用vue-resource,先安装: cnpm install ...

  7. 如何在vue-cli项目中结合mockjs模拟假数据

    1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...

  8. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...

  9. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

随机推荐

  1. C++中队列的建立和操作

    什么是队列结构 队列结构是从数据运算来分类的,也就是说队列结构具有特殊的运算规则.而从数据的逻辑结构来看,队列结构其实就是一种线性结构.如果从数据的存储结构来进一步划分,队列结构可以分成两类. 顺序队 ...

  2. hadoop主节点（NameNode）备份策略以、恢复方法、操作步骤

    一.dits和fsimage      首先要提到两个文件edits和fsimage,下面来说说他们是做什么的. 集群中的名称节点(NameNode)会把文件系统的变化以追加保存到日志文件edits中 ...

  3. Struts简单入门实例

    转自http://www.cnblogs.com/xing901022/p/3961661.html 有改动 struts2其实就是为我们封装了servlet,简化了jsp跳转的复杂操作,并且提供了易 ...

  4. 【转】ANT安装、环境变量配置及验证

    http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html Posted on 2013-03-26 14:01 yuzho ...

  5. IQA(图像质量评估)

    图像质量评价(Image Quality Assessment,IQA)是图像处理中的基本技术之一,主要通过对图像进行特性分析研究,然后评估出图像优劣(图像失真程度). 主要的目的是使用合适的评价指标 ...

  6. 新编html网页设计从入门到精通 (龙马工作室) pdf扫描版

    新编html网页设计从入门到精通共分为21章,全面系统地讲解了html的发展历史及4.0版的新特性.基本概念.设计原则.文件结构.文件属性标记.用格式标记进行页面排版.使用图像装饰页面.超链接的使用. ...

  7. Android 全局错误管理

    package com.wlwl.yiyuan; import java.io.File; import java.io.PrintWriter; import java.io.StringWrite ...

  8. Ajax原生请求及Json基础

    1.基本结构 <script type="text/javascript"> // 创建XMLHttpRequest对象 var request = new XMLHt ...

  9. c语言指针，数组

    指针:说简单点就是一个地址.例如int *p,p是个变量,里面放的是地址0x0000,同理,每一个指针,不管什么类型,都是地址,也就是空间都是4个字节(32位机). 以此类推,指针也有指向它的指针in ...

  10. springmvc json 简单例子

    1.控制器层: @RequestMapping("/json.do") @ResponseBody //将会把返回值 转换为json对象 public List<User&g ...