B类项目实训-个人前端开发

写在前面

这是博主参加的学生团队项目开发的流程记录博客，根据个人分工主要涉及需求、视觉、前端、数据结构与算法等相关内容(以前端内容为主)。博客中涉及到较多代码量或较多思维量的部分都将单独编写博客，然后将博客链接附于本篇相关内容下，其它内容则直接写在本篇中，大约一周一更。

此项目是基于React的单页面应用开发，涉及数据可视化的部分内容。

分工

在项目中主要负责前端的开发，开发前预计使用react技术栈，第一次使用redux做状态管理，准备边学边用，为了项目的开发速度，准备直接使用蚂蚁金服的antd组件库。把开发的主要精力放在前端工程架构和数据可视化方面。

// 因为平时在学校工作室里做了很多UI设计的项目，所以这次视觉稿要自己画给自己看了

1.需求分析

在经过几次会议之后，确定的主要需求有

• 成员的权限分配
• 各种文件的分区与历史快照
• 项目流程分级
• Markdown在线预览与编辑

等

2.视觉稿绘制

根据项目需求与前端使用UI库，使用Adobe XD绘制高保真的视觉稿

由于项目用于管理的用途，UI主要使用中性风格的配色，减少图片与色彩种类，使用扁平化的组件，基础组件尽可能使用antd的配套组件

视觉稿绘制任务在项目开始第二周的周末截稿

3.编程

使用vs code进行前端开发，使用npm进行包管理

涉及代码编写的博客将以链接的形式展示在下方

src文件结构

• /comonents:存放自定义的React组件
• /data:存放与后端交互获取数据及处理数据的相关代码，以及在前端独立测试时使用的模拟数据
• /pages:存放页面
• index.js:程序入口entry，配置部分路由
• App.js:单页面应用框架，配置部分路由
• routers.js:存放路由信息与路由-组件映射

前端路由

详细内容请见：前端路由开发过程

高亮Link组件

详细内容请见：高亮Link组件开发过程

Context跨组件传props

详细内容请见：跨组件传输开发过程

自定义选择器组件

详细内容请见：自定义选择器组件

响应式布局

详细内容请见：响应式布局

隐藏滚动条

详细内容请见：隐藏滚动条

markdown前端渲染与自动生成导航

详细内容请见：markdown前端渲染与自动生成导航

5.1假期期间

在家里把登陆注册页、评论区组件、文件卡片等小组件

有向图渲染

详细内容请见：有向图渲染

网络请求

详细内容请见：网络请求

当前任务

已结束