科技资讯

Document

TechM-技术网站

介绍

你将为⼀个技术社区设计并实现⼀个官⽹。该社区旨在为软件⼯程师、开发⼈员和技术
爱好者提供⼀个交流平台，分享最新的技术动态、⽂章、项⽬案例。

项目模块

项目分为三个模块 ： 主页展示模块，文章详情模块，文章专栏模块。

主页展示模块：

主页展示模块设计：

主要设计分为两个模块：layout模块显示，中间为内容模块

layout模块

顶部导航栏区域：使用antd组件中 Layout ，Menu，Input组件进行开发完成

使用css固定样式将顶部导航栏固定在页面头部

左侧 菜单分别为文章，问答，专栏，文档 链接，点击后可进入专属模块中

右侧为 搜索框，按钮，图标模块。

中间为内容模块

中间内容模块：使用antd组件中Carousel, Avatar, List, Tabs, Row, Col等组件开发完成

中间内容模块：分为三部分 ：头部图片展示部分，底部左侧：列表部分，底部右侧：列表部分

头部部分：

分为轮播图和热⻔⽂章列表组件展示

轮播图模块 使用了Carousel组件来完成，设置 autoplay， autoplaySpeed={5000}属性完成轮播图自动轮播，间隔时间5s。同时点击下标可切换轮播图片

热⻔⽂章列表 使用了List组件 点击⽂章可进⾏跳转⽂章详情⻚

底部左侧：

使用了antd组件中 Input，Tabs ，Flex，List，Tag等组件开发完成

模糊搜索框中实现了搜索防抖功能点，防止用户频繁搜索
列表展示模块中使用了 Tabs ，List，Tag组件开发完成
点击不同的tab可以切换出tab下对应的内容，同时激活状态的tab高亮展示
⽂章列表组件 使用List组件开发完成，点击文章可以进行跳转到文章详情页面
底部右侧： 

使用了 Tab ，List 组件开发完成

点击不同的tab可以切换出tab下对应的内容，同时激活状态的tab高亮展示

文章详情模块

使用了Card, List, Typography, Avatar, Button组件完成开发
文章详情模块页面布局
 
实现了从上之下：文章标题-文章基本信息-文章内容-评论区
左侧实现了回复评论，发表评论，点赞评论功能点

文章专栏模块

分类头部图片展示模块，底部卡片展示模块

头部图片展示模块：使用了card组件开发完成

底部卡片展示模块：使用了Tab，List组件开发完成

点击不同 tab 正常切换 tab 下对应内容。
激活状态的 tab ⾼亮展示

项目难点：

对于搜索框，实现防抖功能点：
 

  function debounce<T extends (...args: any[]) => any>(  
    func: T,  
    wait: number  
  ): (this:any,...args: any) => ReturnType<T> {  
    let timeoutId: any= null;  
    
    return function(...args: any): any { 
     
      const context = this;  
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
    
    
      timeoutId = setTimeout(() => func.apply(context, args), wait);  
    };  
  }

其次在对于页面样式方式：修改组件库样式，使用了穿透

项目总结：

总体完成了网站的开发，学习到了关于react 路由，组件中的知识，对于Antd组件有了一定的了解，对于TypeScript类型有所掌握。

不足之处：对于页面样式方面有所欠缺