结对编程项目总结

项目名称

学生自主考试系统（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！