基于lucian这套项目模板，引导大家如何创建列表展示，搜索，自动处理 load 状态等。全部代码在仓库下。
最终效果：
网站效果预览：https://downfuture.com
开始之前
确保 node 版本是 8.4 或以上
用 cnpm 或 yarn 能节约你安装依赖的时间
第 1 步。安装 lucian 并创建项目
$ git clone https://github.com/Cherry-Team/lucian.git $ cd lucian $ cnpm i $ npm start
浏览器会自动开启，并打开 http://localhost:8080
第 2 步。生成订单/列表路由
我们要新增路由，新建页面文件和在routeConfig引入该文件即可。
新建 ，内容如下：src/pages/orderList/index.js
import React, { Component } from 'react'; class Index extends Component { constructor(props) { super(props); } render() { return (
); } } export default Index;
然后在 文件下，引入该组件src/routeConfig
// 路由配置文件 import React, { lazy } from 'react'; import PrivateRoute from './components/PrivateRoute/index'; const OrderList = lazy(() => import(/* webpackChunkName: "OrderList"*/'./pages/orderList/index')); const routes = [ { // 订单列表页 path: '/order/list', component: orderList } ]; const RouteWithSubRoutes = route => { return
; }; const routeConfig = routes.map((route, i) =>
); export default routeConfig;
然后访问 http://localhost:8080/#/order/list，你会看到 123 的输出。
第 3 步。构造冗余、服务
新增 文件, ，内容如下：Actionsrc/mobx/actions/orderList.js
import * as api from '../servers/table'; // 获取表格数据 export const GET_TABLE = 'getTable'; export function getTable(params) { return { type: GET_TABLE, payload: api.getTable(params) }; }
新建 文件，：servicesrc/servers/table.js
import request from '../request'; // 获取表格数据 export function getTable(params = {}) { return request({ url: 'getTable', method: 'POST', data: params }); }
新建 文件，，内容如下：reducersrc/reducers/orderList.js
import { fromJS } from 'immutable'; import { createReducer } from 'redux-immutablejs'; import { GET_TABLE } from './../actions/orderList'; const initialState = fromJS({ datas: {} }); export default createReducer(initialState, { [GET_TABLE]: (state, { payload }) => { return state.set('datas', payload); } });
Step 4. 页面组件引入Redux
在文件中，引入：src/pages/orderList/index.js
import React, { Component } from 'react'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import * as action from '../../actions/orderList'; import { isEmpty } from '../../utils/index'; const mapStateToProps = state => { let { orderList, actionType, loadingType } = state; orderList = orderList.toJS(); return { datas: orderList.datas, actionType, loadingType }; }; const mapDispatchToProps = (dispatch) => ({ getTable: (...args) => dispatch(action.getTable(...args)) }); class Index extends Component { constructor(props) { super(props); this.state = { }; } componentDidMount() { const { getTable } = this.props; getTable(); } render() { const { loadingType, actionType, datas } = this.props; return (
); } } export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Index));
Step 5. 添加界面，让列表展现出来
在文件中，引入筛选组件和列表组件：src/pages/orderList/index.js
筛选组件：
import React, { Component } from 'react'; import { Button, Select, Input, Form } from 'antd'; import Icon from '../../../components/Icon/index'; import './orderListSearch.less'; const colWidth = 150; const { Option } = Select; class orderListSearch extends Component { constructor(props) { super(props); } // 表单提交 handleSubmit = values => { console.log('Success:', values); } render() { return (
); } } export default orderListSearch;
列表组件：
import React from 'react'; import { Table } from 'antd'; // 表格列配置 const columns = [ { title: '订单编号', dataIndex: 'orderId' }, { title: '客户名称', dataIndex: 'customerName' }, { title: '下单方式', dataIndex: 'placeOrder' }, { title: '商品名称', dataIndex: 'goodsName' }, { title: '价格', dataIndex: 'price' }, { title: '下单时间', dataIndex: 'placeOrderTime' } ]; export default function orderTable({ listData, isLoading }) { return (
); }
在下引入两个组件：src/pages/orderList/index.js
render() { const { loadingType, actionType, datas } = this.props; return (
); }
loadingType.get('getTable')用于判断请求是否完成，bool值，true ||假
完
