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

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

2023-06-27 67

版权

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

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

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

最终效果：

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

开始之前

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

第 1 步。安装 tristana 并创建项目

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

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

第 2 步。生成Dashboard 路由

我们要新增路由，新建页面文件和在routeConfig引入该文件即可。

新建，内容如下：src/pages/Dashboard/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 Dashboard = lazy(() => import(/* webpackChunkName: "Dashboard"*/'./pages/Dashboard/index'));
const routes = [
    {
        // 仪表盘页
        path: '/dashboard',
        component: Dashboard
    }
];
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/#/dashboard，你会看到 123 的输出。

第 3 步。构造 mobx 和 service

新增，内容如下：src/mobx/Dashboard/store.js

import { observable, action, runInAction } from 'mobx';
import BasicStore, { initLoading } from '../basicStore';
import { isResultError } from '../../utils/index';
import * as api from '../../servers/dashboard';
class DashBoardStore extends BasicStore {
    @observable list = [];
    @initLoading
    @action
    async getTable() {
        const list = await api.getTable();
        runInAction(() => {
            this.list = isResultError(list);
        });
    }
}
export default DashBoardStore;

basicStor类，是我单独封装的，用于监听每个请求，这样就不用手动处理loading。

然后在引入：src/mobx/rootStore.js

import DashboardStore from './Dashboard/store';
class Store {
    constructor() {
        this.dashboardStore = new DashboardStore();
    }
}
export default new Store();

新建：src/servers/dashboard.js

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

Step 4. 页面组件引入mobx

在文件中，引入：src/pages/Dashboard/index.js

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
@inject('dashboardStore')
@observer
class Index extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const { dashboardStore } = this.props;
        dashboardStore.getTable();
    }
    render() {
        const { dashboardStore: { list }, dashboardStore } = this.props;
        return (
            <section>
                123
            </section>
        );
    }
}
export default Index;

Step 5. 添加界面，让列表展现出来

在src/pages/Dashboard/index.js文件中，引入筛选组件和列表组件：

筛选组件：

// 筛选项
const OrderSearch = (props) => {
    const { handleSubmit } = props;
    return (
        <section className="search">
            <Form
                layout="inline"
                name="orderListSearch"
                onFinish={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>
                <section className="button">
                    <Form.Item>
                        <Button
                            htmlType="submit"
                        >
                            重置
                        </Button>
                        <Button
                            htmlType="submit"
                            className="btn-left"
                        >
                            导出
                        </Button>
                        <Button
                            type="primary"
                            htmlType="submit"
                            className="btn-left"
                        >
                            搜索
                        </Button>
                    </Form.Item>
                </section>
            </Form>
        </section>
    )
}

列表组件：

// 订单表格
const OrderTable = ({ list, isLoading }) =>  {
    // 表格列配置
    const columns = [
        {
            title: '订单编号',
            dataIndex: 'orderId'
        },
        {
            title: '客户名称',
            dataIndex: 'customerName'
        },
        {
            title: '下单方式',
            dataIndex: 'placeOrder'
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName'
        },
        {
            title: '价格',
            dataIndex: 'price'
        },
        {
            title: '下单时间',
            dataIndex: 'placeOrderTime'
        }
    ];
    return (
        <Table
            columns={columns}
            dataSource={list || []}
            loading={isLoading}
            rowKey="orderId"
        />
    );
}

在Index 类下引入两个组件：

render() {
    const { dashboardStore: { list }, dashboardStore } = this.props;
    return (
        <section className="dashboard">
            <OrderSearch handleSubmit={this.handleSubmit} />
            <OrderTable list={list} isLoading={dashboardStore.isLoading.get('getTable')} />
        </section>
    );
}