前后端分离1：使用React+dva+antd快速实现用户列表的展示

开篇

这2年前端界发生发生了逆转，JavaScript的es6语法上线后，提供了模块封装，复用等等新特性。使得很多前端大神有用武之地。譬如美团点评的前端团队，将前后端分开开发，分离部署。这样前后端完全松耦合。从此引出“《美团点评境外度假团队前端项目开发实践总结》”
* 本文将带大家用React+dva+antd快速实现用户列表的展示。

1、项目初始化

1.1 安装 dva-cli 并创建应用

     安装 dva-cli：  $ npm i dva-cli@0.7 -g
     创建应用：       $ dva new user-dashboard
                 $ cd user-dashboard     

1.2 配置 antd 和 babel-plugin-import

     安装 antd：  $ npm i antd --save
     安装babel:   $ npm i babel-plugin-import --save-dev

     修改 .roadhogrc，在 "extraBabelPlugins" 里加上： 
    ["import", { "libraryName": "antd", "style": "css" }]

1.3配置代理，能通过 RESTFul 的方式访问
http://localhost:8000/api/users
修改 .roadhogrc，加上 “proxy” 配置：

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

1.4启动应用
$ npm start
访问 http://localhost:8000/api/users
就能访问到 http://jsonplaceholder.typicode.com/users 的数据。

2、创建用户列表

2.1用 dva-cli 生成路由：
$ dva g route users

2.2用 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,
  },
  reducers: {
    save(state, { payload: { data: list, total } }) {
      return { ...state, list, total };
    },
  },
  effects: {
    *fetch({ payload: { page } }, { call, put }) {
      const { data, headers } = yield call(usersService.fetch, { page });
      yield put({ type: 'save', payload: { data, total: headers['x-total-count'] } });
    },
  },
  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';

export function fetch({ page = 1 }) {
  return request(`/api/users?_page=${page}&_limit=5`);
}

由于我们需要从 response headers 中获取 total users 数量，所以需要改造下 src/utils/request.js：

import fetch from 'dva/fetch';

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default async function request(url, options) {
  const response = await fetch(url, options);

  checkStatus(response);

  const data = await response.json();

  const ret = {
    data,
    headers: {},
  };

  if (response.headers.get('x-total-count')) {
    ret.headers['x-total-count'] = response.headers.get('x-total-count');
  }

  return ret;
}

2.3添加界面，让用户列表展现出来
$ dva g component Users/Users

2.4编辑Users/Users组件
点击查看具体组件实现代码Commit

效果图如下：