1. 实现布局交互

首先确定新增和编辑的按钮布局, 这里我们采用新增弹窗的交互形式来实现:
创建文件: src\pages\content\Article\components\ArticleEdit.tsx

  1. import React, { useEffect,useState } from 'react';
  2. import {Modal, Button, Form , Input, Switch} from 'antd';
  3. import type {SetStateAction} from 'react';
  5. const {TextArea} = Input;
  7. type PropsType = {
  8.   isShow: boolean;
  9.   setIsShow: any;
  10.   editId?: string;
  11. }
  13. const ArticleEdit: React.FC<PropsType> = props=>{
  14.   const {isShow,setIsShow,editId} = props;
  15.   const handleOk = ()=>{
  16.     setIsShow(false);
  17.   }
  18.   const handleCancel = ()=>{
  19.     setIsShow(false);
  20.   }
  21.   const [form] = Form.useForm();
  22.   useEffect(()=>{
  23.     if(isShow&&editId){ 
  24.       alert('编辑请求...')
  25.     }else if(isShow&&!editId){
  26.       alert('新增请求...')
  27.     }
  28.   },[isShow])
  30.   /**
  31.    * 提交保存
  32.    */
  33.   const handleFinish = v=>{
  34.     console.log(v);
  35.   }
  37.   return (
  38.     <Modal width="60%" title="编辑文章" visible={isShow} onOk={handleOk} onCancel={handleCancel}>
  39.       <Form
  40.         form={form}
  41.         onFinish={handleFinish}
  42.         labelCol={
  43.           {
  44.             span: 4
  45.           }
  46.         }
  47.         wrapperCol={
  48.           {
  49.             span:20
  50.           }
  51.         }
  52.       >
  53.         <Form.Item
  54.           label="标题"
  55.           rules={
  56.             [{required: true, message: '标题不能为空!'}]
  57.           }
  58.           name="title"
  59.         >
  60.           <Input placeholder="请输入文章标题"></Input>
  61.         </Form.Item>
  62.         <Form.Item 
  63.           label="作者"
  64.           rules={
  65.             [{required: true, message: '作者不能为空!'}]
  66.           }
  67.           name="author"
  68.         >
  69.           <Input placeholder="请输入作者"></Input>
  70.         </Form.Item>
  71.         <Form.Item
  72.           label="文章概要"
  73.           name="summary"
  74.         >
  75.           <TextArea></TextArea>
  76.         </Form.Item>
  77.         <Form.Item
  78.           label="文章显示"
  79.           name="isShow"
  80.         >
  81.           <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked></Switch>
  82.         </Form.Item>
  83.       </Form>
  84.     </Modal>
  85.   )
  86. }
  88. export default ArticleEdit;

src\pages\content\Article\index.tsx

  1. import React, { useEffect, useState } from 'react';
  2. // # https://procomponents.ant.design/components/page-container
  3. import { PageContainer } from '@ant-design/pro-layout';
  4. import type { ArticleType } from './model';
  5. import { Table, Form, Input, Button, Card, Row, Col,Space } from 'antd';
  6. import type {TableColumnType} from 'antd';
  7. import { connect } from 'umi';
  8. import type { Dispatch } from 'umi';
  9. import styles from './index.less';
  10. import {pickBy} from 'lodash';
  11. // 引入明细组件
  12. import ArticleEdit from './components/ArticleEdit';
  14. // 定义model命名空间
  15. const namespace = 'article';
  16. type StateType = {
  17.   articleList: ArticleType[];
  18.   articleTotalCount: number;
  19.   dispatch: Dispatch;
  20.   loading: any;
  21. };
  22. type PropsType = {
  23.   articleList: ArticleType[];
  24.   articleTotalCount: number;
  25.   dispatch: Dispatch;
  26.   loading: boolean;
  27. };
  28. type SearchType = {
  29.   author?: string;
  30.   title?: string;
  31. }
  32. // type ColumnType = {
  33. //   title: string;
  34. //   dataIndex?: string;
  35. //   render: any
  36. // }
  38. const ArticleList: React.FC<PropsType> = (props) => {
  39.   const { articleList, articleTotalCount, dispatch, loading } = props;
  40.   // 条件查询,可以根据title,author查询
  41.   const [params,setParams] = useState<SearchType>({});
  42.   // 分页起始页肯定是 1
  43.   const [current, setCurrent] = useState(1);
  44.   // 数据量不大 为了体现分页 暂时控制每页2条数据
  45.   const [pageSize, setPageSize] = useState(2);
  46.   // 是否打开编辑
  47.   const [isEdit, setIsEdit] = useState<boolean>(false);
  48.   // 编辑id
  49.   const [editId,setEditId] = useState<string>('');
  51.   // 获取form组件
  52.   const [form] = Form.useForm();
  53.   // 监听current和pageSize的变化重新发送请求
  54.   useEffect(() => {
  55.     dispatch({
  56.       type: `${namespace}/findArticleList`,
  57.       payload: {
  58.         start: current,
  59.         limit: pageSize,
  60.         params,
  61.       },
  62.     });
  63.   }, [current, pageSize,params]);
  65.   /**
  66.    * 去新增页面
  67.    * @param id 
  68.    */
  69.   const goAdd = ()=>{
  70.     setEditId('');
  71.     setIsEdit(true);
  72.   }
  73.   /**
  74.    * 去编辑页
  75.    * @param id 
  76.    */
  77.   const goEdit = (id: string)=>{
  78.     // alert(`id${id}`)
  79.     setEditId(id);
  80.     setIsEdit(true);
  81.   }
  82.   /**
  83.    * 删除行数据
  84.    * @param id 
  85.    */
  86.   const goDel = (id: string)=>{
  87.     alert(`del${id}`)
  88.   }
  89.   type ColumnType = {
  90.     title: string;
  91.     dataIndex?: string;
  92.   }
  93.   // 放到组件外部将无法调用组件内部的 state ; 所以移到组件内部
  94.   const colums: TableColumnType<ColumnType>[] = [
  95.     {
  96.       title: '#',
  97.       // 如果定义形参未使用 建议添加_
  98.       render(_text,_record,index){
  99.         return `${index+1}`;
  100.       }
  101.     },
  102.     {
  103.       title: 'ID',
  104.       dataIndex: 'id',
  105.     },
  106.     {
  107.       title: '标题',
  108.       dataIndex: 'title',
  109.     },
  110.     {
  111.       title: '作者',
  112.       dataIndex: 'author',
  113.     },
  114.     {
  115.       title: '封面',
  116.       render: ({coverImg}: ArticleType) => <img className={styles.coverImg} src={coverImg} alt="" />,
  117.     },
  118.     {
  119.       title: '阅读量',
  120.       dataIndex: 'viewCount',
  121.     },
  122.     {
  123.       title: '创建时间',
  124.       dataIndex: 'createTime',
  125.     },
  126.     {
  127.       title: '操作',
  128.       render:({id})=>(
  129.       <Space>
  130.           <a  onClick={()=>goEdit(id)}>编辑</a>
  131.           <a onClick={()=>goDel(id)} className={styles.delBtn}>删除</a>
  132.         </Space>
  133.       )
  134.     }
  135.   ];
  137.   /**
  138.    * 提交表单触发事件 v为表单name对应的对象
  139.    * @param v 
  140.    */
  141.   const onFinish = (v: SearchType)=>{
  143.     // console.log(v);
  144.     // 对于空对象 可能会出现 undefined 的情况,需要去除该属性
  145.     const useParams = pickBy(v,(item: any)=>item);
  146.     // 我们只需要改变了 params  就可以触发 useEffect
  147.     setParams(useParams);
  148.     setCurrent(1);
  149.   }
  150.   const onReset = ()=>{
  151.     setParams({});
  152.     form.resetFields();
  153.   }
  154.   return (
  155.     <PageContainer className={styles.main}>
  156.       <Card className={styles.searchBar}>
  157.         <Form
  158.           form={form}
  159.           labelCol={{
  160.             span: 4,
  161.           }}
  162.           wrapperCol={{
  163.             span: 20,
  164.           }}
  165.           layout="inline"
  166.           onFinish={onFinish}
  167.         >
  168.           <Row gutter={[20,30]} style={{width:'100%'}}>
  169.             <Col span={6}>
  170.               <Form.Item label="标题" name="title">
  171.                 <Input />
  172.               </Form.Item>
  173.             </Col>
  174.             <Col span={6}>
  175.               <Form.Item label="作者" name="author">
  176.                 <Input />
  177.               </Form.Item>
  178.             </Col>
  179.             <Col span={6} offset={18}>
  180.               <Form.Item>
  181.                 <Button type="ghost" onClick={onReset}>重置</Button>
  182.                 <Button type="primary" htmlType="submit" style={{marginLeft: '20px'}}>
  183.                   查询
  184.                 </Button>
  185.               </Form.Item>
  186.             </Col>
  187.           </Row>
  188.         </Form>
  189.       </Card>
  191.       {/* rowKey 表格行 key 的取值，可以是字符串或一个函数 标识唯一性,这里我们用每一条数据的id作为key */}
  192.       <Button onClick={goAdd} type="primary" className={styles.addBtn}>新增</Button>
  193.       <Table
  194.         loading={loading}
  195.         rowKey="id"
  196.         columns={colums}
  197.         dataSource={articleList}
  198.         pagination={{
  199.           showQuickJumper: true,
  200.           current,
  201.           pageSize,
  202.           total: articleTotalCount,
  203.           showSizeChanger: true,
  204.           onShowSizeChange(_curr, size) {
  205.             // console.log(v)
  206.             setPageSize(size);
  207.           },
  208.           onChange(v) {
  209.             setCurrent(v);
  210.           },
  211.         }}
  212.       />
  213.       {/* 弹窗部分 */}
  214.       <ArticleEdit editId={editId} isShow={isEdit} setIsShow={setIsEdit} />
  215.     </PageContainer>
  216.   );
  217. };
  218. /**
  219.  * 提取需要的属性
  220.  * dva-loading
  221.  * @param param0
  222.  */
  223. const mapStateToProps = (state: StateType) => {
  224.   return {
  225.     articleList: state[namespace].articleList,
  226.     articleTotalCount: state[namespace].articleTotalCount,
  227.     dispatch: state.dispatch,
  228.     loading: state.loading.effects[`${namespace}/findArticleList`] as boolean,
  229.   };
  230. };
  231. export default connect(mapStateToProps)(ArticleList);

image.png

2. 接口封装和modal实现

新增和编辑是两个需要大量复用组件的功能,通过在乐居商城的后台实现中总结的经验,完全可以考虑把这两个功能共享同样的组件来实现, 减少代码量,提高复用性.
src\services\content\article.ts

  1. import type {ArticleType} from '@/pages/content/Article/model';
  3. ...
  5. /**
  6.  * 新增文章
  7.  * @param params 
  8.  */
  9. export async function addArticle(params: ArticleType) {
  10.   return request(`/lejuAdmin/productArticle/addArticle`, {
  11.     method: 'POST',
  12.     data: params,
  13.   });
  14. }
  16. /**
  17.  * 编辑文章
  18.  * @param params 
  19.  */
  20. export async function updateArticle(params: ArticleType) {
  21.   return request(`/lejuAdmin/productArticle/updateArticle`, {
  22.     method: 'POST',
  23.     data: params,
  24.   });
  25. }
  27. /**
  28.  * 删除文章
  29.  * @param id 
  30.  */
  31. export async function delArticle({id}: {id: string}) {
  32.   return request(`/lejuAdmin/productArticle/del/${id}`, {
  33.     method: 'DELETE'
  34.   });
  35. }

src\pages\content\Article\components\model.ts
这里先添加新增和编辑功能, 同样的,我们根据提交的数据对象是否有 id(id为后台生成) 来判断当前请求是新增还是编辑.
疑问: callback 回调函数的意义?

  • 在vuex中的action中,可以通过返回一个promise对象来响应处理, 在dva的effects中,我们可以通过传入回调函数的形式来通知结果. ```typescript import {addArticle as addArticleApi,updateArticle as updateArticleApi} from ‘@/services/content/article’; import {message} from ‘antd’; import type {Effect,Reducer} from ‘umi’;

export type MType = { namespace: string; state: {

}; effects: { saveArticle: Effect; }, reducers: {

}

}

const M: MType = { namespace: ‘articleEdit’, state: {

}, effects: { *saveArticle({payload}, {call,put}){ // 成功后为了通知组件 这里添加了callback的回调函数 const {article,callback} = payload; // 如果有id则为编辑,否则为新增. 这个和vue乐居商城逻辑一样. const saveOrUpdateApi = article.id ? updateArticleApi:addArticleApi; const {success,message:errMsg} = yield call(saveOrUpdateApi,article); if(success){ message.success(‘保存成功!’); if(callback && typeof callback === ‘function’){ callback(); } }else{ message.error(errMsg); } }

}, reducers: {

} }

export default M;

  1. <a name="1l6CX"></a>
  2. ### 3. 富文本
  3. 从antd官方推荐的 [社区精选推荐](https://ant.design/docs/react/recommendation-cn) 中找到 [braft-editor](https://github.com/margox/braft-editor) .<br />**注意事项: **
  5. - braft富文本的`value `类型为 `EditorState`, 获取html需要调用 `value.toHTML()` 方法
  6. - `value` ` onChange`  `onSave`
  7. - 防抖提高性能
  8. ```shell
  9. # 安装依赖
  10. npm install braft-editor --save
  1. // 给富文本添加关联值
  2. const [editorState,setEditorState] = useState<EditorState>(null);
  4. // 初始化富文本内容
  5. setEditorState(BraftEditor.createEditorState(article.content1))
  6. // 获取富文本转换的html
  7. const htmlStr = editorState.toHTML();
  8. // 监听变化 
  9. const handleEditorChange = (v: EditorState) => {
  10.     setEditorState(v);
  11.   };
  12. <BraftEditor
  13.           style={{ border: '1px solid #e5e5e5' }}
  14.           value={editorState}
  15.           onChange={debounce(handleEditorChange, 500)}
  16.           onSave={submitContent}
  17.         />

4. 上传图片

接口使用通用上传接口,上传成功之后不会保存数据库, 后台对接阿里云OSS对象存储, 成功后返回阿里云资源地址.
image.png
注意事项:

  • 上传接口也需要token,通过自定义headers实现
  • listType="picture" 可以使用默认样式
  • fileList 属性必须添加,否则会造成 status 无法变成 done的bug, 请参考 #2423
  • 在 4.13.0 版本之前受控状态存在 bug。
  • Form.Item包含 Upload组件, 如何实现校验?

image.pngonChange#

上传中、完成、失败都会调用这个函数。

文件状态改变的回调，返回为：

  1. {
  2.   file: { /* ... */ },
  3.   fileList: [ /* ... */ ],
  4.   event: { /* ... */ },
  5. }

  1. file 当前操作的文件对象。

    1. {
    2. uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
    3. name: 'xx.png'   // 文件名
    4. status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
    5. response: '{"status": "success"}', // 服务端响应内容
    6. linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    7. }

  2. fileList 当前的文件列表。

  3. event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

    5. 表单验证

    注意事项:
  • 因为不是通过 Form.onFinish 触发,需要手动触发表单校验: validateFields
  • Form.Item 默认会通过name属性和包含子组件的value属性进行匹配校验,如果子组件没有value属性:

image.png

  • Form.Item 包含多个子元素,会报错. 我们需要对多个子元素 进行封装,变成一个自定义组件, 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

    • 提供受控属性 value 或其它与 valuePropName 的值同名的属性。
    • 提供 onChange 事件或 trigger 的值同名的事件。

  • 对于 Form.Item 包含Upload 组件, 无法触发表单验证的问题处理, 我们把Upload组件封装为自定义组件, 该组件接收 value和onChange ,遵循以上约定即可.

  • src\pages\content\Article\components\ArticleEdit.tsx

  • 关于 UploadFile 的类型推导,通过提示找到源码位置,直接引入

    1. // 根据提示找到文件类型的位置 手动引入
    2. import type { UploadFile } from 'antd/lib/upload/interface';
    3. ...
    4. // 局部组件 自定义formItem组件
    5. // # https://ant.design/components/form-cn/#components-form-demo-customized-form-controls
    6. const FormUploadFC: React.FC<UploadPropsType> = ({ onChange }) => {
    7. const [fileList, setFileList] = useState<UploadFile[]>([]);
    8. return (
    9.   <Upload
    10.     action="/lejuAdmin/material/uploadFileOss"
    11.     listType="picture"
    12.     fileList={fileList}
    13.     headers={{
    14.       token: getToken() || '',
    15.     }}
    16.     // 用于移除文件后 对表单的校验同步
    17.     onRemove={() => {
    18.       onChange?.('');
    19.       return true;
    20.     }}
    21.     // # https://ant.design/components/upload-cn/#API
    22.     onChange={({ file, fileList: files }: { file: UploadFile; fileList: UploadFile[] }) => {
    23.       // clone数组,然后只需要一个
    24.       let nowFiles = [...files];
    25.       nowFiles = nowFiles.slice(-1);
    26.       const { status, response } = file;
    27.       if (status === 'done') {
    28.         // 获取上传成功的回调结果
    29.         const { success, data, message: err } = response;
    30.         if (success) {
    31.           message.success(`${file.name} 上传成功!`);
    32.           // 避免因直接修改实参造成的报错
    33.           if (nowFiles.length > 0) {
    34.             nowFiles[0].url = data.fileUrl;
    35.             onChange?.(data.fileUrl);
    36.           }
    37.         } else {
    38.           message.error(err);
    39.         }
    40.       } else if (status === 'error') {
    41.         message.error(`${file.name} file upload failed.`);
    42.       }
    43.       // # https://github.com/ant-design/ant-design/issues/2423
    44.       setFileList(nowFiles);
    45.     }}
    46.   >
    47.     <Button icon={<UploadOutlined />}>Upload</Button>
    48.   </Upload>
    49. );
    50. };
    52. // ... 使用
    53. <Form.Item
    54.  label="上传封面"
    55.  name="coverImg"
    56.  rules={[{ required: true, message: '上传封面图片' }]}
    57. >
    58.    <FormUploadFC />
    59. </Form.Item>

    6. 提交保存

    提交保存,需要对数据进行格式化,使之符合接口数据要求.
    注意事项:

  • coverImg字段已经通过自定义表单组件添加到了form

  • cb是回调函数,需要关闭窗口,重置表单,刷新父类列表.

src\pages\content\Article\components\ArticleEdit.tsx

  1. // 默认到处组件
  2. const ArticleEdit: React.FC<PropsType> = (props) => {
  3.   // refresh 为通过父级组件传入的参数 为函数类型
  4.   const { isShow, setIsShow, editId, dispatch, refresh } = props; 
  5.     ...
  6.   const cb = () => {
  7.       // 1.关闭弹窗 清除校验
  8.       setIsShow(false);
  9.       form.resetFields();
  10.       // 2.刷新父类列表
  11.       refresh();
  12.     };
  14.   const handleOk = () => {
  15.     form
  16.       .validateFields()
  17.       .then(() => {
  18.         // 获取表单数据
  19.         const v = form.getFieldsValue();
  20.         // 获取富文本转换的html
  21.         const htmlStr = editorState.toHTML();
  22.         // 封装提交数据
  23.         const articleData = {
  24.           ...v,
  25.           isShow: v.isShow ? 1 : 0,
  26.           content1: htmlStr,
  27.           content2: htmlStr,
  28.           editorType: 0, // 编辑器类型 默认富文本,写死
  29.         };
  31.         if (dispatch) {
  32.           // // 提交
  33.           dispatch({
  34.             type: `${namespace}/saveArticle`,
  35.             payload: {
  36.               article: articleData,
  37.               callback: cb,
  38.             },
  39.           });
  40.         }
  41.       })
  42.       .catch(() => {
  43.         message.error('请注意表单验证!');
  44.       });
  45.   };
  46.   ...

src\pages\content\Article\index.tsx

  1. // 新增 refreshList 函数  为了抽离发送请求的dispatch
  2. // 另外需要在 子组件 <ArticleEdit> 中调用当前组件,需要传递 refresh 函数进去
  3. /**
  4.    * 刷新数据列表
  5.    */
  6.   const refreshList = ()=>{
  7.     dispatch({
  8.       type: `${namespace}/findArticleList`,
  9.       payload: {
  10.         start: current,
  11.         limit: pageSize,
  12.         params,
  13.       },
  14.     });
  15.   }
  16.   // 监听current和pageSize的变化重新发送请求
  17.   useEffect(() => {
  18.     refreshList();
  19.   }, [current, pageSize,params]);
  21. ...
  22. {/* 弹窗部分 */}
  23. <ArticleEdit editId={editId} isShow={isEdit} setIsShow={setIsEdit} refresh={refreshList}/>

image.png