我们已经实现了文章列表的分页查询,接下来我们需要实现文章列表的条件查询 .

1. 条件查询布局

如果之前学过不凡学院的乐居商城后台管理系统,那么这一块的布局思路应该非常熟悉:
image.png

  1. <PageContainer className={styles.main}>
  2.   <Card className={styles.searchBar}>
  3.         <Form
  4.           labelCol={{
  5.             span: 4,
  6.           }}
  7.           wrapperCol={{
  8.             span: 20,
  9.           }}
  10.           layout="inline"
  11.         >
  12.           <Row gutter={[20,30]} style={{width:'100%'}}>
  13.             <Col span={6}>
  14.               <Form.Item label="标题" name="title">
  15.                 <Input />
  16.               </Form.Item>
  17.             </Col>
  18.             <Col span={6}>
  19.               <Form.Item label="作者" name="author">
  20.                 <Input />
  21.               </Form.Item>
  22.             </Col>
  23.             <Col span={6} offset={18}>
  24.               <Form.Item>
  25.                 <Button type="ghost">重置</Button>
  26.                 <Button type="primary" htmlType="submit" style={{marginLeft: '20px'}}>
  27.                   查询
  28.                 </Button>
  29.               </Form.Item>
  30.             </Col>
  31.           </Row>
  32.         </Form>
  33.       </Card>
  35. ...
  36. </PageContainer>
  38. // ==>  ./index.less
  39. .main{
  40.   .searchBar{
  41.     background-color: #fff;
  42.     margin-bottom: 30px;
  43.   }
  44. }

image.png

2. 实现查询功能

  1. // React是导出的默认组件,所以不需要加{},而useEffect是单独导出的组件,需要加{}
  2. import React, { useEffect, useState } from 'react';
  3. import { PageContainer } from '@ant-design/pro-layout';
  4. // 引入connect
  5. import { connect } from 'umi';
  6. import type { Dispatch } from 'umi';
  7. import type { MStateType } from './model';
  8. import { Table, Card, Form, Input, Button, Row, Col } from 'antd';
  9. import { pickBy } from 'lodash';
  10. import type { ConnectState } from '@/models/connect.d';
  11. // 声明命名空间
  12. const namespace = 'article';
  13. // 声明props类型
  14. type PropsType = {
  15.   articleList: []; // ??
  16.   dispatch: Dispatch;
  17.   totalCount: number;
  18.   loading: boolean;
  19. };
  21. const ArticleList: React.FC<PropsType> = (props) => {
  22.   // 解构需要用的内容
  23.   const { articleList, totalCount, dispatch, loading } = props;
  24.   // 某个数据是动态的 我们就得使用"响应式＂对象得形式声明,也就是说哪写值变化了,需要更新页面,就需要声明成state
  25.   // 在函数式组件中,因为无法使用this,所以提出来hook形式解决
  26.   // useState 返回了一个数组,第一个参数是变量(响应式对象)名称,第二个是函数名,可以通过第二个函数更新这个变量
  27.   const [pageStart, setPageStart] = useState<number>(1);
  28.   const [pageSize, setPageSize] = useState<number>(10);
  29.   // 定义查询条件
  30.   const [params, setParams] = useState({});
  31.   // 发送请求 尝试发送请求
  32.   // 声明周期函数
  33.   // componentDidMount(){
  35.   // }
  36.   // useEffect是多个生命周期函数的集合,考虑在这里进行数据初始化/请求
  37.   // useEffect 第一个参数是函数类型,用于触发事件, 第二个参数是依赖于哪写数据的变化才触发
  38.   // 如果只希望在第一次进入的时候触发一次,那么第二个参数为[]数组
  39.   // useEffect   componetDidMount  componentDidUpdate  componentWillUnmount
  40.   useEffect(() => {
  41.     dispatch({
  42.       type: `${namespace}/findArticleList`,
  43.       payload: {
  44.         start: pageStart,
  45.         limit: pageSize,
  46.         params,
  47.       },
  48.     });
  49.   }, [pageStart, pageSize, params]);
  50.   // 用于控制数据列
  51.   const columns = [
  52.     {
  53.       title: 'id',
  54.       dataIndex: 'id',
  55.       key: 'id',
  56.     },
  57.     {
  58.       title: '标题',
  59.       dataIndex: 'title',
  60.       key: 'title',
  61.     },
  62.     {
  63.       title: '作者',
  64.       dataIndex: 'author',
  65.       key: 'author',
  66.     },
  67.     {
  68.       title: '概要描述',
  69.       dataIndex: 'summary',
  70.       key: 'summary',
  71.     },
  72.     {
  73.       title: '创建时间',
  74.       dataIndex: 'createTime',
  75.       key: 'createTime',
  76.     },
  77.   ];
  78.   // 比葫芦画瓢  找到form组件  定义了form的ref
  79.   const [form] = Form.useForm();
  80.   const onChange = (pageNumber: number, pSize?: number) => {
  81.     // 页面变化的时候触发 需要更改分页变化
  82.     // console.log('Page: ', pageNumber,pSize);
  83.     setPageStart(pageNumber);
  84.     setPageSize(pSize!);
  85.   };
  86.   // 查询的时候触发 如果需要刷新页面,本质需求是改变params对象 触发effect
  87.   const onSearch = (value: { title?: string; author?: string }) => {
  88.     // {author: 'zs', title: undefined} => {author: 'zs'}
  89.     let useParams = { ...value };
  90.     useParams = pickBy(useParams, (item) => item);
  91.     // console.log(useParams);
  92.     setParams({
  93.       ...useParams,
  94.     });
  95.   };
  96.   const resetSearch = () => {
  97.     form.resetFields();
  98.     setParams({});
  99.   };
  100.   return (
  101.     <PageContainer>
  102.       <Card title="条件查询" style={{ width: '100%', marginBottom: '30px' }}>
  103.         <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={onSearch} form={form}>
  104.           <Row gutter={32}>
  105.             <Col span={6}>
  106.               <Form.Item label="标题" name="title">
  107.                 <Input />
  108.               </Form.Item>
  109.             </Col>
  110.             <Col span={6}>
  111.               <Form.Item label="作者" name="author">
  112.                 <Input />
  113.               </Form.Item>
  114.             </Col>
  115.           </Row>
  116.           <Row gutter={32}>
  117.             <Col span={6} offset={18} style={{ textAlign: 'right' }}>
  118.               <Button onClick={resetSearch}>重置</Button>
  119.               {/* htmlType="submit"  把button变成表单默认提交按钮 用于触发onFinish */}
  120.               <Button type="primary" style={{ marginLeft: 30 }} htmlType="submit">
  121.                 查询
  122.               </Button>
  123.             </Col>
  124.           </Row>
  125.         </Form>
  126.       </Card>
  127.       <Table
  128.         loading={loading}
  129.         pagination={{
  130.           showQuickJumper: true,
  131.           showSizeChanger: true,
  132.           current: pageStart,
  133.           pageSize,
  134.           total: totalCount,
  135.           onChange,
  136.         }}
  137.         rowKey="id"
  138.         dataSource={articleList}
  139.         columns={columns}
  140.       />
  141.       ;
  142.     </PageContainer>
  143.   );
  144. };
  146. // 绑定model和组件 把state映射到props
  147. // 自定义的state不符合,但是可以合并connect.d.ts中的connectState
  148. type StateType = {
  149.   [namespace]: MStateType;
  150. } & ConnectState;
  152. const mapStateToProps = (state: StateType) => ({
  153.     articleList: state[namespace].articleList,
  154.     totalCount: state[namespace].totalCount,
  155.     loading: state.loading.effects['article/findArticleList'] as boolean,
  156. });
  157. export default connect(mapStateToProps)(ArticleList);

总结: 分页查询和条件查询我们已经基本实现, 跟vue相比, useEffect 确实很方便 . 接下来我们实现文章的新增功能.