Merge pull request #66 from soMewheRetoFloat/master

对爬虫和react部分进行添加

Author: UbeCc

docs/backend/crawler/crawler.md

@@ -3,9 +3,10 @@
 
 ??? info "前置知识"
 
-    我们期待您已经了解并掌握了 Python 的基础语法以及 Web 相关知识，如果您对此有任何疑问，可以参考：
+    我们期待您已经了解并掌握了 Python/JavaScript 的基础语法以及 Web 相关知识，如果您对此有任何疑问，可以参考：
 
     - [科协技能引导文档 Python 部分](https://docs.net9.org/languages/python/)
+    - [科协技能引导文档 JavaScript 部分](https://docs.net9.org/languages/javascript/)
     - [科协技能引导文档 Web 部分](https://docs.net9.org/basic/web/)
 
     此外，我们还提供了一些 HTTP 相关知识以供参考：
@@ -17,7 +18,7 @@
 
     如果您在阅读本文档时遇到了任何困难或疑问，欢迎在下方评论区提问讨论。当然，您也可以查询相关官方文档或者选择尝试向 ChatGPT 提问。
 
-??? info "环境配置"
+??? info "Python 相关库"
 
     我们建议您使用 3.10 版本的 Python，您可以通过 pip 包管理工具来安装本文档所需库。如果您此前没有接触过 pip，您可以通过阅读 [Python 包管理](https://docs.net9.org/languages/python/pip/) 这篇文章来进行学习。以下是本文档所需的库：
 
@@ -33,9 +34,11 @@
     scrapy
     ```
 
-!!! warning
+!!! warning "读前须知与叠甲"
 
-    由于本文档所涉及到的所有 Python 库以及所有网页目前仍在不断更新迭代，它们的各项规范以及组织结构可能因时而异，因此**本文档**中的**所有**示例文件、代码和图片仅对笔者机器在当前时间节点（2024年1月）的结果负责。我们相信，根据本文档的教学，在发现本地运行结果与本文档不同时，您有能力辨别正误并对本文档中的示例进行更正。我们也格外欢迎您在评论区及时反馈由于上述更新所带来的问题。
+    1. 我们建议您先进行配置好环境再进行库使用和实战练习等模块的阅读。一个基础的环境配置方案可以参考 [此仓库](https://github.com/UbeCc/sast-2024-crawler)。
+    2. 本文中实战样例的编程语言为 Python，如想获取 JavaScript 的爬虫 demo，同样可参考上述仓库。
+    3. 由于本文档所涉及到的所有库以及所有网页目前仍在不断更新迭代，它们的各项规范以及组织结构可能因时而异，因此**本文档**中的**所有**示例文件、代码和图片仅对笔者机器在当前时间节点（2025年2月）的结果负责。我们相信，根据本文档的教学，在发现本地运行结果与本文档不同时，您有能力辨别正误并对本文档中的示例进行更正。我们也格外欢迎您在评论区及时反馈由于上述更新所带来的问题。
 
 ## 环境配置
 
@@ -55,7 +58,7 @@
 
     在接收到您的请求后，服务器会传回一个 HTML 文件以及一些其他附属文件，最后在浏览器中展现为您现在所阅读的文档。
 
-爬虫是一种可以模拟网页浏览器向网站**发送**并**处理**请求的自动化脚本，帮助我们获得服务器的数据，进而用于其他需求。借助于爬虫，理论上我们可以依照需求处理一切与网络请求有关的内容，比如实现某某网站的抢票、实现某某网站音视频及文字的批量获取。
+爬虫是一种可以**模拟网页浏览器**向网站**发送**并**处理**请求的自动化脚本，帮助我们获得服务器的数据，进而用于其他需求。借助于爬虫，理论上我们可以依照需求处理一切与网络请求有关的内容，比如实现某某网站的抢票、实现某某网站音视频及文字的批量获取。
 
 ## 爬前须知
 
@@ -81,7 +84,7 @@
     - 当您在高考成绩查询网站上准时查询时。
     - 双十一午夜十二点，当您在某网购平台上下单时。
     - 周四下午一点，当您在“新清华学堂”公众号上抢 40 元前排学生票时。
-    - 二字班科协迎新会上，当您没搞懂如何抢答，于是反复提交答案导致服务器被干爆时。
+    - 二字班科协迎新会上，当您没搞懂如何抢答，于是反复提交答案导致抢答算法时间复杂度过高的服务器被干爆时。
 
 如果服务器处理请求的能力较差，短时间内的大量请求可能导致服务器瘫痪，对服务提供者造成经济损失。故意攻击服务器的行为是违反相关法律法规的，我们要时刻避免这种现象的发生。
 
@@ -1040,13 +1043,15 @@ Disallow: /
 
 除了本文档之外，您还可以参考：
 
+- [2024年计算机系科协暑培 爬虫讲义](https://summer24.net9.org/backend/crawler/slide.pdf) 以及 [课程回放](https://www.bilibili.com/video/BV1cb421J7u9/?vd_source=a80492aa87f464b5346dca18c3a9e9b3)。
 - [2023年计算机系科协暑培 爬虫部分](https://summer23.net9.org/backend/crawler/) 以及 [课程回放](https://www.bilibili.com/video/BV1fP41147wS?vd_source=6c45737266d4ed9f41c3a60d96161fdd)。
 - [2021年计算机系科协暑培](https://www.xuetangx.com/course/THUSAST08091234567890/8571842?channel=i.area.manual_search) （请在学堂在线上加入学习）。
 - 赵晨阳学长组织编写的为一字班同学提供的 [Python 小学期预习材料](https://github.com/zhaochenyang20/Sino-Japanese-Relations-analysis)。
 - [Python requests 库官方文档](https://requests.readthedocs.io/en/latest/)
 - [Python selenium 库官方文档](https://selenium-python.readthedocs.io/)
 - [Python BeautifulSoup4 库官方文档](https://www.crummy.com/software/BeautifulSoup/bs4/doc/)
 - [Python scrapy 库官方文档](https://docs.scrapy.org/en/latest/)
+- [Node.js 官方网站](https://nodejs.cn/)
 - [Postman 官方网站](https://www.postman.com/)
 
 ??? note "写给计算机系大一同学"

docs/frontend/react/basic.md

@@ -18,9 +18,9 @@ class App extends React.Component {
 
 每一个类组件都是 `React.Component` 类的子类，其中我们需要重载 `render` 函数以定义这个组件在屏幕上的展示方式（用户界面）。`render` 函数的返回值为使用标签语法编写的 `ReactElement`。比如说上述 `App` 组件就返回了一句问候语，这就代表 `App` 组件在实例化的时候会渲染出这一句问候语。
 
-!!! note "JSX 语法拓展"
+!!! note "语法拓展"
 
-    React 对 JavaScript 语言作了一定的语法拓展，拓展后的 JavaScript 称为 JSX。JSX 和原生 JavaScript 的最大差别就是引入了标签语法：
+    React 对 JS/TS 语言作了一定的语法拓展，拓展后的 JS/TS 称为 JSX/TSX，最大差别就是引入了标签语法：
 
     ```javascript
     const p = <p>Hello world!</p>;
@@ -36,7 +36,7 @@ class App extends React.Component {
     );
     ```
 
-    JSX 的标签对象中允许嵌入 JavaScript 表达式，其会运算出其值后转为字符串嵌入：
+    标签对象中允许嵌入 JS/TS 表达式，其会运算出其值后转为字符串嵌入：
 
     ```javascript
     const name = "Adam";
@@ -45,9 +45,13 @@ class App extends React.Component {
 
     转化为字符串的目的是防止 XSS 攻击。
 
-    此外，JSX 的标签语法和 HTML 类似，允许定义各种属性，这些特性以后会讲到。
+JSX/TSX 的标签语法和 HTML 类似，允许定义各种属性，这些特性以后会讲到。本文档基于 TSX 语言。
 
-    另外，本文档基于 TypeScript 的标签化拓展 TSX 语言，其标签语法基本和 JSX 一致。
+!!! warning "TSX 的限制"
+    在 TSX 中，只能在以下两种场景中使用大括号：
+
+    1. 标签内文本：`<h1>{name}'s To Do List</h1>` 有效，`<{tag}>Gregorio Y. Zara's To Do List</{tag}>` 无效。
+    2. 紧跟在 `=` 符号后的属性：`src={avatar}` 会读取 `avatar` ，`src="{avatar}"` 只会传字符串 `"{avatar}"`。
 
 实例化一个组件也是简单的，类似 HTML 语法。比如下面都是合法的实例化 `App` 组件的语句：
 

docs/frontend/react/index.md

@@ -23,7 +23,9 @@ React 作为广泛运用的网页前端框架，基本上可以应对大部分
 
 ## 资源链接
 
-- React 官方中文文档 <https://zh-hans.react.dev/>
+- [2024 年酒井科协暑培讲义](https://summer24.net9.org/frontend/react/handout)
+- [2023 年酒井科协暑培讲义](https://summer23.net9.org/frontend/react/)
+- [React 官方中文文档](https://zh-hans.react.dev/)
 
 !!! note "官方文档与我们的文档"