专业定制房地产网站建设,做app模板网站有哪些,详情页尺寸一般是多少,微信公众号售卖介绍 你将为⼀个技术社区设计并实现⼀个官⽹。该社区旨在为软件⼯程师、开发⼈员和技术 爱好者提供⼀个交流平台#xff0c;分享最新的技术动态、⽂章、项⽬案例。 项目模块
项目分为三个模块 #xff1a; 主页展示模块#xff0c;文章详情模块#xff0c;文章专栏模块…介绍 你将为⼀个技术社区设计并实现⼀个官⽹。该社区旨在为软件⼯程师、开发⼈员和技术 爱好者提供⼀个交流平台分享最新的技术动态、⽂章、项⽬案例。 项目模块
项目分为三个模块 主页展示模块文章详情模块文章专栏模块。
主页展示模块
主页展示模块设计
主要设计分为两个模块layout模块显示中间为内容模块
layout模块 顶部导航栏区域使用antd组件中 Layout MenuInput组件进行开发完成
使用css固定样式将顶部导航栏固定在页面头部
左侧 菜单分别为文章问答专栏文档 链接点击后可进入专属模块中
右侧为 搜索框按钮图标模块。
中间为内容模块
中间内容模块使用antd组件中Carousel, Avatar, List, Tabs, Row, Col等组件开发完成
中间内容模块分为三部分 头部图片展示部分底部左侧列表部分底部右侧列表部分
头部部分
分为轮播图和热⻔⽂章列表组件展示
轮播图模块 使用了Carousel组件来完成设置 autoplay autoplaySpeed{5000}属性完成轮播图自动轮播间隔时间5s。同时点击下标可切换轮播图片 热⻔⽂章列表 使用了List组件 点击⽂章可进⾏跳转⽂章详情⻚ 底部左侧
使用了antd组件中 InputTabs FlexListTag等组件开发完成 模糊搜索框中实现了搜索防抖功能点防止用户频繁搜索 列表展示模块中使用了 Tabs ListTag组件开发完成 点击不同的tab可以切换出tab下对应的内容同时激活状态的tab高亮展示 ⽂章列表组件 使用List组件开发完成点击文章可以进行跳转到文章详情页面 底部右侧 使用了 Tab List 组件开发完成 点击不同的tab可以切换出tab下对应的内容同时激活状态的tab高亮展示 文章详情模块
使用了Card, List, Typography, Avatar, Button组件完成开发 文章详情模块页面布局 实现了从上之下文章标题-文章基本信息-文章内容-评论区 左侧实现了回复评论发表评论点赞评论功能点 文章专栏模块
分类头部图片展示模块底部卡片展示模块 头部图片展示模块使用了card组件开发完成
底部卡片展示模块使用了TabList组件开发完成 点击不同 tab 正常切换 tab 下对应内容。 激活状态的 tab ⾼亮展示 项目难点
对于搜索框实现防抖功能点 function debounceT extends (...args: any[]) any( func: T, wait: number ): (this:any,...args: any) ReturnTypeT { 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类型有所掌握。
不足之处对于页面样式方面有所欠缺
