以上需求均已经实现,结果图如下





前端主要使用的是React、React-Router、Axios三项技术构建的Web应用,后端主要使用Flask
主要的难点在前端路由的控制方面,前端路由的答题界面的路由应该是私有的,所以根据React-Router官方的建议我们使用Render Props,对用户权限予以验证,具体的实现如下:
import React, {useContext} from ‘react‘
import {Route, Redirect} from ‘react-router-dom‘
import {UserContext} from ‘../utils/context‘
function PrivateRoute({component: Component, ...rest}) {
const {user} = useContext(UserContext);
return (
<Route
{...rest}
render={props =>
user !== ‘‘ ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/",
state: {from: props.location}
}}
/>
)
}
/>
);
}
export default PrivateRoute;
本次结对编程,在队友代码的基础上进行需求的优化,队友的个人项目代码已经设计了UI界面以及登录按钮,只需要添加注册按钮以及请求即可完成一个页面模板,总体来说前端的复用性主要在页面的设计上,关于后端因为个人项目本地化处理的原因,没有复用性
经验:我的队友是一个对于前端开发非常有经验的人,因此在结对编程过程中,队友写出一个登录页面之后,我模仿他的写法去编写注册页面的代码,对于react等技术也算有一些了解与使用,虽然使用的还不够熟练,但也算是提升了,此外由于没有开发经验,一开始我不了解那些软件开发的架构,看到队友的MVC模式有些不了解,通过百度等途径了解了一下软件架构,为以后的项目开发提供一些经验
教训:在开发过程中一开始我们两人之间的分工不够明确,虽然通过githup整理上传项目,但仍存在一方出现问题不能及时解决导致拖慢开发进度的问题,在后续的开发过程中多进行两个人的面对面交流,开发过程一方遇到的问题也能尽快解决
原文:https://www.cnblogs.com/Z-Nut/p/11596499.html