详解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 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
详解JavaScript 的执行机制
Sep 18 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php防止网站被刷新的方法汇总
2014/12/01 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
入党自我鉴定
2014/03/25 职场文书
党支部活动策划方案
2014/08/18 职场文书
学校交通安全责任书
2014/08/25 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
英文导游词
2015/02/13 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
医院合作意向书范本
2015/05/08 职场文书