记一次失败的网站设计和开发

有一定规模的软件开发需要多人合作才能实现,团队中的每个人都负责不同的工作,完成各自的工作后进行对接,调试系统使得各个由不同人员开发的模块可以协调工作并满足相关的要求,最终形成一个完整健壮的软件系统。

以我在学校中做项目的经验来看(特别是与网络相关的项目),在整个开发流程中最关键的点之一就是系统的代码拆分,即将系统分解形成不同的模块分发给不同的团队成员去实现。系统拆分需要从系统功能性需求和非功能性需求两方面同时考虑,例如在工作量正常的情况下,与用户系统相关的功能设计最好放在同一个模块中实现,而不应该将用户注册和用户登录分为两个模块,甚至交给两组不同的团队去实现。

一、背景

在最近的软件工程课程设计中,我们组被分配到的任务是“校园二手书”平台网站的设计与实现,不要求特定语言与框架。在经过组员之间的讨论后,我和另外一个负责开发的组员决定**使用 Python Django 框架开发后端,使用 Bootstrap 开发前端,前后端之间使用 Javascript jQuery 进行异步数据交互,并且前后端分离**。

至于为什么只有两名开发组员,是因为这次的课设工作量并不大,且功能并没有很繁多,只是简单地实现一个较小规模的网站平台。另外,在一开始我们也曾考虑过使用 Java Web 技术进行开发,但由于想要尝试并学习一下新的框架(玩具),我们才放弃了最熟悉的 Java 技术栈转向并没有开发经验的 Python Django,同时,作为前端开发的我也并没有能拿得出手的前端开发项目经验。更加棘手的是,课设的那一个星期正赶上移动应用程序和云计算课程的结课,软工课设时间被挤压只能在三天内从零做完整个项目(原计划是两个星期)。

二、开发过程

在开发的前期,因为前后端分离的原因,我们两个人除了交流功能、讨论界面设计和确定数据格式以外,基本没有其他的合作,各自确定代码结构和实现。在开发了一段时间之后,对完成的首页进行测试,发现由于 JavaScript 进行了跨域访问,数据无法提交,只好将前端部署到服务器上进行访问,这样就造成了代码修改的不便,需要进行频繁的部署和访问。由于时间紧迫,没有使用 Webhook 等自动部署工具。

解决了跨域访问的问题后,由于使用网页端 JavaScript 异步登录,不知什么原因在进行登录后服务器端无法识别 Session(可能和 Cookie 相关),导致登录始终失败无法进行下一步的测试。

除了上述两个问题外,因为前后端分离,我们试图使用原生 JavaScript 通过异步数据交换,对 DOM 进行操作,更新网页内容。由于前端知识掌握不足,模板等技术不会使用,只好利用字符串拼接在 JavaScript 中形成 HTML 代码,从而更新内容。这种方法浪费了大量的时间(因为有大量的字符串和变量拼接,以及字符转义操作等),且效果非常不理想,JS 代码可读性较差,查找 Bug 困难,且不易修改。

终于,在积累了大量的 Bug 后,我们没能在规定时间内解决,无法完成一个功能正常的网站,作品存在的问题如下:

  • 登录始终不成功
  • 数据交换成功率不高
  • 页面内容更新效果差,失败率高
  • 页面美观性低

三、解决方案

经过和老师的沟通,老师同意让我们延后一周提交作品。我们决定放弃这种方案,放弃前后端分离的设计,使用 Django 的模板进行开发。这样一来有点如下:

  • Session 问题自然解决,因为放弃异步登录,所有登录操作都在服务器完成
  • 数据交换都在服务器完成
  • 页面内容更新不需要 JS 对 DOM 进行操作,使用 HTML 模板生成
  • 有更多精力和时间进行页面美化和功能完善
  • 将所有业务逻辑代码放在框架中完成,提高了代码的可读性和可维护性

经过3天的重构和开发,我们最终完成了具有正常功能的网站……

四、总结

我认为,这次的课程设计失败的主要原因有两个:一是在时间紧迫的情况下使用自己不熟悉的技术栈;二是在进行网站架构设计时,对原本工作量不大的代码工作进行了过度拆分,平白增加了巨大的对接工作量,耽误了完成进度。

所以,在写代码之前,首先要进行合理的软件设计,否则可能会事倍功半。

以上。


记一次失败的网站设计和开发
https://maphical.cn/2019/08/experience-of-a-fail-website-design/
作者
MaphicalYng
发布于
2019年8月7日
许可协议