详解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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
ant design charts 获取后端接口数据展示
May 25 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
jquery延迟对象解析
2016/10/26 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
庆八一活动方案
2014/01/25 职场文书
超市中秋节活动方案
2014/02/12 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
英语辞职信怎么写
2015/02/28 职场文书
分享python函数常见关键字
2022/04/26 Python