如何基于lucian项目模板，打造一个基本列表展示

[xuya227939]

基于lucian这套项目模板，引导大家如何创建列表展示，搜索，自动处理 loading 状态等。全部代码在仓库下。

最终效果：

网站效果预览：https://downfuture.com

开始之前

1. 确保 node 版本是 8.4 或以上
2. 用 cnpm 或 yarn 能节约你安装依赖的时间

Step 1. 安装 lucian 并创建项目

$ git clone https://github.com/Cherry-Team/lucian.git
$ cd lucian
$ cnpm i
$ npm start

浏览器会自动开启，并打开 http://localhost:8080

Step 2. 生成order/list 路由

我们要新增路由，新建页面文件和在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 的输出。

Step 3. 构造redux、service

新增 Action文件, src/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)
    };
}

新建 service文件，src/servers/table.js：

import request from '../request';

// 获取表格数据
export function getTable(params = {}) {
    return request({
        url: 'getTable',
        method: 'POST',
        data: params
    });
}

新建 reducer文件，src/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 || false

完