内容管理

1. 分析 Table 组件的使用
   1. dataSource 属性，设置数据
   2. columns 属性，设置每一列的标题和显示的内容 title 表头，dataIndex 数据字段
   3. 如果显示的内容需要使用JSX可以使用 render 选项，使用函数返回来渲染。
2. 使用 Table 组件完成文章列表的搭建

import { EditOutlined, DeleteOutlined } from “@ant-design/icons”;
import { Table, Space} from “antd”;
const columns = [
{
title: “封面”,
dataIndex: “cover”,
key: “cover”,
render: () => ‘自定义封面’,
},
{
title: “标题”,
dataIndex: “title”,
key: “title”,
},
{
title: “状态”,
dataIndex: “status”,
key: “status”,
render: () => ‘自定义状态’,
},
{
title: “发布时间”,
dataIndex: “pubdate”,
key: “pubdate”,
},
{
title: “阅读数”,
dataIndex: “read_count”,
key: “read_count”,
},
{
title: “评论数”,
dataIndex: “comment_count”,
key: “comment_count”,
},
{
title: “点赞数”,
dataIndex: “like_count”,
key: “like_count”,
},
{
title: “操作”,
key: “action”,
render: () => (

}/>
}/>

),
},
];

04-内容管理-全局语言本地化

使用ConfigProvider组件项目语言本地化
大致步骤：

• 入口使用 ConfigProvider 改用全局语言本地化 文档
• 内容管理移除语言设置

核心代码 ：

• 全局配置 src/index.js

+import ‘moment/locale/zh-cn’;
+import locale from ‘antd/lib/locale/zh_CN’;
+import { ConfigProvider } from ‘antd’;
ReactDOM.render(
// 关联react和redux

+

+
,
document.getElementById(‘root’)
)

• 日期组件修改 Article/index.jsx

-import “moment/locale/zh-cn”;
-import locale from “antd/es/date-picker/locale/zh_CN”;

-
+

05-内容管理-频道数据和渲染

完成频道数据获取和渲染
大致步骤：

• 准备获取频道数据的 thunk action
• 存储获取的频道数据 readucer
• 组件第一次渲染 dispatch 分发 action
• 渲染频道

核心代码:

1. 准备获取频道数据的 thunk action

actions/article.js
import { http } from ‘@/utils’

export const getChannels = () => {
return async dispatch => {
const data = await http.get(‘channels’)
dispatch({ type: ‘article/setChannels’, payload: data.channels })
}
}
actions/index.js
// 把user模块下的所有内容按需导出
export from ‘./user’
+// 把article模块下的所有内容按需导出
+export from ‘./article’

1. 存储获取的频道数据 readucer

reducers/article.js
const initialState = {
// 频道
channels: []
}

const article = (state = initialState, action) => {
if (action.type === “article/setChannels”) {
return {
…state,
channels: action.payload
}
}
return state
}

export default article
reducers/index.js
import { combineReducers } from ‘redux’

import user from ‘./user’
+import article from ‘./article’
export default combineReducers({
user,
+ article,
})

1. 组件第一次渲染 dispatch 分发 action

Article/index.jsx
import { useDispatch, useSelector } from “react-redux”;
import { useEffect } from “react”;
import { getChannels } from “@/store/actions”;
const Article = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getChannels());
}, [dispatch]);
// 省略…

1. 渲染频道

import { useDispatch, useSelector } from “react-redux”;
const { channels } = useSelector((state) => state.article);
{channels.map((item) => ( {item.name} ))}

06-内容管理-列表数据

完成获取文章列表数据
大致步骤：

• 准备获取文章数据的 thunk action
• 存储获取的文章数据 readucer
• 组件第一次渲染 dispatch 分发 action
• 渲染列表

核心代码：

1. 准备获取文章数据的 thunk action

actions/article.js
export const getArticles = (params) => {
return async dispatch => {
const data = await http.get(‘mp/articles’, { params })
dispatch({ type: ‘article/setArticles’, payload: data })
}
}

1. 存储获取的文章数据 readucer

reducers/article.js
const initialState = {
// 频道
channels: [],
+ // 文章
+ results: [],
+ page: 1,
+ per_page: 10,
+ total_count: 0
}

const article = (state = initialState, action) => {
if (action.type === “article/setChannels”) {
return {
…state,
channels: action.payload
}
}
+ if (action.type === “article/setArticles”) {
+ return {
+ …state,
+ …action.payload
+ }
+ }
return state
}

export default article

1. 组件第一次渲染 dispatch 分发 action

+import { getChannels, getArticles } from “@/store/actions”;
const Article = () => {
const dispatch = useDispatch();
useEffect(() => {
// 获取频道数据
dispatch(getChannels());
+ // 获取文章数据
+ dispatch(getArticles({}));
}, [dispatch]);

07-内容管理-列表渲染

完成文章列表渲染
大致步骤：

• 拿到列表渲染数据
• 阅读状态数据（不同状态文字和颜色不一样）
• 渲染自定义列

核心代码：Article/index.jsx

• 拿到列表渲染数据

+const { channels, results } = useSelector((state) => state.article);

• 阅读状态数据（不同状态文字和颜色不一样）

const statusLabel = [
{ text: “草稿”, color: “default” },
{ text: “待审核”, color: “blue” },
{ text: “审核通过”, color: “green” },
{ text: “审核拒绝”, color: “red” },
];

• 通过 colums 配置渲染列表

import defaultImg from “@/assets/error.png”;
const columns = [
{
title: “封面”,
dataIndex: “cover”,
key: “cover”,
render: (cover) => (
src={cover?.images?.[0] || defaultImg}
style={{ objectFit: “cover” }}
width={200}
height={120}
/>
),
},
{
title: “标题”,
dataIndex: “title”,
key: “title”,
},
{
title: “状态”,
dataIndex: “status”,
key: “status”,
render: (status) => {
const info = statusLabel[status];
return {info.text};
},
},
{
title: “发布时间”,
dataIndex: “pubdate”,
key: “pubdate”,
},
{
title: “阅读数”,
dataIndex: “read_count”,
key: “read_count”,
},
{
title: “评论数”,
dataIndex: “comment_count”,
key: “comment_count”,
},
{
title: “点赞数”,
dataIndex: “like_count”,
key: “like_count”,
},
{
title: “操作”,
key: “action”,
render: () => (

} />
} />

),
},
];

08-内容管理-筛选功能

完成点击筛选按钮根据筛选条件查询文章列表
大致步骤：

• 绑定表单的完成事件 onFinish
• 处理表单的日期数据为后台需要参数，通过 dispatch 调用 action 传参，完成列表更新

核心代码：Article/index.jsx

1. 绑定表单的完成事件 onFinish

+
筛选


+