接下来我们开发主体功能. 通过文章内容的增删改查的实现,来帮助大家快速的掌握ant design pro的常规功能开发.

接口

image.png

文章列表功能

接口: /lejuAdmin/productArticle/findArticles/{start}/{limit}
功能说明: 这是一个典型的分页查询功能,另外还包含条件查询. 由于后台实现的需求,虽然是查询功能,但接口请求类型为post.

1. 创建页面:

文件: src\pages\content\Article\index.tsx
PageContainer : 是antd pro的内容容器布局, 由 pro-layout 实现.

  1. import React from 'react';
  2. // # https://procomponents.ant.design/components/page-container
  3. import {PageContainer} from '@ant-design/pro-layout';
  5. const ArticleList: React.FC = ()=>{
  6.   return (
  7.     <PageContainer>
  8.       文章列表页
  9.     </PageContainer>
  10.   )
  11. }
  13. export default ArticleList;

2. 添加路由配置

文件: config\routes.ts

  1.                     ....
  2.                     {
  3.                 path: '/welcome',
  4.                 name: 'welcome',
  5.                 icon: 'smile',
  6.                 component: './Welcome',
  7.               },
  8.                // 在此添加 内容管理/文章管理路由
  9.                               //考虑后续还会追加  内容管理/图片管理  等功能
  10.               {
  11.                 path: '/content',
  12.                 name: 'content',
  13.                 icon: 'smile',
  14.                 routes: [
  15.                   {
  16.                     path: '/content/articleList',
  17.                     name: 'articleList',
  18.                     icon: 'smile',
  19.                     component: './content/Article'
  20.                   }
  21.                 ]
  22.               },
  23.            ...

国际化说明: 此时后台可以访问但会报国际化错误, 这里我们用不到国际化,所以取消国际化配置.
image.png
于是再次修改路由配置为: 

  1.                         ...    
  2.                         {
  3.                 path: '/welcome',
  4.                 name: '欢迎',
  5.                 icon: 'smile',
  6.                 component: './Welcome',
  7.               },
  8.               {
  9.                 path: '/content',
  10.                 name: '内容管理',
  11.                 icon: 'smile',
  12.                 routes: [
  13.                   {
  14.                     path: '/content/articleList',
  15.                     name: '文章列表',
  16.                     icon: 'smile',
  17.                     component: './content/Article'
  18.                   }
  19.                 ]
  20.               },
  21.               ...

image.png

3. 携带token

文件: utils\request.ts

  1. // 假设umi-requset也有拦截器 可以把token的获取放到拦截器中
  2. request.interceptors.request.use((url, options) => {
  3.   // 定义新的options 拦截原来的配置
  4.   const useOptions = {...options};
  5.   // 如果有token直接添加
  6.   if(getToken()){
  7.     useOptions.headers = {
  8.       token: getToken() || ''
  9.     }
  10.   }
  11.   return {
  12.     url,
  13.     options: { ...useOptions, interceptors: true },
  14.   };
  15. });

4. 创建接口

文件: src\services\content\article.ts

  1. import request from '@/utils/request';
  3. // 条件查询,可以根据title,author查询
  4. export type ArticleListSearchType = {
  5.   start: number;
  6.   limit: number;
  7.   params?: {
  8.     title?: string; 
  9.     author?: string;
  10.   }
  11. }
  12. /**
  13.  * 分页条件查询 文章列表
  14.  * @param param0 
  15.  */
  16. export async function articleList({start, limit, params}: ArticleListSearchType) {
  17.   return request(`/lejuAdmin/productArticle/findArticles/${start}/${limit}`, {
  18.     method: 'POST',
  19.     data: params,
  20.   });
  21. }

5. 创建model

文件: src\pages\content\Article\model.ts

  1. import {articleList as articleListApi} from '@/services/content/article';
  2. import {message} from 'antd';
  3. import type {Effect,Reducer} from 'umi';
  4. // 文章类型 参照接口
  5. export type ArticleType = {
  6.   id?: string;
  7.   title: string;
  8.   author: string;
  9.   collectCount: number;
  10.   content1?: string;
  11.   content2?: string;
  12.   coverImg?: string;
  13.   createTime?: string;
  14.   editorType?: number;
  15.   isShow?: number;
  16.   modifyTime?: string;
  17.   summary?: string;
  18.   viewCount?: number;
  19.   zanCount?: number;
  20. }
  22. export type MType = {
  23.   namespace: string;
  24.   state: {
  25.     articleList: ArticleType[]; 
  26.     articleTotalCount: number;
  27.   };
  28.   effects: {
  29.     findArticleList: Effect
  30.   },
  31.   reducers: {
  32.     setArticleList: Reducer
  33.   }
  35. }
  37. const M: MType = {
  38.   namespace: 'article',
  39.   state: {
  40.     articleList: [],
  41.     articleTotalCount: 0
  42.   },
  43.   effects: {
  44.     *findArticleList({payload},{call,put}){
  45.       // 解构返回结果,判断是否成功
  46.       const {success,data,message: errMsg} = yield call(articleListApi,payload);
  47.       if(success){
  48.         yield put({
  49.           type: 'setArticleList',
  50.           payload: data
  51.         })
  52.       }else{
  53.         // 失败提示错误
  54.         message.error(errMsg);
  55.       }
  57.     }
  58.   },
  59.   reducers: {
  60.     setArticleList(state, {payload}){
  61.       const {total,rows} = payload;
  62.       return {
  63.         ...state,
  64.         articleTotalCount: total,
  65.         articleList: rows
  66.       }
  67.     }
  68.   }
  69. }
  71. export default M;

6. 页面添加表格

此时我们需要从 ant design 中查找table组件, 参照 基础表格 样式实现:
我们需要文章列表,所以需要关联model :
修改 src\pages\content\Article\index.tsx :

  1. import React 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} from 'antd';
  6. import {connect} from 'umi';
  7. import type {Dispatch} from 'umi';
  8. // 定义model命名空间
  9. const namespace = 'article';
  10. type StateType = {
  11.   articleList: ArticleType[];
  12.   dispatch: Dispatch
  13. }
  14. type PropsType = {
  15.   articleList: ArticleType[];
  16.   dispatch: Dispatch;
  17. }
  18. const colums = [
  19.   {
  20.     title: 'ID',
  21.     dataIndex: 'id'
  22.   },
  23.   {
  24.     title: '标题',
  25.     dataIndex: 'title'
  26.   },
  27.   {
  28.     title: '作者',
  29.     dataIndex: 'author'
  30.   },
  31.   {
  32.     title: '封面',
  33.     render: ({coverImg}: ArticleType) => <img src={coverImg} alt="" />,
  34.   },
  35.   {
  36.     title: '阅读量',
  37.     dataIndex: 'viewCount'
  38.   },
  39.   {
  40.     title: '创建时间',
  41.     dataIndex: 'createTime'
  42.   }
  43. ]
  44. const ArticleList: React.FC<PropsType> = props =>{
  45.   const {articleList, dispatch} = props;
  46.   return (
  47.     <PageContainer>
  48.       {/* rowKey 表格行 key 的取值，可以是字符串或一个函数 标识唯一性,这里我们用每一条数据的id作为key */}
  49.       <Table rowKey="id" columns={colums} dataSource={articleList}/>
  50.     </PageContainer>
  51.   )
  52. }
  53. /**
  54.  * 提取需要的属性
  55.  * @param param0 
  56.  */
  57. const mapStateToProps = (state: StateType) =>{
  58.   return {
  59.     articleList: state[namespace].articleList,
  60.     dispatch: state.dispatch
  61.   }
  62. }
  63. // 自定义的state不符合,但是可以合并connect.d.ts中的connectState
  64. type StateType = {
  65.   [namespace]: MStateType;
  66. }&ConnectState;
  68. const mapStateToProps = (state: StateType)=>({
  69.     articleList: state[namespace].articleList,
  70.     totalCount: state[namespace].totalCount
  71. })
  72. export default connect(mapStateToProps)(ArticleList);

image.png

7. useEffect useState

useEffect :
在vue项目中,组件初始化的外部数据请求操作, 我们会在 create() 或者 mounted() 中处理,. 在react中也存在这么一个生命周期函数: componentDidMount , 但是 [useEffect()](https://react.docschina.org/docs/hooks-effect.html) 可以更加方便的处理这种业务逻辑.

提示: 如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

注意： 如果你要使用此优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量。参阅文档，了解更多关于如何处理函数以及数组频繁变化时的措施内容。 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。 如果你传入了一个空数组（[]），effect 内部的 props 和 state 就会一直拥有其初始值。尽管传入 [] 作为第二个参数更接近大家更熟悉的 componentDidMount 和 componentWillUnmount 思维模式，但我们有更好的方式来避免过于频繁的重复调用 effect。除此之外，请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，因此会使得额外操作很方便。

useState :
useState 就是一个 Hook （等下我们会讲到这是什么意思）。通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state。useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。
简单来说: useState 可以创建一个需要被页面及时响应的变量(跟vue在data中声明一个响应式对象一样).

我们需要在页面加载完毕后,发送请求,所以请求的方法应该写在 useEffect中, 而携带的参数是变化, 所以用 useState来创建: 

  1. import React,{useEffect,useState} from 'react';
  3. const ArticleList: React.FC<PropsType> = props =>{
  4.   const {articleList, dispatch} = props;
  5.   const [params,setParams] = useState({});
  6.   useEffect(()=>{
  7.     dispatch({
  8.       type: `${namespace}/findArticleList`,
  9.       payload: {
  10.         start: 1,
  11.         limit: 5,
  12.         params
  13.       }
  14.     })
  15.   },[])
  16.   return (
  17.     <PageContainer>
  18.       {/* rowKey 表格行 key 的取值，可以是字符串或一个函数 标识唯一性,这里我们用每一条数据的id作为key */}
  19.       <Table rowKey="id" columns={colums} dataSource={articleList}/>
  20.     </PageContainer>
  21.   )
  22. }

image.png

8. 完善分页功能

  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} from 'antd';
  6. import {connect} from 'umi';
  7. import type {Dispatch} from 'umi';
  8. import type {ConnectState} from '@/models/connect.d';
  10. // 定义model命名空间
  11. const namespace = 'article';
  12. type StateType = {
  13.   articleList: ArticleType[];
  14.   totalCount: number;
  15.   dispatch: Dispatch;
  16.   loading: any;
  17. }
  18. type PropsType = {
  19.   articleList: ArticleType[];
  20.   articleTotalCount: number;
  21.   dispatch: Dispatch;
  22.   loading: boolean;
  23. }
  24. const colums = [
  25.   {
  26.     title: 'ID',
  27.     dataIndex: 'id'
  28.   },
  29.   {
  30.     title: '标题',
  31.     dataIndex: 'title'
  32.   },
  33.   {
  34.     title: '作者',
  35.     dataIndex: 'author'
  36.   },
  37.   {
  38.     title: '封面',
  39.     render: (coverImg: string)=>(
  40.       <img src={coverImg} alt=""/>
  41.     )
  42.   },
  43.   {
  44.     title: '阅读量',
  45.     dataIndex: 'viewCount'
  46.   },
  47.   {
  48.     title: '创建时间',
  49.     dataIndex: 'createTime'
  50.   }
  51. ]
  52. const ArticleList: React.FC<PropsType> = props =>{
  53.   const {articleList, totalCount, dispatch ,loading} = props;
  54.   // 条件查询,可以根据title,author查询 
  55.   const [params] = useState({});
  56.   // 分页起始页肯定是 1
  57.   const [current,setCurrent] = useState(1);
  58.   // 数据量不大 为了体现分页 暂时控制每页2条数据
  59.   const [pageSize,setPageSize] = useState(2);
  61.   // 监听current和pageSize的变化重新发送请求
  62.   useEffect(()=>{
  63.     dispatch({
  64.       type: `${namespace}/findArticleList`,
  65.       payload: {
  66.         start: current,
  67.         limit: pageSize,
  68.         params
  69.       }
  70.     })
  71.   },[current,pageSize])
  72.   return (
  73.     <PageContainer>
  74.       {/* rowKey 表格行 key 的取值，可以是字符串或一个函数 标识唯一性,这里我们用每一条数据的id作为key */}
  75.       <Table loading={loading} rowKey="id" columns={colums} dataSource={articleList}
  76.         pagination = {
  77.           {
  78.             showQuickJumper: true,
  79.             current,
  80.             pageSize,
  81.             total: totalCount,
  82.             showSizeChanger:true,
  83.             onShowSizeChange(curr,size){
  84.               // console.log(v)
  85.               setPageSize(size);
  86.             },
  87.             onChange(v){
  88.               setCurrent(v);
  89.             }
  90.           }
  91.         }
  92.       />
  93.     </PageContainer>
  94.   )
  95. }
  96. // 自定义的state不符合,但是可以合并connect.d.ts中的connectState
  97. type StateType = {
  98.   [namespace]: MStateType;
  99. }&ConnectState;
  101. const mapStateToProps = (state: StateType)=>({
  102.     articleList: state[namespace].articleList,
  103.     totalCount: state[namespace].totalCount,
  104.     loading: state.loading.effects['article/findArticleList'] as boolean
  105. })
  106. export default connect(mapStateToProps)(ArticleList);
  107. export default connect(mapStateToProps)(ArticleList);