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

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

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

最终效果:

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


开始之前


  1. 确保 node 版本是 8.4 或以上
  2. 用 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>
    );
}

dashboardStore.isLoading.get('getTable')用于判断请求是否完成,bool值,true ||假

目录
相关文章
|
3天前
|
人工智能 自然语言处理 Shell
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
仅用3分钟,百炼调用满血版Deepseek-r1 API,享受百万免费Token。阿里云提供零门槛、快速部署的解决方案,支持云控制台和Cloud Shell两种方式,操作简便。Deepseek-r1满血版在推理能力上表现出色,尤其擅长数学、代码和自然语言处理任务,使用过程中无卡顿,体验丝滑。结合Chatbox工具,用户可轻松掌控模型,提升工作效率。阿里云大模型服务平台百炼不仅速度快,还确保数据安全,值得信赖。
158114 24
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
|
5天前
|
人工智能 API 网络安全
用DeepSeek,就在阿里云!四种方式助您快速使用 DeepSeek-R1 满血版!更有内部实战指导!
DeepSeek自发布以来,凭借卓越的技术性能和开源策略迅速吸引了全球关注。DeepSeek-R1作为系列中的佼佼者,在多个基准测试中超越现有顶尖模型,展现了强大的推理能力。然而,由于其爆火及受到黑客攻击,官网使用受限,影响用户体验。为解决这一问题,阿里云提供了多种解决方案。
17039 37
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型
DeepSeek 系列模型以其卓越性能在全球范围内备受瞩目,多次评测中表现优异,性能接近甚至超越国际顶尖闭源模型(如OpenAI的GPT-4、Claude-3.5-Sonnet等)。企业用户和开发者可使用 PAI 平台一键部署 DeepSeek 系列模型,实现 DeepSeek 系列模型与现有业务的高效融合。
|
5天前
|
并行计算 PyTorch 算法框架/工具
本地部署DeepSeek模型
要在本地部署DeepSeek模型,需准备Linux(推荐Ubuntu 20.04+)或兼容的Windows/macOS环境,配备NVIDIA GPU(建议RTX 3060+)。安装Python 3.8+、PyTorch/TensorFlow等依赖,并通过官方渠道下载模型文件。配置模型后,编写推理脚本进行测试,可选使用FastAPI服务化部署或Docker容器化。注意资源监控和许可协议。
1311 8
|
13天前
|
人工智能 搜索推荐 Docker
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
DeepSeek R1 + LobeChat + Ollama:快速本地部署模型,创建个性化 AI 助手
3417 117
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
|
8天前
|
人工智能 自然语言处理 API
DeepSeek全尺寸模型上线阿里云百炼!
阿里云百炼平台近日上线了DeepSeek-V3、DeepSeek-R1及其蒸馏版本等六款全尺寸AI模型,参数量达671B,提供高达100万免费tokens。这些模型在数学、代码、自然语言推理等任务上表现出色,支持灵活调用和经济高效的解决方案,助力开发者和企业加速创新与数字化转型。示例代码展示了如何通过API使用DeepSeek-R1模型进行推理,用户可轻松获取思考过程和最终答案。
|
5天前
|
人工智能 自然语言处理 程序员
如何在通义灵码里用上DeepSeek-V3 和 DeepSeek-R1 满血版671B模型?
除了 AI 程序员的重磅上线外,近期通义灵码能力再升级全新上线模型选择功能,目前已经支持 Qwen2.5、DeepSeek-V3 和 R1系列模型,用户可以在 VSCode 和 JetBrains 里搜索并下载最新通义灵码插件,在输入框里选择模型,即可轻松切换模型。
934 14
|
12天前
|
API 开发工具 Python
阿里云PAI部署DeepSeek及调用
本文介绍如何在阿里云PAI EAS上部署DeepSeek模型,涵盖7B模型的部署、SDK和API调用。7B模型只需一张A10显卡,部署时间约10分钟。文章详细展示了模型信息查看、在线调试及通过OpenAI SDK和Python Requests进行调用的步骤,并附有测试结果和参考文档链接。
1938 9
阿里云PAI部署DeepSeek及调用
|
9天前
|
人工智能 数据可视化 Linux
【保姆级教程】3步搞定DeepSeek本地部署
DeepSeek在2025年春节期间突然爆火出圈。在目前DeepSeek的网站中,极不稳定,总是服务器繁忙,这时候本地部署就可以有效规避问题。本文以最浅显易懂的方式带读者一起完成DeepSeek-r1大模型的本地部署。
|
12天前
|
缓存 自然语言处理 安全
快速调用 Deepseek API!【超详细教程】
Deepseek 强大的功能,在本教程中,将指导您如何获取 DeepSeek API 密钥,并演示如何使用该密钥调用 DeepSeek API 以进行调试。

热门文章

最新文章