vue-cli 本地数据模拟
2023-09-14 08:59:53 时间
方法一: 使用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.js
的 proxyTable
将请求映射到 http://localhost:3000
代码中添加请求以测试效果
$ npm run mockdev
启动带mock 数据的本地服务
结果如下:
作者:萝卜粥_Carrot
链接:http://www.jianshu.com/p/ccd53488a61b
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- vue-cli3路由vue-router用法
- vue axios的使用
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
- [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- Easy Mock以及Vue+Mock.js模拟数据
- vue-router动态路由示例
- 一个典型的Vue应用的App.vue
- vue 项目 打印, 要求 只打印div里面的内容
- vue项目报错Unknown custom element: <router-view> - did you register the component correctly?
- vue路由报错Navigating to current location (“/login“) is not allowed踩坑总结
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- Vue中vue-i18n结合vant-ui实现国际化
- 207:vue+openlayers 动态位置高度角度,模拟卫星地面覆盖区域的大小
- 095:vue+openlayers 地图上添加网格线 (示例代码)
- 007:vue+openlayers加载ArcGIS地图示例
- 052:vue+openlayers根据visible来更换底图(代码示例)
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue:第一个vue-cli项目