基于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> ); }
dashboardStore.isLoading.get('getTable')用于判断请求是否完成，bool值，true ||假
完
