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

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

  • 创建 mock 文件夹
  • build/dev-server.js 中添加如下代码

 

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

 

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

     

启动 mock 服务器

$ npm run mock 命令 运行 mock server
访问 http://localhost:3000/
发现 db.json 下第一级 json 对象被解析成为可访问路径

 

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

 

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组伪数据

 

添加中间件

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

 

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

代理设置

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

 

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

 

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

结果如下:


作者:萝卜粥_Carrot
链接:http://www.jianshu.com/p/ccd53488a61b
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

vue-cli 本地数据模拟的更多相关文章

  1. vue cli本地开发跨域问题解决

    首先呢,找到在目录里找到config文件夹 然后修改config文件夹下的index.js里面dev的配置项proxyTable: 修改为: proxyTable: { '/api': { targe ...

  2. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  3. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  4. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  5. vue cli使用融云实现聊天

    公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...

  6. VS Code引用 vue/cli

    npm i @vue/cli -g    引用cli脚手架 3.0版本 下载好后 找个空文件夹  vue create myvue 创建vue项目   myvue是自己项目名称 Your connec ...

  7. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  8. @Vue/Cli 3 Invalid Host header 检测关闭

    Invalid Host header 在本地开发等一般情况下,无论是 local,还是 ip,或者是 0.0.0.0,在 cli 中都默认为合法的,但是有些场景可能会被不支持,比如远程开发,或者是云 ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  10. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

随机推荐

  1. 错误提示:通过 Web 服务器的身份验证的用户无权打开文件系统上的文件

    //win7中iis配置好了可是网页打不开,为什么.? //错误提示:通过 Web 服务器的身份验证的用户无权打开文件系统上的文件 //解决办法1.右键单击你的网站根目录文件夹,如wwwroot文件夹 ...

  2. cmd 运行(打包后的)java程序

    package cn.imeixi.chapter1.exer; public class Exer10PrintArgs { public static void main(String[] arg ...

  3. android事务队列处理的实现

    代码地址如下:http://www.demodashi.com/demo/14748.html 前言 在android开发中,我们经常会遇到一种情况,随时接收并处理服务端发过来的消息,当服务端发过来的 ...

  4. (原)lua及torch中的type

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6591641.html 说明:本文不一定正确... 如果要是variable:type(),则返回tor ...

  5. Linux提示“libc.so.6: version `GLIBC_2.14' not found”系统的glibc版本太低

    http://www.linuxidc.com/Linux/2017-01/139806.htm http://www.linuxidc.com/Linux/2015-04/116472.htm

  6. React(0.13) 定义一个动态的组件(属性)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  7. MVC几种找不到资源的解决方式

    在MVC中,controller中的Action和View中的.cshtml文件名称有一个对应的关系. 当不对应时,有以下几种情况发生: 一.找不到视图的错误 请求URL:http://localho ...

  8. Linux定时器工具

    要使用crontab定时器工具,必须要启动cron服务: service cron start crontab的语法,以备日后救急 参见:http://blog.csdn.net/zlzlei/art ...

  9. SmartUpload类实现上传和下载

    实现文件的上传与下载,可以使用Java的I/O流的类来实现,也可以使用专业的上传.下载组件.这些组件提供了现成的类,程序员只需调用这些类中的方法即可实现文件的上传与下载.本章将向读者介绍如何应用jsp ...

  10. Linux/Unix 新手和专家教程

    你正在找一些高质量的Linux 和 UNIX 的教程吗?如果是,这篇文章会告诉你到哪去找到这些教程.这里我们将给出超过30个相当的不错的 Linux 和 UNIX 在线的教程. 需要大家注意的是,他们 ...