项目实训-智能生物序列分析平台-个人总结6

模块设计&编写

工作总结

编写完成About、Reference组件，将静态“关于”、“参考文献”的信息初步填写在页面上。并根据项目指导老师的要求美化组件的部分样式。

组件

About组件

代码结构

由于about组件只需要放置一些信息，且无明显的复用内容，因此没有采用组件化编写，直接使用Material UI提供的组件完成编写。与此对比的是下文出现的reference组件，详见下文。

<!--about.js-->
<Container>
	<Box>
		<Typography>Content</Typography>
	</Box>
	<Grid container>
		<Grid item>
			<CardContent>
				<Card>
					<CardContent>
						<img src='xxx'>
					</CardContent>
					<Typography>Content</Typography>
					<Typography>
                    	<MailOutline /> Post Code: 250101
                    </Typography>
                    <Typography>
                    	<Email /> E-mail: xxx@xxx
                    </Typography>
                    <Typography>
	                    <LocationOn />xxx
                    </Typography>
                </Card>
            </CardContent>
        </Grid>
    </Grid>
</Container> 	

demo展示

Reference组件

代码结构

<!--Reference Component-->
<Container>
	<Box>
		<Typography>Reference</Typography>
	</Box>
	<Ref
		name="xxx"
		link="xxx"
		author="xxx"
		book="xxx"
		doi="xxx"
		PDF="xxx"
		></Ref>
	...
</Container>

以下是在reference组件中，重复使用的Ref组件代码结构。
Ref组成了一个参考文献的全部结构，使reference组件可以简单地直接堆砌Ref组件并向其传入蚊香相关参数即可快速复用Ref组件的内容，搭建参考文献页内容。

<!--Ref Component-->
<Grid container>
	<Grid item>
		<CardContent>
			<Card>
				<CardContent>
					<Typography><Link>{data.name}</Link></Typography>
					<Typography>{data.author}</Typography>
					<Grid>
						<Typography>
							<p>
								<i>{data.book}</i>
								{data.doi}
							</p>
						</Typography>
					</Grid>
					<Grid item>
						<Typography><p>[<Link>FullText</Link>] [<Link>PDF</Link>]</p>
						</Typography>
					</Grid>
				</CardContent>
			</Card>
		</CardContent>
	</Grid>
<Grid>

demo展示

总结

以上就是这段时间的工作内容，这几个组件相对简单，但是存在大量重复内容（Reference页），为了降低重复代码量，也方便后续的维护，前端利用了ES6模块化的优势，构建了包含单个文献的Ref组件。降低了代码量和以后维护的工作量。
后续将开展序列分析部分组件的编写工作。