详解vue-cli 本地开发mock数据使用方法

vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章:

如果后端接口尚未开发完成,前端开发一般使用mock数据。

mock方法有多种多样,这里给出两种:

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

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

具体方法:

创建 mock 文件夹

build/dev-server.js 中添加如下代码

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

方法二 使用 JSON Server 搭建 Mock 服务器

是一个创建伪RESTful服务器的工具,具体使用方法可以看官方文档,这里直接讲在vue-cli 中的用法。

配置流程

全局安装 $ npm install -g json-server

项目目录下创建 mock 文件夹

mock 文件夹下添加 db.json 文件,内容如下

package.json 添加命令

启动 mock 服务器

$ npm run mock 命令 运行 mock server

访问 http://localhost:3000/

发现 db.json 下第一级 json 对象被解析成为可访问路径

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

faker.js 批量生成伪数据

如果需要大量的伪数据,手动构造比较费时费力,可以使用批量生成。faker.js 的具体使用参见官方文档,这里做一个示例。

$ cnpm install faker -G 全局安装 faker

mock 目录下创建 faker-data.js,内容如下

$ 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,内容如下

启动命令添加运行中间件 --m mock/post-to-get.js

重新启动服务,POST请求就被转换为GET请求了

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

代理设置

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

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

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

结果如下:

整体代码:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

你知道v-model指令是如何变成组件上的modelValue属性和@upda...
前言 众所周知,当子组件使用setup后,父组件就不能像vue2那...
前言 日常开发时有些特殊的场景需要在非 setup 期间调用inje...
前言 众所周知,vue3的template中使用ref变量无需使用.value...
本文讲了vue3是如何实现编译优化之“静态提升”,静态节点无...
你知道defineEmits 宏函数经过编译后其实就是vue2的选项式AP...