TechScrum 全栈项目实训营

课程大纲

项目搭建与注册功能
Project Setup
Bitbucket 注册与概念
• Bitbucket 简介：介绍 Bitbucket 是什么，以及它的基本功能。
• 行业应用：讨论为什么多个行业选择使用 Bitbucket，以及它的优势。
Jira 注册与应用
• Jira 简介：解释 Jira 的定义及其在项目管理中的作用。
• 行业使用理由：探讨 Jira 在不同行业中广泛使用的原因。
npm 安装与比较
• npm 介绍：讲述 npm 的作用及其在项目中的重要性。
• 行业采用原因：说明 npm 在行业中广泛使用的原因。
• npm 与其他工具的比较：比较 npm、yarn、gulp 的不同点和用途。
Node 安装
• Node 简介：解释 Node 是什么，以及它的主要用途。
• 行业使用原因：讨论为什么许多企业和开发者选择使用 Node。
Git Bash 安装
• Git Bash 简介：介绍 Git Bash 及其在版本控制中的角色。
• 行业采用原因：解释 Git Bash 在开发流程中的重要性。
VSCode 安装与使用
• VSCode 简介：讲述 Visual Studio Code (VSCode) 的基本功能及优势。
• 行业应用：说明为何 VSCode 成为开发者首选的代码编辑器。
• 快捷键：分享一些提高开发效率的 VSCode 快捷键。
构建后端文件架构
解释后端文件架构中每个文件夹的作用，包括 app 文件夹下的 controller, model, config, services, database, errors, middleware, route, utils，以及 loaders 文件夹。
后端设置
• 安装必要的包：列出并解释后端开发过程中需要的包，如 bcrypt, dotenv 等。
• 创建一个简单的接口：指导如何建立一个基本的后端接口。
构建前端文件架构
阐述前端文件架构中每个文件夹的作用，包括 api, assets, components, config, context, pages, hooks, utils 等。
前端设置
• 安装必要的包：列出并说明前端项目中必需的包，如 eslint, cypress, axios 等。
• 创建一个简单的页面：教学如何设计和实现一个基础的前端页面。
使用 Git 和 Bitbucket 进行版本控制
• 上传项目到 Bitbucket：步骤化指导如何使用 git add, git commit, git push 等命令将本地项目上传到 Bitbucket。
Register Function
创建 API 端点
• 使用 Express Router 定义注册路由/api/register。
• 该端点接收 POST 请求，请求体包含用户名、密码和电子邮件作为必需的输入数据。
输入数据验证
• 应用 Express Validation 中间件确保输入数据的有效性：
• 用户名不得为空，且需满足指定的长度要求。
• 密码必须复杂，至少包含数字、字母和一个特殊字符。
• 电子邮件地址需符合标准格式。
• 实现逻辑以避免使用已注册的电子邮件再次注册。
控制器逻辑
• 设计注册控制器以处理来自前端的注册请求。
• 调用服务层的相应方法执行注册逻辑，包括数据验证和用户创建。
• 控制器最终返回成功或错误的 HTTP 响应，携带适当的状态码。
服务层实现
• 开发注册服务功能，包括：
• 使用 bcrypt 库对用户密码进行哈希处理，并安全存储。
• 检查电子邮件地址的唯一性。
• 通过 AWS 服务发送电子邮件完成用户验证。
数据模型设计
• 创建用户模型，明确定义以下字段：
• email：用户的电子邮件地址。
• password：加密后的用户密码。
• isAdmin：布尔值，标识用户是否拥有管理员权限。
• refreshToken：用于生成新的访问令牌。
• activeCode：电子邮件验证所用的激活码。
• active：布尔值，表示用户账户是否已激活。
• name、avatarIcon、userName等个人信息字段。
• 模型中应实现密码加密功能。
配置环境变量
• 使用.env文件在环境变量中存储敏感配置，如加密密钥（SECRET_KEY）。
• 提供.env.example文件，指导如何配置必要的环境变量。
登录功能与忘记密码
Login Function
创建并完成 API
• 使用 Express Router 创建登录端点路由，例如 /api/login
• 实现登录功能，接受 POST 请求，包含用户名和密码作为输入数据
创建并完成 Validation
• 对登录请求中的用户名和密码进行验证，确保格式和长度符合要求
创建并完成 Controller
• 实现登录控制器，处理登录请求并将数据传递给服务层
• 调用适当的服务方法来处理登录逻辑，包括密码验证和生成 JWT 令牌
• 返回包含登录成功信息或错误信息的 HTTP 响应，状态码 200 或相应的错误状态码
创建并完成 Services
• 实现登录服务，包括以下功能：
• 验证用户提供的用户名和密码是否匹配数据库中存储的凭据
• 如果凭据匹配成功，则生成包含用户信息的 JWT 令牌，并返回给客户端
创建并完成 Model
• 不需要对用户模型进行修改，因为登录仅涉及验证用户凭据，不需要修改用户数据
• 用户模型中的密码字段已经被加密存储，可以直接用于验证用户身份
Forgot Password
后端功能
• 创建并完成 API
• 使用 Express Router 创建忘记密码端点路由，例如 /api/forgot-password
• 实现忘记密码功能，接受 POST 请求，包含用户电子邮件作为输入数据
• 创建并完成 Validation
• 对输入的电子邮件地址进行格式验证，确保其符合电子邮件地址的标准格式
• 创建并完成 Controller
• 实现忘记密码控制器，处理忘记密码请求并将数据传递给服务层
• 调用适当的服务方法来处理忘记密码逻辑，包括验证用户的存在并生成重置密码链接
• 返回包含密码重置成功信息或错误信息的 HTTP 响应，状态码 200 或相应的错误状态码
• 创建并完成 Services
• 实现忘记密码服务，包括以下功能：
• 验证用户提供的电子邮件地址是否存在于数据库中
• 如果用户存在，则生成包含密码重置链接的电子邮件，并将其发送给用户
• 链接中应包含一个用于验证身份的令牌，以及重置密码的页面链接
• 创建并完成 Model
• 不需要对用户模型进行修改，因为忘记密码功能不涉及修改用户数据
测试
• 使用 Mocha 和 Chai 等测试框架编写全面的测试用例，以确保系统在各种情况下的稳健性。
• 进行集成测试，覆盖了系统的重要功能模块，包括但不限于：
• 注册：
• 验证了 403、500、200 状态码的处理
• 登录：
• 验证了 403、500、200 状态码的处理
• 忘记密码：
• 验证了 403、500、200 状态码的处理
• 实施单元测试，特别关注了：
• 工具函数的功能性和边界情况
• JWT 创建的正确性和安全性
创建文档
• 利用 Swagger 创建了详尽的API文档，提供了对每个端点的功能、参数和返回值的清晰描述。
• 注册端点的使用方法和示例
• 登录端点的使用方法和示例
• 忘记密码端点的使用方法和示例
• 添加了详尽的代码注释，为其他开发人员提供了阅读和理解代码的便利。
• 注册端点的代码注释
• 登录端点的代码注释
• 忘记密码端点的代码注释
忘记密码页面
创建忘记密码页面
• 利用 HTML 和 CSS 创建忘记密码页面布局
• 包括输入注册邮箱的表单以及发送重置密码链接的按钮等元素
Edge cases 处理
• 考虑并处理各种边界情况，如无效的邮箱地址、未注册的邮箱地址等
• 提供相应的错误提示和用户反馈
注册页面与登录页面
Register Page
创建注册页面
• 使用 HTML 和 CSS 创建注册页面布局
• 包括输入用户名、邮箱、密码的表单以及注册按钮等元素
创建注册页面状态
• 设计并创建注册页面的状态管理，包括表单输入状态、错误信息状态等
创建表单组件
• 编写可重用的表单组件，包括输入框、密码框、按钮等
• 提高代码复用性和可维护性
创建注册页面
• 将表单组件组合成注册页面
• 处理用户输入，并根据输入状态更新页面状态和显示相应的提示信息
创建注册成功页面
• 设计并创建注册成功页面布局
• 提供用户注册成功后的反馈和引导，如跳转到登录页面等
Login Page
创建登录页面
• 使用 HTML 和 CSS 创建登录页面布局
• 包括输入用户名、邮箱、密码的表单以及登录按钮等元素
创建登录页面状态
• 设计并创建登录页面的状态管理，包括表单输入状态、错误信息状态等
创建表单组件
• 编写可重用的表单组件，包括输入框、密码框、按钮等
• 提高代码复用性和可维护性
创建等页面
• 将表单组件组合成登录页面
• 处理用户输入，并根据输入状态更新页面状态和显示相应的提示信息
创建登录成功页面
• 设计并创建登录成功页面布局
• 提供用户登录成功后的反馈和引导
用户设置的实现
User Setting Function
创建并完成 API
完成 Create User Setting 功能
• 创建用于创建用户设置的 API 端点 (POST /api/user-settings)
• 接受用户设置信息作为输入数据，如偏好设置、通知偏好等
• 将用户设置信息保存到数据库中，并返回新创建用户设置的信息
完成 Edit User Setting 功能
• 创建用于编辑用户设置的 API 端点 (PUT /api/user-settings/:userId)
• 接受用户设置信息和用户 ID 作为输入数据，允许更新用户设置信息
• 根据用户 ID 更新相应的用户设置信息，并返回更新后的用户设置信息
完成 Delete User Setting 功能
• 创建用于删除用户设置的 API 端点 (DELETE /api/user-settings/:userId)
• 接受用户 ID 作为输入数据，删除相应的用户设置
• 删除数据库中指定 ID 的用户设置，并返回删除成功的消息
完成 View User Setting 功能
• 创建用于查看单个用户设置的 API 端点 (GET /api/user-settings/:userId)
• 接受用户 ID 作为输入数据，返回指定用户的设置信息
创建并完成 Validation
• 实现针对用户设置信息的输入数据验证，确保数据的完整性和正确性
创建并完成 Controller
• 创建用户设置相关功能的控制器，负责处理 API 请求并将数据传递给服务层
• 返回包含操作结果的 HTTP 响应，如成功信息或错误信息
创建并完成 Services
• 实现用户设置相关的服务功能，包括创建、编辑、删除用户设置等操作
• 验证用户权限，确保用户具有创建、编辑或删除用户设置的权限
完成后端 Create task 功能
创建并完成 API
完成 Create Account Management 功能
• 创建用于创建任务的 API 端点 (POST /api/tasks)
• 接受任务信息作为输入数据，包括标题、描述等
• 将任务信息保存到数据库中，并返回新创建任务的信息
完成 Edit Account Management 功能
• 创建用于编辑任务的 API 端点 (PUT /api/tasks/:taskId)
• 接受任务信息和任务 ID 作为输入数据，允许更新任务信息
• 根据任务 ID 更新相应的任务信息，并返回更新后的任务信息
完成 Delete Account Management 功能
• 创建用于删除任务的 API 端点 (DELETE /api/tasks/:taskId)
• 接受任务 ID 作为输入数据，删除相应的任务
• 删除数据库中指定 ID 的任务，并返回删除成功的消息
完成 View All Account Management 功能
• 创建用于查看所有任务的 API 端点 (GET /api/tasks)
• 返回所有任务的信息列表
创建并完成 Validation
• 实现针对任务信息的输入数据验证，确保数据的完整性和正确性
创建并完成 Controller
• 创建任务相关功能的控制器，负责处理 API 请求并将数据传递给服务层
• 返回包含操作结果的 HTTP 响应，如成功信息或错误信息
创建并完成 Services
• 实现任务相关的服务功能，包括创建、编辑、删除任务等操作
• 验证用户权限，确保用户具有创建、编辑或删除任务的权限
创建并完成 Model
• 设计任务模型 (Task)，包括标题、标签、状态、所属项目等字段
• 在模型中定义任务属性，并处理任务相关的数据逻辑和业务规则
完成后端 Comment 功能
创建并完成 API
完成 Create Comment 功能
• 创建用于创建评论的 API 端点 (POST /api/comments)
• 接受评论内容和任务 ID 作为输入数据，创建新的评论
• 将评论信息保存到数据库中，并返回新创建评论的信息
完成 Edit Comment 功能
• 创建用于编辑评论的 API 端点 (PUT /api/comments/:commentId)
• 接受评论 ID 和更新的评论内容作为输入数据，更新相应的评论
• 根据评论 ID 更新相应的评论信息，并返回更新后的评论信息
完成 Delete Comment 功能
• 创建用于删除评论的 API 端点 (DELETE /api/comments/:commentId)
• 接受评论 ID 作为输入数据，删除相应的评论
• 删除数据库中指定 ID 的评论，并返回删除成功的消息
完成 View All Comment 功能
• 创建用于查看所有评论的 API 端点 (GET /api/comments)
• 返回指定任务下的所有评论信息列表
完成 View Comment 功能
• 创建用于查看单个评论的 API 端点 (GET /api/comments/:commentId)
• 接受评论 ID 作为输入数据，返回指定评论的详细信息
创建并完成 Validation
• 实现针对评论信息的输入数据验证，确保数据的完整性和正确性
创建并完成 Controller
• 创建评论相关功能的控制器，负责处理 API 请求
User Setting Page
完成前端 Project 功能
创建 Create Project Modal 功能
• 设计并实现用于创建项目的模态框组件
• 包括项目名称、描述等输入字段
• 确认和取消按钮的添加与布局
• 实现模态框的显示和隐藏逻辑
• 实现表单验证逻辑，确保用户输入的数据符合要求
创建 View All Project Page 功能
• 创建用于显示所有项目的页面
• 设计项目列表的布局和样式
• 从后端获取项目数据，并在页面上展示
• 实现分页功能，以便处理大量项目的展示
创建 View One Project Page 功能
• 创建用于显示单个项目详细信息的页面
• 设计项目详细信息页面的布局和样式
• 接受项目 ID 作为参数，从后端获取相应项目的数据并显示
• 包括项目名称、描述等项目信息的展示
创建 Delete Project Page 功能
• 创建用于删除项目的页面
• 设计确认删除的模态框或警告框
• 提供删除按钮，并绑定相应的删除事件
• 点击确认删除后，向后端发送删除请求，并处理返回的结果
创建 Edit Project Modal 功能
• 设计并实现用于编辑项目信息的模态框组件
• 包括项目名称、描述等输入字段
• 确认和取消按钮的添加与布局
• 实现模态框的显示和隐藏逻辑
• 实现表单验证逻辑，确保用户修改的数据符合要求
完成前端 Task 功能
创建 Create Task Modal 功能
• 设计并实现用于创建任务的模态框组件
• 包括任务标题、描述等输入字段
• 确认和取消按钮的添加与布局
• 实现模态框的显示和隐藏逻辑
• 实现表单验证逻辑，确保用户输入的数据符合要求
创建 View All Task Page 功能
• 创建用于显示所有任务的页面
• 设计任务列表的布局和样式
• 从后端获取任务数据，并在页面上展示
• 实现分页功能，以便处理大量任务的展示
创建 View One Task Page 功能
• 创建用于显示单个任务详细信息的页面
• 设计任务详细信息页面的布局和样式
• 接受任务 ID 作为参数，从后端获取相应任务的数据并显示
• 包括任务标题、描述等任务信息的展示
创建 Delete Task Page 功能
• 创建用于删除任务的页面
• 设计确认删除的模态框或警告框
• 提供删除按钮，并绑定相应的删除事件
• 点击确认删除后，向后端发送删除请求，并处理返回的结果
创建 Edit Task Modal 功能
• 设计并实现用于编辑任务信息的模态框组件
• 包括任务标题、描述等输入字段
• 确认和取消按钮的添加与布局
• 实现模态框的显示和隐藏逻辑
• 实现表单验证逻辑，确保用户修改的数据符合要求
完成前端 Comment 功能
创建 Create Comment Modal 功能
• 设计并实现用于创建评论的模态框组件
• 包括评论内容等输入字段
• 确认和取消按钮的添加与布局
• 实现模态框的显示和隐藏逻辑
• 实现表单验证逻辑，确保用户输入的数据符合要求
创建 View All Comment Page 功能
• 创建用于显示所有评论的页面
• 设计评论列表的布局和样式
• 从后端获取评论数据，并在页面上展示
• 实现分页功能，以便处理大量评论的展示
创建 View One Comment Page 功能
• 创建用于显示单个评论详细信息的页面
• 设计评论详细信息页面的布局和样式
• 接受评论 ID 作为参数，从后端获取相应评论的数据并显示
• 包括评论内容等评论信息的展示
创建 Delete Comment Page 功能
• 创建用于删除评论的页面
• 设计确认删除的模态框或警告框
• 提供删除按钮，并绑定相应的删除事件
• 点击确认删除后，向后端发送删除请求，并处理返回的结果
创建 Edit Comment Modal 功能
• 设计并实现用于编辑评论信息的模态框组件
• 包括评论内容等输入字段
• 确认和取消按钮的添加与布局
• 实现模态框的显示和隐藏逻辑
• 实现表单验证逻辑，确保用户修改的数据符合要求