mockjs模拟数据请求
一般项目的方法
<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模拟数据请求的更多相关文章
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- vue+mockjs 模拟数据，实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- 使用mockjs模拟分页请求
首先安装mockjs npm install mockjs --save-dev 创建mock.js //mock.js const Mock = require("mockjs" ...
- vue 利用mockJs 模拟数据
工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE + Element-ui + springboot 写的,由于需求没有定,先画一个de ...
- php模拟数据请求
php:模拟后台接受数据的步骤<?php> 1.连接数据库 $host="localhost"; $uname="root"; $upwd=&quo ...
- 在vue-cli下读取模拟数据请求服务器
写此记录时vue脚手架的webpack是3.6.0 此文章方法亦可用于vue-cli3,直接在vue.config.js里面添加 本记录使用vue-resource,先安装: cnpm install ...
- 如何在vue-cli项目中结合mockjs模拟假数据
1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...
- vue-cli实现异步请求返回mock模拟数据
在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
随机推荐
- error C2512: “HelloWorld”: 没有合适的默认构造函数可用
error C2512: "HelloWorld": 没有合适的默认构造函数可用 c++ newbie error C2512: no appropriate default co ...
- Git 客户端在 WebIDE 中的实现
Coding WebIDE 是 Coding.net 自主研发的在线集成开发环境 (IDE).你可以通过 WebIDE 创建项目的工作空间, 进行在线开发, 调试等操作,有功能健全的 Terminal ...
- 【转】Subversion快速入门教程-动画演示
如何快速建立Subversion服务器,并且在项目中使用起来,这是大家最关心的问题,与CVS相比,Subversion有更多的选择,也更加的容易,几个命令就可以建立一套服务器环境,可以使用起来,这里配 ...
- Instruments10 分析某个类中方法的执行时间
此步骤也可用户内存分配.内存泄漏的检测 最新操作步骤参考: https://www.jianshu.com/p/e499ce63ed72
- 【Spring-任务调度】
Spring-任务调度: spring内部有一个task是Spring自带的一个设定时间自动任务调度task使用的时候很方便,但是他能做的东西不如quartz那么的多!可以使用注解和配置两种方式,配置 ...
- 依托http-headers的 sql注入和时间盲注
机缘巧合接触了一点关于sql注入的网络安全问题 依托 headers 的 sql 注入 一般来说大家都很清楚用户输入的危险性,通常会对用户表单提交的数据进行过滤(引号转码). 但是如果写过网络爬虫,那 ...
- 接水果(fruit)——整体二分+扫描线
题目 [题目描述] 风见幽香非常喜欢玩一个叫做 osu! 的游戏,其中她最喜欢玩的模式就是接水果.由于她已经 DT FC 了 The big black,她觉得这个游戏太简单了,于是发明了一个更加难的 ...
- JavaScript 性能优化
加载和执行 1. </body>闭合标签之前,将所有的<script> 标签放在页面底部,确保在脚步执行之前页面已经完成渲染. 2. 合并脚本.下载单个 100KB 的文件将比 ...
- Cef3 学习资料
fanfeilong/cefutil CEF General Usage(CEF3预览) CEF General Usage(CEF3预览) 介绍 CEF全称Chromium Embedded Fra ...
- Linux服务之 Nginx安装
安装包下载: 链接:https://pan.baidu.com/s/1yna9nvT_9iYw4_0uVQRgFw 提取码:nurm yum -y install gcc automake autoc ...