Web开发进阶班

📚 Lesson 1Introduction& Web Technology

课程概述、讲师介绍、学生介绍课程项目介绍【项目类型、项目难度】课程要求【作业、项目执行】Web 基础信息介绍【Internet 概念讲解、URL 讲解、Web 架构】项目流程介绍【开发流程】

🎬 VideoHTML&CSS

Web 的访问方式介绍不同的 Web 访问方式，如浏览器、搜索引擎、Web 服务器等。解释 Web 访问的基本原理和过程。HTML 结构和语义化理解 HTML 结构的重要性和语义化的概念。探讨如何使用正确的 HTML 元素来构建页面结构，以提高可读性和可维护性。HTML 标签和属... 登录后查看完整内容

🎬 VideoCSS 的使用

CSS 介绍介绍层叠样式表（CSS）的作用和基本概念。解释 CSS 如何与 HTML 结合使用，用于控制网页的外观和布局。CSS 选择器用法探讨 CSS 选择器的作用和种类，如标签选择器、类选择器、ID 选择器、后代选择器等。提供示例和练习，以便学生理解如何使用不同的选择器来定位... 登录后查看完整内容

🎬 VideoCSS 和 Sass

CSS Flexbox介绍 CSS Flexbox 布局模型的概念和优势。解释 Flexbox 如何简化网页布局，以及如何创建灵活的、响应式的布局结构。Responsive Web Design探讨响应式 Web 设计的重要性和基本原理。介绍媒体查询和流动布局等技术，以实现网页在... 登录后查看完整内容

ℹ️ InformationMooc Outline Project Introduction

GoalThis project is designed to enhance students' understanding of full stack web development through practical engagement with the Mooc web... 登录后查看完整内容

📚 Lesson 2Mooc Outline(1)-Environment/Local Builds

Project FamiliarizationDownload and install the required project dependencies.Understand the project's directory structure and primary funct... 登录后查看完整内容

📚 Lesson 3Mooc Outline(2)-Review Backend Mooc admin system Framework

The lecture introduces students to the backend web API framework, providing guidance on how to effectively utilize this framework for develo... 登录后查看完整内容

📚 Lesson 4Mooc Outline(3)-User Registration and User Profile Backend

User Registration Backend Web APIsUser Profile Management Backend Web APIs

📚 Lesson 5Mooc Outline(4)-Review Frontend Mooc admin system Framework

The lecture will cover Material-UI (MUI), a popular React UI framework, and guiding students on how to utilize it for frontend development. ... 登录后查看完整内容

📚 Lesson 6Mooc Outline(5)-Course Display and Enrollment Backend

Course Display and Enrollment Backend Web APIs

📚 Lesson 7Mooc Outline(6)-Personal Center for Students and Teachers Backend

Students' Personal Center Backend Web APIsTeachers' Personal Center Backend Web APIs

📚 Lesson 8Mooc Outline(7)-User Registration and User Profile Frontend

User RegistrationAllow both teachers and students to register on the platform.User Profile ManagementEnable users to update their personal i... 登录后查看完整内容

📚 Lesson 9Mooc Outline(8)-Course Display Personal Center Frontend

Course Display and EnrollmentDisplay courses by category.Provide detailed information for each course, including chapters and instructors, a... 登录后查看完整内容

🎬 VideoGit & 项目介绍和搭建

项目目录结构设计和初始化。初始化一个基于 MERN（MongoDB, Express.js, React, Node.js）技术栈的应用程序。后端服务器搭建。使用 Express.js 作为服务器框架，并连接 MongoDB 数据库。前端应用初始化。使用 Vite 工具创建 Re... 登录后查看完整内容

🎬 Video个人主页（User Profiles）

实现功能用户能够上传个人头像、更新个人简介，并查看/编辑个人信息（年龄、学校等）允许用户创建和自定义个人资料页面适配（Responsive）创建一个用户友好的界面，能够良好适应不同设备和屏幕尺寸，包括移动设备。登录注册页面 UI，User profile UI, home UI学... 登录后查看完整内容

🎬 VideoUser Authentication Part 1

实现用户注册与登录：创建用户注册表单，收集用户提供的信息，如用户名、电子邮件和密码前端对用户注册表单进行验证，以确保输入数据的有效性和完整性后端对用户提供的注册信息进行验证和处理错误使用哈希算法（如 bcrypt）对密码进行加密学习如何生成和解析 JWT，并使用 JWT 进行身份... 登录后查看完整内容

🎬 VideoUser Authentication part 2

后端用 JWT 生成一个唯一的重置令牌，使用第三方库（如 Nodemailer）发送包含重置链接的电子邮件。后端验证重置令牌的有效性，并确保它没有过期。在前端创建一个表单，允许用户输入新密码并进行确认。在后端处理密码重置请求，并更新数据库中的密码。使用加密库（如 bcrypt）对... 登录后查看完整内容

🎬 Video互动（1）-导航（Navbar）

创建导航组件：使用 styled-components CSS-in-JS 库来定义导航栏的样式。构建导航栏结构，包括顶部的 INS logo，User Profile 搜索框，Home，Contact，Likes，Profile，Post，Logout 板块。路由链接: 导航栏... 登录后查看完整内容

🎬 Video互动（2）-Profile（Create profile, Profile image upload）

实现功能：创建 profile form实现 profile image 上传和下载展示个人 profile 页面和 User 的 posts操作：在后端 API 中，验证用户身份和请求的有效性。从数据库中获取 user profile，并将其作为响应返回给前端。添加过滤/搜索功... 登录后查看完整内容

🎬 Video互动（3）-Post & likes

实现功能：创建 Post 组件CreatePost 组件Likes实现用户对帖子的点赞功能显示每个帖子的点赞数量并实时更新新的点赞操作：前端交互。户能够执行点赞操作。状态管理。使用状态管理库（如 Redux）来跟踪点赞状态。在组件之间共享和同步点赞状态，以确保在不同组件中的点赞状... 登录后查看完整内容

🎬 VideoStories Section&post comments(1)

实现功能：创建 stories section通过左右滑动可以看到列表中所有的 user stories -创建 post comments API，实现对指定的 post 进行 comment。操作：在后端 API 中，验证用户身份和请求的有效性。从数据库中获取 user 信息... 登录后查看完整内容

🎬 Videopost comments(2)

实现功能：创建 Comments 组件，实现对任意 posts 进行评论功能。对每个 post 显示所有历史 comments list。对任意 post 进行 comment，并提交后端保存到数据库。

🎬 Video进阶开发（Advanced）

功能技术指导：直接消息（Direct Messaging）：允许用户互相发送私人消息，实现实时消息功能。通知（Notifications）：通知用户与其帐户相关的操作，如新的关注者、点赞、评论和消息。提供 Notification page，用户可以查看和管理通知。搜索功能（Se... 登录后查看完整内容

🎬 VideoNode.js (1)-基础知识介绍

什么是 Node.jsNode.js 是一个基于 JavaScript 的服务器端运行环境，用于构建高性能应用程序安装 Node.js在官方网站去安装 Node.js如何使用 Node.js 运行 JavaScript 代码使用 node 命令来运行 JavaScript 代码模... 登录后查看完整内容

🎬 VideoNode.js（2）-Express.js

npm 包管理和使用了解 Node 包管理器（npm），它用于查找、安装和管理 Node.js 模块什么是模块化探索模块化编程的概念，以便更好地组织和维护代码Node.js 中模块的分类和 require 的使用了解 Node.js 中的核心模块、自定义模块和第三方模块学习如何使... 登录后查看完整内容

🎬 VideoNode.js（3）-RESTful API

HTTP 请求与响应、报文解决跨域问题学习 CORS，解决不同域名下的数据共享问题探索为什么接口会面临跨域问题CORS 相关的三个响应头学会使用 CORS 允许跨域请求RESTful API 简介了解 RESTful API 的 HTTP 协议基础探讨 GET 和 POST 请求... 登录后查看完整内容

🎬 VideoNode.js（4）-MongoDB&Mongoose

MongoDB & Mongoose 介绍及使用了解 MongoDB，一种 NoSQL 数据库，以及其用途和特点学习 Mongoose，一个 MongoDB 对象建模库，用于 Node.js 应用程序存储和管理数据探索 MongoDB 的数据存储方式，包括文档和集合的概念... 登录后查看完整内容

🎬 VideoJavaScript-ES6（1）

NUMBER 类型解析:NaN (Not-a-Number): 一种特殊的数值表示非法数学操作的结果。isNaN(): 用于检测一个值是否为NaN的函数。Number: 将值转换为数字类型的函数。parseInt(): 将字符串转换为整数的函数。数据类型转换: 使用 String... 登录后查看完整内容

🎬 VideoJavaScript-ES6 (2)

ES6 基础内容介绍ECMAScript 2015 (ES6): JavaScript 的标准之一，引入了许多新的语法和功能。块级作用域、变量提升块级作用域: 使用let和const声明的变量具有块级作用域，只在其定义的块内可见。变量提升: 使用var声明的变量存在变量提升，它们... 登录后查看完整内容

🎬 VideoReact（1）

React 框架的起源与版本演进历程：介绍 React 框架的起源和发展历程，包括重要版本的发布和主要特性的改进。快速上手 React：配置开发环境：指导学生安装 Node.js 和 VS Code，以便开始 React 应用程序的开发。快速上手 create-react-app... 登录后查看完整内容

🎬 VideoReact（2）

组件基础：用 SASS 与 Bootstrap 构建组件的外观：介绍如何利用 SASS 预处理器和 Bootstrap 框架来快速构建组件的外观和样式。强大的模板语法 JSX：深入了解 JSX 语法的特点和优势，以及如何在 React 组件中编写 JSX 代码。Props &am... 登录后查看完整内容

🎬 VideoReact（3）

快速上手 React Router:探索 React Router，这个强大的库可让你构建单页应用程序的导航系统，快速开始你的路程。嵌套路由:深入了解嵌套路由，通过分层结构创建复杂的页面布局和导航。HashRouter 与 BrowserRouter:对比 HashRouter ... 登录后查看完整内容

🎬 VideoReact（4）

非受控表单:了解非受控表单，它们是表单元素的一种处理方式，适用于简单的表单，但缺乏状态控制和验证。受控表单:探索受控表单，这种表单通过React组件状态来控制表单元素的值和行为，使数据流更可控。表单校验 (Form Validation):学会如何对表单进行校验，确保用户输入的数... 登录后查看完整内容

🎬 VideoReact（5）

典型交互方式：探讨与服务器通信的经典方式，包括 Ajax、Fetch 和 Axios，并介绍它们各自的用途和优势。快速上手 Axios：学习如何迅速上手 Axios，了解其基本用法和常见配置，以及如何发起 HTTP 请求并处理响应。拦截器处理通用操作：了解如何使用 Axios 拦... 登录后查看完整内容

🎬 VideoReact（6）

React Hooks：介绍 React 内置的 Hooks，如 useState 和 useEffect，并解释它们的作用和用法。深入理解 useState Hook，包括如何在函数组件中管理状态并进行状态更新。深入理解 useEffect Hook，包括如何处理副作用、订阅和... 登录后查看完整内容

6 个 Self-Paced Codeing 项目

🎬 Video个人税收计算器

个人税收计算器项目亮点用户友好界面：简洁直观的设计，帮助用户轻松计算个人所得税，提供良好的用户体验。快速响应：应用程序响应迅速，提供即时的税额计算和收入排名结果。比较功能：提供用户收入在所有使用者中的排名，让用户了解自身的收入水平。法律合规：遵守澳大利亚税务法规和隐私... 登录后查看完整内容

课程大纲