一般项目的方法

<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. mvn jetty:run 出现PermGen space outofmemeryerror

    使用mvn jetty:run跑别人的项目时出现了PermGen space outofmemeryerror异常 http://stackoverflow.com/questions/1451648 ...

  2. 《精通Spring4.X企业应用开发实战》读后感第五章（不同配置方式比较）

  3. 通俗地讲，Netty 能做什么？

    https://www.zhihu.com/question/24322387/answer/78947405 作者:郭无心链接:https://www.zhihu.com/question/2432 ...

  4. iOS开发，使用CocoaSSDP查找设备时按关键字过滤Device

    关于CocoaSSDP的资料有很多,这里就不介绍了. 希望寻找的目标设备,在header中设置了自定义的keyword,虽然通过外围代码也能达到相同目的,但是直接修改CocoaSSDP源码更简便. 导 ...

  5. Session和cookie有什么区别？

    cookie是保存在客户端的信息,它只能保存String类型的,没有session安全,如果客户端禁用了cookie就不能够使用了 Cookie是客户端技术,程序把每个用户的数据以cookie的形式写 ...

  6. 1.5 xss漏洞修复

    1.XSS漏洞修复 从上面XSS实例以及之前文章的介绍我们知道XSS漏洞的起因就是没有对用户提交的数据进行严格的过滤处理.因此在思考解决XSS漏洞的时候,我们应该重点把握如何才能更好的将用户提交的数据 ...

  7. C#----接口与抽象类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 接口 { ...

  8. .Net Core中依赖注入服务使用总结

    一.依赖注入 引入依赖注入的目的是为了解耦和.说白了就是面向接口编程,通过调用接口的方法,而不直接实例化对象去调用.这样做的好处就是如果添加了另一个种实现类,不需要修改之前代码,只需要修改注入的地方将 ...

  9. Linux vim常用选项

    Vim命令 三种模式 Command Mode 命令模式 Insert Mode 插入模式 Last LineMode 底行模式 底行模式常用命令 :w 保存 :q 退出 :! + 命令 :! ls ...

  10. webpack@3.6.0（1） -- 快速开始

    本篇内容 前言 配置入口和输出 热更新 loader配置 js代码压缩 html的打包与发布 前言 //全局安装 npm install -g webpack(3.6.0) npm init //安装 ...