dva应用中使用mock模拟数据
上一篇中有写到使用dva-cli创建应用,那么这篇写下如何在dva项目中使用mock模拟数据。
在上一篇中 .webpackrc 文件中有提到配置接口请求代理,注意使用mock的时候应该先将此配置去掉。
1.将.webpackrc文件中的proxy去掉
{ "extraBabelPlugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }] ],
// 因为要使用mock,所以需要将这一坨注释 "proxy": { "/api": { "target": "http://192.168.31.110:8011/", // 请求数据接口的地址 "changeOrigin": true } },
"env": { "development": { "extraBabelPlugins": [ "dva-hmr" ] } } }
2.安装mock.js依赖
npm install mockjs --save 或 yarn install mockjs --save
3.配置mock.js(可以分文件也可以直接写)
(1)直接写,不分离模块,在.roadhogrc.mock.js,直接使用
打开.roadhogrc.mock.js 设置如下
export default { 'GET /api/products': { products: [ { name: 'dva', id: 1 }, { name: 'antd', id: 2 }, ], }, }
浏览器中直接访问http://localhost:8000/api/products,就可以访问到
(2)组件多,分文件写
---打开.roadhogrc.mock.js 设置如下
const fs=require('fs'); const path=require('path'); const mockPath=path.join(__dirname+'/mock'); const mock={}; fs.readdirSync(mockPath).forEach(file=>{ Object.assign(mock,require('./mock/'+file)); }); module.exports=mock;
---在应用中的mock文件夹中创建products.js
const Mock = require('mockjs'); let db = Mock.mock({ products: [ { name: 'dva', id: 1 }, { name: 'antd', id: 2 }, ], }); module.exports = { [`GET /api/queryProducts`](req, res) { res.status(200).json(db); }, }
代码地址:
posted on 2019-07-18 17:08 Diamond_xx 阅读(2069) 评论(0) 编辑 收藏 举报