实战项目二：基于 Ant Design 的博客内容管理
一、项目介绍
博客内容管理 CMS 系统是一个非常常见的业务场景，也许会跟你的真实业务比较接近，而且我这儿特意为你搭了一个基于 Umi 的 Ant Design 脚手架，内含一个带有 mock 数据的 json-server API。
这个项目会涵盖典型的数据 CRUD 操作，期望你通过刻意练习的方式，理解什么是前端开发的最佳实践和组件化开发节奏。
下面我将通过用户故事的方式为你列举所有的需求功能点：
用户故事 1：内容首页（list + filter）
作为一名管理员，我想在进入首页时看到最新推荐的十篇文章，从而我能更方便挑选当前最受欢迎的文章。
作为一名管理员，我能在首页点击作者对文章列表进行筛选，从而我可以根据自己感兴趣的作者挑选文章。
用户故事 2：文章详情（detail）
作为一名管理员，我想点击文章封面进入文章详情页，从而我能更详细得查看文章内容及其评论列表。
用户故事 3：添加推荐（add）
作为一名管理员，我想有一个添加推荐的表单页面，从而我能为别的读者推荐我认为对别人有帮助的文章。
用户故事 4：推荐列表（list）
作为一名管理员，我能看到所有已经被推荐的文章，并且我能根据作者找到所有该作者的推荐文章。
用户故事 5：添加评论（add）
作为一名管理员，我想在文章详情页进行评论（集成上个实战项目完成的评论框组件），从而我能够表达我对这篇文章的喜欢或者更多情感上的表达。
用户故事 6：评论排行榜（list）
作为一名管理员，我想看到文章详情页的评论点赞排行，从而我能够更快找出有价值的评论以供参考。
二、教学目标
掌握如何在 umi 框架中集成 Redux，编写 dva model 操作 Store 数据
掌握 Ant Design Layout 与相关 Components 的开发实践
掌握 Redux 集成 API 以及如何处理异步 Action Creator
合理抽取 services 层获取 API 请求数据，分离关注点
Redux 结合 Hook 的用法，如何通过 useSelector 获取 Store 数据
三、前置技能
React + Hooks 相关基础知识
Ant Design 组件库用法
Fetch API 等 ES6 语法
四、技能提升目标
React + Redux 了解 -> 熟悉
Ant Design 了解 -> 熟悉
五、学习周期
总时长约 4 小时
练习前端组件拆分与 Redux 单向数据流管理
至少练习 3 遍 CMS 实战项目
能在 1 小时内完成 CMS 实战项目
保持！刻意练习的节奏，重复练习！
准备好代码库，快来尝试一下！
当然，我还通过 CodeSandbox 的方式作为你的快速入口：https://codesandbox.io/s/github/JimmyLv/react-antd-cms (可能需要科学上网)
帮助你去除设置开发环境的障碍，一键打开 Cloud IDE 即可开始编码，右边则是你的网站运行效果预览，比如：https://react-antd-cms.jimmylv.now.sh/
六、配套资料
最后更新于
这有帮助吗？
