基于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 (
); } } 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
; }; const routeConfig = routes.map((route, i) =>
); 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 (
); } } export default Index;
Step 5. 添加界面，让列表展现出来
在src/pages/Dashboard/index.js文件中，引入筛选组件和列表组件：
筛选组件：
// 筛选项 const OrderSearch = (props) => { const { handleSubmit } = props; return (
) }
列表组件：
// 订单表格 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 (
); }
在Index 类下引入两个组件：
render() { const { dashboardStore: { list }, dashboardStore } = this.props; return (
); }
dashboardStore.isLoading.get('getTable')用于判断请求是否完成，bool值，true ||假
完
