环境准备

• 确保 node 版本是 6.5 +
• 用 cnpm 或 yarn 能节约你安装依赖的时间

安装dva-clibi并创建应用

• 安装 dva-cli，并确保版本是 0.7 或以上
  $ cnpm i dva-cli -g

  $ dva -v
  0.7.0
  

• 创建应用
  $ dva new user-dashboard
$ cd user-dashboard

• 启动项目(创建出来的目录根路径)
  npm start

配置 antd 和 babel-plugin-import

• babel-plugin-import 用于按需引入 antd 的 JavaScript 和 CSS（这样打包出来的文件不至于太大）
  cnpm i antd --save
cnpm i babel-plugin-import --save-dev
• 修改 .roadhogrc，在 “extraBabelPlugins” 里加上：
  ["import", { "libraryName": "antd", "style": "css" }]

配置代理，能通过 RESTFul 的方式访问 (http://127.0.0.1:8000/api/users)

• 修改 .roadhogrc，加上 “proxy” 配置：

  "proxy": {
    "/api": {
      "target": "http://jsonplaceholder.typicode.com/",
      "changeOrigin": true,
      "pathRewrite": { "^/api" : "" }
    }
  },
  

• 启动应用：(这个命令一直开着，后面不需要重启)
  npm start

  生成users路由

• 用dva-cli生成路由
  dva g route users
  访问：http://localhost:8000/#/users 立即生效

  构造users model和service

• 用dva-cli生成Model
  dva g model users

  • 修改 src/models/users.js

    import * as usersService from '../services/users';
    export default {
      namespace: 'users',
      state: {
        list: [],
        total: null,
        page: null,
      },
      reducers: {
        save(state, { payload: { data: list, total, page } }) {
          return { ...state, list, total, page };
        },
      },
      effects: {
        *fetch({ payload: { page = 1 } }, { call, put }) {
          const { data, headers } = yield call(usersService.fetch, { page });
          yield put({
            type: 'save',
            payload: {
              data,
              total: parseInt(headers['x-total-count'], 10),
              page: parseInt(page, 10),
            },
          });
        },
        *remove({ payload: id }, { call, put }) {
          yield call(usersService.remove, id);
          yield put({ type: 'reload' });
        },
        *patch({ payload: { id, values } }, { call, put }) {
          yield call(usersService.patch, id, values);
          yield put({ type: 'reload' });
        },
        *create({ payload: values }, { call, put }) {
          yield call(usersService.create, values);
          yield put({ type: 'reload' });
        },
        *reload(action, { put, select }) {
          const page = yield select(state => state.users.page);
          yield put({ type: 'fetch', payload: { page } });
        },
      },
      subscriptions: {
        setup({ dispatch, history }) {
          return history.listen(({ pathname, query }) => {
            if (pathname === '/users') {
              dispatch({ type: 'fetch', payload: query });
            }
          });
        },
      },
    };
    

  • 新增 src/services/users.js

    import request from '../utils/request';
    import { PAGE_SIZE } from '../constants';
    
    export function fetch({ page }) {
      return request(`/api/users?_page=${page}&_limit=${PAGE_SIZE}`);
    }
    
    export function remove(id) {
      return request(`/api/users/${id}`, {
        method: 'DELETE',
      });
    }
    
    export function patch(id, values) {
      return request(`/api/users/${id}`, {
        method: 'PATCH',
        body: JSON.stringify(values),
      });
    }
    
    export function create(values) {
      return request('/api/users', {
        method: 'POST',
        body: JSON.stringify(values),
      });
    }
    

    切换到浏览器（会自动刷新），应该没任何变化，因为数据虽然好了，但并没有视图与之关联。但是打开 Redux 开发者工具，应该可以看到 users/fetch 和 users/save 的 action 以及相关的 state 。

添加界面，让用户列表展现出来

• 用dva-cli 生成component
  dva g component Users/Users

  然后修改生成出来的 src/components/Users/Users.js 和 src/components/Users/Users.css，并在 src/routes/Users.js 中引用他。

添加layout

• 添加布局 dva g component MainLayout/MainLayout
src/components/MainLayout/MainLayout.js

• 在 src/routes 文件中引用

  import React from 'react';
  import { connect } from 'dva';
  import styles from './Users.css';
  import UsersComponent from '../components/Users/Users';
  import MainLayout from '../components/MainLayout/MainLayout';
  
  function Users() {
    return (
     <MainLayout location={location}>
          <div className={styles.normal}>
            <UsersComponent />
          </div>
      </MainLayout>
    );
  }
  
  export default connect()(Users);
  

  通过 dva-loading 处理 loading 状态

• 安装 dva-loading
  cnpm i dva-loading --save

• 修改 src/index.js 加载插件

  import createLoading from 'dva-loading';
  app.use(createLoading());
  

• 在 src/components/Users/Users.js 里绑定 loading 数据
  loading: state.loading.models.users,

处理分页

• 更改 src/components/Users/Users.js 文件即可

处理用户删除