详解vue-cli 本地开发mock数据使用方法


Posted in Javascript onMay 29, 2018

vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章:Vue-cli proxyTable 解决开发环境的跨域问题

如果后端接口尚未开发完成,前端开发一般使用mock数据。

mock方法有多种多样,这里给出两种:

方法一: 使用express搭建静态服务

mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上。

具体方法:

创建 mock 文件夹

build/dev-server.js 中添加如下代码

详解vue-cli 本地开发mock数据使用方法

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

详解vue-cli 本地开发mock数据使用方法

方法二 使用 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"

详解vue-cli 本地开发mock数据使用方法

启动 mock 服务器

$ npm run mock 命令 运行 mock server

访问 http://localhost:3000/

发现 db.json 下第一级 json 对象被解析成为可访问路径

详解vue-cli 本地开发mock数据使用方法

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

详解vue-cli 本地开发mock数据使用方法

faker.js 批量生成伪数据

如果需要大量的伪数据,手动构造比较费时费力,可以使用faker.js 批量生成。faker.js 的具体使用参见官方文档,这里做一个示例。

$ cnpm install faker -G 全局安装 faker

mock 目录下创建 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组伪数据

详解vue-cli 本地开发mock数据使用方法

添加中间件

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请求了

详解vue-cli 本地开发mock数据使用方法

其他需求也可以通过添加不同的中间件实现。

代理设置

config/index.js proxyTable 将请求映射到 http://localhost:3000

详解vue-cli 本地开发mock数据使用方法

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

详解vue-cli 本地开发mock数据使用方法

$ npm run mockdev 启动带mock 数据的本地服务

结果如下:

详解vue-cli 本地开发mock数据使用方法

整体代码:https://github.com/carrotz/vue-cli-mock

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 #Javascript
js统计页面上每个标签的数量实例代码
May 29 #Javascript
浅谈React的最大亮点之虚拟DOM
May 29 #Javascript
深入理解Vue Computed计算属性原理
May 29 #Javascript
javascript、php关键字搜索函数的使用方法
May 29 #Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 #Javascript
Vue 组件传值几种常用方法【总结】
May 28 #Javascript
You might like
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
理解python中生成器用法
2017/12/20 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Django中的ajax请求
2018/10/19 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
建筑学推荐信
2013/11/03 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
入党介绍人考察意见
2015/06/01 职场文书
庆祝教师节主持词
2015/07/06 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers