moyin/fzu-product
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

chore: add

Browse Source
This commit is contained in:
FallenYing
2023-10-11 23:24:20 +08:00
parent d5b500e8d9
commit c810fd1647
18 changed files with 277 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
7.网络应用开发/7.1.1.3附录1：前端介绍（详细版）.md
View File

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

14
7.网络应用开发/7.1.1.4附录2：大前端开发.md
View File

@@ -2,18 +2,18 @@
这里我们讲讲前端三剑客和前端框架
如下为roadmap上前端的路线
https://roadmap.sh/frontend
如下为 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://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/
- <https://cn.vuejs.org/>
> 在官方文档学习 Vue 的过程中，强烈建议你在左上角 `API风格偏好` 中，改为组合式
- https://zh-hans.react.dev/
- <https://zh-hans.react.dev/>
> 在官方文档学习 React 的过程中，强烈建议不要在 Class 写法停留太久，要速速学习 Hook 写法

176
7.网络应用开发/7.1.1.5附录3：跨端开发.md
View File

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

2
7.网络应用开发/7.1.1前端部分.md
View File

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

86
7.网络应用开发/7.1.2.1基础部分.md
View File

@@ -7,39 +7,39 @@ Hello~这里是杭电助手技术部后端，无论基础如何，您都可以
:::
本任务将涉及以下知识：
- Go 语言（又称 Golang） 开发环境搭建、基础语法知识、Gin 框架的使用
- Go 语言（又称 Golang）开发环境搭建、基础语法知识、Gin 框架的使用
- HTTP 基础知识
- 登录系统的接口设计
- 一点点的工程基础
不需要担心，后续我们将给出充足的资料和路线，相信这些对你一定不是难题~
> 在学习初期，视频可以帮助你快速理解并踏入大门，但在学习的后期，文档&博客才拥有第一手资料和最新动态(视频就像你的教科书，更新的脚步永远跟不上技术)。<br/>在任务初期我们将给出对应的视频资料，在后期我们只给出图文资料。<br/>👏 当然，这不是强制要求：学的舒服是原则
> 在学习初期，视频可以帮助你快速理解并踏入大门，但在学习的后期，文档&博客才拥有第一手资料和最新动态 (视频就像你的教科书，更新的脚步永远跟不上技术)。<br/>在任务初期我们将给出对应的视频资料，在后期我们只给出图文资料。<br/>👏 当然，这不是强制要求：学的舒服是原则
# 👋 初识 Go 语言 (Day 1)
## 👋 初识 Go 语言 (Day 1)
> Go（又称 Golang）是 Google 开发的一种静态，强类型、编译型、并发型的编程语言。其于 2009 年 11 月正式发布，成为开源代码项目。Go 的语法接近 C 语言，但其支持垃圾回收功能，开发效率远高于 C 语言。而其对海量并发的支持，以及在运行效率，低内存消耗方面的优异表现，也有人称其为互联网时代的 C 语言。
<del>↑ 太官方了，我的评价是不如看资料(</del>
<del>↑ 太官方了，我的评价是不如看资料 (</del>
官网虽然是英文，但是非常非常的友好，近年还刚翻新过一次好看了许多，还有各种可爱的吉祥物插图。
这只吉祥物囊袋鼠的英文学名为 **Gopher**，每位热爱 Golang 的开发者都会自称 **Gopher** (就像 jvaver 一样(x)，而它的造型出于创始人之一 Rob Pike 的妻子之手。
这只吉祥物囊袋鼠的英文学名为 **Gopher**，每位热爱 Golang 的开发者都会自称 **Gopher** (就像 jvaver 一样 (x)，而它的造型出于创始人之一 Rob Pike 的妻子之手。
#### 视频资料(**P2-P3**)：
### 视频资料 (**P2-P3**)：
<Bilibili bvid='BV1zR4y1t7Wj'/>
#### 文字资料：
### 文字资料：
- Golang 官网(非常好记: go.dev(eloper))
- Golang 官网 (非常好记：go.dev(eloper))
https://go.dev/
<https://go.dev/>
- 一些第三方的前景概览
https://www.topgoer.com/
<https://www.topgoer.com/>
#### 补充资料：
### 补充资料：
- [我使用 Golang 两年后的总结：优点和令人讨厌的怪癖](https://www.infoq.cn/article/ydmrvvr1ijaaih3eh5fw) - 比较客观的开发体验
- [许式伟：我与 Go 语言的这十年](https://cloud.tencent.com/developer/article/1043859) - 七牛云 CEO、前 WPS 首席架构师、Go 语言布道师
@@ -48,9 +48,9 @@ Hello~这里是杭电助手技术部后端，无论基础如何，您都可以
对比两篇博客，可以清晰地感受到 Golang 的发展之快：曾经还在娘胎里的 Golang，现在已经在云原生、微服务、CLI 程序、DevOps、区块链等领域大杀四方。
# 😥 Golang 环境搭建 (Day1 - 2)
## 😥 Golang 环境搭建 (Day1 - 2)
Golang 是一门年轻的语言(相比 Java & JavaScript)，它没有那么多的历史包袱，所以环境搭建在一众语言中可以算得上十分容易。同时 Golang 自带了丰富的工具链，许多 Gopher 的整个职业生涯中可能都不需要用到官方工具链以外的相关工具。
Golang 是一门年轻的语言 (相比 Java & JavaScript)，它没有那么多的历史包袱，所以环境搭建在一众语言中可以算得上十分容易。同时 Golang 自带了丰富的工具链，许多 Gopher 的整个职业生涯中可能都不需要用到官方工具链以外的相关工具。
::: tip 📌
本小节还请同学们各显神通，由于不同计算机不同环境不同平台的区别，Golang 环境搭建各有区别。资料中将尽可能给出一些教程，但具体需同学们使用搜索引擎寻找最佳实践。出现问题在群内积极提问~
@@ -62,11 +62,11 @@ Golang 是一门年轻的语言(相比 Java & JavaScript)，它没有那么多
首先是万能的 VSCode
https://code.visualstudio.com/
<https://code.visualstudio.com/>
还有智能的 GoLand
https://www.jetbrains.com/go/
<https://www.jetbrains.com/go/>
喜欢折腾的同学可以选择 VSCode 作为自己的开发工具，如果想能够马上上手学习的同学，可以使用 GoLand 作为自己的开发工具
@@ -74,77 +74,75 @@ https://www.jetbrains.com/go/
GoLand 可以使用教育邮箱学生认证白嫖噢~👀
:::
#### 视频资料(**P4-P6**)：
### 视频资料 (**P4-P6**)：
<Bilibili bvid='BV1zR4y1t7Wj'/>
#### 文字资料：
### 文字资料：
- VSCode 的爹亲自教你装 Golang 环境
https://learn.microsoft.com/zh-cn/azure/developer/go/configure-visual-studio-code
<https://learn.microsoft.com/zh-cn/azure/developer/go/configure-visual-studio-code>
- 使用 GoLand 搭建
https://polarisxu.studygolang.com/posts/go/2022-dev-env/
<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 依赖管理的前世今生：[一文搞懂 Go Modules 前世今生及入门使用 - 掘金](https://juejin.cn/post/6844904166310019086)
- IDEA 系列学生认证教程 (用 GoLand 必看)：[学生邮箱白嫖 JetBrains 全家桶——保姆级教程](https://zhuanlan.zhihu.com/p/136497468)
# 😕 Golang 基础语法的学习 (Day 1-8)
## 😕 Golang 基础语法的学习 (Day 1-8)
Golang 的语法是 C/C++ 系的，在许多地方你都可以看到他们的影子，这对未来 C 的学习更有自顶向下的帮助。当然，如果你曾经用过 Java、Python，Golang 的语法你可能会不太习惯，这不会是问题~在熟悉语法后，你会发现 “Golang 一把梭” 是真实存在的 🤓。
Golang 的语法是 C/C++ 系的，在许多地方你都可以看到他们的影子，这对未来 C 的学习更有自顶向下的帮助。当然，如果你曾经用过 Java、Python，Golang 的语法你可能会不太习惯，这不会是问题~在熟悉语法后，你会发现“Golang 一把梭”是真实存在的 🤓。
**对于基础语法的学习，无需一时学习过深，也不必花费过多时间在此**。**即使半懵半懂，在多次实践后也会渐渐领悟**
本次任务并不需要用到反射、并发等高级特性(学到时可选择性暂时避开)，最深只需要用到结构体与方法的相关知识。
本次任务并不需要用到反射、并发等高级特性 (学到时可选择性暂时避开)，最深只需要用到结构体与方法的相关知识。
#### 视频资料(P9-P56 每集视频并不长，不要被吓到了喔)：
### 视频资料 (P9-P56 每集视频并不长，不要被吓到了喔)：
<Bilibili bvid='BV1zR4y1t7Wj'/>
### 文字资料：
#### 文字资料：
- 非常推荐的 Go Tour 中文版。Go Tour 是 **Go 官方为初学者打造的渐进式教程**，你可以跟随着它的步伐一点点探索 Go 语言。Go Tour 的代码都充满着它的**设计哲学与最佳实践**，是每位 Gopher 的必经之路。同时它也是**交互式的**，左侧是教程，右侧能直接敲代码，在网页上运行。
- 非常推荐的 Go Tour 中文版。Go Tour 是 **Go 官方为初学者打造的渐进式教程**，你可以跟随着它的步伐一点点探索 Go 语言 。Go Tour 的代码都充满着它的**设计哲学与最佳实践**，是每位 Gopher 的必经之路。同时它也是**交互式的**，左侧是教程，右侧能直接敲代码，在网页上运行。
https://tour.go-zh.org/welcome/1
<https://tour.go-zh.org/welcome/1>
- 短小精湛的 Golang 入门教程，是 The Little Go Book 的中文翻译
https://learnku.com/docs/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 入门指南》](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 协议学习 (Day 9-10)
如果你从未接触过协议二字，那 HTTP 协议将是你大学生涯最重要的协议之一，也是 Web 的基础。与其说是小任务的基础，我更想说这是对人类互联的探索。
HTTP 协议起草与演进之路十分坎坷，但每一步都举足轻重，在人类历史上画下了浓墨重彩的一笔。
#### 文字资料：
### 文字资料：
- 非常著名的阮一峰博客 **(他的博客可以从最早开始都过一遍，很多计算机科普可以说永不过时)**
https://www.ruanyifeng.com/blog/2016/08/http.html
<https://www.ruanyifeng.com/blog/2016/08/http.html>
- 图解系列非常有意思，最重要的是不止于介绍协议，更为你道来其历史设计的进程。本书不必在任务期间内看完，但我相信你会爱上它的。
https://book.douban.com/subject/25863515/
<https://book.douban.com/subject/25863515/>
- 经典菜鸟教程，不过有点枯燥乏味。可以用于回顾和工具书查阅。
https://www.runoob.com/http/http-intro.html
<https://www.runoob.com/http/http-intro.html>
#### 补充资料：
@@ -158,9 +156,9 @@ https://www.runoob.com/http/http-intro.html
> MDN 是一个不断发展的学习网络技术和网络软件的平台。MDN 的使命简单明了：提供一个更好的网络蓝图并赋能新一代开发者和内容创意者在此之上构建网络。
# 🎉 回到正题：小任务
## 🎉 回到正题：小任务
> 一些题外话：是的，任务期已经过去了约十天(当然优秀的你可能更快~)，但在我看来，小任务其实已经不再那么重要了。如果在以上小节中你曾感到兴奋、热情、探索的欲望，我诚挚地相信，你能在技术的道路上走的很远很远~
> 一些题外话：是的，任务期已经过去了约十天 (当然优秀的你可能更快~)，但在我看来，小任务其实已经不再那么重要了。如果在以上小节中你曾感到兴奋、热情、探索的欲望，我诚挚地相信，你能在技术的道路上走的很远很远~
用了这么长的时间铺垫了以上的基础知识，脑子肯定胀满了各种各样的东西：if for range slice interface http …… 是时候释放他们了！
@@ -168,7 +166,7 @@ https://www.runoob.com/http/http-intro.html
<del>经过了上文详细的“喂饭”小节，下面轮到同学们自己吃饭了~</del>
#### 系统概述
### 系统概述
- 使用 Gin 框架设计登录系统的接口与整体结构。
- 至少设计 `Login` `GetUser` `Logout` 三个接口，对 `GetUser` 接口鉴权。
@@ -179,7 +177,7 @@ https://www.runoob.com/http/http-intro.html
#### Gin
在 HTTP 小节中，“路由 “接口” “鉴权” “请求” “响应” 你一定或多或少地接触过， Gin 就是一群 Gopher 大神帮你解决了这些问题，它十分轻量但五脏俱全，你只需要调用几个函数就将 cover 那些复杂的问题。
在 HTTP 小节中，“路由“接口” “鉴权” “请求” “响应”你一定或多或少地接触过，Gin 就是一群 Gopher 大神帮你解决了这些问题，它十分轻量但五脏俱全，你只需要调用几个函数就将 cover 那些复杂的问题。
请运用你在第三小节中学习的 `Golang 包(依赖)管理` 正确地安装 Gin 并学习使用它。
@@ -203,7 +201,7 @@ https://www.runoob.com/http/http-intro.html
:::
- 如果你的所有代码都在一个文件里，请尝试让他变得有模块感~
- 如果你的账号密码写死(硬编码)在程序中，请尝试让它能动态变化~
- 如果你的账号密码写死 (硬编码) 在程序中，请尝试让它能动态变化~
- 发现更多有趣的 Golang 第三方库，尝试将它加入你的程序~
- 如果你能想到任何方式丰富项目功能、优化代码结构，以及想加的内容，请尽情发挥~
- ……

6
7.网络应用开发/7.1.2.2进阶部分.md
View File

@@ -14,9 +14,9 @@
- 第三方库集合 (你可以在其中尝试找到你需要的东西)
https://github.com/avelino/awesome-go
<https://github.com/avelino/awesome-go>
https://github.com/jobbole/awesome-go-cn
<https://github.com/jobbole/awesome-go-cn>
## 扩展接口
@@ -28,7 +28,7 @@ https://github.com/jobbole/awesome-go-cn
## 优化存储
如果将信息全部放在结构体(内存)中，程序关闭后就将丢失已经登录的所有信息，请尝试使用“数据库”为你的服务添加永久存储的能力。
如果将信息全部放在结构体 (内存) 中，程序关闭后就将丢失已经登录的所有信息，请尝试使用“数据库”为你的服务添加永久存储的能力。
## 日志

2
7.网络应用开发/7.1WEB开发入门.md
View File

@@ -1,7 +1,7 @@
# 7.网络应用开发入门
> 作者：aFlyBird0
>
> 我本来写了一大堆客套话，诸如各位“恭喜各位看到这里”、“本章节多么多么有趣、干货、面向就业”。然后全部删掉，决定采用结构化的写作方式来写。
## 章节题目解释

2
7.网络应用开发/7.网络应用开发入门.md
View File

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