基于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 ( <section> 123 </section> ); } } 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 <PrivateRoute exact path={route.path} component={route.component} />; }; const routeConfig = routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />); 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 ( <section> 123 </section> ); } } 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 ( <section className="orderListSearch"> <article> <Form layout="inline" name="orderListSearch" onFinish={this.handleSubmit} > <Form.Item label="订单编号" name="orderId" > <Input placeholder="请输入订单编号" style={{ width: colWidth }} /> </Form.Item> <Form.Item label="客户名称" name="customerName" > <Input placeholder="请输入客户名称" style={{ width: colWidth }} /> </Form.Item> <Form.Item label="下单方式" name="placeOrder" > <Select allowClear style={{ width: colWidth }} placeholder="请选择下单方式" > <Option value={1}>自主下单</Option> <Option value={2}>代下单</Option> </Select> </Form.Item> <Form.Item> <article className="button"> <Button type="primary" htmlType="submit" icon={<Icon type="icon-shipin" />} > 提交 </Button> </article> </Form.Item> </Form> </article> </section> ); } } 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 ( <Table columns={columns} dataSource={listData || []} loading={isLoading} rowKey="orderId" /> ); }
在下引入两个组件：src/pages/orderList/index.js
render() { const { loadingType, actionType, datas } = this.props; return ( <section className="orderList"> <OrderListSearch /> <OrderTable listData={!isEmpty(datas) ? datas.listData : []} isLoading={loadingType.get('getTable')} /> </section> ); }
loadingType.get('getTable')用于判断请求是否完成，bool值，true ||假
完
