结对编程项目总结

2021/10/9 14:50:35

本文主要是介绍结对编程项目总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

结对编程项目总结

项目名称

学生自主考试系统(Auto-Generate TextPaper System)

 

人员分工

    由于我的个人项目代码比较杂乱,不利于开发,所以我们决定使用陈文康同学的代码实现复用,故他负责后端开发,我负责前端开发。

  • 前端:肖宇
  • 后端:陈文康
  •  

项目说明

简介

    学生自主考试系统旨在给学生们提供一个自主练习,加强学生计算能力的平台。系统能够根据学生年级和需要的题目数量,自动出题,并且计算学生最终得分的系统。使用手机号即可注册。项目以及部署到服务器,只需访问114.116.234.151:8099即可。

 

开发工具与环境

Web前端开发大部分使用的是HTML+CSS+JS,少量使用到了Jquey。

后端使用的是SSM框架:

  • java

  • Spring

  • SpringMVC

  • Mybatis

  • Maven 服务器:华为弹性云服务器

  • 数据库:MySQL8.0

  • 应用服务器:tomcat9

 

页面设计

    页面设计直接影响用户的体验,所以页面的设计以及跳转应该合理,且考虑用户体验。这需要我们仔细阅读需求文档中的描述。我认为最好的方法是先画好草图,并且写好页面之间的跳转关系,这样能提高我们的开发效率。 根据文件中的功能描述,我计划设计了首页,注册用户,设置账户,修改密码,选择试题,考试,得分结果六个界面。

5PvCvV.png

.

 

 

 

 

 

 

  • 首页提供用户注册和登录的入口。

  • 注册首先进入注册用户界面,用户通过手机号验证,验证成功以后进入设置账户页面,需要设置用户名和密码。注册成功以后会进入选择试题页面。

  • 登录需要输入用户名和密码,后端验证通过以后进入选择试题页面。

  • 选择试题可以退出系统,还提供了修改密码页面的入口,用户在此页面选择年级和题目数量,然后可以开始考试。

  • 修改密码需要用户输入旧密码和新密码,符合要求即可成功修改,修改成功以后需要重新登录。

  • 考试页面用户可以在题目列表中选择做哪一题,同时提供上一题下一题切换按钮,用户选择交卷会进入得分结果页面。

  • 得分结果页面会显示用户的考试得分结果,并提供用户两个选项,继续考试会转到选择试题页面,退出登录会转到首页。

    具体样式请访问114.116.234.151:8099

 

经验与教训

前后端分离与数据交互

    没有B/S模式开发经验的我对前后端数据交互的方式可以说是一概不知,所以最开始我在写不知道该用什么样的方式,页面跳转逻辑也是先大概写一写,准备到时候与陈文康同学交流的时候再确定。这样的合作模式导致前后端项目的开发效率都十分低下,最终也会导致项目进行得十分缓慢。 ​

    在慢慢地沟通中,我才理解了后端的几种数据交互方式。在相互了解了前后端数据交互的方式以后,我们才确定了数据交互格式,方法,以后接口名,字段名等。之后我真正地明白了后端的数据是怎样发到前端,以及我应该怎样给后端发送请求以及数据。具体来说我最后在前端主要使用了form表单以及XMLhttpRequest两种方式来和后端交互。我们达成了协议用form给后端发送请求,后端实现页面跳转,XMLHttpRequest来向后端发送数据并接收。

 

    在test.js中,我就使用XMLHttpRequest对象接收到了后端返回的题目,存放在httpRequest.responseText中,由于我们约定传的是JSON对象,所以还需调用JSON.parse函数解析。

5Pxlzq.md.png

 

    显然我们这样的开发模式是没有彻底地实现前后端分离的,这主要是因为我们缺乏开发经验。我对前后端的知识都不太理解,所以两个人需要花较多时间来确认交互方法。我在网页设计与逻辑实现中,如果不能实现交互,很多功能都无法实现,我也无法测试,所以会做很多无用功。

 

关于HTML+CSS+JS

    HTML+CSS+JS作为前端开发基础的三要素,在这个框架多样,功能强大的时代,我和陈文康同学都认为仍然有学习的必要,这也是我们决定用他们开发的原因。刚开始使用三件套的我,对很多元素以及属性都不理解,也不太懂如何使用。在搭档的指点之后,我才大概明白了该如何去使用三件套。

    首先HTML决定了你的网页的结构,CSS和JS都是在这个结构上进行优化设计和渲染的,HTML中的许多元素在网页中十分重要,像我大量使用的form,input,button等,这些直接与网页的功能有关,而form表单的submit事件,则直接与我们的数据交互相关。通过onsubmit可以阻止表单的提交,可以让我们阻止用户在诸如密码设置不合要求时提交表单成功注册。 ​ 如在注册页面1,在form表单中我们给onsubmit事件绑定了一个checkSubmit函数,

5PvkbF.md.png

 

    在该函数中会通过XMLhttpRequest向后端发送请求,后端会判断用户手机号是否已经被注册等,然后前端根据后端返回的结果,提交或阻止form表单的提交。

5PvKv6.md.png

 

    CSS决定了网页元素的样式。通过CSS可以设计出各式各样的网页。在我的开发过程中,很受启发的一点是通过div盒子模型的使用,以及定位来设计页面的布局。在最开始页面布局定位使我十分头疼,逐渐地我才掌握了盒子模型和各种定位方式的使用方法。 JS的功能则更为强大。不仅数据交互需要靠JS,许多页面动画也需用通过JS实现。并且它可以修改HTML的内容,也就是说它可以修改网页的结构和样式。

 

    如在试卷选择界面,我使用js设计了单选框动画。通过JS动态修改HTML中元素的样式,在用户点击了A单选框时,会修改该框的边框颜色等,这样就实现了简单的动画。

5Pv8Ve.md.png

 

    在考试页面,我就是利用这一点,动态的向页面中添加<li>和<input>元素来实现供用户点击的四个选项。因为我们前后端交互时,是将所有题目一次性发送到前端,这就需要前端能实现按题号刷新题目和选项。在选择了下个题目时就会刷新了HTML中现有的<Li>和<input>

5PvaxP.md.png

 

总结

    本次项目开发是一次宝贵的经验。在此之前我完全没有开发经验。虽然学过一点点前端知识,但从未使用过。搭档很早就提醒我工作量很大,可能会搞不完,要抓紧,这让我一直紧绷着神经,恶补了许多前端的知识。对一个小白来说,这个过程无疑是十分艰难的,但过程中同伴一直帮助我,不会的地方也请教了许多其他同学,属实是学到了很多知识,也有了开发经验。虽然前端设计还不够美观,有点粗糙,但我已经很满意了。最后陈文康同学将系统部署到了服务器,成功地上线了!很nice!



这篇关于结对编程项目总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程