结对编程复盘分析--带UI的小初高数学学习软件

一、前言

本篇博客是针对结对编程实现的总结。我们是采用java写后端和html,css，js等写前端结合的方式来完成本次项目的，主要是在吴同学的个人项目代码上进行复用完成本次项目的开发。结对项目是要求将个人项目的试卷生成系统转换成可视化界面，我们选择了网页这一形式。

二、项目要求 

用户：

小学、初中和高中学生。

功能：

1、所有功能通过图形化界面操作，可以是桌面应用，可以是网站（编程语言和技术不限）；

2、用户注册功能。用户提供手机号码，点击注册将收到一个注册码，用户可使用该注册码完成注册；

3、用户完成注册后，界面提示设置密码，用户输入两次密码匹配后设置密码成功。密码6-10位，必须含大小写字母和数字。用户在登录状态下可修改密码，输入正确的原密码，再输入两次相同的新密码后修改密码成功；

4、密码设置成功后，跳转到选择界面，界面显示小学、初中和高中三个选项，用户点击其中之一后，提示用户输入需要生成的题目数量；

5、用户输入题目数量后，生成一张试卷（同一张卷子不能有相同题目，题目全部为选择题），界面显示第一题的题干和四个选项，用户选择四个选项中的一个后提交，界面显示第二题，...，直至最后一题；

6、最后一题提交后，界面显示分数，分数根据答对的百分比计算；

7、用户在分数界面可选择退出或继续做题；

8、小初高数学题目要求见个人项目。

三、过程介绍以及问题分析

我们两个的分工基本上是我负责前端，他负责后端，然后前后端接头的时候基本是两个人共同完成的。前端的主要工作就是开发出整个系统需要的可视化界面，包括登录界面，注册界面，修改密码界面，类型选择界面，做题界面以及最后的分数显示界面。部分页面展示如下：

   

 

    

 

基本上页面布局沿用就好，没有过多的设计页面样式。HTML规定页面显示的文本内容，css规定页面的排版格式，js规定页面的逻辑内容。

但是问题就是前后端结合时要将前端数据传送给后端，还有一个问题就是跨页面调用数据。由于我对于前端开发也仅仅是入门级选手，静态页面的设计还不算太大的难题，但是数据的传送就屡试屡败，最终的解决方案是队友有一些vue框架开发的基础，他使用vue框架综合了我已经完成的html,css,js等内容，实现前后端数据的传送和跨页面调用的数据。

 

注册界面的逻辑设计思路基本上是获取文本框输入的内容，对内容做出判断，点击发送验证码按钮，传送（手机号码）数据给后端，后端实现验证码的生成（把验证码发送给前端），通过短信发送给用户手机，用户输入验证码之后，前端获取输入框数据与后端传来的验证码数据作比较，然后开放输入密码的输入框，设置密码，点击注册按钮之后，前端发送密码给后端，后端同时将密码，手机号，用户昵称等信息写入数据库进行保存。

用户登录时，前端获取用户输入信息，与数据库中的数据比较，判断是否登录成功。

题目显示设计：这个题目显示功能的实现，是后端生成随机题目之后，将题目，正确答案，四个选项都放进一维数组中，后端将这个一维数组传送给前端，前端在js部分对一维数组的数据进行处理并显示在页面对应的位置。

总之，这个项目最大的难点就是前后端数据频繁的传送，如何精准获取前后端传来的数据，并对之进行处理是需要我们解决的问题。

四、总结心得

这次结对项目编程给我带来了很多的经验和教训，比如一开始开发之前，队友建议我或许可以用vue框架来设计，但是我觉得应该没有必要使用vue框架进行，但是后面设计完网页，准备数据传送部分的时候就遭遇了瓶颈，最终还是使用了队友建议的vue框架才实现了与后端数据的传送和跨页面数据的调用。我本来对于自己未曾涉及过的领域会有一定的畏难心理，比如这次的前端开发，一开始是很没有信心的，但是只要自己肯埋头学习，肯从零开始，还是会有突破口的，这个过程中队友不断的鼓励也给了我很大的勇气。

通过本次的项目实践，我了解了一个项目开发的基本流程，我了解了前后端开发的基本工作模式，这将是我非常宝贵的经历；我也学习到了前端开发的一部分知识，这将是我额外宝贵的果实。这个过程中，我的队友不断地鼓励，给了我很大的勇气和信心，合作的过程十分愉快，这也将是我十分宝贵的回忆。

合作愉快！-----to吴同学