feat(WIKI): wiki 2025 BREAKING CHANGE: Older content is categorized into older folders

2023旧版内容/7.网络应用开发/7.1WEB开发入门.md

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

2023旧版内容/7.网络应用开发/7.2.1基础(三件套).md

@@ -0,0 +1,154 @@
+# 基础(三件套)
+
+## 🔑 萌新需要知道的前置知识
+
+### 前端入门<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)
+
+[前端入门必会的初级调试技巧](https://zhuanlan.zhihu.com/p/145466139)
+
+#### JavaScript
+
+[现代 JavaScript 教程](https://zh.javascript.info/)
+
+::: warning 🎈
+**快速上手的参考建议**
+
+**HTML**可以先认知常用标签（body / div / span / a / img 等）及其常用属性
+
+**CSS**了解常见的颜色属性（字体颜色 / 背景颜色 / 边框颜色 等）、字体相关属性（字号 / 字重 / 行高 等）、盒子模型（padding / border / margin）、用于布局的属性（float / flex / grid）、单位（px / rem / em / vh / vw 等）、选择器（id 选择器 / 类选择器 等）
+
+**JS**了解基本语法（变量定义 / 判断 / 循环 / 函数定义 / etc）与 DOM 操作
+
+涉及**前后端交互**的部分可以了解 fetch 的使用
+
+其他诸如 HTML5 / CSS3 / ES6+ 的知识可以暂时跳过，<del>任务要用到再查</del>
+
+基本全部前端开发资料都可以在 [MDN](https://developer.mozilla.org/) 中找到
+
+:::
+
+### 🥂 助手介绍网页的重写
+
+设计部姐姐给了前端部一个助手介绍网页的设计稿，但是 psyq 觉得[目前的助手介绍网页](https://www.hduhelp.com/)写得不是很还原，你可以帮 psyq 重写一个更好看的网页吗？
+
+设计稿如下：
+
+![](https://cdn.xyxsw.site/boxcnVR5z4U8YlXZbc8beDNEHXc.jpg)
+
+#### 可能需要用到的图片资源
+
+![](https://cdn.xyxsw.site/boxcnbigxAK5SbxiWuDHr1Ashne.png)
+
+![](https://cdn.xyxsw.site/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
+
+![](https://cdn.xyxsw.site/boxcnikdFX5WNml7sgtPMOJQiGh.png)
+
+![](https://cdn.xyxsw.site/boxcnFZwQVTUWkfsbNxYfJkgPDg.png)
+
+<center>一些参考</center>
+
+或许你也曾是一名时间管理大师，在各种效率类 app 立下自己要做的 flag。然而现成的工具难免无法满足自己的所有需求，那么不妨来编写一个自己的 TodoList 吧~
+
+#### 基本要求
+
+- 可以对 todo 进行增删改查
+- 至少存在 **待完成**/**已完成** 两种不同的状态，Todo 应该能够在不同状态间切换。更进一步，你也可以设计一个 **进行中** 状态。
+
+#### 额外发挥
+
+- 页面刷新后数据不丢失
+
+参考实现方案：
+
+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 个人主页哦 🤔)
+
+![](https://cdn.xyxsw.site/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/javascript-es6/dist/)（[source](https://github.com/tastejs/todomvc/tree/gh-pages/examples/javascript-es6)[源码](https://github.com/tastejs/todomvc/tree/gh-pages/examples/javascript-es6)）中关于 js 实现 todolist 的方法，不过还是得亲手实践哦~

2023旧版内容/7.网络应用开发/7.2.2进阶(小项目).md

@@ -0,0 +1,102 @@
+# 进阶(小项目)
+
+::: warning 📌
+
+如果是有一定基础的同学，可以考虑采用一些辅助工具(React / Vue / jQuery 等)，样式方面也可以采用你喜欢的组件库(Antd / ElementUI / Bootstrap 等)实现。
+
+:::
+
+## 🌥 天气组件
+
+如果你曾经用过助手的小程序，你可能会在首页看到这样的天气卡片：
+
+![](https://cdn.xyxsw.site/boxcnTNJhtqw6Km24fKgAnjZtBS.png)
+
+当然了，平时大家也会用到各种天气 APP
+
+![](https://cdn.xyxsw.site/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)
+
+## 🎶 音乐播放器
+
+![](https://cdn.xyxsw.site/boxcnRaBolh8i2FkoIJW69a5g3e.png)
+
+![](https://cdn.xyxsw.site/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)

2023旧版内容/7.网络应用开发/7.2.3附录1：前端介绍（详细版）.md

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

2023旧版内容/7.网络应用开发/7.2.4附录2：大前端开发.md

@@ -0,0 +1,19 @@
+# 附录 2：大前端开发
+
+这里我们讲讲前端三剑客和前端框架
+
+如下为 roadmap 上前端的路线
+<https://roadmap.sh/frontend>
+
+- 前端三剑客
+  - <https://www.w3school.com.cn/html/html5_intro.asp>
+  - <https://www.w3school.com.cn/css/index.asp>
+  - <https://www.w3school.com.cn/js/index.asp>
+
+- 前端框架
+  - <https://cn.vuejs.org/>
+  > 在官方文档学习 Vue 的过程中，强烈建议你在左上角 `API风格偏好` 中，改为组合式
+
+  - <https://zh-hans.react.dev/>
+
+  > 在官方文档学习 React 的过程中，强烈建议不要在 Class 写法停留太久，要速速学习 Hook 写法

2023旧版内容/7.网络应用开发/7.2.5附录3：跨端开发.md

@@ -0,0 +1,327 @@
+# 附录 3：跨端开发
+
+> 人文 + 技术 + 经验
+>
+> author：少轻狂
+
+## 何为跨端：孙行者、者行孙
+
+简单来说，就是一套代码，能在多个平台上跑。
+> 孙行者，行者孙，者孙行.......者行孙，孙者行，行孙者
+
+例如，你可以编写一套前端代码，然后在 Web、HarmonyOS、OpenHarmony、Android、Ios、Macos、Linux、Windows、小程序（微信、QQ、抖音、支付宝...）上运行。
+
+## 为何跨端：三生三世皆为你
+
+随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了 越来越多的端，PC 端 (Windows、Mac) ，移动端 (安卓、iOs)、web 端、loT 设备 (车载设备、手表) 等。
+
+但是，很多互联网企业制作应用时，往往需要使应用支持多个系统，但是每个系统的应用功能也需保持一致。为此，传统做法是各端安排研发人员进行开发相同功能。这不仅造成了资源冗余、浪费，开发、维护的成本也特别高。通常情况下，开发的周期也是比较长的。
+
+新兴企业往往难以投入很多人力、资金到这部分。他们往往喜欢一个岗位干多份事情：既让你会 app 开发，又要你开发小程序，web 页面，还要让你自己干全栈。
+
+这时候，跨端就很好的解决了这方面的难题。
+
+在现代化前端发展的过程中，跨端领域也正逐渐火热。
+
+就比方说，现如今，桌面端 QQ 已经全面基于前端跨端方式开发，例如 MacOS QQ、Linux QQ、Win QQ（还在内测）。
+
+我们市场上也能看到很多耳熟能详的应用他们都是基于前端跨端开发的：Steam 桌面版、钉钉、VsCode 等。
+
+## 优点
+
+1. 研发效率高：学习成本低、多端一致性高
+2. 用户体验好：稳定性好、性能体验好
+3. 动态化：支持动态化下发，满足日益增长的业务需求
+
+## 如何跨端：港通天下
+
+跨端其实不是一个新兴的名词。跨端又称跨平台。这其实很多语言都非常崇拜跨平台概念，原生支持跨平台。例如 JAVA 语言，它不仅可以开发安卓应用、其他操作系统的应用都可以开发。例如微软的.NET，为跨平台而生。
+
+那么，前端如何实现的跨端呢？
+
+当你问这个问题的时候，是否注意到一件事：web 前端原本就是跨平台的，跨端的。我们编写一套前端网页的代码，然后这个网页就能够通过手机各种系统、电脑各种系统通过浏览器访问。这不就已经跨平台、跨端了嘛？
+
+是不是很奇妙？欸，这时候又有小伙伴要问了：那既然已经实现了跨端，那下面的内容不就没啥用了吗，我们为啥要学跨端呢？
+
+其实不然。浏览器在移动设备上岂能和 App 相比。对于企业来说，一个 App 相比于网站，更能让用户产生粘性，留住用户，提高市场占有率。这就像移动端的哔哩哔哩，硬是要你用他家的 App，否则就没有优秀的体验可言。
+
+废话不多说，来看看主要技术方案。
+
+## 方案简述
+
+如果，让你思考如何让 web 代码支持跨平台，你会怎么做呢？
+
+以下是简单的思路：
+
+1. 各个平台的容器能够运行这一套 web 代码。
+2. web 代码编译成各个平台能使用的代码，然后再编译成相应软件。
+3. ...
+
+现有的技术方案如下：
+
+| 技术方案     | 视图层           | 优点                                                                  | 缺点                                                 | 实践                             |
+| ------------ | ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------- | -------------------------------- |
+| hybrid 方案   | webview          | 1. 开发成本低<br />2. CSS 全集<br />3. 一致性好<br />4. 生态最好<br /> | 1. 性能中等<br >                                     | 1. 浏览器<br />2. Electron<br /> |
+| 原生渲染方案 | 原生组件         | 1. 性能好<br />                                                       | 1. CSS 子集<br />2. 一致性一般<br />                  | 1. React Native<br />            |
+| 自渲染方案   | Skia             | 1. 性能最好<br />2. 一致性最好<br />                                  | 1. CSS 子集<br />2. 开发成本高<br />3. 生态一般<br /> | 1. Flutter<br />                 |
+| 小程序方案   | webview+ 原生组件 | 1. 开发成本低<br />2. CSS 全集<br />3. 一致性好<br />                  | 1. 生态一般<br />                                    | 1. 微信小程序<br />              |
+
+### Hybrid 方案
+
+简单理解，就是浏览器套壳。
+
+它是基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用。
+
+![](https://cdn.xyxsw.site/235436487dsfhtwuytjyfj.png)
+
+WebView 容器的工作原理是基于 Web 技术来实现界面和功能，通过将原生的接口封装、暴露给 JavaScript 调用，JavaScript 编写的页面可以运行在系统自带的 WebView 中。这样做的优势是，对于前端开发者比较友好，可以很快地实现页面跨端，同时保留调用**原生的能力**，通过搭建桥接层和原生能力打通。但这种设计，跨端的能力受限于桥接层，当调用之前没有的原生能力时，就需要增加桥。另外，浏览器内核的渲染独立于系统组件，无法保证原生体验，**渲染的效果会差不少**。
+
+#### 浏览器
+
+浏览器就是一种历史悠久的跨平台方案。
+
+网页跨平台不意味着浏览器也是跨平台的，浏览器的可执行文件还是每个平台单独开发和编译的，但是他们支持的网页解析逻辑一样，这样上面跑的网页就是跨平台的。
+
+浏览器提供了一个容器，屏蔽了底层差异，提供了统一的 api（dom api），这样就可以实现同一份代码跑在不同平台的统一的容器里。这个容器叫做浏览器引擎，由 js 引擎、渲染引擎等构成。
+
+![](https://cdn.xyxsw.site/fdegetyjyrj.png)
+
+#### PWA
+
+尽管 PWA 的出现不是为了“跨端”，但他们对于“跨端”的天然支持，能够让一套代码运行在 PC、移动两端，就再一次产生了跨端设计实施的可能性。
+> 小程序的“鼻祖“，但如今在国内已消亡。
+
+PWA（Progressive Web App）是一个基于 web 技术构建的应用，并具备了像原生应用一样的体验、性能以及功能。它通过使用 Service Worker 缓存静态资源实现离线可访问，提高网页加载速度并且通过添加到主屏幕来给用户带来更好的体验。
+
+PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。
+
+纵观现有 Web 应用与原生应用的对比差距，如**离线缓存、沉浸式体验**等等，可以通过已经实现的 Web 技术去弥补这些差距，最终达到与原生应用相近的用户体验效果。
+
+**PWA=WEB 网页 + 离线缓存 + 消息推送**
+
+> 在 2017 年 7 月 5 日“百度 AI 开发者大会”（Baidu Create2017）——Web 生态分论坛上，百度开发者介绍了百度 Lavas 解决方案，帮助开发者快速搭建 PWA 应用。
+> lavas 不是一个框架，而是一个基于 vue 的 PWA 解决方案，通过 lavas 导出的模板帮助开发者解决了接入 PWA 过程中遇到的问题：
+>
+> - Service Worker 生成
+> - Service Worker 更新，以及 sw 更新后的操作
+> - App Skeleton，页面渲染完成之前的页面框架
+> - 页面切换前进后退过渡动画
+> - App Shell，集成了 vuetify 组件库
+> - 主题切换
+> - vue 的图标解决方案...
+
+而现在 lavas 官网已经无法访问，这在很大程度上可以反应 PWA 在国内业务的一个现状。
+
+#### Electron
+
+![](https://cdn.xyxsw.site/wettrjryju.png)
+
+Electron 是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序的框架，可构建出兼容 Mac、Windows 和 Linux 三个平台的应用程序。
+
+Electron 的跨端原理并不难理解：它通过集成浏览器内核，使用前端的技术来实现不同平台下的渲染，并结合了 Chromium、Node.js 和用于调用系统本地功能的 API 三大板块。
+
+- Chromium 为 Electron 提供强大的 UI 渲染能力，由于 Chromium 本身跨平台，因此无需考虑代码的兼容性。最重要的是，可以使用前端三板斧进行 Electron 开发。
+- Chromium 并不具备原生 GUI 的操作能力，因此 Electron 内部集成 Node.js，编写 UI 的同时也能够调用操作系统的底层 API，例如 path、fs、crypto 等模块。
+- Native API 为 Electron 提供原生系统的 GUI 支持，借此 Electron 可以调用原生应用程序接口。
+
+### 原生渲染方案
+
+使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面。例如，在 Android 开发中是使用 Kotin 或 Java 来编写视图;在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。
+
+#### React Native
+
+React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。
+
+![](https://cdn.xyxsw.site/eryyjyuj.png)
+
+React Native 的思路是最大化地复用前端的生态和 Native 的生态，和 WebView 容器的最大区别在于 View 的渲染体系。React Native 抛弃了低效的浏览器内核渲染，转而**使用自己的 DSL 生成中间格式**，然后映射到对应的平台，**渲染成平台的组件**。相对 WebView 容器，体验会有一定的提升。不过，渲染时需要 JavaScript 和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在 Native 层，要求开发人员对 Native 有一定的熟悉度。
+
+### 自渲染方案
+
+简单来说，就是既不使用 webview 又不使用原生组件，而是使用自绘组件。
+
+#### Flutter
+
+flutter 是近些年流行的跨端方案，跨的端包括安卓、ios、web 等。它最大的特点是渲染不是基于操作系统的组件，而是直接基于绘图库（skia）来绘制的，这样做到了渲染的跨端。
+
+Flutter 与上述 Recat Native、WebView 容器本质上都是不同的，它没有使用 WebView、JavaScript 解释器或者系统平台自带的原生控件，而是有一套自己专属的 Widget，底层渲染使用自身的高性能 C/C++ 引擎自绘。
+
+### 小程序方案
+
+使用小程序 DSL + JS 开发，通过中间层桥接后调用原生能力，使用 webview 来渲染 UI 界面。
+
+从小程序的定位来讲，它就不可能用纯原生技术来进行开发，因为那样它的编译以及发版都得跟随微信，所以需要像 Web 技术那样，有一份随时可更新的资源包放在远程，通过下载到本地，动态执行后即可渲染出界面。
+
+但如果用纯 web 技术来开发的话，会有一个很致命的缺点那就是在 Web 技术中，UI 渲染跟 JavaScript 的脚本执行都在一个单线程中执行，这就容易导致一些逻辑任务抢占 UI 渲染的资源，这也就跟设计之初要求的快相违背了。
+
+因此微信小程序选择了 Hybrid 技术，界面主要由成熟的 Web 技术渲染，辅之以大量的接口提供丰富的客户端原生能力。同时，每个小程序页面都是用不同的 WebView 去渲染，这样可以提供更好的交互体验，更贴近原生体验，也避免了单个 WebView 的任务过于繁重。
+
+微信小程序是以 webview 渲染为主，原生渲染为辅的混合渲染方式。
+
+小程序的架构模型有别与传统 web 单线程架构，小程序为双线程架构。
+
+微信小程序的渲染层与逻辑层分别由两个线程管理，渲染层的界面使用 webview 进行渲染；逻辑层采用 JSCore 运行 JavaScript 代码。
+
+![](https://cdn.xyxsw.site/rtjyujyu.png)
+
+## 类前端开发：拿过来吧你
+
+现代的客户端开发平台继承和发扬了 Web 的 HTML 语言的方式来构建表现层开发平台，其中有代表性的是 XAML，Flex，JavaFX，Android 几个平台。他们都使用基于 XML 的描述性语言作为开发语言，并且提供可视化的开发环境，使用一种强类型的程序设计语言作为背后支撑。完成表现层开发工作的前端开发人员只需要熟练掌握表现层开发语言极其机制，熟练使用表现层开发工具，少量掌握背后的程序设计语言就可以很好地完成表现层开发工作。主要原因是基于 XMl 的方式设计 UI，可以使得视图层和逻辑层进行一个分离，更清晰、更灵活。XML 可以进行一个可视化开发，门槛低，易上手。
+
+因此，有许多语言都采用类前端的方式进行视图层的开发，然后其他语言进行逻辑层的开发。
+
+## .NET
+
+微软的.NET 就是基于 XAML 开发视图层，支持可视化开发（低代码）。
+
+## 鸿蒙 ArkTs
+
+基于 JS 扩展的类 Web 开发范式的方舟开发框架包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）、平台适配层（Porting Layer）
+
+JS UI 框架采用类 HTML 和 CSS Web 编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持 ECMAScript 规范的 JavaScript 语言。JS UI 框架提供的类 Web 编程范式，可以让开发者避免编写 UI 状态切换的代码，视图配置信息更加直观。
+
+![](https://cdn.xyxsw.site/3465ytyjyjy.png)
+
+## 跨端不只是跨端：爱你的全世界
+
+## 什么样的场景可以跨端？
+
+跨端应用能够真正推进下去，除了有技术保障外，还需要合适的需求场景，使用 PC 端的功能型产品主要是需要大屏带来的“效率”（办公、个人管理、教育）与“沉浸”（数据、金融、游戏、影视）体验。
+
+![](https://cdn.xyxsw.site/ertehry.png)
+
+![](https://cdn.xyxsw.site/ertjyunyunm.png)
+
+依赖 PC、移动双端进行经营管理的电商场景，也有很多内容适合跨端。
+
+## 跨端 UI 如何设计
+
+跨端的 UI 设计不仅仅是响应式，布局没问题就行，而是从 PC 端“网页”到移动端“App”的体验映射。
+
+1. 双端基础组件设计规则对齐（对前端来说是同类组件 API、属性对齐以及组件功能形态映射）
+
+![](https://cdn.xyxsw.site/ewttrhjy.png)
+
+Select 对应 Picker
+
+1. 布局响应规则（行列变化，聚合变化等）；
+
+![](https://cdn.xyxsw.site/20191118PGkkRz.jpg)
+
+卡片布局的一种聚合变化
+
+1. 交互形态响应规则（导航、交互模式等）;
+
+![](https://cdn.xyxsw.site/20191118aoefIO.jpg)
+
+表单型弹窗对应新页面
+
+1. 不同场景的跨端策略，例如 Dashboard 页面的跨端应保证用户在首屏快速获取关键信息，下图的 Bootstrap 模板是一个错误示例，移动端的布局方式浪费首屏空间，降低用户获取关键信息的效率。
+
+![](https://cdn.xyxsw.site/20191118BrYZzg.jpg)
+
+Mobile first 不是唯一准则。进行具体场景的跨端设计时，我们会从两端场景出发重新对比分析用户的需求差异，明确体验的增强点与折损点。特别是电商中后台场景中：有些业务中用户的主阵地并不是在移动端，而是 PC 端，比如用户运营策略的设置；有些是两端分别承载不同的场景需求，比如任务的处理。
+
+## 高效开发++：人的生命是有限的
+
+## 前后端不分离
+
+当我们开始进行跨端开发的时候，我们会遇到一个很尴尬的问题。比如，我们要开发一个客户端或者说 APP，利用前端跨端技术开发。此时，我们不得不既要开发前端，又要涉及后端的部分内容。例如，获取相关数据之类的。此时，我们使用前后端分离的方式，在某些情境下就有可能不妥。尤其是仅个人开发，已经有代码洁癖，又要前后端分离，那显然是一种不明智的开发方式。所以，很多情况下，进行一个前后端不分离的方式开发前后端，或许是一个好的方法。
+
+## Serveless
+
+简而言之，就是**云函数（分布式）+ 云数据库（分布式）**。
+
+Serverless 字面意思是无服务，但并不代表再也不需要服务器了，而是指开发者不需要过多的考虑服务器的问题，计算资源作为服务出现而不是服务器的概念出现。那么 Serverlss，是对全部底层资源和操作的封装，让开发者专注于业务逻辑。
+
+![](https://cdn.xyxsw.site/gfhuewgfuiwe.png)
+
+Serverless = Faas (Function as a service) + Baas (Backend as a service)
+
+FaaS（Function-as-a-Service）是服务商提供一个平台、提供给用户开发、运行管理这些函数的功能，而无需搭建和维护基础框架，是一种事件驱动由消息触发的函数服务
+
+BaaS（Backend-as-a-Service）后端即服务，包含了后端服务组件，它是基于 API 的第三方服务，用于实现应用程序中的核心功能，包含常用的数据库、对象存储、消息队列、日志服务等等。
+
+### 适用场景
+
+Serverless 带来的其实是前端研发模式上的颠覆。相对以往纯前端研发的方式，Serverless 屏蔽底层基础设施的复杂度，后台能力通过 FaaS 平台化，我们不再需要关注运维、部署的细节，开发难度得到了简化，前端开发群体的边界就得以拓宽，能够参与到业务逻辑的开发当中，更加贴近和理解业务，做更有价值的输出。
+
+- 场景 1: 负载有波峰波谷
+
+波峰波谷时，机器资源要按照峰值需求预，比如医院挂号这需求，假设在每天 10 点放号预约，那 10 点就会有峰值的出现，为了这个峰值并发的考虑，准备了相对应性能（固定）的服务器，然而在波谷时机器利用率又明显下降，不能进行资源复用导致浪费，而 serverless 不用为了波峰去做准备，不用留住水位，支持弹性缩扩容，在你高峰时再在进行动态扩容
+
+- 场景 2: 定时任务（报表统计等）
+
+服务空闲时间来处理批量数据，来生成数据报表，通过 Serverless 方式，不用额外购买利用率并不高的处理资源，比如每日的凌晨，分析前一天收集的数据并生成报告
+
+- 场景 3: 小程序开发（云开发）
+
+比如微信小程序开发 m 在实际开发中，如果我们不用云开发的 openid 获取流程，而用传统的方式，你就知道 openid 的获取是非常繁琐的一个过程，前端需要通过 wx.login 获取一个 code 值（具有时效性）再通过 code 值去后台用 appsecret 去调取 openid。
+
+### 特点
+
+#### 事件驱动
+
+- 云函数由事件驱动，即事件触发函数
+- Serverless 应用不会类似于原生的[监听 - 处理] 类型的应用一直在线，而是按需启动
+- 事件的定义可以很丰富，一次 http 请求，一个文件上传，一次数据库记录修改，一条消息发送等等都可以被定义为事件
+
+#### 单事件处理
+
+- 触发启动的一个云函数实例，一次只处理一个事件
+- 无需在代码内考虑高并发高可靠性，可以专注于业务
+- 通过云函数实例的高并发能力，实现业务高并发
+
+![](https://cdn.xyxsw.site/fhuieufsiofhei.png)
+
+#### 自动弹性压缩
+
+- 由于云函数事件驱动及单事件处理的特性，云函数通过自动的伸缩来支持业务的高并发
+- 针对业务的实际事件或请求数，云函数自动弹性合适的处理实例来承载实际业务量
+- 在没有事件或请求时，无运行实例，不占用资源
+
+#### 无状态开发
+
+- 云函数运行时根据业务弹性，可能伸缩到 0，无法在运行环境中保存状态数据
+- 分布式开发中，均需要保持应用的无状态，以便以水平伸缩
+- 可以利用外部服务、产品，例如数据库或缓存，实现状态数据的保存
+
+## 理论结束 现在进入实践教学
+
+## uniapp 实战
+
+uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
+
+开发者按 uni-app 规范编写代码，由编译器将开发者的代码编译生成每个平台支持的特有代码：
+
+- 在 web 平台，将.vue 文件编译为 js 代码。与普通的 vue cli 项目类似
+- 在微信小程序平台，编译器将.vue 文件拆分生成 wxml、wxss、js 等代码
+- 在 app 平台，将.vue 文件编译为 js 代码。进一步，如果涉及 uts 代码：
+- 在 Android 平台，将.uts 文件编译为 kotlin 代码
+- 在 iOS 平台，将.uts 文件编译为 swift 代码
+
+![](https://cdn.xyxsw.site/uni-function-diagram.png)
+
+1. 区分页面和组件的区别：页面和组件的生命周期
+2. 云函数、云数据库
+3. 设计稿转代码（[https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4](https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4)）
+
+## vitesse-lite-py 实战
+
+[https://github.com/MarleneJiang/vitesse-lite-py](https://github.com/MarleneJiang/vitesse-lite-py)
+
+1. 域间通信
+2. laf 云函数
+3. 设计稿转代码（[https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4](https://ide.code.fun/projects/619b7f3804575d001169ac66/pages/6442c187b98f5d001164a6a4)）
+
+## Electron 实战
+
+1. Frameless：桌面端不仅仅只有方框矩形，而是想你所想。
+
+![](https://cdn.xyxsw.site/df77f01037fc4ceb8d4aa8f06168fc95~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif)
+
+## 参考作业
+
+尝试使用某种跨端框架和云函数，实现一个查看课表应用，形式不限。推荐使用 hdu-lis 包拿到数据。
+
+![](https://cdn.xyxsw.site/Snipaste_2023-04-22_18-57-44.png)

2023旧版内容/7.网络应用开发/7.2前端部分.md

@@ -0,0 +1,3 @@
+# 前端部分
+
+本章节内容目前主要取自杭助面试小任务，后续会逐步完善。

2023旧版内容/7.网络应用开发/7.3.1基础部分.md

@@ -0,0 +1,209 @@
+# 基础部分
+
+作者：[iyear](https://github.com/iyear) 、后端的小伙伴们
+
+::: tip 🎇
+Hello~这里是杭电助手技术部后端，无论基础如何，您都可以跟随着这篇文章的指引，使用 Golang 开发一个基于 Web 的简易登录系统后端部分。
+:::
+本任务将涉及以下知识：
+
+- Go 语言（又称 Golang）开发环境搭建、基础语法知识、Gin 框架的使用
+- HTTP 基础知识
+- 登录系统的接口设计
+- 一点点的工程基础
+
+不需要担心，后续我们将给出充足的资料和路线，相信这些对你一定不是难题~
+
+> 在学习初期，视频可以帮助你快速理解并踏入大门，但在学习的后期，文档&博客才拥有第一手资料和最新动态 (视频就像你的教科书，更新的脚步永远跟不上技术)。<br/>在任务初期我们将给出对应的视频资料，在后期我们只给出图文资料。<br/>👏 当然，这不是强制要求：学的舒服是原则
+
+## 👋 初识 Go 语言 (Day 1)
+
+> Go（又称 Golang）是 Google 开发的一种静态，强类型、编译型、并发型的编程语言。其于 2009 年 11 月正式发布，成为开源代码项目。Go 的语法接近 C 语言，但其支持垃圾回收功能，开发效率远高于 C 语言。而其对海量并发的支持，以及在运行效率，低内存消耗方面的优异表现，也有人称其为互联网时代的 C 语言。
+
+<del>↑ 太官方了，我的评价是不如看资料 (</del>
+
+官网虽然是英文，但是非常非常的友好，近年还刚翻新过一次好看了许多，还有各种可爱的吉祥物插图。
+
+这只吉祥物囊袋鼠的英文学名为 **Gopher**，每位热爱 Golang 的开发者都会自称 **Gopher** (就像 jvaver 一样 (x)，而它的造型出于创始人之一 Rob Pike 的妻子之手。
+
+### 视频资料 (**P2-P3**)：
+
+<Bilibili bvid='BV1zR4y1t7Wj'/>
+
+### 文字资料：
+
+- Golang 官网 (非常好记：go.dev(eloper))
+  
+  <https://go.dev/>
+- 一些第三方的前景概览
+  
+  <https://www.topgoer.com/>
+
+### 补充资料：
+
+- [我使用 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 的整个职业生涯中可能都不需要用到官方工具链以外的相关工具。
+
+::: tip 📌
+本小节还请同学们各显神通，由于不同计算机不同环境不同平台的区别，Golang 环境搭建各有区别。资料中将尽可能给出一些教程，但具体需同学们使用搜索引擎寻找最佳实践。出现问题在群内积极提问~
+:::
+
+对于 IDE 的选择：
+
+在这里推荐两个比较流行的 IDE
+
+首先是万能的 VSCode
+
+<https://code.visualstudio.com/>
+
+还有智能的 GoLand
+
+<https://www.jetbrains.com/go/>
+
+喜欢折腾的同学可以选择 VSCode 作为自己的开发工具，如果想能够马上上手学习的同学，可以使用 GoLand 作为自己的开发工具
+
+::: tip 🤭
+GoLand 可以使用教育邮箱学生认证白嫖噢~👀
+:::
+
+### 视频资料 (**P4-P6**)：
+
+<Bilibili bvid='BV1zR4y1t7Wj'/>
+
+### 文字资料：
+
+- VSCode 的爹亲自教你装 Golang 环境
+
+<https://learn.microsoft.com/zh-cn/azure/developer/go/configure-visual-studio-code>
+
+- 使用 GoLand 搭建
+
+<https://polarisxu.studygolang.com/posts/go/2022-dev-env/>
+
+### 补充资料
+
+> 这些文章只是帮助你理解的更透彻，看不懂完全没关系。甚至你完全可以跳过他们，在任务结束后再来看看，或许你会有更多收获。
+
+- 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 一把梭”是真实存在的 🤓。
+
+**对于基础语法的学习，无需一时学习过深，也不必花费过多时间在此**。**即使半懵半懂，在多次实践后也会渐渐领悟**
+
+本次任务并不需要用到反射、并发等高级特性 (学到时可选择性暂时避开)，最深只需要用到结构体与方法的相关知识。
+
+### 视频资料 (P9-P56 每集视频并不长，不要被吓到了喔)：
+
+<Bilibili bvid='BV1zR4y1t7Wj'/>
+
+### 文字资料：
+
+- 非常推荐的 Go Tour 中文版。Go Tour 是 **Go 官方为初学者打造的渐进式教程**，你可以跟随着它的步伐一点点探索 Go 语言。Go Tour 的代码都充满着它的**设计哲学与最佳实践**，是每位 Gopher 的必经之路。同时它也是**交互式的**，左侧是教程，右侧能直接敲代码，在网页上运行。
+
+<https://tour.go-zh.org/welcome/1>
+
+- 短小精湛的 Golang 入门教程，是 The Little Go Book 的中文翻译
+
+<https://learnku.com/docs/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 语言圣经》 - 《The Go Programming》的中文版，是官方书籍。内容相当老，但包含着 Golang 的设计哲学与建设初期的思考和路线。
+
+## 🎯 HTTP 协议学习 (Day 9-10)
+
+如果你从未接触过协议二字，那 HTTP 协议将是你大学生涯最重要的协议之一，也是 Web 的基础。与其说是小任务的基础，我更想说这是对人类互联的探索。
+
+HTTP 协议起草与演进之路十分坎坷，但每一步都举足轻重，在人类历史上画下了浓墨重彩的一笔。
+
+### 文字资料：
+
+- 非常著名的阮一峰博客 **(他的博客可以从最早开始都过一遍，很多计算机科普可以说永不过时)**
+
+<https://www.ruanyifeng.com/blog/2016/08/http.html>
+
+- 图解系列非常有意思，最重要的是不止于介绍协议，更为你道来其历史设计的进程。本书不必在任务期间内看完，但我相信你会爱上它的。
+
+<https://book.douban.com/subject/25863515/>
+
+- 经典菜鸟教程，不过有点枯燥乏味。可以用于回顾和工具书查阅。
+
+<https://www.runoob.com/http/http-intro.html>
+
+#### 补充资料：
+
+- [《互联网时代》纪录片](https://www.bilibili.com/video/BV1uE411o7UW/) - 与 HTTP 没什么关系，但给当时的我带来极大的震撼和触动。互联网是人类连接的重要一步，是对人类自由、平等、互通之理念长达半个世纪的深刻贯彻。
+
+<Bilibili bvid='BV1uE411o7UW'/>
+
+> 原本稀薄的得以聚合，曾经蜷曲的得以伸展，容易被忽略的得以显现，可能被排斥的获得接纳：孤独的不再孤独，卑微的不再卑微，每一个生命绽放的声音，从来没有像这样韵味深长。
+
+- [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 并学习使用它。
+
+**相关资料**：
+
+- [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/))
+
+::: danger 🔔
+发挥你的想象，让你的服务变得更加可靠、有趣、优雅~
+:::
+
+- 如果你的所有代码都在一个文件里，请尝试让他变得有模块感~
+- 如果你的账号密码写死 (硬编码) 在程序中，请尝试让它能动态变化~
+- 发现更多有趣的 Golang 第三方库，尝试将它加入你的程序~
+- 如果你能想到任何方式丰富项目功能、优化代码结构，以及想加的内容，请尽情发挥~
+- ……
+
+不卷大家啦，发挥你的想象吧，想法是编写程序的关键。

2023旧版内容/7.网络应用开发/7.3.2进阶部分.md

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

2023旧版内容/7.网络应用开发/7.3后端部分.md

@@ -0,0 +1,3 @@
+# 后端部分
+
+本章节内容目前主要取自杭助面试小任务，后续会逐步完善。

2023旧版内容/7.网络应用开发/7.网络应用开发入门.md

@@ -0,0 +1,3 @@
+# 7.网络应用开发入门
+
+本章节原本的名字是「WEB 开发入门」，后来发现这个标题涵盖的范围还是小了点。因为网络应用开发不仅仅涉及到前端的网页设计和开发、后端数据库操作等方面，还包括云原生的应用部署和管理等等一系列相关知识。因此，我们拓展了这一章节的内容，以便读者可以全面了解网络应用开发的各个方面。