2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
2020 Web应用程序项目规范 内容
目的
项目总结 第1部分–设计您的网站 第2部分–规划路线和数据库 里程碑1提交: 第3部分–建立您的网站 第4部分–客户端-服务器集成 第5部分–数据库架构 里程碑2提交: 第6部分–服务器完成 第7部分-示范
最终提交
需要参考
目的
1. 了解设计用户友好网站的原则。
2. 用HTML和CSS编写符合标准的网站。
3. 使用Javascript开发动态的客户端Web内容。
4. 了解Web应用程序的客户端和服务器端组件之间的交互。 5. 设计和构建对服务器的AJAX调用并处理响应。
6. 在Web应用程序中使用第三方API。
7. 使用ER建模来设计数据库结构。
8. 了解数据库在Web应用程序中的作用。
9. 规划数据库并将其集成到Web应用程序中。
10. 了解并缓解Web应用程序面临的安全问题。
项目总结 描述
这个学期的Web应用程序项目是为共享空间设计和开发任务/杂项花名册系统，该系统允许管理人 员设置任务，将其任务通知用户并允许用户将任务标记为已完成。
加载后，系统应显示
今天需要完成的当前任务
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 1/8
2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
分配了该任务的用户
用户应该能够注册并登录，以便他们可以
查看他们的计划任务 管理他们的个人资料/用户信息 管理其可用性 管理他们可以/想要执行的任务类型。
管理员应能够注册并登录: 管理他们的个人资料/经理信息 创建和管理不同的任务。 小组任务。 向用户分配任务或任务组。
用户/经理应该能够选择链接社交媒体/电子邮件/其他帐户，从而允许通过该平台登录，从而使 登录更加容易。
还必须具有以下两个特殊功能之一:
邮件通知 用户可以请求将有关当前/即将执行的任务的电子邮件通知发送给他们。 用户应该能够选择何时发送电子邮件通知 用户应该能够为每个任务设置多个通知和/或不同的通知。
〜或〜
日历提醒
用户可以将其在线日历连接到系统(Google日历/ Outlook) 在用户的在线日历上自动添加和更新任务。
软件需求
该Web应用程序必须在CS50 IDE中开发并运行。 您还应该定期进行(至少每周备份/下载工作)
该Web应用程序必须使用NodeJS，Express和AJAX。
该数据库必须是SQL数据库。
您的标记/代码必须通过W3C验证和ESLint验证。 您可以使用本课程未解决的其他库/框架，但是您的实现仍必须证明您对本课程中讲授的概念有 所了解。
投稿
这是一个 项目，无法在最后一刻完成，因此为了确保您能按计划进行，我们设置了三(3) 个里程碑。一个在第9周结束时进行，另一个在第12周结束时进行，最后一个在第15周结束时进 行。请注意，第15周提交没有任何延期
您的文件将被提交到MyUni，并且还将期望您提供对CS50 IDE环境的标记访问，以进行进一步的检 查。
在项目结束时，您还将提交简短的视频演示，以演示Web应用程序的功能。 评定
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 2/8
。
的大很
2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
该项目是完成独立。不允许以小组形式完成此项目或共享实施的一部分。 该项目的总价值为您最终课程成绩的65%，并非障碍。 MyUni提交页面上的每个部分都将提供详细的标记规则。
里程碑
到期
重量
里程碑1
网站设计 特色计划 流量套餐 ER模型
9 11:59
15%
里程碑2
客户端实施 服务器路由框架 数据库SQL模式
12 11:59
15%
最终提交
从里程碑1和2继续进行的所有进度，以及 数据库实施
服务器实施
登录系统和安全性
15 11:59
35%
总
65%
专题讨论会
每周的研讨会会议是一个很好的机会，可以在提交截止日期之前提出问题并从讲师和导师那里获得
反馈。
欢迎您参加未按需参加的会议以寻求帮助。
第1部分–设计您的网站
考虑并浏览网页。任务名册网站可能是什么样?用户可能需要提供哪些信息?他们将如何登录?任
务将如何显示?用户如何标记他们的完成?经理应该做什么?鼓励您考虑此应用程序的其他功能。
我们已经概述了最低要求。
研究现有网站，以获取有关您的Web应用程序的想法。 记录您发现的所有页面，这些页面很好地说明了您的网站的外观。哪些部分运作良好。哪些 零件工作不正常?
还要记录您发现的可能包含在网站中的功能的所有示例。
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 3/8
上晚五期星周 第
上晚五期星周 第
上晚五期星周 第
2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
一旦确定了用户的能力，就需要考虑他们将如何执行每个任务以及如何使这些任务在您的站点上可 见–牢记有关设计和可用性的文章和讲座。
绘制(不编码)您的网站的外观。
从图中可以明显看出站点的每个部分都在做什么。 确保包括任何尺寸–如果调整窗口大小，元素如何更改? 该网站在手机和台式机上的外观如何?
考虑一下“说明”部分中的功能，开始计划站点中每个功能的功能以及可能需要的其他功能。 此功能出现在哪里以及用户如何与之交互?
当用户执行这些交互之一时会发生什么? 如果在交互后页面/站点发生更改，请说明将要更改的内容，并在必要时进行绘制。
为每个功能描述这些。
不要忘记决定要实现的特殊功能:
邮件通知 〜或〜
日历提醒
一旦有了基本设计，现在就需要检查和调整它的可用性和可访问性。
审查您的设计。
如何最大程度地减少运动和认知负担? 它是否符合讲座和MyUni上引用的标准和启发式方法?
让另外2名学生检查您的网站设计并执行基本的可用性测试。 您网站的哪些部分是明确的。哪一个不是 记录其他小组的反馈意见和任何发现。
记录由于上述测试和审查而对设计所做的任何更新。
在整个课程中，随着您了解有关实现Web应用程序的更多信息，您的设计可能会发生变化。可以， 但是请确保随着这些更改的进行，您将继续检查网站的可用性和可访问性。我们将在您的最终演示 文稿中对此进行评估。
您第7周的工作坊时间是一个很好的机会，可以在截止日期前提出问题，获得反馈并与其他学生比 较您的设计。
第2部分–规划路线和数据库 现在您已经有了可靠的设计和基本的客户端实现，您可以开始考虑Web应用程序将要处理的内容以
及操作方式。
对于您网站中的每个功能，创建一个数据计划，列出您的Web应用程序将要处理的不同内容/信 息，并确定应将其存储在何处，以何种格式以及应在何处进行处理。
信息从何而来?
应该采取什么形式?
如果信息在服务器上，则客户端需要发送什么来检索该数据?
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 4/8
2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
如果信息在客户端上，它将如何发送到服务器?
是否所有信息都需要存储在服务器上?
为了使数据有用，需要进行哪些处理?
一旦确定了需要使用的不同数据，就可以开始考虑如何将这些数据存储在服务器上。 使用讲课和实践中概述的方法，为Web应用程序的数据创建一个实体关系图。
里程碑1提交: 在截止日期(第9周星期五)晚上11:59之前，将第1和第2部分到目前为止完成的所有工作提交到
MyUni Milestone提交页面。其中应包括: 您对第1部分的研究，设计，反馈，评论和更改
第2部分中的数据计划和ER模型 以单个ZIP文件提交您的作品;
确保将所有工作都包含在ZIP文件中。 如果您将文件组织在文件夹/目录中，则在将文件添加到ZIP文件时，请务必保留此结构。
提交的内容占您最终课程成绩的15%
接近截止日期的提交页面上将提供详细的标记规则。 除非另有说明，否则您的标记将在截止日期的两周内显示在MyUni成绩簿中。 逾期提交的罚款!(请参阅课程大纲)
第3部分–建立您的网站 现在您已经有了可靠的设计，是时候开始编写代码了!您现在应该牢牢掌握这些语言，并能够实现
网站的所有静态元素。
使用HTML和CSS来实现网站的所有部分。 遵循讲座和练习中概述的最佳做法。
确保正确使用CSS以在所有页面上提供一致且可维护的样式。 确保您的实施通过验证。
建立网站时，请开始使用JavaScript和Vue添加互动功能。
使用JavaScript和Vue进一步构建您的设计。 开始添加客户端代码，供用户和管理员与任务交互并管理其设置
根据需要使用测试数据/变量来模拟客户端-服务器交互，并帮助您测试代码。 遵循讲座和练习中概述的最佳做法。
确保正确使用JavaScript文件，以在所有相关页面上提供一致且可维护的代码。
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 5/8
2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
确保您的实现在修改后仍通过验证。 确保您的JavaScript和Vue顺利通过。
第4部分–客户端-服务器集成 现在是时候设置服务器，以便可以在其他计算机上访问您的网站了!
按照MyUni上的讲义和文档，设置Express服务器并将您的网站迁移到该服务器。 测试以确保您的网站的所有部分都可以正常运行，因为Express服务器正在为它们提供服务。
现在您准备开始在服务器上处理数据。
使用GET / POST方法和AJAX的组合，修改您的网站和服务器，以实现处理第2部分数据计划中 标识的每个功能的内容/信息所需的调用。 在这个阶段不需要完成功能上的路由，但是您将需要使用虚拟响应来设置路由，以确保您的客 户端代码能够按预期工作。
第5部分–数据库架构和查询 现在，您已经设计了数据库，您可以对其进行设置并开始编写查询。
将您的ER图转换为SQL模式。 设置您的SQL数据库和表。 记下在数据库中存储和检索数据所需的查询。
里程碑2提交: 在截止日期(第12周星期五晚上11:59)之前，将第3-5部分到目前为止完成的所有工作提交给
MyUni Milestone 2提交。其中应包括: 第3部分和第4部分中的实现
第5部分中的SQL模式 以单个ZIP文件提交您的作品;
确保将所有工作都包含在ZIP文件中。 如果您将文件组织在文件夹/目录中，则在将文件添加到ZIP文件时，请务必保留此结构。 不要在提交中包括node_modules文件夹，但要确保包括其他服务器文件。 您还需要提供对CS50 IDE的标记访问权限
如果提交的文件丢失，这将使我们能够测试您的工作，并查看进度。
详细信息将在提交页面上列出。
提交的内容占您最终课程成绩的15%
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 6/8
2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
接近截止日期的提交页面上将提供详细的标记规则。 除非另有说明，否则您的标记将在截止日期的两周内显示在MyUni成绩簿中。 逾期提交的罚款!(请参阅课程大纲)
第6部分–服务器实施和集成 修改服务器路由以执行完成Web应用程序所需的任务和数据查询。
实现并填充您的数据库 使用完整的功能完成第4部分中的服务器路由，集成第5部分中的数据库查询。 参考适当的API和文档，完成对所选特殊功能的实现:
对于电子邮件通知，我们建议使用Nodemailer API
对于日历提醒，我们建议使用Google日历或Outlook API 实施并保护您的登录系统(如果尚未安装) 将OpenID集成到Web应用程序的登录系统中。
确保OpenID身份验证已正确验证 您可以使用任何身份提供程序或提供程序的任何组合。
Web应用程序的主要功能现在应该已经完成。
查看并测试您的Web应用程序的功能和错误。 测试Web应用程序的安全性，确保它不易于受到SQL Injection，XSS，XSRF的影响，并且不容 易绕过其身份验证。
第7部分-示范 录制最多3分钟的视频，以演示Web应用程序的功能。
不会对您的演讲技巧/交付/准备进行评估;仅关于您的Web应用程序的功能。 这将有助于您的标记器确保它们不会丢失任何东西。
变焦包括录制功能。
最终提交
准备最终提交:
审阅这份文件
确保所有主要点都被覆盖
以单个ZIP文件提交您的作品;
确保将所有工作都包含在ZIP文件中。 确保将演示视频包含在ZIP文件中
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 7/8
2020/5/13 2020 Web应用程序项目规范:Web和数据库计算(2207_7207合并)
如果您将文件组织在文件夹/目录中，则在将文件添加到ZIP文件时，请务必保留此结构。 不要在提交中包括node_modules文件夹，但要确保包括其他服务器文件。 您还需要提供对CS50 IDE的标记访问权限
如果提交的文件丢失，这将使我们能够测试您的工作，并查看进度。
详细信息将在提交页面上列出。
提交的内容占您最终课程成绩的15%
接近截止日期的提交页面上将提供详细的标记规则。 除非另有说明，否则您的标记将在截止日期的两周内显示在MyUni成绩簿中。 逾期提交将不被接受。
需要参考
演讲笔记。 练习中的注释和代码 在MyUni上链接的资源
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 8/8