![8ff31fb246e2a7f86f216d40ee74489e.png](https://i-blog.csdnimg.cn/blog_migrate/efc8eb6ca9b262be09f5f9048ef103ee.jpeg)
专栏地址:
前端开发zhuanlan.zhihu.com![8caee83981dcc32b1c1f26f15fc1d2b5.png](https://i-blog.csdnimg.cn/blog_migrate/2a87c18ceb14599c80b3e06efaa40f02.jpeg)
第四章为网站文章页面和论坛页面的构建
实现效果图如下:
![40475f2ee4f2c0028726111a2dfbddc2.png](https://i-blog.csdnimg.cn/blog_migrate/4f77dfcca5608e99237a59dce4020147.jpeg)
![333cbd74f302dc027999de7dbbab4047.png](https://i-blog.csdnimg.cn/blog_migrate/37be297f92dfd24652c1dd7b5f60f3c5.jpeg)
![628250b8ceb64212485e0fbfce78a76b.png](https://i-blog.csdnimg.cn/blog_migrate/d511607c94471dddc21584460474323a.png)
文章模块和论坛模块都使用的Ant Desgin的List列表,文章模块是通过分页来渲染数据,而论坛模块采用点击加载更多渲染到同一页面上(本质上还是分页),这样是因为看了其他软件的论坛模块和文章模块,论坛一般是采用下来刷新在同一页面上渲染,这个项目以后如果做移动端的适配了,我再做下拉刷新。
点击加载更多loading效果:
![a1c3bcacb591168f65fad845d29e3ac8.png](https://i-blog.csdnimg.cn/blog_migrate/0c413bd5f4d67d7394ac2822482c10b3.jpeg)
具体实现:
实现的每一步在注释中已标明清楚
1 论坛模块
import
2文章模块实现:
import
3 文章详情页面
这里对详情页面进行简单构建(不区分文章还是帖子)
功能 1.展示具体内容 2.留言评论功能
效果图:
![628250b8ceb64212485e0fbfce78a76b.png](https://i-blog.csdnimg.cn/blog_migrate/d511607c94471dddc21584460474323a.png)
Router
{
Detail组件
import