项目实训营
header-img

掌握

TechScrum 全栈项目实训营

导师手把手带着写项目,4 周快速掌握前后端关键技能!

真实项目,4 周获得项目经验

header-img
feature实战项目经验
feature全面技术栈覆盖
feature导师手把手带着写
feature每周定期讨论
feature4 周获得项目经验
feature丰富您的简历
feature实战项目经验
feature全面技术栈覆盖
feature导师手把手带着写
feature每周定期讨论
feature4 周获得项目经验
feature丰富您的简历

课程大纲

    项目搭建与注册功能
    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:布尔值,表示用户账户是否已激活。
    • nameavatarIconuserName等个人信息字段。
    • 模型中应实现密码加密功能。

    配置环境变量

    • 使用.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 功能

    • 设计并实现用于编辑评论信息的模态框组件
    • 包括评论内容等输入字段
    • 确认和取消按钮的添加与布局
    • 实现模态框的显示和隐藏逻辑
    • 实现表单验证逻辑,确保用户修改的数据符合要求
logo

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-stripe.png/image/layout/pay-alipay.png

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 8, 11 York st, Wynyard, Sydney CBD
Business Hub, 155 Waymouth St, Adelaide SA 5000

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2024 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572