详解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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
javascript jQuery插件练习
Dec 24 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
如何编写高质量JS代码
Dec 28 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
用PHP读取IMAP邮件
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php魔术变量用法实例详解
2014/11/13 PHP
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python基础教程之Hello World!
2014/08/29 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python调用自定义函数的实例操作
2019/06/26 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
Python实现区域填充的示例代码
2021/02/03 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
高中毕业自我鉴定
2013/12/22 职场文书
个人评价范文分享
2014/01/11 职场文书
2014年租房协议书范本
2014/10/30 职场文书
故意伤害辩护词
2015/05/21 职场文书
紧急迫降观后感
2015/06/15 职场文书
同学聚会祝酒词
2015/08/10 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
mysql 索引合并的使用
2021/08/30 MySQL
nginx.conf配置文件结构小结
2022/04/08 Servers