详解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实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
js创建数组的简单方法
Jul 27 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
Vue的Options用法说明
Aug 14 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
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
详解vuex commit保存数据技巧
2018/12/25 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python追加元素到列表的方法
2015/07/28 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
上诉状格式
2015/05/23 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
使用CSS设置滚动条样式
2022/01/18 HTML / CSS