一般项目的方法

<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

//src/utils/mock.js

//mock.js

import Mock from 'mockjs'

var url='/news',

export default(url,{

	'list|1-10': [{

            'id|+1': 1,

            'email': '@EMAIL',

            'regexp3': /\d{5,10}/

        }]

})

.vue组件里面请求

mounted() {

    //alert(1)

    this.$http.post('/news')

      .then(function(response) {

        console.log(response);

      })

      .catch(function(error) {

        console.log(error);

      });

  }

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. Could not get lock /var/lib/dpkg/lock - open 解决方法

    无法获得锁 /var/lib/dpkg/lock E: Could not get lock /var/lib/dpkg/lock - open (11 Resource temporarily un ...

  2. Ubuntu12.04安装R ，Rstudio, RHive

    环境: Ubuntu12.04 R-3.1.0 0.Ubuntu安装R官网的介绍 http://mirrors.ustc.edu.cn/CRAN/ Precise Pangolin (12.04; L ...

  3. hibernate&nbsp;hql&nbsp;查询指定…

    以数组的形式抛出,前台页面就要把它当成一个数组来处理 以对象抛出,就要当成一个对象来处理. 在JSP页面使用标签时一定要注意这点. 版权声明:本文为博主原创文章,未经博主允许不得转载.

  4. R：安装、导入各种包。

    library和require都可以载入包,但二者存在区别. #在一个函数中,如果一个包不存在,执行到library将会停止执行,require则会继续执行.require将会根据包的存在与否返回tr ...

  5. p2590&bzoj1036 树的统计

    传送门(洛谷) 传送门(bzoj) 题目 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值 ...

  6. ubuntu下sourceinsight的安装

    转载自blog.csdn.net/zzobin/article/details/7376616 1. 安装wine 详看:http://wiki.ubuntu.org.cn/Wine sudo apt ...

  7. C#中索引器Indexer的学习使用

    索引器 顾名思义,是用来索引的,那么C#中索引器是用来索引什么的呢 首先我们知道,C#中的数组是本身就可以索引的,那么C#中的类和结构呢,类和结构的实例是无法索引的,如果我们想让C#中类或者结构的实例 ...

  8. ES Docs-1：Installation Elasticsearch-2.3.1

    installation Elasticsearch requires at least Java 7. Specifically as of this writing, it is recommen ...

  9. PHP开源系统学习之fluxbb_1

    最近一直忙于做项目,虽说做了点新东西.感觉自己进步不是很大,总体水平还是跟半年前差不多,想到的东西跟以前差不多,写出来的东西也跟以前差不多.只是现在做的东西多些,比以前敢做了. 近期准备利用点时间,读 ...

  10. InnoDB recovery过程解析

    本文来自网易云社区. InnoDB如果发生意外宕机了,数据会丢么?对于这个问题,稍微了解一点MySQL知识的人,都会斩钉截铁的回答:不会!为什么?他们也会毫不犹豫的说:因为有重做日志(redo log ...