如何基于lucian项目模板，打造一个基本列表展示 #99-阿里云开发者社区

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

2023-06-27 62

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如何基于lucian项目模板，打造一个基本列表展示 #99

基于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>
        );
    }