前后端分离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

效果图如下：