结对编程项目总结
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
页面设计
页面设计直接影响用户的体验,所以页面的设计以及跳转应该合理,且考虑用户体验。这需要我们仔细阅读需求文档中的描述。我认为最好的方法是先画好草图,并且写好页面之间的跳转关系,这样能提高我们的开发效率。 根据文件中的功能描述,我计划设计了首页,注册用户,设置账户,修改密码,选择试题,考试,得分结果六个界面。
.
-
首页提供用户注册和登录的入口。
-
注册首先进入注册用户界面,用户通过手机号验证,验证成功以后进入设置账户页面,需要设置用户名和密码。注册成功以后会进入选择试题页面。
-
登录需要输入用户名和密码,后端验证通过以后进入选择试题页面。
-
选择试题可以退出系统,还提供了修改密码页面的入口,用户在此页面选择年级和题目数量,然后可以开始考试。
-
修改密码需要用户输入旧密码和新密码,符合要求即可成功修改,修改成功以后需要重新登录。
-
考试页面用户可以在题目列表中选择做哪一题,同时提供上一题下一题切换按钮,用户选择交卷会进入得分结果页面。
-
得分结果页面会显示用户的考试得分结果,并提供用户两个选项,继续考试会转到选择试题页面,退出登录会转到首页。
具体样式请访问114.116.234.151:8099
经验与教训
前后端分离与数据交互
没有B/S模式开发经验的我对前后端数据交互的方式可以说是一概不知,所以最开始我在写不知道该用什么样的方式,页面跳转逻辑也是先大概写一写,准备到时候与陈文康同学交流的时候再确定。这样的合作模式导致前后端项目的开发效率都十分低下,最终也会导致项目进行得十分缓慢。
在慢慢地沟通中,我才理解了后端的几种数据交互方式。在相互了解了前后端数据交互的方式以后,我们才确定了数据交互格式,方法,以后接口名,字段名等。之后我真正地明白了后端的数据是怎样发到前端,以及我应该怎样给后端发送请求以及数据。具体来说我最后在前端主要使用了form表单以及XMLhttpRequest两种方式来和后端交互。我们达成了协议用form给后端发送请求,后端实现页面跳转,XMLHttpRequest来向后端发送数据并接收。
在test.js中,我就使用XMLHttpRequest对象接收到了后端返回的题目,存放在httpRequest.responseText中,由于我们约定传的是JSON对象,所以还需调用JSON.parse函数解析。
显然我们这样的开发模式是没有彻底地实现前后端分离的,这主要是因为我们缺乏开发经验。我对前后端的知识都不太理解,所以两个人需要花较多时间来确认交互方法。我在网页设计与逻辑实现中,如果不能实现交互,很多功能都无法实现,我也无法测试,所以会做很多无用功。
关于HTML+CSS+JS
HTML+CSS+JS作为前端开发基础的三要素,在这个框架多样,功能强大的时代,我和陈文康同学都认为仍然有学习的必要,这也是我们决定用他们开发的原因。刚开始使用三件套的我,对很多元素以及属性都不理解,也不太懂如何使用。在搭档的指点之后,我才大概明白了该如何去使用三件套。
首先HTML决定了你的网页的结构,CSS和JS都是在这个结构上进行优化设计和渲染的,HTML中的许多元素在网页中十分重要,像我大量使用的form,input,button等,这些直接与网页的功能有关,而form表单的submit事件,则直接与我们的数据交互相关。通过onsubmit可以阻止表单的提交,可以让我们阻止用户在诸如密码设置不合要求时提交表单成功注册。 如在注册页面1,在form表单中我们给onsubmit事件绑定了一个checkSubmit函数,
在该函数中会通过XMLhttpRequest向后端发送请求,后端会判断用户手机号是否已经被注册等,然后前端根据后端返回的结果,提交或阻止form表单的提交。
CSS决定了网页元素的样式。通过CSS可以设计出各式各样的网页。在我的开发过程中,很受启发的一点是通过div盒子模型的使用,以及定位来设计页面的布局。在最开始页面布局定位使我十分头疼,逐渐地我才掌握了盒子模型和各种定位方式的使用方法。 JS的功能则更为强大。不仅数据交互需要靠JS,许多页面动画也需用通过JS实现。并且它可以修改HTML的内容,也就是说它可以修改网页的结构和样式。
如在试卷选择界面,我使用js设计了单选框动画。通过JS动态修改HTML中元素的样式,在用户点击了A单选框时,会修改该框的边框颜色等,这样就实现了简单的动画。
在考试页面,我就是利用这一点,动态的向页面中添加<li>和<input>元素来实现供用户点击的四个选项。因为我们前后端交互时,是将所有题目一次性发送到前端,这就需要前端能实现按题号刷新题目和选项。在选择了下个题目时就会刷新了HTML中现有的<Li>和<input>
总结
本次项目开发是一次宝贵的经验。在此之前我完全没有开发经验。虽然学过一点点前端知识,但从未使用过。搭档很早就提醒我工作量很大,可能会搞不完,要抓紧,这让我一直紧绷着神经,恶补了许多前端的知识。对一个小白来说,这个过程无疑是十分艰难的,但过程中同伴一直帮助我,不会的地方也请教了许多其他同学,属实是学到了很多知识,也有了开发经验。虽然前端设计还不够美观,有点粗糙,但我已经很满意了。最后陈文康同学将系统部署到了服务器,成功地上线了!很nice!
这篇关于结对编程项目总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南