Skip to content

Commit

Permalink
feat(Web_module): Add Vue & Express Intro Courses in Chapter 4 (#340)
Browse files Browse the repository at this point in the history 
* feat(Web_module): Add Vue & Express Intro Courses in Chapter 4.WEB

* fix(package): fix Dependent version number

* feat(Web_module): Add Week5 in Chapter 4.3(Vue&Express Intro)
fix(Web_module): Fixed the dead link error

* chore: PWA max file size

---------

Co-authored-by: Duke486 <35391960+Duke486@users.noreply.github.com>
Co-authored-by: camera-2018 <40380042+camera-2018@users.noreply.github.com>
  • Loading branch information
@Duke486 @camera-2018
Duke486 and camera-2018 authored Nov 19, 2024
1 parent c8968dd commit 37c520e
Show file tree
Hide file tree
Showing 53 changed files with 6,456 additions and 2 deletions.
2 changes: 1 addition & 1 deletion .vitepress/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export default withMermaid({
workbox: {
navigateFallback: '/',
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
maximumFileSizeToCacheInBytes: 5000000,
maximumFileSizeToCacheInBytes: 10000000,
runtimeCaching: [
{
urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
Expand Down
27 changes: 27 additions & 0 deletions 4.WEB模块/4.3 Vue与Express快速入门/4.3.0 简介.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# 课程介绍
![image](../static/intro.jpg)

欢迎阅读，我是本部分编者[Duke486](https://duke486.com/)！本课程自[Web-Dev-Beginner](https://github.com/Duke486/Web-Dev-Beginner)项目改编而来，以适应HDU及各高校大学新生快速入门前后端开发的学习需求。
## 课程性质
本课程旨在帮助零基础的新生快速上手前端和后端开发，通过循序渐进、剧情引导的学习方式，从HTML、CSS、JavaScript等基础知识入手，逐步过渡到实际前后端开发中常用的框架与技术，如Vue3、Vite、Express等。本课程强调实践性，学生将在动手过程中学习，培养开发能力。

:::warning
本课程侧重于以最快的速度达到制作基本web应用的水平，并非以提高计算机素养或深入探讨技术栈特性为目的。如需深入学习，请参考Wiki内其他优秀课程或自行学习。
:::

## 课程简介
本课程为期10周，分为两个部分：前两周全体学生共同学习前端基础（HTML、CSS、JavaScript）及版本控制工具（Git、GitHub协作），后八周分为**前端组**与**后端组**，根据各自方向深入学习对应的技术栈。课程每周包含：
- **Doc**：理论讲解，介绍每周的核心知识点
- **Lab**：动手实验，通过实际项目增强理解
- **Homework**：独立作业，巩固学习内容

课程的目标是通过10周的学习，让学生能够使用现代前后端技术开发出带有登录功能、导航的前端页面和具备简单数据存储、查询能力的后端API。

## 学习要求
- **积极动手**：本课程非常注重实践，建议同学们认真完成每周的Lab实验，并积极参与到作业中。
- **掌握基础**：虽然课程不要求深入理解复杂的计算机理论，但前两周的基础内容至关重要，为后续框架学习打下基础。
- **协作与版本控制**：课程中Git和GitHub将是你提交作业与协作开发的主要工具，请在课程中熟练掌握它们的使用。

## 如何使用时间表
课程时间表将每周的学习内容分为三个部分：**Doc** 理论学习、**Lab** 实验、**Homework** 作业。你可以根据时间表安排自己的学习进度，合理分配学习和实验的时间。建议每周至少花费4-6小时完成学习任务。

43 changes: 43 additions & 0 deletions 4.WEB模块/4.3 Vue与Express快速入门/4.3.1 引入/4.3.1.0 时间表.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# 课程安排与时间表

## 课程安排原则
本课程前两周所有学生共同学习HTML、CSS、JavaScript及Git的基础知识，确保学生具备扎实的前端开发基础和版本控制工具的使用能力。第3周开始，课程将分为前端组和后端组，分别学习各自的技术栈。课程每周包含三部分：理论讲解（Doc）、实验操作（Lab）、独立作业（Homework）。

课程的设计宗旨是理论与实践结合，通过动手实验巩固知识，并最终完成一个完整的前后端项目。

---

## 前端组课程时间表

| Week | 标题 | Doc | Lab | Homework |
|------|----------------------|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------------------|
| 1 | **HTML, CSS, JS 基础** | [HTML/CSS基础，JS语法](../4.3.2%20week-1%20前端三件套/4.3.2.0%20doc-基本语法) | [创建调查问卷的外观](../4.3.2%20week-1%20前端三件套/4.3.2.1%20lab-JS弹窗互动) | [添加按钮，使用JS实现弹窗](../4.3.2%20week-1%20前端三件套/4.3.2.2%20homework-制作问卷) |
| 2 | **进阶JS & GitHub** | [表单与JS交互，Git协作](../4.3.3%20week-2%20Git初步/4.3.3.0%20doc-Git协作) | [创建表单并获取数据，Git协作](../4.3.3%20week-2%20Git初步/4.3.3.1%20lab-获取表单内容) | [计算用户输入数字的和](../4.3.3%20week-2%20Git初步/4.3.3.2%20homework-两数之和) |
| 3 | **DOM操作与事件处理** | [JavaScript DOM操作与事件处理](../4.3.4%20week-3%20DOM操作%20Node基础/4.3.4.0%20前端doc-DOM与事件处理) | [创建Todo List应用](../4.3.4%20week-3%20DOM操作%20Node基础/4.3.4.1%20前端lab-Todo应用) | [点击按钮计数，改变背景颜色](../4.3.4%20week-3%20DOM操作%20Node基础/4.3.4.2%20前端homework-计数器) |
| 4 | **Vue.js 组件基础** | [Vue组件入门与props](../4.3.5%20week-4%20Vue入门%20Express路由/4.3.5.0%20前端doc-组件与props) | [创建通知展示Vue组件](../4.3.5%20week-4%20Vue入门%20Express路由/4.3.5.1%20前端lab-展示通知) | [Vue实现页面布局与数据绑定](../4.3.5%20week-4%20Vue入门%20Express路由/4.3.5.2%20前端homework-温度换算) |
| 5 | **Vue路由与表单处理** | [Vue Router与双向数据绑定](../4.3.6%20week-5%20Vue路由%20POST请求处理/4.3.6.0%20前端doc-Vue路由) | 创建多页面导航和表单输入页面 | 实现表单数据提交并验证 |
| 6 | **Axios API请求** | 使用Axios发送GET/POST请求 | 获取API数据并展示在页面上 | 通过API获取并显示用户数据 |
| 7 | **Vuex状态管理** | Vuex全局状态管理基础 | 使用Vuex实现全局状态共享 | 让不同组件共享状态（如计数器） |
| 8 | **Vue动画与过渡效果** | Vue中的动画与过渡效果 | 添加组件过渡动画 | 实现页面切换时的过渡效果 |
| 9 | **项目优化与懒加载** | Vue项目性能优化 | 项目懒加载优化与按需加载 | 优化首屏加载时间，减少资源消耗 |
| 10 | **项目整合与展示** | 回顾与总结 | 完成最终Vue项目并展示 | 提交最终Vue项目，展示功能 |

---

## 后端组课程时间表

| Week | 标题 | Doc | Lab | Homework |
|------|----------------------|----------------------------------------------------------------------------------|------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
| 1 | **HTML, CSS, JS 基础** | [HTML/CSS基础，JS语法](../4.3.2%20week-1%20前端三件套/4.3.2.0%20doc-基本语法) | [创建调查问卷的外观](../4.3.2%20week-1%20前端三件套/4.3.2.1%20lab-JS弹窗互动) | [添加按钮，使用JS实现弹窗](../4.3.2%20week-1%20前端三件套/4.3.2.2%20homework-制作问卷) |
| 2 | **进阶JS & GitHub** | [表单与JS交互，Git协作](../4.3.3%20week-2%20Git初步/4.3.3.0%20doc-Git协作) | [创建表单并获取数据，Git协作](../4.3.3%20week-2%20Git初步/4.3.3.1%20lab-获取表单内容) | [计算用户输入数字的和](../4.3.3%20week-2%20Git初步/4.3.3.2%20homework-两数之和) |
| 3 | **Node.js 基础** | [Node.js 环境与基础操作](../4.3.4%20week-3%20DOM操作%20Node基础/4.3.4.3%20后端doc-初识服务端环境) | [创建简单Node.js服务器](../4.3.4%20week-3%20DOM操作%20Node基础/4.3.4.4%20后端lab-随机水果) | [修改服务器返回包含当前时间的JSON](../4.3.4%20week-3%20DOM操作%20Node基础/4.3.4.5%20后端homework-显示时间) |
| 4 | **Express 路由处理** | [Express 路由与API开发](../4.3.5%20week-4%20Vue入门%20Express路由/4.3.5.3%20后端doc-路由与API) | [创建查询用户信息的API](../4.3.5%20week-4%20Vue入门%20Express路由/4.3.5.4%20后端lab-查询用户信息) | [设计商店API](../4.3.5%20week-4%20Vue入门%20Express路由/4.3.5.5%20后端homework-商店API) |
| 5 | **处理POST请求** | 处理POST请求，接收和解析数据 | 实现一个POST路由，接收用户表单数据并返回确认消息 | 实现用户登录API，验证用户名和密码 |
| 6 | **数据库操作** | 连接MongoDB或MySQL数据库 | 创建用户数据表，并保存用户数据 | 实现一个API，返回数据库中的所有用户数据 |
| 7 | **用户认证与JWT** | 使用JWT进行用户认证 | 实现登录功能并返回JWT令牌 | 增加JWT中间件，保护特定API路由 |
| 8 | **文件上传** | 处理文件上传 | 创建文件上传API，并保存文件到服务器 | 返回上传文件的URL并提供下载功能 |
| 9 | **API性能优化** | API性能优化与缓存 | 为API添加缓存机制，减少查询次数 | 实现分页查询功能，优化数据处理 |
| 10 | **项目整合与展示** | 回顾与总结 pnp | 完成最终Express API项目并展示 | 提交最终API项目，展示功能 |

---

Loading

0 comments on commit 37c520e

Please sign in to comment.