vue-cli 本地数据模拟
方法一: 使用express搭建静态服务
mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上。
具体方法:
- 创建
mock
文件夹 build/dev-server.js
中添加如下代码

npm run dev
启动后,可以通过 http://localhost:8080/mock/db.json 访问数据,proxyTable对应设置代理即可(代理设置方法与解决跨域方法相似)

方法二 使用 JSON Server 搭建 Mock 服务器
JSON Server 是一个创建伪RESTful服务器的工具,具体使用方法可以看官方文档,这里直接讲在vue-cli 中的用法。
配置流程
- 全局安装
$ npm install -g json-server
- 项目目录下创建
mock
文件夹 mock
文件夹下添加db.json
文件,内容如下
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
package.json
添加命令"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"
启动 mock 服务器
$ npm run mock
命令 运行 mock server
访问 http://localhost:3000/
发现 db.json
下第一级 json 对象被解析成为可访问路径

GET请求具体路径 如:http://localhost:3000/posts 可获取数据

faker.js 批量生成伪数据
如果需要大量的伪数据,手动构造比较费时费力,可以使用 faker.js 批量生成。faker.js 的具体使用参见官方文档,这里做一个示例。
$ cnpm install faker -G
全局安装 fakermock
目录下创建faker-data.js
,内容如下module.exports = function () {
var faker = require("faker");
faker.locale = "zh_CN";
var _ = require("lodash");
return {
people: _.times(100, function (n) {
return {
id: n,
name: faker.name.findName(),
avatar: faker.internet.avatar()
}
}),
address: _.times(100, function (n) {
return {
id: faker.random.uuid(),
city: faker.address.city(),
county: faker.address.county()
}
})
}
}$ json-server mock/faker-data.js
在 json server 中使用 faker
请求 http://localhost:3000/address 可以获取到随机生成的100组伪数据

添加中间件
json server 使用 RESTful 架构,GET请求可以获取数据,POST 请求则是添加数据。
在开发过程中,有时候想直接模拟获取POST请求返回结果,可以添加 express 中间件 将POST请求转为GET请求。
mock
目录下创建post-to-get.js
,内容如下module.exports = function (req, res, next) {
req.method = "GET";
next();
}- 启动命令添加运行中间件
--m mock/post-to-get.js
"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
重新启动服务,POST请求就被转换为GET请求了

其他需求也可以通过添加不同的中间件实现。
代理设置
在 config/index.js
的 proxyTable
将请求映射到 http://localhost:3000

代码中添加请求以测试效果

$ npm run mockdev
启动带mock 数据的本地服务
结果如下:

作者:萝卜粥_Carrot
链接:http://www.jianshu.com/p/ccd53488a61b
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
vue-cli 本地数据模拟的更多相关文章
- vue cli本地开发跨域问题解决
首先呢,找到在目录里找到config文件夹 然后修改config文件夹下的index.js里面dev的配置项proxyTable: 修改为: proxyTable: { '/api': { targe ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- vue cli使用融云实现聊天
公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...
- VS Code引用 vue/cli
npm i @vue/cli -g 引用cli脚手架 3.0版本 下载好后 找个空文件夹 vue create myvue 创建vue项目 myvue是自己项目名称 Your connec ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- @Vue/Cli 3 Invalid Host header 检测关闭
Invalid Host header 在本地开发等一般情况下,无论是 local,还是 ip,或者是 0.0.0.0,在 cli 中都默认为合法的,但是有些场景可能会被不支持,比如远程开发,或者是云 ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
随机推荐
- 错误提示:通过 Web 服务器的身份验证的用户无权打开文件系统上的文件
//win7中iis配置好了可是网页打不开,为什么.? //错误提示:通过 Web 服务器的身份验证的用户无权打开文件系统上的文件 //解决办法1.右键单击你的网站根目录文件夹,如wwwroot文件夹 ...
- cmd 运行(打包后的)java程序
package cn.imeixi.chapter1.exer; public class Exer10PrintArgs { public static void main(String[] arg ...
- android事务队列处理的实现
代码地址如下:http://www.demodashi.com/demo/14748.html 前言 在android开发中,我们经常会遇到一种情况,随时接收并处理服务端发过来的消息,当服务端发过来的 ...
- (原)lua及torch中的type
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6591641.html 说明:本文不一定正确... 如果要是variable:type(),则返回tor ...
- Linux提示“libc.so.6: version `GLIBC_2.14' not found”系统的glibc版本太低
http://www.linuxidc.com/Linux/2017-01/139806.htm http://www.linuxidc.com/Linux/2015-04/116472.htm
- React(0.13) 定义一个动态的组件(属性)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- MVC几种找不到资源的解决方式
在MVC中,controller中的Action和View中的.cshtml文件名称有一个对应的关系. 当不对应时,有以下几种情况发生: 一.找不到视图的错误 请求URL:http://localho ...
- Linux定时器工具
要使用crontab定时器工具,必须要启动cron服务: service cron start crontab的语法,以备日后救急 参见:http://blog.csdn.net/zlzlei/art ...
- SmartUpload类实现上传和下载
实现文件的上传与下载,可以使用Java的I/O流的类来实现,也可以使用专业的上传.下载组件.这些组件提供了现成的类,程序员只需调用这些类中的方法即可实现文件的上传与下载.本章将向读者介绍如何应用jsp ...
- Linux/Unix 新手和专家教程
你正在找一些高质量的Linux 和 UNIX 的教程吗?如果是,这篇文章会告诉你到哪去找到这些教程.这里我们将给出超过30个相当的不错的 Linux 和 UNIX 在线的教程. 需要大家注意的是,他们 ...