zoukankan      html  css  js  c++  java
  • 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);
    	},
    }
    

      代码地址:

  • 相关阅读:
    Apache 浏览器访问限制配置
    Apache 防盗链配置
    Apache 静态缓存配置
    Apache 日志管理
    Apache 域名跳转配置
    搭建完全分布式的hadoop[转]
    Laravel Cheat 表 http://cheats.jesse-obrien.ca/#
    spring-data-mongodb必须了解的操作
    Java MongoDB 资料集合
    MongoDB分片技术[转]
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/11208558.html
Copyright © 2011-2022 走看看