2021SC@SDUSC

模块设计&编写

工作总结

构建项目雏形所需要先编写的模块：

1. 头部导航栏 Header.jsx
2. 主页 HomePage.jsx

这样构建的网页具备简单的内容展示功能，可以将联系方式、项目简介、使用方式、功能选择的信息、功能放置上，并留下其他ES Module的调用（Header模块配合React Router作为驱动模块） 下面将简单描述这3个模块的设计、代码结构

模块简介

导航栏 Header.jsx

模块设计图

代码结构逻辑

代码使用了Material UI组件库的相关组件

<!-- Header.jsx -->
<AppBar>
	<Toolbar>
		<Typography>
			DeepBIO
		</Typography>
		{route.children.map((subRoute, index) =>
          subRoute.children ? (
            <NavMenu basePath={route.path} route={subRoute} key={index} />
          ) : (
            <NavItem basePath={route.path} route={subRoute} key={index} />
          )
        )}
	</Toolbar>
</AppBar>

<!-- NavMenu -->
<div>
	<div>
		{route.icon}
		{route.title}
	</div>
	<Menu>
		{route.children
          .filter(route => !route.index)
          .map((subRoute, index) => (
            <NavMenuItem route={subRoute} basePath={path} key={index} />
          ))}
	</Menu>
</div>

<!-- NavItem -->
<div>
	{route.icon}
	{route.title}
</div>

<!-- NavMenuItem -->
<MenuItem>
	<Fragment>
		<ListItemIcon>
			<ChevronRight />
		</ListItemIcon>
		{route.title}
	</Fragment>
</MenuItem>

主页 HomePage.jsx

模块设计图

代码结构逻辑

<!-- homePage.jsx -->
<div>
	<ReactFullPage
	navigation
	render={()=>(
		<ReactFullPage.Wrapper>
			<div className="section">
				<AnimatedTitle />
			</div>
			<div className="section">
				<Typography className="title">
					title content
				</Typography>
				<Typography className="content">
					content
				</Typography>
			</div>
			<!-- 剩下的几页按照上述的结构，只要外包一层className="section"的div标签即可单独成为一页 -->
		</ReactFullPage.Wrapper>
		)}
	/>
</div>

底部信息栏

模块设计图

代码结构逻辑

总结

设计了3个主要模块，特别是顶部的导航栏，是其他子模块的驱动模块。 3个模块构建完成，网页已经有了项目信息的展示，后续继续完成其他模块的编写工作