feat: 4678章

7.Web开发入门/7.1.1基础部分.md

@@ -0,0 +1,153 @@
+# 基础部分
+
+## 🔑 萌新需要知道的前置知识
+
+### 前端入门<del>到入土</del>
+
+不同于后端语言的多样化，前端语言较为统一。在萌新阶段，你需要先掌握 HTML、CSS、JS 三种语言（人称前端三<del>剑客</del>件套）
+
+三者关系可以简单理解为：HTML 是骨架，CSS 是衣服装饰，JS 则控制交互行为
+
+以下提供一些可供参考的学习资料，你也可以按兴趣在 b 站大学搜索相关学习视频。在学习中遇到无法解决的问题，或者学习路径上的迷茫，也可以参考[提问的智慧](https://learnku.com/laravel/t/2396/wisdom-of-asking-questions-chinese-version)向群里的前端学姐们提问噢~
+
+#### HTML & CSS
+
+[MDN Web 入门](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web)
+
+[ A friendly web development tutorial for complete beginners](https://www.internetingishard.com/html-and-css/)
+
+[前端入门必会的初级调试技巧](https://zhuanlan.zhihu.com/p/145466139)
+
+#### JavaScript
+
+[现代 JavaScript 教程](https://zh.javascript.info/)
+
+<strong>快速上手的参考建议</strong>
+
+<strong>HTML</strong><strong> </strong>可以先认知常用标签（ body / div / span / a / img 等）及其常用属性
+
+<strong>CSS </strong>了解常见的颜色属性（字体颜色 / 背景颜色 / 边框颜色 等）、字体相关属性（字号 / 字重 / 行高 等）、盒子模型（padding / border / margin）、用于布局的属性（float / flex / grid）、单位（px / rem / em / vh / vw 等）、选择器（id 选择器 / 类选择器 等）
+
+<strong>JS</strong><strong> </strong>了解基本语法（变量定义 / 判断 / 循环 / 函数定义 / etc）与 DOM 操作
+
+涉及<strong>前后端交互</strong>的部分可以了解 fetch 的使用
+
+其他诸如 HTML5 / CSS3 / ES6+ 的知识可以暂时跳过，<del>任务要用到再查</del>
+
+基本全部前端开发资料都可以在 [MDN](https://developer.mozilla.org/) 中找到
+
+### 🥂 助手介绍网页的重写
+
+设计部姐姐给了前端部一个助手介绍网页的设计稿，但是 psyq 觉得[目前的助手介绍网页](https://site.hduhelp.com/)写得不是很还原，你可以帮 psyq 重写一个更好看的网页吗？
+
+设计稿如下：
+
+![](static/boxcnVR5z4U8YlXZbc8beDNEHXc.jpg)
+
+#### 可能需要用到的图片资源
+
+![](static/boxcnbigxAK5SbxiWuDHr1Ashne.png)
+
+![](static/boxcnrqddPFusKhe0vZuzXJOosg.png)
+
+#### 基本要求
+
+- 大致还原设计稿的基础上可以自由发挥，要求美观
+
+  - 设计稿内容的大致布局
+  - 背景颜色/样式 & 文字颜色/样式
+  - 文字与容器的位置关系
+  - ……
+
+#### 额外发挥
+
+- 各处样式的细节（圆角 / 阴影 / 渐变）
+- 对不同设备屏幕尺寸进行适配
+- 为显示内容增加一些动态效果
+- 无法一页显示所有内容时，试试在下滑页面时显示一个 `返回顶部` 的按钮
+
+#### 可能涉及的知识点
+
+- 使用 HTML 构建页面的基础布局
+
+  - 了解常用的 HTML 标签
+
+    - HTML 引入外部图片文件（`<img>`）
+- 如何让 HTML / CSS / JS 相互配合
+
+  - HTML 中书写 css 使用 `<style>`
+  - 引入 css 等资源使用 `<link>`
+  - 书写/引入 js 使用 `<script>`
+- 使用 CSS 为页面赋予样式
+
+  - 了解常见网页布局（了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)，[flex ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局，综合运用不同布局来完成页面）
+  - 使用 [css 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)选中 HTML 元素添加样式（[id 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) / [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) / etc.）
+  - 自适应布局（查阅 `媒体查询`）
+  - 交互渐变动效（查阅 css 属性： `transition`、`animation`）
+- JS 添加交互行为
+
+  - 监听用户下滑网页的行为并改变 `返回顶部` 按钮的可见状态（[scroll 滚动事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scroll_event)，[DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
+
+### 🎫TodoList
+
+![](static/boxcnikdFX5WNml7sgtPMOJQiGh.png)
+
+![](static/boxcnFZwQVTUWkfsbNxYfJkgPDg.png)
+
+一些参考
+
+或许你也曾是一名时间管理大师，在各种效率类 app 立下自己要做的 flag。然而现成的工具难免无法满足自己的所有需求，那么不妨来编写一个自己的 TodoList 吧~
+
+#### 基本要求
+
+- 可以对 todo 进行增删改查
+- 至少存在 <strong>待完成</strong>/<strong>已完成</strong> 两种不同的状态，Todo 应该能够在不同状态间切换。更进一步，你也可以设计一个 <strong>进行中</strong> 状态。
+
+#### 额外发挥
+
+- 页面刷新后数据不丢失
+
+参考实现方案：
+
+1. 使用浏览器提供的储存功能实现本地存储（[localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)、[IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)）
+2. 通过请求后端 api 实现云端存储
+
+- 删除待办时弹出操作不可逆的提示
+- 在交互时适当添加缓动效果
+- 设计定时 todo，可在用户设定的时间点对用户进行提醒
+- 实现不同设备屏幕尺寸的自适应
+- 添加任务热力图(可以参考一下 GitHub 个人主页哦 🤔)
+
+![](static/boxcncVQswB7ziUoV4LvEs35DAe.png)
+
+#### 可能涉及的知识点
+
+- 使用 HTML 构建页面的基础布局
+
+  - 了解常用的 HTML 标签
+
+    - HTML 引入外部图片文件（`<img>`）
+- 如何让 HTML / CSS / JS 相互配合
+
+  - HTML 中书写 css 使用 `<style>`
+  - 引入 css 等资源使用 `<link>`
+  - 书写/引入 js 使用 `<script>`
+- 使用 css 为页面赋予样式
+
+  - 了解常见网页布局（了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)，[flex ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局，综合运用不同布局来完成页面）
+  - 使用 [css 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)选中 HTML 元素添加样式（[id 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) / [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) / etc.）
+  - 自适应布局（查阅 `媒体查询`）
+  - 交互渐变动效（查阅 css 属性： `transition`、`animation`）
+- JS 添加交互行为
+
+  - 获取网页中的待办项（查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
+  - 添加新的待办项（查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
+  - 删除网页中的待办项（查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)）
+  - 监听待办项的点击事件，以改变待办项的状态（查阅[ click 单击事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event)）
+  - 将当前待办项列表存储在本地（查阅 [localStorage(较简单)](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)、[IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API) 文档）
+  - 远程请求后端接口（了解 [fetch ](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)和[ js 异步](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous)）
+  - 定时提醒用户待办的时间（查阅 [setTimeout ](https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout)/ [setInterval](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)）
+
+#### 小提示
+
+可以参考 [todomvc](https://todomvc.com/examples/vanillajs/)（[source](https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs)[源码](https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs)）中关于 js 实现 todolist 的方法，不过还是得亲手实践哦~

7.Web开发入门/7.1.2进阶部分.md

@@ -0,0 +1,98 @@
+# 进阶部分
+
+如果是有一定基础的同学，可以考虑采用一些辅助工具(React / Vue / jQuery 等)，样式方面也可以采用你喜欢的组件库(Antd / ElementUI /<strong> </strong>Bootstrap 等)实现。
+
+## 🌥 天气组件
+
+如果你曾经用过助手的小程序，你可能会在首页看到这样的天气卡片：
+
+![](static/boxcnTNJhtqw6Km24fKgAnjZtBS.png)
+
+当然了，平时大家也会用到各种天气 APP
+
+![](static/boxcnUuqMoTjiOH9NSdYx4GCGme.png)
+
+那么，让我们动手实现一个天气卡片吧~
+
+### 基本要求
+
+- 通过网络接口请求得到天气数据
+
+  - 天气 api 可自行获取，各种服务商会提供注册免费使用的天气接口，如高德和彩云
+  - 能够获取杭州当前天气和周边基本信息即可
+- 制作一套简易的天气卡片，展示实时天气和天气预报
+
+  - 实时天气
+
+    - 显示当前的基本信息，如城市地区、时间
+    - 显示当前的气温和天气现象状态
+    - 制作一个相关信息卡片，显示当前风向、湿度等数据
+    - 相关样式可以参考主流天气组件，要求美观即可，可以适当增加 icon 和图表增加美观度
+  - 天气预报
+
+    - 通过列表显示未来几天天气数据，如温度、风向等
+    - 相关样式同时可以参考主流天气组件，如未来天气可以通过折线图直观表示
+
+### 额外发挥
+
+- 根据你的数据源，可以展示更多的天气数据，如穿衣建议、舒适度等
+- 增加定位功能，可以使用原生 [Geolocation ](https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API)API 或其他方式，可以通过简单的地图（借助各种地图库）展示当前位置
+- 如有需要，不妨试试前沿的浏览器特性，只要是能够在最新版 Chrome Canary 通过 flags 开启的特性均可使用，如容器查询([Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries))、[CSS Layout API](https://drafts.css-houdini.org/css-layout-api)。
+
+### 你可能需要的资料
+
+- icon 相关
+
+  - [icon 图标库](https://www.iconfont.cn/)
+  - [优雅地使用 icon](https://juejin.cn/post/6844903517564436493)
+  - [iconify](http://icon-sets.iconify.design/)
+- 请求相关
+
+  - [fetch 的使用](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)
+  - [高德地图天气 API](https://lbs.amap.com/api/javascript-api/guide/services/weather)
+  - [彩云天气 API](https://docs.caiyunapp.com/docs/intro)
+  - [MDN Geolocation API Docs](https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API)
+- 图表相关
+
+  - [Chart.js](https://www.chartjs.org/)
+  - [G2Plot 开箱即用的图表库](https://g2plot.antv.vision/zh)
+
+## 🎶 音乐播放器
+
+![](static/boxcnRaBolh8i2FkoIJW69a5g3e.png)
+
+![](static/boxcnJ13CDzxp9lwEtGivTuJ4nh.png)
+
+相信你平时或多或少都会听音乐，那么你是喜欢用网易云还是 QQ 音乐呢？或者是系统自带的音乐播放器？不过，其实你也可以自己做一个音乐播放器，来满足你对听音乐这件事的所有幻想，听起来是不是很酷呢 😎~那么，来试试看吧！
+
+### 基本要求
+
+- 通过网络接口请求得到音乐数据
+- 支持播放至少两首音乐
+- 可根据名字对音乐进行检索与选择
+- 音乐播放器可以是小组件形式，也可以是整页形式。播放器拥有以下基本要素：
+
+1. 播放、暂停、上一首、下一首
+2. 音乐封面
+3. 显示歌曲名称、歌手名称
+4. 显示音乐播放进度
+
+### 额外发挥
+
+- 可调节播放器音量
+- 为音乐添加滚动歌词
+- 对音乐进行评论
+- 支持音乐的收藏与分享
+- 支持用户上传本地音乐
+
+### 你可能需要的资料
+
+- icon 相关
+
+  - [icon 图标库](https://www.iconfont.cn/)
+  - [优雅地使用 icon](https://juejin.cn/post/6844903517564436493)
+  - [iconify](http://icon-sets.iconify.design/)
+- 请求相关
+
+  - [fetch 的使用](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)
+  - [音乐资源 api](https://www.free-api.com/doc/369)

7.Web开发入门/7.1.3附录1：前端介绍（详细版）.md

@@ -0,0 +1,21 @@
+# 附录 1：前端介绍（详细版）
+
+### # 前端的概念
+
+前端，想要入门，则必须要知道他所指代的内容。
+
+它分为狭义和广义。其中，广义其实是狭义的一个更深入的发展的结果。
+
+狭义就是指网页，而广义则是指互联网中一切可见的界面及交互功能。设计师负责设计出好看的界面，而前端工程师则是负责把他实现，并在实现基础上增加交互的部分和实际的功能。例如：各种 GUI、小程序(各种)、快应用、APP 的界面、网页、鸿蒙应用等都可以由前端来完成。有些人可能会疑惑，这也算前端。我只能说，这就是大前端时代。许多人学习前端，在网上寻找教程，找到的教程都是非常远古或者基础的。由于前端的发展历史很长，教程也必须与时俱进。以前的教程仅限网页制作，但如今前端领域日新月异，各种新框架新功能不断开辟，我们不能都有所涉及，但也不能做井底之蛙。
+
+### # 前端的学习
+
+因此，想要入门前端，则必须先建立一个较好的世界观，才能进行方法论的学习。最最基础的前端，也就是网页，需要从网页三剑客开始学习，即 HTML、CSS、JAVASCRIPT。这三样一个负责描述网页内容，一个负责描述网页样式，一个负责网页交互。没错，这三个就是三门语言。每门语言都有不可忽视的发展成果。大多数人在网上寻找教程，找到的都是最基础的教程，甚至没有与时俱进，比如有许多废弃的规定还在教程中，比如有新的语法规范却没有教授。我这里并不推荐有没有什么好的教程，而是要大家通过搜索引擎的帮助，让自己建立一个正确的前端世界观，而这篇文章知识来帮助你们少走弯路和死胡同。当然，如果大家想要学好前端，必须要自己学会阅读文档，而不是一些教程。因为官方文档才是最前沿的，最正确的，最全面的。
+
+### # 前端的历史
+
+从历史中较为全面的了解前端，可以帮助你快速建立相关的观念。当然，前端的历史，大家可以看看知乎上高赞的回答。我这里只说一下我的观念。前端在历史发展中，非常注重一个理念，不要重复造轮子（DRY）。没错，别人做好的，已经很完善的，拿来用就行，除非你自己还有什么其他的需求。这个观念与其他计算机领域的观念是不一样的。这也是前端能够快速发展的重要原因之一。浏览器等设备平台对代码进行一个渲染和执行，我们必须遵守这个规范。但代码怎么样写，怎么样提高效率，怎么样支持多种写法都能得到一样的效果，这就是前端发展的一个关键。先辈们对代码进行了二次的一个编译。先辈们建立了一系列编译器等操作，使得前端能够在基石上向上发展。我们不必一板一眼的编写非常冗余的 HTML\CSS\JS 代码，而是编写特定语法的代码，然后通过代码编译成浏览器等平台可识别的 HTML\CSS\JS\其他的代码。这不仅使得我们前端开发的效率大大提高，还能把代码移植到其他平台，实现跨平台的功能。所以这才诞生出了 postcss，vue，emmet 等高效而又实用的成果。
+
+要说，前端为什么发展这么快，很重要的因素就是它非常热衷于开源。通过开源，大家可以一起维护一个项目，并通过传播，让其他人在它的基础上继续发展，逐渐壮大。你可以直接在前人的基础上继续发展，可以快速建立自己的生态，发现并合力解决各种 BUG。
+
+MDN 是个适合初学和文档查阅的网站 里面有学习前端的全流程

7.Web开发入门/7.1.4附录2：大前端开发.md

@@ -0,0 +1,16 @@
+# 附录 2：大前端开发
+
+在 [3.7Javascript（跨平台开发）](https://gw9u39xwqi.feishu.cn/wiki/wikcnbc5Rv4TvYnv7GVM2IOml1f)中我们了解到了纯 NodeJS 的开发
+
+这里我们讲讲前端三剑客和前端框架
+
+如图为前端的路线
+
+- 前端三剑客
+- 前端框架
+
+> 在官方文档学习 Vue 的过程中，强烈建议你在左上角 `API风格偏好` 中，改为组合式
+
+> 在官方文档学习 React 的过程中，强烈建议不要在 Class 写法停留太久，要速速学习 Hook 写法
+
+下面是 ou_a1cbc05cef3d1c953fc1c9da4b6e869a 提供的 React 教程 <del>“这个感觉好一点，但不够专业”</del>

7.Web开发入门/7.1前端部分.md

@@ -0,0 +1 @@
+# 前端部分

7.Web开发入门/7.2.1基础部分.md

@@ -0,0 +1,168 @@
+# 基础部分
+
+作者：[iyear](https://github.com/iyear) 、后端的小伙伴们
+
+Hello~这里是杭电助手技术部后端，无论基础如何，您都可以跟随着这篇文章的指引，使用 Golang 开发一个基于 Web 的简易登录系统后端部分。
+
+本任务将涉及以下知识：
+
+- Go 语言（又称 Golang） 开发环境搭建、基础语法知识、Gin 框架的使用
+- HTTP 基础知识
+- 登录系统的接口设计
+- 一点点的工程基础
+
+不需要担心，后续我们将给出充足的资料和路线，相信这些对你一定不是难题~
+
+> 在学习初期，视频可以帮助你快速理解并踏入大门，但在学习的后期，文档&博客才拥有第一手资料和最新动态(视频就像你的教科书，更新的脚步永远跟不上技术)。<br/>在任务初期我们将给出对应的视频资料，在后期我们只给出图文资料。<br/>👏 当然，这不是强制要求：学的舒服是原则
+
+# 👋 初识 Go 语言 (Day 1)
+
+> Go（又称 Golang）是 Google 开发的一种静态，强类型、编译型、并发型的编程语言。其于 2009 年 11 月正式发布，成为开源代码项目。Go 的语法接近 C 语言，但其支持垃圾回收功能，开发效率远高于 C 语言。而其对海量并发的支持，以及在运行效率，低内存消耗方面的优异表现，也有人称其为互联网时代的 C 语言。
+
+<del>↑ 太官方了，我的评价是不如看资料(</del>
+
+官网虽然是英文，但是非常非常的友好，近年还刚翻新过一次好看了许多，还有各种可爱的吉祥物插图。
+
+这只吉祥物囊袋鼠的英文学名为 <strong>Gopher</strong>，每位热爱 Golang 的开发者都会自称 <strong>Gopher</strong> (就像 jvaver 一样(x)，而它的造型出于创始人之一 Rob Pike 的妻子之手。
+
+#### 视频资料(<strong>P2-P3</strong>)：
+
+#### 文字资料：
+
+- Golang 官网(非常好记: go.dev(eloper))
+- 一些第三方的前景概览
+
+#### 补充资料：
+
+- [我使用 Golang 两年后的总结：优点和令人讨厌的怪癖](https://www.infoq.cn/article/ydmrvvr1ijaaih3eh5fw) - 比较客观的开发体验
+- [许式伟：我与 Go 语言的这十年](https://cloud.tencent.com/developer/article/1043859) - 七牛云 CEO、前 WPS 首席架构师、Go 语言布道师
+- [Go 一周年，一年前的今天](https://learnku.com/docs/go-blog/go-one-year-ago-today/6583) - 2010 年 Go Team 写下的一周岁博文。那时的 Go 还在一脸懵逼的状态蹒跚向前。
+- [Go Developer Survey 2022 Q2 Results - The Go Programming Language](https://go.dev/blog/survey2022-q2-results) - 2022 年 Golang 官方博客的调研结果报告。
+
+对比两篇博客，可以清晰地感受到 Golang 的发展之快：曾经还在娘胎里的 Golang，现在已经在云原生、微服务、CLI 程序、DevOps、区块链等领域大杀四方。
+
+# 😥 Golang 环境搭建 (Day1 - 2)
+
+Golang 是一门年轻的语言(相比 Java & JavaScript)，它没有那么多的历史包袱，所以环境搭建在一众语言中可以算得上十分容易。同时 Golang 自带了丰富的工具链，许多 Gopher 的整个职业生涯中可能都不需要用到官方工具链以外的相关工具。
+
+本小节还请同学们各显神通，由于不同计算机不同环境不同平台的区别，Golang 环境搭建各有区别。资料中将尽可能给出一些教程，但具体需同学们使用搜索引擎寻找最佳实践。出现问题在群内积极提问~
+
+对于 IDE 的选择：
+
+在这里推荐两个比较流行的 IDE
+
+首先是万能的 VSCode
+
+还有智能的 GoLand
+
+喜欢折腾的同学可以选择 VSCode 作为自己的开发工具，如果想能够马上上手学习的同学，可以使用 GoLand 作为自己的开发工具
+
+GoLand 可以使用教育邮箱学生认证白嫖噢~👀
+
+#### 视频资料(<strong>P4-P6</strong>)：
+
+#### 文字资料：
+
+- VSCode 的爹亲自教你装 Golang 环境
+- 使用 GoLand 搭建
+
+#### 补充资料
+
+> 这些文章只是帮助你理解的更透彻，看不懂完全没关系。甚至你完全可以跳过他们，在任务结束后再来看看，或许你会有更多收获。
+
+- Golang 依赖管理的前世今生：[ 一文搞懂 Go Modules 前世今生及入门使用 - 掘金](https://juejin.cn/post/6844904166310019086)
+- IDEA 系列学生认证教程(用 GoLand 必看)：[学生邮箱白嫖 JetBrains 全家桶——保姆级教程](https://zhuanlan.zhihu.com/p/136497468)
+
+# 😕 Golang 基础语法的学习 (Day 1-8)
+
+Golang 的语法是 C/C++ 系的，在许多地方你都可以看到他们的影子，这对未来 C 的学习更有自顶向下的帮助。当然，如果你曾经用过 Java、Python，Golang 的语法你可能会不太习惯，这不会是问题~在熟悉语法后，你会发现 “Golang 一把梭” 是真实存在的 🤓。
+
+<strong>对于基础语法的学习，无需一时学习过深，也不必花费过多时间在此</strong>。<strong>即使半懵半懂，在多次实践后也会渐渐领悟</strong>
+
+本次任务并不需要用到反射、并发等高级特性(学到时可选择性暂时避开)，最深只需要用到结构体与方法的相关知识。
+
+#### 视频资料(P9-P56 每集视频并不长，不要被吓到了喔)：
+
+#### 文字资料：
+
+- 非常推荐的 Go Tour 中文版。Go Tour 是 <strong>Go 官方为初学者打造的渐进式教程</strong>，你可以跟随着它的步伐一点点探索 Go 语言 。Go Tour 的代码都充满着它的<strong>设计哲学与最佳实践</strong>，是每位 Gopher 的必经之路。同时它也是<strong>交互式的</strong>，左侧是教程，右侧能直接敲代码，在网页上运行。
+- 短小精湛的 Golang 入门教程，是 The Little Go Book 的中文翻译
+
+#### 补充资料：
+
+- [Go by Example 中文版](https://gobyexample-cn.github.io/) - Go by Example 是对 Go 基于实践的介绍，包含一系列带有注释说明的示例程序。
+- [《Go 入门指南》](https://learnku.com/docs/the-way-to-go) - 《Go 入门指南》是 《The Way to Go》的中文译本，本书专为 Golang 初学者量身定制。教程较老，小部分内容有点过时，但质量很高。
+- [《Go 语言 101》](https://gfw.go101.org/) - 《Go 101》详细描述了 Golang 部分底层原理、最佳实践、代码风格、常见错误，适合进一步深入阅读。
+- [《Go 语言圣经》](https://books.studygolang.com/gopl-zh/)- 《The Go Programming》的中文版，是官方书籍。内容相当老，但包含着 Golang 的设计哲学与建设初期的思考和路线。
+
+# 🎯 HTTP 协议学习 (Day 9-10)
+
+如果你从未接触过协议二字，那 HTTP 协议将是你大学生涯最重要的协议之一，也是 Web 的基础。与其说是小任务的基础，我更想说这是对人类互联的探索。
+
+HTTP 协议起草与演进之路十分坎坷，但每一步都举足轻重，在人类历史上画下了浓墨重彩的一笔。
+
+#### 文字资料：
+
+- 非常著名的阮一峰博客 <strong>(他的博客可以从最早开始都过一遍，很多计算机科普可以说永不过时)</strong>
+- 图解系列非常有意思，最重要的是不止于介绍协议，更为你道来其历史设计的进程。本书不必在任务期间内看完，但我相信你会爱上它的。
+- 经典菜鸟教程，不过有点枯燥乏味。可以用于回顾和工具书查阅。
+
+#### 补充资料：
+
+- [《互联网时代》纪录片](https://www.bilibili.com/video/BV1DU4y147XR/) - 与 HTTP 没什么关系，但给当时的我带来极大的震撼和触动。互联网是人类连接的重要一步，是对人类自由、平等、互通之理念长达半个世纪的深刻贯彻。
+
+> 原本稀薄的得以聚合，曾经蜷曲的得以伸展，容易被忽略的得以显现，可能被排斥的获得接纳：孤独的不再孤独，卑微的不再卑微，每一个生命绽放的声音，从来没有像这样韵味深长。
+
+- [HTTP | MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP) - HTTP 协议较为权威的参考文档和资料。
+
+> MDN 是一个不断发展的学习网络技术和网络软件的平台。MDN 的使命简单明了：提供一个更好的网络蓝图并赋能新一代开发者和内容创意者在此之上构建网络。
+
+# 🎉 回到正题：小任务
+
+> 一些题外话：是的，任务期已经过去了约十天(当然优秀的你可能更快~)，但在我看来，小任务其实已经不再那么重要了。如果在以上小节中你曾感到兴奋、热情、探索的欲望，我诚挚地相信，你能在技术的道路上走的很远很远~
+
+用了这么长的时间铺垫了以上的基础知识，脑子肯定胀满了各种各样的东西：if for range slice interface http …… 是时候释放他们了！
+
+这次的小任务我们将设计一个简易的登录系统，它将十分简单，简单到甚至只需要一个 `.go` 文件，但可能也很难，它直接或间接地包含了以上几乎所有内容。
+
+<del>经过了上文详细的“喂饭”小节，下面轮到同学们自己吃饭了~</del>
+
+#### 系统概述
+
+- 使用 Gin 框架设计登录系统的接口与整体结构。
+- 至少设计 `Login` `GetUser` `Logout` 三个接口，对 `GetUser` 接口鉴权。
+
+  - Login: 使用账号密码登录
+  - GetUser: 获取个人信息，具体信息有什么？请自由发挥~
+  - Logout: 登出注销
+
+#### Gin
+
+在 HTTP 小节中，“路由 “接口” “鉴权” “请求” “响应” 你一定或多或少地接触过， Gin 就是一群 Gopher 大神帮你解决了这些问题，它十分轻量但五脏俱全，你只需要调用几个函数就将 cover 那些复杂的问题。
+
+请运用你在第三小节中学习的 `Golang 包(依赖)管理` 正确地安装 Gin 并学习使用它。
+
+<strong>相关资料</strong>：
+
+- [GitHub - gin-gonic/gin: Gin is a HTTP web framework written in Go (Golang)](https://github.com/gin-gonic/gin) - Gin 的官方仓库及权威文档。
+- [Go Gin Example](https://github.com/eddycjy/go-gin-example) - 使用 Gin 的一个小项目，难度较高。
+- [Gin 框架 | NX の 博客](https://www.nickxu.top/categories/Golang/Gin-%E6%A1%86%E6%9E%B6/) - NX 的学习笔记，可供参考
+- ……
+
+#### 鉴权
+
+如果 `GetUser` 接口来者不拒，那么任意信息都可以被外部人员访问到，这将是一个严重的安全漏洞。所以在 `Login` 与 `GetUser` 之间，有着一种隐隐约约的联系：只有登录成功且对应的用户才能读取到他的个人信息。
+
+好啦，总之，鉴权是每个 Web 系统的重要部分，不说太多 😛
+
+#### 无限进步！ (From [影视飓风](https://space.bilibili.com/946974/))
+
+发挥你的想象，让你的服务变得更加可靠、有趣、优雅~
+
+- 如果你的所有代码都在一个文件里，请尝试让他变得有模块感~
+- 如果你的账号密码写死(硬编码)在程序中，请尝试让它能动态变化~
+- 发现更多有趣的 Golang 第三方库，尝试将它加入你的程序~
+- 如果你能想到任何方式丰富项目功能、优化代码结构，以及想加的内容，请尽情发挥~
+- ……
+
+不卷大家啦，发挥你的想象吧，想法是编写程序的关键。

7.Web开发入门/7.2.2进阶部分.md

@@ -0,0 +1,39 @@
+# 进阶部分
+
+请先通读后端基础任务文档：
+
+[基础部分](https://gw9u39xwqi.feishu.cn/wiki/wikcnpSaXuSRAHOYM7EYmx88wBg)
+
+你可以清晰地感受到，基础任务并不是一个生产可用的服务，它仅可作为一个 DEMO 用于演示。尝试为它的生产部署之路添砖加瓦！
+
+进阶的任务是开放的：在上述要求的基础上，尽可能地拓展即可，无论是功能、性能、架构、代码整洁等等方面都可
+
+下面是一些可拓展的点，可尽情发挥（不局限于这些）：
+
+- 第三方库集合 (你可以在其中尝试找到你需要的东西)
+
+## 扩展接口
+
+新增接口，或者丰富已有接口功能，让程序变得更有趣一些
+
+## 生产部署
+
+把程序运行在本地只能自娱自乐。尝试将程序部署到服务器上，让全世界都能访问你的接口。
+
+## 优化存储
+
+如果将信息全部放在结构体(内存)中，程序关闭后就将丢失已经登录的所有信息，请尝试使用“数据库”为你的服务添加永久存储的能力。
+
+## 日志
+
+在程序中恰当地输出日志十分重要，这为用户以及开发者提供了回溯错误的能力。
+
+## 配置文件
+
+每一次修改端口/密码/etc 都需要重新编译程序，使用“配置文件”让程序在启动时能够动态读入想要的内容。
+
+## 代码结构
+
+尝试对代码进行组织、分层。
+
+## ……

7.Web开发入门/7.2后端部分.md

@@ -0,0 +1,3 @@
+# 后端部分
+
+本章节内容目前主要取自杭助

7.Web开发入门/7.Web开发入门.md

@@ -0,0 +1,147 @@
+# 7.Web 开发入门
+
+> 我本来写了一大堆客套话，诸如各位“恭喜各位看到这里”、“本章节多么多么有趣、干货、面向就业”。然后全部删掉，决定采用结构化的写作方式来写。
+
+## 章节题目解释
+
+- 何为 Web：可以狭义地理解为<strong>「</strong><strong>前端</strong><strong>」+「后端」</strong>
+- 何为开发：明确产品需求，写代码，调试代码，部署项目，写项目文档，维护项目
+- 何为入门：不知道要马上学会，而是知道 Web 开发是什么，以及如何去学
+
+## 前端？后端？
+
+### <strong>行业背景</strong>
+
+前端开发和后端开发可以说是 2023 年以前，计算机学生就业最广泛的方向（当然工资也不低）
+
+- 为什么前后端就业最广泛？因为需求决定了供给。
+
+我们接触互联网，直接使用最多的是什么？——软件
+
+同样，我们可以狭义地把大部分软件开发理解为：<strong>「软件」（程序员需要做的部分）=「</strong><strong>前端</strong><strong>」+「后端」</strong>
+
+所以大部分计算机学生毕业，都是为公司的具体的业务，开发对应的手机 APP、网站、电脑软件。
+
+- 为什么说是 2023 年以前？
+
+本文写于 2023 年 4 月，2023 年以来，AI（ChatGPT、Copilot、MidJourney）正在颠覆每个领域。可能在不远的将来，大部分的前后端开发，都能通过 AI 自动生成 99% 的代码，然后人工审核、校对、修改剩下的 1%。
+
+### <strong>步入正题 - 何为前后端-通俗认识</strong>
+
+<strong>前端</strong>
+
+前端可以狭义地理解为，一个软件中看得到的部分。比如网页上的文字图片、各种花里胡哨的样式、以及交互操作。广义上来说，大家用的各种 APP、电脑上的应用程序，用户界面的部分都是前端干的活。
+
+<strong>后端</strong>
+
+相对于前端，后端当然是「看不见的部分」。
+
+为什么有前端？因为光有后端是不行的哈哈哈。
+
+举个例子，网上有很多软件都可以修改支付宝上的「余额」，如果只有 APP 表面，即前端，那不是人均黑客，人均首付？
+
+所以一个软件的关键数据，肯定不是存在用户侧（即前端）的。需要有这么一个东西，来存储数据（存储数据的地方叫数据库），来解析用户的请求，这就是后端。
+
+<strong>例子</strong>
+
+举个详细的例子，购物软件上点了下单并支付，这时候前端就会发送一个网络请求，告诉后端：<em>用户某某某，买了什么东西，价格和数量是多少，收货地址是多少。。。</em>
+
+后端收到了信息，先解析，然后修改数据库中存储的关键信息，比如新建一个订单信息，把商品的数量-1 等等，再把下单的结果告诉给前端。前端收到信息后，就会渲染页面，提示「下单成功」！
+
+### <strong>深入 - 何为前后端-技术剖析</strong>
+
+在了解了前后端的宏观概念后，我们继续来感受一下背后的技术细节吧！
+
+你可以把本段内容当成一个前后端学习的「骨架」、「全局地图」，在看后面的前后端具体技术细节时，就能通过本段把零散的知识点串起来，激活「全局地图」中的一个个模块。
+
+干讲技术细节实在太无趣了，我们直接上手实战吧！
+
+不要怕，我「实战」，你「感谢」就行！
+
+假设我们要做一个「留言板」
+
+#### 2.3.1 明确需求
+
+开发程序前（无论是自己独立开发、还是以后工作），一定要先明确需求。
+
+正式的需求定义很复杂，而且计算机有门课专门会教（《软件工程》）。
+
+我们这里就来个极简版吧：
+
+1. 最终形态是网站（用户访问 [http://message.srt.com](http://message.srt.com) 就能参与留言）。
+2. 留言的时候需要填写昵称（不需要注册）、留言内容（只支持纯文字）。
+
+#### 2.3.2 前端
+
+想知道前端需要用到什么技术，就来看看前端到底需要解决什么问题吧！
+
+1. <strong>页面渲染</strong>
+
+无论是做网页，还是做 APP 界面，都得「画」出界面。
+
+比如控制留言的字体、大小、颜色，边框、动画、特效。
+
+要在不同的软件载体上「作画」，需要不同的编程语言/技术，比如网页需要 htlm+css，安卓 APP 需要 Android（Java），IOS 软件是 Swift。
+
+<em>（拓展：还有一些技术能够做到跨平台，比如通过某种技术把浏览器包装成一个 APP，就能只出同时支持浏览器和 APP 的</em><em>前端</em><em>；比如创建新的第三方前端框架，能把程序员写的代码转换成原生的 IOS、安卓 APP）</em>
+
+1. <strong>用户交互</strong>
+
+如何实现“点击「留言」按钮，系统自动提交留言”？或者当用户点击按钮的时候，检测一下用户输入的内容是不是空。
+
+同样，为了实现交互，不同的载体需要的编程语言也是不一样的。比如网页，需要的是 JavaScript（简称 JS）。
+
+#### 2.3.3 后端
+
+我们在前端部分，已经实现了展示页面、处理提交动作。
+
+Q：但，只有前端行不行呢？
+
+A：当然不行！如果只有前端，那么 A 用户在浏览器中提交的留言，怎么才能发送到 B 的浏览器里呢？
+
+Q：可以直接把留言信息直接发送到 B 的浏览器里吗？
+
+A：理论上可以。但一般不会这么做（除了一些实时的网络聊天室可能会这么做）。想象一下，如果这么做，就需要 A 留言的时候，B 的浏览器一定是打开的，那还叫「留言」吗？以及，A 怎么知道 B 的浏览器的「网络地址」？即使上面的问题都解决了，那么 C 如果在后期加入，是不是完全看不到以前的消息了？哪怕上面的问题又都解决了，可数据都是存在用户自己的浏览器里，如何防止被篡改？（类比前面的支付宝的例子）
+
+登登登，后端登场！
+
+![](static/boxcnorsQ6py7AU0LsCtn4f5LSd.png)
+
+解释一下：
+
+1. 黑色的线条代表「留言」时发生的一系列事情，橙色的线条代表「查看留言」时发生的事情
+2. 留言：用户 1 和前端交互，把留言的信息发送给后端，后端收到消息后，解析消息，并把数据存到数据库里。然后把结果反馈给用户。
+3. 查看留言：用户 2 想查看留言的时候，向后端发起一个获取信息的请求，后端把信息从数据库拿出来，给前端，前端渲染后展示给用户。
+4. 后端只有一份，前端有 n 份（比如每个浏览器一份，每个 app 一份）
+
+#### 2.3.4 前后端交互
+
+那么前后端之间又是怎么交互的呢？
+
+无论是最古老的飞鸽传书，还是现在的打电话，传输消息都有这样几个参与的角色：
+
+1. 沟通双方
+2. 沟通介质
+3. 沟通协议
+
+如果是飞鸽传书，那么介质是鸽子，协议就是中文。
+
+如果是前后端交互，那么介质就是互联网（有线、无线、服务器），协议就相对抽象一些，比如如何把信息编码、转换成电信号等等。关键词：HTTP 协议、JSON、计算机网络。
+
+#### 2.3.5 后续
+
+其实开发一个程序，除了前面提到的明确需求、写代码，还有很多后续的步骤：
+
+1. 测试
+2. 如果程序出现了 bug，调试程序
+3. 没问题之后需要把写好的后端部署到服务器上。即放到一个互联网公网能访问的地方，给出前端地址（也就是 [http://message.srt.com](http://message.srt.com)）同时后端也要运行起来，处理后台逻辑。
+4. 写项目文档，防止后面接手的人看不懂你写的项目（甚至不写文档可能过几天你自己都看不懂了）
+5. 持续维护项目（修复 bug，开发新功能）
+
+（拓展，当你已经能独立开发简单的前后端程序后，可以尝试搜索一下 DevOps，可以让你的开发、测试、部署流程更加简单、快速、高效）
+
+## 正式踏上前后端学习之旅
+
+马上要动真格的了！
+
+请阅读后续内容。