微信客服：xiaoxionga100
微信客服：ITCS521
COMP6080-js代写
时间：2023-03-21
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 1/7
大号 潜伏工作
项目编号：372514 离开项目
从一个无法访问的项目中分叉
将起始代码的更改合并到“master”中
COMP6080 机器人 作者 1周前
姓名 最后提交 最后更新
更新了“/job/feed”的 Swagger 文档 1周前
为 23T1 做好准备 2个星期前
为 23T1 做好准备 2个星期前
更新了“/job/feed”的 Swagger 文档 1周前
为 23T1 做好准备 2个星期前
为 23T1 做好准备 2个星期前
为 23T1 做好准备 2个星期前
自述文件
评估 3 - Vanilla JS：LurkForWork
1. 背景与动机
2. 任务
3. 入门
4. 约束和假设
5. 评分标准
6. 作品原创性
7. 提交
8. 迟交政策
0.变更日志
13/03/2023 - 从“所有作业”->“下 5 个作业”更新了 Swagger 文档中“/job/feed”端点的描述。
一、背景与动机
基于 Web 的应用程序正在成为构建大众可访问的数字功能的最常见方式。虽然有现代工具可以帮助我们快速构建这些，但了解现有的基于
JavaScript 的基本技术和架构非常重要，这既可以更深入地了解何时可能需要这些技能，也可以简单地了解基本的机制JS。即使在使用像 ReactJS
这样的高级框架时，理解（在概念上）它被转换成的代码也将确保你是一个更全面的基于 Web 的工程师。
此作业包括使用 Vanilla JS（无 ReactJS 或其他框架）构建前端网站。该前端将与以 JavaScript（NodeJS Express 服务器）构建并提供给您的
RESTful API HTTP 后端进行交互。
有关如何与此 API 交互的理论背景可以在“promises & fetch”讲座中找到。
您构建的基于 Web 的应用程序必须是单页应用程序 (SPA)。单页应用程序给网站一种“类似应用程序的感觉”，其特点是使用一次完整加载初始
HTML 页面，然后使用 AJAX/fetch 动态操作 DOM，而无需重新加载整个页面。通过这种方式，使用 JavaScript 生成、呈现和更新 SPA。因为 SPA
不需要用户离开页面来做任何事情，所以它们保留了一定程度的用户和应用程序状态。简而言之，这意味着您将永远只有 index.html HTML 页
面，并且任何“在页面之间移动”的感觉都只是对 DOM 的修改。
2.任务（前端）
您的任务是为流行的专业社交网络工具LinkedIn的 UNSW 剽窃版本构建一个前端。如果您以前没有使用过此应用程序，我们建议您创建自己的
LinkedIn 个人资料 - 这可能对您的职业生涯有好处！
UNSW 对 LinkedIn 的盗版被称为“LurkForWork”。但是，您不必构建整个应用程序。您只需要构建前端。后端已经作为一个用 NodeJS 构建的快速
服务器为您构建（请参阅第 3.2 节）。
后端
前端
.gitignore
自述文件
奖金.md
进度.csv
可用性.md
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 2/7
我们不是提供前端（您的任务）应该是什么样子的视觉效果，而是为您提供一些关于预期功能和行为的清晰而简短的要求。
这些要求描述了一系列屏幕。屏幕可以是弹出窗口/模式，或整个页面。使用该语言是为了让您可以选择如何显示它。屏幕本质上是基于 Web 的
应用程序的特定状态。
2.1. 里程碑 1 - 注册和登录 (9.4%)
这侧重于注册和登录站点的基本用户界面。
2.1.1. 登录
当用户未登录时，站点应显示包含以下内容的登录表单：
电子邮件字段（文本）
密码字段（密码）
提交按钮登录
按下提交按钮时，应将表单数据发送到 POST /auth/login以验证凭据。如果在登录期间出现错误，屏幕上应显示相应的错误。
2.1.2. 登记
当用户未登录时，登录表单应提供打开注册表单的链接/按钮。注册表将包含：
电子邮件字段（文本）
名称字段（文本）
密码字段（密码）
确认密码字段（密码） - 不会传递给后端，但如果它与其他密码不匹配，则应在提交时抛出错误
提交按钮进行注册
当按下提交按钮时，如果两个密码不匹配，用户应该会收到一个错误弹出窗口。如果它们确实匹配，则应将表单数据发送到 POST
/auth/register以验证凭据。如果在注册过程中出现错误，屏幕上应显示相应的错误。
2.1.3. 错误弹窗
每当前端或后端产生错误时，屏幕上都会弹出一个错误消息（从后端错误响应派生的消息，或者在前端有意义地创建的消息）。
可以通过按“x”或“关闭”按钮来关闭/移除/删除此弹出窗口。
2.2. 里程碑 2 - 基本 Feed (14%)
里程碑 2 侧重于从 API 获取提要数据。提要及其相关内容应该仅供登录用户访问。
2.2.1. 基本饲料
应用程序应在派生的主页上呈现用户内容的“提要” GET /job/feed。请注意，提要只会返回登录用户正在观看的人的信息。
作业应按时间倒序显示（最近的作业在前）。
每个作业应显示：
1. 职位发布者是谁
2. 当它被张贴
如果职位是今天发布的（过去 24 小时内），它应该显示发布的小时数和分钟数
如果职位发布时间超过 24 小时，它应该只显示发布日期 DD/MM/YYYY
3. 工作内容本身。工作内容包括以下内容：
描述工作的图像（base64 格式的 jpg）
新工作的标题（只是一个字符串）
工作的开始日期（只是一个字符串）
它有多少喜欢（或没有）
职位描述文本
职位发布有多少条评论
2.3. 里程碑 3 - 高级 Feed (9.4%)
里程碑 3 侧重于更丰富的用户体验，并且需要一些后端交互。
2.3.1. 对工作表示喜欢
允许用户查看喜欢某个工作的所有用户的列表。就其显示方式而言，请从以下 3 个选项中考虑您首选的用户体验方法：
默认情况下，名称列表在提要中的每个职位上都可见
如果单击显示/隐藏切换（默认情况下隐藏），则名称列表在提要中的作业上可见。
当在提要上单击按钮/链接时，名称列表在弹出窗口、模式屏幕或新屏幕中可见。
2.3.2. 显示对工作的评论
允许用户查看作业中所有评论的列表。每条评论至少应包含用户的姓名及其评论。就其显示方式而言，请从以下 3 个选项中考虑您首选的用
户体验方法：
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 3/7
默认情况下，名称和评论列表在提要中的每个职位上都是可见的
如果单击显示/隐藏切换（默认情况下隐藏），则姓名和评论列表在提要中的职位上可见。
当在提要上单击按钮/链接时，名称和评论列表在弹出窗口、模式或新屏幕中可见。
2.3.3. 喜欢一份工作
用户可以在他们的 feed 上喜欢一个工作并触发一个 api 请求 ( PUT /job/like )
对于这个里程碑，如果在页面刷新之前没有出现/更新，则可以。
2.3.4. 提要分页
用户可以使用带有 ( ) 的位置标记在提要中的结果集之间进行分页 GET /job/feed。
注意：如果您最终在以后的里程碑中实施无限滚动替代方案，您将自动获得此部分的分数。
2.4. 里程碑 4 - 其他用户和个人资料 (14%)
里程碑 4 主要关注用户配置文件以及用户如何与他们交互。
2.4.1. 查看其他人的个人资料
让用户在工作中点击用户名，喜欢或评论，然后被带到该用户的个人资料屏幕。
配置文件屏幕应包含后端通过 ( GET /user ) 为该特定用户 ID 提供的任何信息。
该个人资料还应显示该人所做的所有工作。您无需在此处为每项工作显示喜欢和/或评论。
该配置文件还应在某处显示该配置文件被观看的所有其他用户（信息来自 GET /user）。这应该包括一个名称列表（每个名称链接到另一个
配置文件），以及页面某处的计数，显示他们被观看的用户总数。
2.4.2. 查看您自己的个人资料
用户可以像查看任何其他用户的个人资料一样查看自己的个人资料
登录后，用户个人资料的链接（通过文本或小图标）应该在大多数屏幕上（至少在提要屏幕上）常见的地方可见。
2.4.3. 更新您的个人资料
用户可以通过 ( ) 更新自己的个人资料 PUT /user。这允许他们更新他们的：
电子邮件地址
密码
姓名
图像
2.4.4. 看/不看
观看用户个人资料：
当登录用户访问另一个用户的个人资料页面时，应该存在一个按钮，允许他们“观看”另一个用户（通过 PUT user/watch）。
如果登录用户已经在关注这个人，则应该存在一个取消关注按钮。
提要屏幕上的某处还应该存在一个按钮，提示输入者在弹出窗口中输入电子邮件地址。输入后，电子邮件地址将发送到 PUT
/user/watch该特定用户。
2.5. 里程碑 5 - 添加和更新内容 (9.3%)
里程碑 5 侧重于添加和删除内容和评论。
2.5.1. 添加工作
POST /job用户可以通过 ( )从模式、组件或单独的屏幕上传和使用新内容
用户如何打开这个组件、模式或单独的屏幕可以在一个或多个地方找到，并且应该容易和清晰地访问。
2.5.2. 更新和删除作业
DELETE /job让用户通过 ( ) 或 ( )更新他们所做的工作或将其删除 PUT /job。
2.5.3. 留下评论
POST /job/comment用户可以通过 ( )对“工作”发表评论
2.6. 里程碑 6 - 挑战组件 ( advanced ) (9.3%)
2.6.1. 无限滚动
用户可以无限滚动浏览结果，而不是分页。为了正确实现无限滚动，您需要在滚动时逐步加载作业。
2.6.2. 实时更新
如果用户喜欢某项工作或对某项工作发表评论，则应更新该工作的喜欢和评论，而无需重新加载/刷新页面。这应该通过某种轮询来完成。
轮询对于浏览器来说效率很低，但通常可以使用，因为它简化了服务器上的技术需求。
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 4/7
2.6.3. 推送通知
当他们关注的用户发布职位时，用户可以收到推送通知。要知道某人是否发布了职位，您必须“轮询”服务器（即间歇性请求，可能每秒检查
一次状态）。您可以通过浏览器内置的通知 API 或您自己定制的通知/弹出窗口来实现这一点。通知不需要存在于网页之外。
不会为该组件提供讲座中的课程帮助，您应该自行研究如何实施。网上有丰富的资源。
2.7. 里程碑 7 - 非常具有挑战性的组件 ( advanced *= 2 ) (4.6%)
2.7.1. 静态提要离线访问
即使没有互联网连接，用户也可以访问他们加载的最新提要。
在发生中断时缓存来自本地存储中最新提要的信息。
当用户尝试在离线模式下与网站交互时（例如评论，喜欢）他们应该收到错误
不会为该组件提供任何课程帮助，您应该自行研究如何实施。
2.7.2 基于片段的 URL 路由
用户可以使用 URL 片段访问不同的页面：
不会为该组件提供讲座或论坛的课程帮助，您应该自行研究如何实施。
2.8. 加分 (5%)
可以通过加分获得额外 5% 的作业，这意味着最高分数为 105/100。任何将你的 ass2 分数提高到 100% 以上的奖励分数都会渗透到其他作业分数
中，但不能在分配给作业分数的 75% 课程之外做出贡献
您的奖励功能可以是任何东西。您只需要考虑一些可以使您的 Web 应用程序以某种次要或主要方式脱颖而出的东西。简单的例子包括确保您的用
户界面和用户体验在其他学生中脱颖而出，也许通过一些用户测试。
您还可以添加额外的功能，例如一些额外的前端表单验证 - 可能性是无限的。
bonus.md如果您确实实现了奖励功能，请在此存储库的根目录中描述该功能及其详细信息。
3. 开始
3.1. 前端
已提供存根代码以帮助您开始：
frontend/index.html
frontend/styles/global.css
frontend/src/helpers.js
frontend/src/main.js
如果您愿意，可以修改或删除此存根代码。它只是在这里可能提供一些帮助。
要在 Web 服务器本地使用前端代码，您可能必须运行另一个 Web 服务器来为前端的静态文件提供服务。
为此，请在您的计算机上运行一次以下命令：
$ npm install --global http-server
然后每当你想启动你的服务器时，在你的项目的根文件夹中运行以下命令：
$ npx http-server frontend -c 1 -p [port]
[port]您要在其上运行服务器的端口在哪里（例如 8080）。任何数字都可以。
这将启动第二个 HTTP 服务器，如果您导航到 http://localhost:8000（或它提供的任何 URL/端口），它将在 index.html没有任何 COR 问
题的情况下运行。
3.2. 后端
您被禁止修改后端。无需在后端完成任何工作。它提供给您只是为了为您的前端提供动力。
后端服务器存在于您的个人存储库中。克隆此 repo 后，必须 yarn install在 backend目录中运行一次。
要运行后端服务器，只需 yarn start在 backend目录中运行即可。这将启动后端。
要查看后端的 API 接口，您可以导航到后端的基本 URL（例如 http://localhost:5005）。这将列出您可以与之交互的所有 HTTP 路由。
/#profile=1
/#feed
/#profile=4
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 5/7
我们为您提供了一个非常基本的起始数据库，其中包含两个用户和一个带有消息的公共频道。你可以进去 backend/database.json看看里面的
内容。
您的后端在数据存储方面是持久的。这意味着即使您的快速服务器进程停止运行，数据仍将保留。如果想把后台的数据重置为原来的启动状态，
可以 yarn reset在后台目录下运行。如果您想复制后端数据（例如用于备份），则只需复制 database.json . 如果你想从一个空数据库开始，
你可以 yarn clear在后端目录中运行。
后端启动后，您可以通过 http://localhost:[port]在 Web 浏览器中导航来查看 API 文档。
后端运行的端口（以及前端可以使用的端口）在 frontend/src/config.js . 您可以更改此文件中的端口。这个文件的存在是为了让你的前端知
道在与后端对话时使用哪个端口。
请注意：如果您手动更新 database.json，您将需要重新启动服务器。
请注意：您不能修改奖励标记的后端源代码。
3.3. 迈出第一步
这是我们建议您开始作业的方式：
1. 阅读整个规范，包括通读第 2 部分，这样您就知道接下来会发生什么！
2. 尝试在您的浏览器上加载 index.html一个简单的“Hello world”文本，只是为了检查您是否知道您要加载的页面。
3. 通过考虑所有关键屏幕及其依赖的信息来规划您的 UI
4. 尝试加载后端并通过调用一个简单的 API 来验证它是否正常工作 /feed（这应该会返回一个空列表）
5. 祝你好运！
4. 约束和假设
4.1. Javascript
您必须在符合 ES6 的 Vanilla JavaScript 中实现此分配。您不能使用 ReactJS、JQuery 或其他抽象框架。例如，您不能使用Angular或React等
流行的 Javascript 框架。
您不能直接使用外部 JavaScript。除非事先获得课程权威的批准，否则不要使用 NPM，除非安装任何其他开发库。
4.2. CSS 和其他库
您可以使用从 Stack Overflow 或其他公开可用资源等站点获得的少量（< 10 行）通用代码（不特定于作业）。您应该在注释中明确注明此代
码的来源。您不能以其他方式使用他人编写的代码。
您可以在此作业中包含外部 CSS 库（使用 标签 ）。您必须注明这些来源（即在源代码注释中提供 URL/作者）。例如，您可以使
用流行的Bootstrap CSS 框架。一些 Bootstrap 功能依赖于随附的 Javascript。您可以包含此 Javascript。Bootstrap 附带的 Javascript 需要流
行的通用 Javascrpt 库jQuery。您可以包含jQuery，以便 bootstrap 可以使用它。但是，您不得在为作业编写的代码中使用jQuery 。
4.3. 浏览器兼容性
您应该确保您的程序已经在以下两种浏览器之一上进行了测试：
在本地，Google Chrome（各种操作系统）
在 CSE 机器上，Chromium
4.4. 其他需求
该规范故意含糊不清，以允许您构建您认为视觉上合适的前端组件。它们的大小、位置、颜色、布局几乎在所有情况下都完全由您决定。我
们需要一些基本标准，但它主要是规定元素和行为。
这不是设计任务。在基本的用户体验和视觉布局方面，你需要表现出常识和批判性思维，但你不需要创造性才能获得满分。
您的网络应用程序必须是单页应用程序。这意味着在一个 html 页面上只有一次初始浏览器内容加载，并且页面的所有后续动态更改都基于
Javascript DOM 操作。如果您不构建单页应用程序（例如，使用指向多个 HTML 页面的链接），您将收到 50% 的分数罚款。
4.5. 静态 HTML、innerHTML、DOM 操作
在这个任务中，你是：
允许将静态 HTML/CSS 添加到提供的存根网站（即，您可以将原始 HTML/CSS 当作静态页面，即使您随后使用 JavaScript 对其进行操作）。
允许构建 HTML 元素并通过 JavaScript 将 CSS 属性添加到 DOM。我们希望这是学生构建这些页面的最常见方式。
严禁使用节点/标签 innerHTML的属性来设置元素的内部 HTML。这存在安全漏洞，通常不是最佳实践。要么静态添加 HTML/CSS 并使用
JavaScript 对其进行操作，要么在 JavaScript 中生成和构建节点/元素（就像在讲座/教程/实验室中一样），或两者兼而有之。但不要设置内
部 HTML。使用任何一项都 innerHTML将导致您的分数被扣 50%。
4.6. 异步、等待、承诺
严禁在此作业中使用and async语法。 await您必须使用 ES6 Promises。使用任何 async或 await将导致您的标记被扣分 50%。
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 6/7
五、评分标准
您的作业将由课程中的导师根据以下标准手工标记。
请注意：当我们测试您的 UI 时，我们将使用预加载的数据库 JSON，其中已经添加了工作、用户和手表。
标准 加
权
描述
符合任务要
求
70% 每个里程碑都指定了总体分配的特定百分比（总计高达 70%）。根据要求实施这些组件以获得标记。
当您部分或全部完成时，您必须更新此存储库根文件夹中的文件。 progress.csv有效值为“NO”、
“PARTIAL”和“YES”。更新这个是必要的，这样你的导师就会知道应该关注什么，避免什么——让他们最好地
理解你的工作，并为你提供你所获得的分数。
移动响应 15% 您的应用程序适用于一般桌面尺寸、一般平板电脑尺寸和一般移动尺寸（低至 400 像素宽，700 像素高）。
代码风格 10% 您的代码干净、注释良好、变量命名合理且布局合理。
可用性和可
访问性
5% 您的应用程序可用且易于导航。没有明显的可用性问题或令人困惑的布局/流程。
您的应用程序遵循标准的可访问性指南，例如使用 alt 标签和不可访问的颜色。
在 usability.md 中描述您为提高可用性/可访问性所做的任何尝试
（奖励标
记）额外功
能
5% 规范中未包含的额外功能的实现。
额外的功能应该是重要的，有明确的存在理由，并显示出某种形式的技术、产品或创意亮点。
在项目文件夹的“BONUS.md”中记录的任何额外功能
任何将你的 ass3 分数提高到 100% 以上的奖励分数都会渗透到其他作业分数中，但不能在分配给作业分数的
80% 课程之外做出贡献
对单人组的期望将是双人组的一半，以达到相同的分数。
六、作品原创性
您提交的作品必须是您自己的作品。不允许提交部分或全部源自任何其他人或与任何其他人共同撰写的作品。
对此类违规行为的处罚可能包括负分、课程自动不及格以及可能的其他学术纪律。作业提交将自动和手动检查此类提交。
如果获得奖学金的学生涉及剽窃或其他不当行为，将通知相关奖学金主管部门。
请勿向任何其他人提供或展示您的作业 - 除了 COMP6080 的教学人员。
如果您出于任何原因故意向他人提供或展示您的作业，并且提交了由此衍生的作品，您可能会受到处罚，即使该作品是在您不知情或未同意的情
况下提交的。即使您的作品是由您不认识的第三方提交的，这也可能适用。
每次您在此存储库上进行提交或推送时，您都承认您提交的工作是您自己的工作（如上所述）。
根据课程大纲，“结对将被要求定期为 gitlab 做出贡献，并且贡献相当相等，因为我们仍然单独评估贡献（没有分配一揽子小组分数）。不这样做
可能会导致分数丢失。”
如果您不是结对工作，我们仍然强烈建议您定期提交少量代码。这将帮助您处理您认为不正确的任何剽窃指控。
请注意，如果您的作品有可能在未经您同意或不知情的情况下被拿走，您将不会受到处罚。
8.提交
该作业截止日期为3 月 27 日星期一上午 10 点。
要提交作业，您必须按顺序完成以下两个步骤：
确保您已将所有代码推送到 gitlab master 分支。您可以通过查看 master 分支上的 gitlab 站点上的代码来检查您是否已正确完成此操作。
这将提交 master 上的最新提交作为您的提交。
您不必为此作业运行提交命令（我们正在尝试不使用该命令）。
您有责任确保您的代码在从 Gitlab 克隆时能够成功运行。
对于双人组，只有一名团队成员需要提交。
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 7/7
8. 延迟提交政策
不接受迟交。
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 1/7
大号 潜伏工作
项目编号：372514 离开项目
从一个无法访问的项目中分叉
将起始代码的更改合并到“master”中
COMP6080 机器人 作者 1周前
姓名 最后提交 最后更新
更新了“/job/feed”的 Swagger 文档 1周前
为 23T1 做好准备 2个星期前
为 23T1 做好准备 2个星期前
更新了“/job/feed”的 Swagger 文档 1周前
为 23T1 做好准备 2个星期前
为 23T1 做好准备 2个星期前
为 23T1 做好准备 2个星期前
自述文件
评估 3 - Vanilla JS：LurkForWork
1. 背景与动机
2. 任务
3. 入门
4. 约束和假设
5. 评分标准
6. 作品原创性
7. 提交
8. 迟交政策
0.变更日志
13/03/2023 - 从“所有作业”->“下 5 个作业”更新了 Swagger 文档中“/job/feed”端点的描述。
一、背景与动机
基于 Web 的应用程序正在成为构建大众可访问的数字功能的最常见方式。虽然有现代工具可以帮助我们快速构建这些，但了解现有的基于
JavaScript 的基本技术和架构非常重要，这既可以更深入地了解何时可能需要这些技能，也可以简单地了解基本的机制JS。即使在使用像 ReactJS
这样的高级框架时，理解（在概念上）它被转换成的代码也将确保你是一个更全面的基于 Web 的工程师。
此作业包括使用 Vanilla JS（无 ReactJS 或其他框架）构建前端网站。该前端将与以 JavaScript（NodeJS Express 服务器）构建并提供给您的
RESTful API HTTP 后端进行交互。
有关如何与此 API 交互的理论背景可以在“promises & fetch”讲座中找到。
您构建的基于 Web 的应用程序必须是单页应用程序 (SPA)。单页应用程序给网站一种“类似应用程序的感觉”，其特点是使用一次完整加载初始
HTML 页面，然后使用 AJAX/fetch 动态操作 DOM，而无需重新加载整个页面。通过这种方式，使用 JavaScript 生成、呈现和更新 SPA。因为 SPA
不需要用户离开页面来做任何事情，所以它们保留了一定程度的用户和应用程序状态。简而言之，这意味着您将永远只有 index.html HTML 页
面，并且任何“在页面之间移动”的感觉都只是对 DOM 的修改。
2.任务（前端）
您的任务是为流行的专业社交网络工具LinkedIn的 UNSW 剽窃版本构建一个前端。如果您以前没有使用过此应用程序，我们建议您创建自己的
LinkedIn 个人资料 - 这可能对您的职业生涯有好处！
UNSW 对 LinkedIn 的盗版被称为“LurkForWork”。但是，您不必构建整个应用程序。您只需要构建前端。后端已经作为一个用 NodeJS 构建的快速
服务器为您构建（请参阅第 3.2 节）。
后端
前端
.gitignore
自述文件
奖金.md
进度.csv
可用性.md
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 2/7
我们不是提供前端（您的任务）应该是什么样子的视觉效果，而是为您提供一些关于预期功能和行为的清晰而简短的要求。
这些要求描述了一系列屏幕。屏幕可以是弹出窗口/模式，或整个页面。使用该语言是为了让您可以选择如何显示它。屏幕本质上是基于 Web 的
应用程序的特定状态。
2.1. 里程碑 1 - 注册和登录 (9.4%)
这侧重于注册和登录站点的基本用户界面。
2.1.1. 登录
当用户未登录时，站点应显示包含以下内容的登录表单：
电子邮件字段（文本）
密码字段（密码）
提交按钮登录
按下提交按钮时，应将表单数据发送到 POST /auth/login以验证凭据。如果在登录期间出现错误，屏幕上应显示相应的错误。
2.1.2. 登记
当用户未登录时，登录表单应提供打开注册表单的链接/按钮。注册表将包含：
电子邮件字段（文本）
名称字段（文本）
密码字段（密码）
确认密码字段（密码） - 不会传递给后端，但如果它与其他密码不匹配，则应在提交时抛出错误
提交按钮进行注册
当按下提交按钮时，如果两个密码不匹配，用户应该会收到一个错误弹出窗口。如果它们确实匹配，则应将表单数据发送到 POST
/auth/register以验证凭据。如果在注册过程中出现错误，屏幕上应显示相应的错误。
2.1.3. 错误弹窗
每当前端或后端产生错误时，屏幕上都会弹出一个错误消息（从后端错误响应派生的消息，或者在前端有意义地创建的消息）。
可以通过按“x”或“关闭”按钮来关闭/移除/删除此弹出窗口。
2.2. 里程碑 2 - 基本 Feed (14%)
里程碑 2 侧重于从 API 获取提要数据。提要及其相关内容应该仅供登录用户访问。
2.2.1. 基本饲料
应用程序应在派生的主页上呈现用户内容的“提要” GET /job/feed。请注意，提要只会返回登录用户正在观看的人的信息。
作业应按时间倒序显示（最近的作业在前）。
每个作业应显示：
1. 职位发布者是谁
2. 当它被张贴
如果职位是今天发布的（过去 24 小时内），它应该显示发布的小时数和分钟数
如果职位发布时间超过 24 小时，它应该只显示发布日期 DD/MM/YYYY
3. 工作内容本身。工作内容包括以下内容：
描述工作的图像（base64 格式的 jpg）
新工作的标题（只是一个字符串）
工作的开始日期（只是一个字符串）
它有多少喜欢（或没有）
职位描述文本
职位发布有多少条评论
2.3. 里程碑 3 - 高级 Feed (9.4%)
里程碑 3 侧重于更丰富的用户体验，并且需要一些后端交互。
2.3.1. 对工作表示喜欢
允许用户查看喜欢某个工作的所有用户的列表。就其显示方式而言，请从以下 3 个选项中考虑您首选的用户体验方法：
默认情况下，名称列表在提要中的每个职位上都可见
如果单击显示/隐藏切换（默认情况下隐藏），则名称列表在提要中的作业上可见。
当在提要上单击按钮/链接时，名称列表在弹出窗口、模式屏幕或新屏幕中可见。
2.3.2. 显示对工作的评论
允许用户查看作业中所有评论的列表。每条评论至少应包含用户的姓名及其评论。就其显示方式而言，请从以下 3 个选项中考虑您首选的用
户体验方法：
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 3/7
默认情况下，名称和评论列表在提要中的每个职位上都是可见的
如果单击显示/隐藏切换（默认情况下隐藏），则姓名和评论列表在提要中的职位上可见。
当在提要上单击按钮/链接时，名称和评论列表在弹出窗口、模式或新屏幕中可见。
2.3.3. 喜欢一份工作
用户可以在他们的 feed 上喜欢一个工作并触发一个 api 请求 ( PUT /job/like )
对于这个里程碑，如果在页面刷新之前没有出现/更新，则可以。
2.3.4. 提要分页
用户可以使用带有 ( ) 的位置标记在提要中的结果集之间进行分页 GET /job/feed。
注意：如果您最终在以后的里程碑中实施无限滚动替代方案，您将自动获得此部分的分数。
2.4. 里程碑 4 - 其他用户和个人资料 (14%)
里程碑 4 主要关注用户配置文件以及用户如何与他们交互。
2.4.1. 查看其他人的个人资料
让用户在工作中点击用户名，喜欢或评论，然后被带到该用户的个人资料屏幕。
配置文件屏幕应包含后端通过 ( GET /user ) 为该特定用户 ID 提供的任何信息。
该个人资料还应显示该人所做的所有工作。您无需在此处为每项工作显示喜欢和/或评论。
该配置文件还应在某处显示该配置文件被观看的所有其他用户（信息来自 GET /user）。这应该包括一个名称列表（每个名称链接到另一个
配置文件），以及页面某处的计数，显示他们被观看的用户总数。
2.4.2. 查看您自己的个人资料
用户可以像查看任何其他用户的个人资料一样查看自己的个人资料
登录后，用户个人资料的链接（通过文本或小图标）应该在大多数屏幕上（至少在提要屏幕上）常见的地方可见。
2.4.3. 更新您的个人资料
用户可以通过 ( ) 更新自己的个人资料 PUT /user。这允许他们更新他们的：
电子邮件地址
密码
姓名
图像
2.4.4. 看/不看
观看用户个人资料：
当登录用户访问另一个用户的个人资料页面时，应该存在一个按钮，允许他们“观看”另一个用户（通过 PUT user/watch）。
如果登录用户已经在关注这个人，则应该存在一个取消关注按钮。
提要屏幕上的某处还应该存在一个按钮，提示输入者在弹出窗口中输入电子邮件地址。输入后，电子邮件地址将发送到 PUT
/user/watch该特定用户。
2.5. 里程碑 5 - 添加和更新内容 (9.3%)
里程碑 5 侧重于添加和删除内容和评论。
2.5.1. 添加工作
POST /job用户可以通过 ( )从模式、组件或单独的屏幕上传和使用新内容
用户如何打开这个组件、模式或单独的屏幕可以在一个或多个地方找到，并且应该容易和清晰地访问。
2.5.2. 更新和删除作业
DELETE /job让用户通过 ( ) 或 ( )更新他们所做的工作或将其删除 PUT /job。
2.5.3. 留下评论
POST /job/comment用户可以通过 ( )对“工作”发表评论
2.6. 里程碑 6 - 挑战组件 ( advanced ) (9.3%)
2.6.1. 无限滚动
用户可以无限滚动浏览结果，而不是分页。为了正确实现无限滚动，您需要在滚动时逐步加载作业。
2.6.2. 实时更新
如果用户喜欢某项工作或对某项工作发表评论，则应更新该工作的喜欢和评论，而无需重新加载/刷新页面。这应该通过某种轮询来完成。
轮询对于浏览器来说效率很低，但通常可以使用，因为它简化了服务器上的技术需求。
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 4/7
2.6.3. 推送通知
当他们关注的用户发布职位时，用户可以收到推送通知。要知道某人是否发布了职位，您必须“轮询”服务器（即间歇性请求，可能每秒检查
一次状态）。您可以通过浏览器内置的通知 API 或您自己定制的通知/弹出窗口来实现这一点。通知不需要存在于网页之外。
不会为该组件提供讲座中的课程帮助，您应该自行研究如何实施。网上有丰富的资源。
2.7. 里程碑 7 - 非常具有挑战性的组件 ( advanced *= 2 ) (4.6%)
2.7.1. 静态提要离线访问
即使没有互联网连接，用户也可以访问他们加载的最新提要。
在发生中断时缓存来自本地存储中最新提要的信息。
当用户尝试在离线模式下与网站交互时（例如评论，喜欢）他们应该收到错误
不会为该组件提供任何课程帮助，您应该自行研究如何实施。
2.7.2 基于片段的 URL 路由
用户可以使用 URL 片段访问不同的页面：
不会为该组件提供讲座或论坛的课程帮助，您应该自行研究如何实施。
2.8. 加分 (5%)
可以通过加分获得额外 5% 的作业，这意味着最高分数为 105/100。任何将你的 ass2 分数提高到 100% 以上的奖励分数都会渗透到其他作业分数
中，但不能在分配给作业分数的 75% 课程之外做出贡献
您的奖励功能可以是任何东西。您只需要考虑一些可以使您的 Web 应用程序以某种次要或主要方式脱颖而出的东西。简单的例子包括确保您的用
户界面和用户体验在其他学生中脱颖而出，也许通过一些用户测试。
您还可以添加额外的功能，例如一些额外的前端表单验证 - 可能性是无限的。
bonus.md如果您确实实现了奖励功能，请在此存储库的根目录中描述该功能及其详细信息。
3. 开始
3.1. 前端
已提供存根代码以帮助您开始：
frontend/index.html
frontend/styles/global.css
frontend/src/helpers.js
frontend/src/main.js
如果您愿意，可以修改或删除此存根代码。它只是在这里可能提供一些帮助。
要在 Web 服务器本地使用前端代码，您可能必须运行另一个 Web 服务器来为前端的静态文件提供服务。
为此，请在您的计算机上运行一次以下命令：
$ npm install --global http-server
然后每当你想启动你的服务器时，在你的项目的根文件夹中运行以下命令：
$ npx http-server frontend -c 1 -p [port]
[port]您要在其上运行服务器的端口在哪里（例如 8080）。任何数字都可以。
这将启动第二个 HTTP 服务器，如果您导航到 http://localhost:8000（或它提供的任何 URL/端口），它将在 index.html没有任何 COR 问
题的情况下运行。
3.2. 后端
您被禁止修改后端。无需在后端完成任何工作。它提供给您只是为了为您的前端提供动力。
后端服务器存在于您的个人存储库中。克隆此 repo 后，必须 yarn install在 backend目录中运行一次。
要运行后端服务器，只需 yarn start在 backend目录中运行即可。这将启动后端。
要查看后端的 API 接口，您可以导航到后端的基本 URL（例如 http://localhost:5005）。这将列出您可以与之交互的所有 HTTP 路由。
/#profile=1
/#feed
/#profile=4
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 5/7
我们为您提供了一个非常基本的起始数据库，其中包含两个用户和一个带有消息的公共频道。你可以进去 backend/database.json看看里面的
内容。
您的后端在数据存储方面是持久的。这意味着即使您的快速服务器进程停止运行，数据仍将保留。如果想把后台的数据重置为原来的启动状态，
可以 yarn reset在后台目录下运行。如果您想复制后端数据（例如用于备份），则只需复制 database.json . 如果你想从一个空数据库开始，
你可以 yarn clear在后端目录中运行。
后端启动后，您可以通过 http://localhost:[port]在 Web 浏览器中导航来查看 API 文档。
后端运行的端口（以及前端可以使用的端口）在 frontend/src/config.js . 您可以更改此文件中的端口。这个文件的存在是为了让你的前端知
道在与后端对话时使用哪个端口。
请注意：如果您手动更新 database.json，您将需要重新启动服务器。
请注意：您不能修改奖励标记的后端源代码。
3.3. 迈出第一步
这是我们建议您开始作业的方式：
1. 阅读整个规范，包括通读第 2 部分，这样您就知道接下来会发生什么！
2. 尝试在您的浏览器上加载 index.html一个简单的“Hello world”文本，只是为了检查您是否知道您要加载的页面。
3. 通过考虑所有关键屏幕及其依赖的信息来规划您的 UI
4. 尝试加载后端并通过调用一个简单的 API 来验证它是否正常工作 /feed（这应该会返回一个空列表）
5. 祝你好运！
4. 约束和假设
4.1. Javascript
您必须在符合 ES6 的 Vanilla JavaScript 中实现此分配。您不能使用 ReactJS、JQuery 或其他抽象框架。例如，您不能使用Angular或React等
流行的 Javascript 框架。
您不能直接使用外部 JavaScript。除非事先获得课程权威的批准，否则不要使用 NPM，除非安装任何其他开发库。
4.2. CSS 和其他库
您可以使用从 Stack Overflow 或其他公开可用资源等站点获得的少量（< 10 行）通用代码（不特定于作业）。您应该在注释中明确注明此代
码的来源。您不能以其他方式使用他人编写的代码。
您可以在此作业中包含外部 CSS 库（使用 标签 ）。您必须注明这些来源（即在源代码注释中提供 URL/作者）。例如，您可以使
用流行的Bootstrap CSS 框架。一些 Bootstrap 功能依赖于随附的 Javascript。您可以包含此 Javascript。Bootstrap 附带的 Javascript 需要流
行的通用 Javascrpt 库jQuery。您可以包含jQuery，以便 bootstrap 可以使用它。但是，您不得在为作业编写的代码中使用jQuery 。
4.3. 浏览器兼容性
您应该确保您的程序已经在以下两种浏览器之一上进行了测试：
在本地，Google Chrome（各种操作系统）
在 CSE 机器上，Chromium
4.4. 其他需求
该规范故意含糊不清，以允许您构建您认为视觉上合适的前端组件。它们的大小、位置、颜色、布局几乎在所有情况下都完全由您决定。我
们需要一些基本标准，但它主要是规定元素和行为。
这不是设计任务。在基本的用户体验和视觉布局方面，你需要表现出常识和批判性思维，但你不需要创造性才能获得满分。
您的网络应用程序必须是单页应用程序。这意味着在一个 html 页面上只有一次初始浏览器内容加载，并且页面的所有后续动态更改都基于
Javascript DOM 操作。如果您不构建单页应用程序（例如，使用指向多个 HTML 页面的链接），您将收到 50% 的分数罚款。
4.5. 静态 HTML、innerHTML、DOM 操作
在这个任务中，你是：
允许将静态 HTML/CSS 添加到提供的存根网站（即，您可以将原始 HTML/CSS 当作静态页面，即使您随后使用 JavaScript 对其进行操作）。
允许构建 HTML 元素并通过 JavaScript 将 CSS 属性添加到 DOM。我们希望这是学生构建这些页面的最常见方式。
严禁使用节点/标签 innerHTML的属性来设置元素的内部 HTML。这存在安全漏洞，通常不是最佳实践。要么静态添加 HTML/CSS 并使用
JavaScript 对其进行操作，要么在 JavaScript 中生成和构建节点/元素（就像在讲座/教程/实验室中一样），或两者兼而有之。但不要设置内
部 HTML。使用任何一项都 innerHTML将导致您的分数被扣 50%。
4.6. 异步、等待、承诺
严禁在此作业中使用and async语法。 await您必须使用 ES6 Promises。使用任何 async或 await将导致您的标记被扣分 50%。
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 6/7
五、评分标准
您的作业将由课程中的导师根据以下标准手工标记。
请注意：当我们测试您的 UI 时，我们将使用预加载的数据库 JSON，其中已经添加了工作、用户和手表。
标准 加
权
描述
符合任务要
求
70% 每个里程碑都指定了总体分配的特定百分比（总计高达 70%）。根据要求实施这些组件以获得标记。
当您部分或全部完成时，您必须更新此存储库根文件夹中的文件。 progress.csv有效值为“NO”、
“PARTIAL”和“YES”。更新这个是必要的，这样你的导师就会知道应该关注什么，避免什么——让他们最好地
理解你的工作，并为你提供你所获得的分数。
移动响应 15% 您的应用程序适用于一般桌面尺寸、一般平板电脑尺寸和一般移动尺寸（低至 400 像素宽，700 像素高）。
代码风格 10% 您的代码干净、注释良好、变量命名合理且布局合理。
可用性和可
访问性
5% 您的应用程序可用且易于导航。没有明显的可用性问题或令人困惑的布局/流程。
您的应用程序遵循标准的可访问性指南，例如使用 alt 标签和不可访问的颜色。
在 usability.md 中描述您为提高可用性/可访问性所做的任何尝试
（奖励标
记）额外功
能
5% 规范中未包含的额外功能的实现。
额外的功能应该是重要的，有明确的存在理由，并显示出某种形式的技术、产品或创意亮点。
在项目文件夹的“BONUS.md”中记录的任何额外功能
任何将你的 ass3 分数提高到 100% 以上的奖励分数都会渗透到其他作业分数中，但不能在分配给作业分数的
80% 课程之外做出贡献
对单人组的期望将是双人组的一半，以达到相同的分数。
六、作品原创性
您提交的作品必须是您自己的作品。不允许提交部分或全部源自任何其他人或与任何其他人共同撰写的作品。
对此类违规行为的处罚可能包括负分、课程自动不及格以及可能的其他学术纪律。作业提交将自动和手动检查此类提交。
如果获得奖学金的学生涉及剽窃或其他不当行为，将通知相关奖学金主管部门。
请勿向任何其他人提供或展示您的作业 - 除了 COMP6080 的教学人员。
如果您出于任何原因故意向他人提供或展示您的作业，并且提交了由此衍生的作品，您可能会受到处罚，即使该作品是在您不知情或未同意的情
况下提交的。即使您的作品是由您不认识的第三方提交的，这也可能适用。
每次您在此存储库上进行提交或推送时，您都承认您提交的工作是您自己的工作（如上所述）。
根据课程大纲，“结对将被要求定期为 gitlab 做出贡献，并且贡献相当相等，因为我们仍然单独评估贡献（没有分配一揽子小组分数）。不这样做
可能会导致分数丢失。”
如果您不是结对工作，我们仍然强烈建议您定期提交少量代码。这将帮助您处理您认为不正确的任何剽窃指控。
请注意，如果您的作品有可能在未经您同意或不知情的情况下被拿走，您将不会受到处罚。
8.提交
该作业截止日期为3 月 27 日星期一上午 10 点。
要提交作业，您必须按顺序完成以下两个步骤：
确保您已将所有代码推送到 gitlab master 分支。您可以通过查看 master 分支上的 gitlab 站点上的代码来检查您是否已正确完成此操作。
这将提交 master 上的最新提交作为您的提交。
您不必为此作业运行提交命令（我们正在尝试不使用该命令）。
您有责任确保您的代码在从 Gitlab 克隆时能够成功运行。
对于双人组，只有一名团队成员需要提交。
2023/3/21 11:51 COMP6080 / 23T1 / 群组 / OPILIA / lurkforwork · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/23T1/groups/OPILIA/lurkforwork 7/7
8. 延迟提交政策
不接受迟交。
