## 问题概述
在使用 NestJS 构建安装向导服务时，开发人员经常会遇到一系列棘手问题，包括端口占用冲突、进程异常关闭、服务启动失败，以及安装成功后前端轮询无法正确检测服务状态等问题。这些问题不仅影响用户体验，还可能导致安装流程完全失败。

## 问题一：偶发进程关闭异常

### 根本原因分析
1. **竞争条件**：安装服务器关闭与主应用启动之间存在时间差，导致资源访问冲突
2. **状态管理缺失**：缺乏服务器状态跟踪机制，无法判断服务器是否已完全关闭
3. **异常处理不足**：关闭操作缺少超时控制和错误恢复机制
4. **资源未完全释放**：连接和套接字未正确清理，导致端口占用

### 核心解决方案代码

```typescript
// 服务器状态跟踪接口
interface ServerState {
  server: any;
  isClosing: boolean;
  isListening: boolean;
}

// 全局状态管理
const serverState: ServerState = {
  server: null,
  isClosing: false,
  isListening: false
};

// 安全关闭服务器函数
const safelyCloseServer = async (): Promise<void> => {
  if (!serverState.server || serverState.isClosing) {
    return;
  }
  
  serverState.isClosing = true;
  
  return new Promise((resolve) => {
    // 设置超时强制关闭
    const timeout = setTimeout(() => {
      if (serverState.server.closeAllConnections) {
        serverState.server.closeAllConnections();
      }
      serverState.server = null;
      serverState.isClosing = false;
      serverState.isListening = false;
      resolve();
    }, 3000);
    
    // 尝试正常关闭
    serverState.server.close((err: any) => {
      clearTimeout(timeout);
      if (err && err.code !== 'ERR_SERVER_NOT_RUNNING') {
        console.warn('Server close warning:', err.message);
      }
      serverState.server = null;
      serverState.isClosing = false;
      serverState.isListening = false;
      resolve();
    });
  });
};
```

## 问题二：服务启动后轮询异常

### 根本原因分析
1. **时机不同步**：前端轮询开始时，后端服务尚未完全初始化完成
2. **URL 不一致**：前端使用固定URL轮询，但后端服务可能使用不同端口
3. **缺少超时处理**：轮询请求可能无限期等待，导致浏览器阻塞
4. **错误处理不足**：网络错误或服务暂时不可用时缺乏重试机制

### 核心解决方案代码

```typescript
// 后端：安装完成后返回正确的服务器URL
app.post('/install', async (req, res) => {
  try {
    // ... 安装逻辑
    
    res.json({ 
      success: true, 
      message: 'Installation completed! Server will restart.',
      serverUrl: site.serverUrl || 'http://localhost:3002' // 返回实际使用的URL
    });
    
    // 确保响应已发送后再关闭服务器
    res.on('finish', async () => {
      await safelyCloseServer();
      await startMainApplication();
    });
  } catch (error: any) {
    res.status(400).json({ 
      success: false, 
      message: `Installation failed: ${error.message}` 
    });
  }
});
```

```javascript
// 前端：智能轮询机制
let redirectAttempts = 0;
const maxRedirectAttempts = 30;

function startServerStatusCheck() {
  const checkInterval = setInterval(() => {
    if (redirectAttempts >= maxRedirectAttempts) {
      clearInterval(checkInterval);
      showError('Server did not start in time');
      return;
    }
    
    // 使用HEAD请求和超时控制
    fetch(`${serverUrl}/api`, { 
      method: 'HEAD',
      signal: AbortSignal.timeout(3000)
    })
    .then(response => {
      if (response.ok) {
        clearInterval(checkInterval);
        window.location.href = `${serverUrl}/api`;
      } else {
        redirectAttempts++;
      }
    })
    .catch(() => {
      redirectAttempts++;
      updateStatusMessage(`Waiting for server... (${redirectAttempts}/${maxRedirectAttempts})`);
    });
  }, 2000);
}
```

## 问题三：端口占用与服务启动失败

### 根本原因分析
1. **端口竞争**：多个服务实例尝试绑定相同端口
2. **进程残留**：先前实例异常退出，端口未释放
3. **缺乏端口管理**：没有端口检测和自动回退机制

### 核心解决方案代码

```typescript
// 端口检测函数
const checkPort = (port: number): Promise<boolean> => {
  return new Promise((resolve) => {
    const server = net.createServer();
    server.once('error', () => resolve(false));
    server.once('listening', () => server.once('close', () => resolve(true)).close());
    server.listen(port);
  });
};

// 查找可用端口
const findAvailablePort = async (startPort: number): Promise<number> => {
  for (let port = startPort; port < startPort + 10; port++) {
    if (await checkPort(port)) {
      return port;
    }
  }
  throw new Error(`No available ports found in range ${startPort}-${startPort + 9}`);
};

// 等待端口释放
const waitForPort = async (port: number, timeout = 30000): Promise<boolean> => {
  const startTime = Date.now();
  
  while (Date.now() - startTime < timeout) {
    if (await checkPort(port)) {
      return true;
    }
    await new Promise(resolve => setTimeout(resolve, 500));
  }
  
  return false;
};
```

## 综合解决方案实施

### 1. 安装流程优化
```typescript
const main = async () => {
  try {
    setupSignalHandlers();
    
    const envPath = join(__dirname, '../.env');
    if (fs.existsSync(envPath)) {
      console.log('[ReactPress] Environment file exists, starting main application');
      await startMainApplication();
      return;
    }
    
    console.log('[ReactPress] Starting installation wizard');
    await runInstallationWizard();
    
  } catch (error) {
    console.error('[ReactPress] Fatal error:', error);
    await safelyCloseServer();
    process.exit(1);
  }
};
```

### 2. 主应用启动流程
```typescript
const startMainApplication = async (): Promise<void> => {
  try {
    // 确保安装服务器完全关闭
    await safelyCloseServer();
    
    // 延迟启动以确保端口释放
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 动态导入以避免在安装阶段加载 NestJS
    const { bootstrap } = await import('./starter');
    await bootstrap();
  } catch (error) {
    console.error('Failed to start main application:', error);
    process.exit(1);
  }
};
```

## 总结

通过以上解决方案，我们成功解决了 NestJS 安装服务中的三个核心问题：

1. **进程关闭异常**：通过状态跟踪和安全关闭机制，确保服务器完全关闭后再启动新服务
2. **轮询异常**：通过智能轮询机制、超时控制和正确的URL管理，确保前端能正确检测服务状态
3. **端口占用**：通过端口检测、等待和自动查找机制，避免端口冲突

这些解决方案不仅提高了安装服务的稳定性和可靠性，还显著改善了用户体验，使安装过程更加顺畅和可预测。关键技术点包括状态管理、资源清理、超时控制和渐进式回退策略，这些原则同样适用于其他类似的服务器应用场景。

在使用 NestJS 构建安装向导服务时，开发人员经常会遇到一系列棘手问题，包括端口占用冲突、进程异常关闭、服务启动失败，以及安装成功后前端轮询无法正确检测服务状态等问题。这些问题不仅影响用户体验，还可能导致安装流程完全失败。

NestJS 安装服务稳定性问题分析与解决方案

问题三：端口占用与服务启动失败

# 事件循环

## 浏览器的进程模型

### 何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZV4E..png)


每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

### 何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVBS..png)

### 浏览器有哪些进程和线程？

**浏览器是一个多进程多线程的应用程序**

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVJ6..png)

> 可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. **渲染进程**（本节课重点讲解的进程）

   渲染进程启动后，会开启一个**渲染主线程**，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   > 将来该默认模式可能会有所改变，有兴趣的同学可参见[chrome官方说明文档](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#Modes-and-Availability)

## 渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

> 思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

- 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
- 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
- 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
- ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

![image-20220809223027806](http://mdrs.yuanjin.tech/img/202208092230847.png)

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

**整个过程，被称之为事件循环（消息循环）**

## 若干解释

### 何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

- 计时完成后需要执行的任务 —— `setTimeout`、`setInterval`
- 网络通信完成后需要执行的任务 -- `XHR`、`Fetch`
- 用户操作后需要执行的任务 -- `addEventListener`

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZUX0..png)

**渲染主线程承担着极其重要的工作，无论如何都不能阻塞！**

因此，浏览器选择**异步**来解决这个问题

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVQK..png)

使用异步的方式，**渲染主线程永不阻塞**

> 面试题：如何理解 JS 的异步？
>
> 
>
> 参考答案：
>
> JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
>
> 而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
>
> 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
>
> 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
>
> 在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

### JS为何会阻碍渲染？

先看代码

```html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅！';
    delay(3000);
  };
</script>
```

点击按钮后，会发生什么呢？

<见具体演示>

### 任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但**消息队列是有优先级的**

根据 W3C 的最新解释:

- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
  https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

> 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

- 延时队列：用于存放计时器到达后的回调任务，优先级「中」
- 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
- 微队列：用户存放需要最快执行的任务，优先级「最高」

> 添加任务到微队列的主要方式主要是使用 Promise、MutationObserver
>
> 
>
> 例如：
>
> ```js
> // 立即把一个函数添加到微队列
> Promise.resolve().then(函数)
> ```

> 浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

> 面试题：阐述一下 JS 的事件循环
>
> 
>
> 参考答案：
>
> 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
>
> 在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
>
> 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
>
> 根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

> 面试题：JS 中的计时器能做到精确计时吗？为什么？
>
> 
>
> 参考答案：
>
> 不行，因为：
>
> 1. 计算机硬件没有原子钟，无法做到精确计时
> 2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
> 3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
> 4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

深入剖析JavaScript的事件循环

### 实现一个类似于jQuery功能的轻量级框架

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

#### 一、项目结构与设计思路

##### 1. 项目结构
我们的项目将分为几个主要模块：
- **主框架**：用于获取DOM元素集合并支持链式调用。
- **公共框架**：包含字符串处理、数组操作、数据类型检测等通用功能。
- **事件框架**：实现事件绑定和解绑功能。
- **CSS框架**：提供CSS类操作、元素显示隐藏、尺寸获取等功能。
- **属性框架**：操作DOM元素的属性。
- **内容框架**：操作DOM元素的内容（HTML、文本、值）。
- **动画框架**：实现简单的动画效果。

##### 2. 设计思路
- **链式调用**：通过返回一个对象实例本身来支持链式调用。
- **扩展性**：使用`extend`方法允许动态添加方法。
- **模块化**：每个功能模块都封装在单独的闭包中，以减少全局变量的污染。

#### 二、实现主框架

首先，我们需要实现一个基础的框架，能够获取DOM元素并支持链式调用。

```javascript
(function (w) {
    var xframe = function (selector, context) {
        return this.init.apply(this, [selector, context]);
    };

    xframe.prototype.init = function (selector, context) {
        this.length = 0;
        if (typeof selector === 'string') {
            var nodeList = (context || document).querySelectorAll(selector);
            this.length = nodeList.length;
            for (var i = 0; i < this.length; i++) {
                this[i] = nodeList[i];
            }
        } else if (selector.nodeType) {
            this[0] = selector;
            this.length = 1;
        }
        return this;
    };

    var $$ = function (selector, context) {
        if (typeof selector === 'function') {
            w.onload = selector;
        } else {
            return new xframe(selector, context);
        }
    };

    $$.extend = function () {
        var len = arguments.length, target = null, i = 1, key;
        if (len === 0) return;
        if (len === 1) {
            target = xframe.prototype;
            i--;
        } else {
            target = arguments[0];
        }
        for (; i < len; i++) {
            for (key in arguments[i]) {
                target[key] = arguments[i][key];
            }
        }
        return target;
    };

    w.xframe = w.$ = $$;
})(window);
```

#### 三、实现功能模块

##### 1. 公共框架

公共框架包含一些基础的功能，如字符串处理、数组操作等。这里仅给出结构，具体实现可根据需求编写。

```javascript
(function (xframe) {
    // 字符串处理模块
    xframe.extend(xframe, {
        // 实现 ltrim, rtrim, trim 等方法
    });

    // 数组相关模块
    xframe.extend(xframe, {
        // 实现数组操作方法
    });

    // 数据类型检验模块
    xframe.extend(xframe, {
        isNumber: function (obj) {
            return typeof obj === 'number' && !isNaN(obj);
        },
        // 实现其他数据类型检测方法
    });
})(xframe);
```

##### 2. 事件框架

事件框架实现事件绑定和解绑功能。

```javascript
(function (xframe) {
    xframe.extend({
        on: function (event, handler) {
            return this.each(function (index, element) {
                element.addEventListener(event, handler);
            });
        },
        // 实现 off 方法
    });
})(xframe);
```

##### 3. CSS框架

CSS框架提供CSS类操作、元素显示隐藏、尺寸获取等功能。

```javascript
(function (xframe) {
    xframe.extend({
        css: function (property, value) {
            return this.each(function (index, element) {
                element.style[property] = value;
            });
        },
        show: function () {
            return this.css('display', '');
        },
        hide: function () {
            return this.css('display', 'none');
        },
        // 实现其他CSS相关方法
    });
})(xframe);
```

##### 4. 属性框架

属性框架提供操作DOM元素属性的方法。

```javascript
(function (xframe) {
    xframe.extend({
        attr: function (name, value) {
            if (value !== undefined) {
                return this.each(function (index, element) {
                    element.setAttribute(name, value);
                });
            } else {
                return this[0] ? this[0].getAttribute(name) : null;
            }
        },
        addClass: function (className) {
            return this.each(function (index, element) {
                element.classList.add(className);
            });
        },
        removeClass: function (className) {
            return this.each(function (index, element) {
                element.classList.remove(className);
            });
        },
    });
})(xframe);
```

##### 5. 内容框架

内容框架提供操作DOM元素内容的方法。

```javascript
(function (xframe) {
    xframe.html = function (htmlString) {
        if (htmlString !== undefined) {
            return this.each(function (index, element) {
                element.innerHTML = htmlString;
            });
        } else {
            return this[0] ? this[0].innerHTML : null;
        }
    };

    xframe.text = function (textString) {
        if (textString !== undefined) {
            return this.each(function (index, element) {
                element.textContent = textString;
            });
        } else {
            return this[0] ? this[0].textContent : null;
        }
    };

    xframe.val = function (value) {
        if (value !== undefined) {
            return this.each(function (index, element) {
                element.value = value;
            });
        } else {
            return this[0] ? this[0].value : null;
        }
    };
})(xframe);
```

##### 6. 动画框架

动画框架实现简单的动画效果。这里只给出结构，具体实现可根据需求编写。

```javascript
(function () {
    function Animate() {
        // 动画实现
    }

    Animate.prototype = {
        // 动画方法
    };

    // 将Animate绑定到xframe上
    xframe.animate = function (options) {
        return new Animate(this, options);
    };
})();
```

#### 四、总结

通过以上步骤，我们实现了一个类似于jQuery功能的轻量级框架`Xframe`。它包含了获取DOM元素、事件处理、CSS操作、属性操作、内容操作以及动画功能。你可以根据自己的需求，进一步完善和扩展这个框架。

`Xframe`不仅可以帮助你理解jQuery的底层实现原理，还可以作为一个轻量级的选择，满足你项目中特定的需求。希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

jQuery框架源码解析与实现

实现一个类似于jQuery功能的轻量级框架

## 前言
> 近期，阮一峰在[科技爱好者周刊第 325 期](https://www.ruanyifeng.com/blog/2024/11/weekly-issue-325.html)中推荐了一款开源工具——ReactPress，ReactPress一个基于 Next.js 的博客和 CMS 系统，可查看 [demo](https://blog.gaoredu.com/)站点。（@[fecommunity](https://github.com/fecommunity/reactpress) 投稿）

![2024-11-24/RB88NO19NMJGHY35OXTQHO..png](https://api.gaoredu.com/public/uploads/2024-11-24/RB88NO19NMJGHY35OXTQHO..png)


在数字化时代，内容创作与发布已成为连接读者与作者的重要桥梁。而在这个过程中，一个高效、灵活且功能丰富的发布平台显得尤为重要。近期，阮一峰在科技爱好者周刊中推荐了一款开源工具——ReactPress，它凭借其出色的性能和多样化的功能，吸引了众多开发者和内容创作者的目光。


 此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
项目地址：https://github.com/fecommunity/reactpress
 



![2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png)

此项目是用于构建博客网站的，包含前台展示、管理后台和后端。


> 此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
> 项目地址：<https://github.com/fecommunity/reactpress>

*   前台&管理后台展示: <https://github.com/fecommunity/reactpress/tree/master/client>
*   后端：<https://github.com/fecommunity/reactpress/tree/master/server>
*   ReactPress在线演示站点：<https://blog.gaoredu.com/>


- 前台&管理后台展示: https://github.com/fecommunity/reactpress/tree/master/client
- 后端：

## 1. 效果图
### 1.1 前台展示

#### pc 端
![2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ902D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ902D..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ908G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ908G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png)


#### 移动端适配
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png)


### 管理后台
管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png)




## 2. 体验地址

网站首页：https://blog.gaoredu.com/
管理后台：https://blog.gaoredu.com/admin

## 3. 计划
这次是一个完整的全栈式开发，只要部署了这个项目的代码，是完全可以搭建好博客网站的。


### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run dev
```

打开浏览器访问 http://127.0.0.1:3001


## 4. 收获与感触
学而不用，基本等于没学，因为最近一直在做自己的个人博客网站，所以好久没更新技术文章了；而且是利用业余时间做的，所以经过差不多两个月的搬砖，现在网站终于都上线了。
开发网站的这段时间里，每天晚上几乎都搬砖到接近 11 点，周末的时间大多也在搬砖，每天写完文章，也快 12 点了，搬砖不易啊，喜欢或者觉得不错的，欢迎到 github 上给个 star，谢谢。

## 5. 文档教程
- 项目地址： https://github.com/fecommunity/reactpress
- next.js 源码：https://github.com/vercel/next.js
- nest.js 源码：https://github.com/nestjs/nest



此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。

阮一峰推荐工具：基于React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

# 参考资料

## 前端工具

- Git
  1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html)
  2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html)
  3. [索引篇](https://backlog.com/git-tutorial/cn/reference/)
  4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing)
  5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git)
  6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips)
- Webpack
  1. [文档](https://doc.webpack-china.org/concepts/)
  2. [插件](https://doc.webpack-china.org/plugins/)
- Gulp
  -  [文档](https://www.gulpjs.com.cn/)
- Grunt
  - [文档](http://www.gruntjs.net/)
- Rollup
  - [文档](http://www.rollupjs.com/)
- 代码质量
  1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/)
  2. [htmlhint](https://htmlhint.io/)
  3. [stylelint](https://stylelint.io/)
- http-server
  - [静态服务器](https://www.npmjs.com/package/http-server)
- ast
  - [业界 AST 库](https://github.com/cucygh/AST-)
- 自动化测试
  - [jest](https://jestjs.io/zh-Hans/)


## 前端框架

- Vue
  1. [基本教程](https://cn.vuejs.org/)
  2. [路由](https://router.vuejs.org/)
  3. [Vuex](https://vuex.vuejs.org/)
  4. [SSR](https://ssr.vuejs.org/)
  5. [Nuxt.js](https://zh.nuxtjs.org/)
  6. [Vue 源码分析·免费](http://hcysun.me/vue-design/)
- React
  1. [文档](https://doc.react-china.org/)
  2. [Redux 官方文档](http://cn.redux.js.org/)
  3. [Redux 中文社区](http://www.redux.org.cn/)
  4. [Next.js](https://zeit.co/blog/next4)
  5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs)
  6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e)
- Angular
  - [官方文档](https://angular.cn/)
- Koa
  > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活

  1. [文档](https://koa.bootcss.com/)
  2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/)
  3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial)
- Express
  > Node.js 开发最容易上手的业务应用开发框架
  - [文档](http://expressjs.com/zh-cn/)

## 前端技术

- 内存泄漏
  1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh)
  2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn)
- MDN官方文档
  - [MDN官方文档](https://developer.mozilla.org/zh-CN/)

## CSS 教程

- Less
  - [文档](http://less.bootcss.com/)
- Sass
  - [文档](http://sass.bootcss.com/docs/sass-reference/)
- CSS3 布局
  - [学习布局](http://zh.learnlayout.com/)

## JavaScript 教程

- ES6
  1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants)
  2. [入门教程](http://es6.ruanyifeng.com/)
- Node
  1. [官方网站](http://nodejs.cn/)
  2. [官方教程](http://nodejs.cn/api/)
- ES3
  - [入门教程](http://www.runoob.com/js/js-tutorial.html)
- ES5
  1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)
  2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html)

## 服务端教程

- [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/)
- [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#)
- [Nginx 配置大全](https://nginxconfig.io/)



【总结】参考资料

<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>本课程为 2022 年最新 Go 实战仿百度云盘 实现企业级分布式云存储系统，将通过 Golang 来实现一个支持断点续传和秒传的分布式云存储服务百度网盘系统，课程中老师将手把手带你从快速构建“云存储”原型系统。</p>
</blockquote>
<figure class="wp-block-image size-large"><img title="《Go 实战仿百度云盘 实现企业级分布式云存储系统》视频教程免费下载"
             alt="《Go 实战仿百度云盘 实现企业级分布式云存储系统》视频教程免费下载" loading="lazy" decoding="async" width="1024" height="329" data-src="https://www.gaoredu.com/wp-content/uploads/2022/06/image-6-1024x329.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-963"srcset="https://www.gaoredu.com/wp-content/uploads/2022/06/image-6-1024x329.png 1024w, https://www.gaoredu.com/wp-content/uploads/2022/06/image-6-300x96.png 300w, https://www.gaoredu.com/wp-content/uploads/2022/06/image-6-768x247.png 768w, https://www.gaoredu.com/wp-content/uploads/2022/06/image-6.png 1164w"sizes="(max-width: 1024px) 100vw, 1024px" /></figure/>
<h2 class="wp-block-heading"><strong>主要知识点 </strong><br /><strong> 一、文件上传服务</strong></h2>
<p>一个基本的文件上传服务架构说明 <br />net/http 包用法示例<br /> 文件上传接口 <br /> 网页端上传文件测试 <br /> 文件元信息查询接口 <br /> 文件下载接口</p>
<h2 class="wp-block-heading"><strong>二、分块上传和断点续传</strong></h2>
<p>断点续传原理及系统架构变化 <br /> 分块上传的通用实现方法 <br /> 使用 Redis 存储文件分块信息 <br />Golang 文件分块信息初始化<br />Golang 分块上传逻辑<br />Golang 文件合并<br /> 测试文件分块上传与断点续传场景</p>
<h2 class="wp-block-heading"><strong>三、微服务化</strong></h2>
<p>微服务架构系统设计及架构变化 <br /> 改造上传接口为微服务 Gateway 网关接口 <br /> 微服务之间的 gRPC 调用 <br /> 基于 Docker 容器化部署各服务模块 <br /> 扩展认识 Kubernetes 容器编排技术</p>
<h2 class="wp-block-heading"><strong>四、秒传功能</strong></h2>
<p>秒传原理及系统架构变化 <br /> 客户端计算文件 hash<br />服务端判断 / 计算文件 hash<br />用户上传文件秒传测试</p>
<h2 class="wp-block-heading"><strong>五、阿里云 OSS</strong></h2>
<p>OSS 与 Ceph 技术选型分析对比 <br />OSS 操作文档以及 API 说明<br />Golang 访问 OSS API<br /> 完美结合实际业务操作 OSS 代码实战 <br /> 使用混合云（OSS 或 Ceph）</p>
<h2 class="wp-block-heading">六、课程章节</h2>
<p>第 1 章 课程介绍 <br /> 第 2 章 基础语法 <br /> 第 3 章 内建容器 <br /> 第 4 章 面向“对象”<br />第 5 章 面向接口 <br /> 第 6 章 函数式编程 <br /> 第 7 章 错误处理和资源管理 <br /> 第 8 章 测试与性能调优 <br /> 第 9 章 Goroutine<br />第 10 章 Channel<br />第 11 章 http 及其他标准库 <br /> 第 12 章 迷宫的广度优先搜索 <br /> 第 13 章 开始实战项目 <br /> 第 14 章 单任务版爬虫 <br /> 第 15 章 并发版爬虫 <br /> 第 16 章 数据存储和展示 <br /> 第 17 章 分布式爬虫 <br /> 第 18 章 课程总结</p>
<h2 class="wp-block-heading">视频教程下载</h2>
<p>Go 实战仿百度云盘 实现企业级分布式云存储系统视频教程下载链接: <a href="https://pan.baidu.com/s/1AgsXELxMd96SQQrZWvbA-g" target="_blank" rel="noreferrer noopener" rel="nofollow">https://pan.baidu.com/s/gsAgsXELxMd96SQQrZWvbA-g</a> 提取码: 25cz</p>
<p>如遇下载链接失效，可随时在下方评论，收到消息后也会及时同步更新。</p>


<p>本课程为 2022 年最新 Go 实战仿百度云盘 实现企业级分布式云存储系统，将通过 Golang 来实现一个&#8230;</p>


《Go实战仿百度云盘 实现企业级分布式云存储系统》视频教程免费下载

<div class="wp-block-cover has-background-dim" style="background-image:url(https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-15-56.png)">
<div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size">10 个必备的 VsCode 插件</p>
</div>
</div>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><a href="https://code.visualstudio.com/" target="_blank"  rel="nofollow">Visual Studio Code</a>是开发人员社区中使用最广泛的代码编辑器之一，本文将分享给大家 2021 年每个开发人员都应该知道的 10 个<a href="https://code.visualstudio.com/docs/editor/extension-gallery" target="_blank"  rel="nofollow">VS Code 扩展</a>，每个都堪称是黑科技。这些工具旨在改善开发人员体验并以各种方式提高你的工作效率。</p>
</blockquote>
<p>本文将介绍以下 VS Code 扩展和每一个 vscode 插件的使用教程：</p>
<ol class="wp-block-list">
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#autorenametag" target="_blank"  rel="nofollow">自动重命名标签</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#bracketpaircolorizer" target="_blank"  rel="nofollow">支架对着色器</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#snippets" target="_blank"  rel="nofollow">片段</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#bettercomments" target="_blank"  rel="nofollow">更好的评论</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#markdownallinone" target="_blank"  rel="nofollow">Markdown 多合一</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#Icons" target="_blank"  rel="nofollow">图标</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#prettier" target="_blank"  rel="nofollow">更漂亮</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#importcost" target="_blank"  rel="nofollow">进口成本</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#profileswitcher" target="_blank"  rel="nofollow">配置文件切换器</a></li>
<li><a href="https://blog.logrocket.com/top-10-vs-code-extensions-2021/#GitLens" target="_blank"  rel="nofollow">GitLens</a></li>
</ol>
<h2 class="wp-block-heading" id="autorenametag">1. 自动重命名标签</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" target="_blank"  rel="nofollow">Auto Rename Tag</a>是一个对 Web 开发人员来说非常有用的 VS Code 扩展。顾名思义，自动重命名标签会在第一个标签更新时重命名第二个标签，反之亦然；你会发现这个扩展不仅对 HTML 很有帮助，而且由于 <a href="https://reactjs.org/docs/introducing-jsx.html" target="_blank"  rel="nofollow">JSX</a> 对 React 也很有帮助。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="319" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/JSX.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-933"/><figcaption>自动重命名标签示例</figcaption></figure>
</div/>
<p>在上面的例子中，标签内只有文本，但在实际应用中，可能有嵌套的标签和元素，使得手动更新变得困难和乏味。</p>
<h2 class="wp-block-heading" id="bracketpaircolorizer">2. 支架对着色器</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" target="_blank"  rel="nofollow">Bracket Pair Colorizer</a>是一个扩展，匹配具有相同颜色的相应括号，翻译过来可以叫做支架对着色器。在文件中嵌套组件、函数、对象等可能会因多个圆括号、方括号等而变得混乱。</p>
<p>例如，对于以下代码，乍一看，很难区分代码中的不同代码块，但是 Bracket Pair Colorizer 扩展为相应的括号和括号着色，以便于导航和访问。</p>
<figure class="wp-block-image size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="812" height="502" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-934"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06.png 812w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06-300x185.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-03-06-768x475.png 768w"sizes="(max-width: 812px) 100vw, 812px"/><figcaption><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer"target="_blank"rel="nofollow">Bracket Pair Colorizer</a>工具示例</figcaption></figure/>
<h2 class="wp-block-heading" id="snippets">3. 代码片段工具</h2>
<p><a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets" target="_blank"  rel="nofollow">片段 </a> 是节省时间和提高工作效率的最佳方式。这不是单个扩展，而是具有不同编程语言的各种片段的扩展集合。</p>
<p>下面是一些流行的代码片段扩展：</p>
<ul class="wp-block-list">
<li><a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2" target="_blank"  rel="nofollow">Angular 片段（版本 11）</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python" target="_blank"  rel="nofollow">Python</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets" target="_blank"  rel="nofollow">JavaScript (ES6) 代码片段</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets" target="_blank"  rel="nofollow">HTML 片段</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" target="_blank"  rel="nofollow">ES7 React/Redux/GraphQL/React-Native 片段</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets" target="_blank"  rel="nofollow">Vue 3 片段</a></li>
</ul>
<p>例如，每次创建新组件时，在 React 中重复函数式组件的语法可能会非常乏味。使用 <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" target="_blank"  rel="nofollow">ES7 React/Redux/GraphQL/React-Native 片段</a> 扩展，您可以使用 <code>rfc</code> 功能组件的简写并按 Enter。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="425" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/React-Redux-GraphQL-Extension.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-935"/><figcaption>代码片段工具</figcaption></figure>
</div/>
<h2 class="wp-block-heading" id="bettercomments">4. 更好的代码注释</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" target="_blank"  rel="nofollow">Better Comments</a>旨在帮助您在代码中编写更人性化的注释。</p>
<p>清晰易懂的注释不仅对浏览您的代码的人有益，而且对您也有益。一段时间后，开发人员在访问自己的代码时迷失在自己的代码中是很常见的。拥有描述性评论可以为您和您的团队节省大量时间。</p>
<p>使用 Better Comments VS Code 扩展，您可以将注释分类为警报、查询、待办事项、突出显示等。</p>
<p>您可以在双正斜杠 (&nbsp;<code>//</code>)后使用以下任一字符：</p>
<ul class="wp-block-list">
<li><code>*</code>&nbsp; 对于突出显示的文本</li>
<li><code>!</code>&nbsp; 对于错误和警告</li>
<li><code>?</code>&nbsp; 查询和问题</li>
<li><code>//</code>&nbsp; 删除线</li>
<li><code>TODO</code>&nbsp; 待办事项</li>
</ul>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="801" height="552" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-936"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14.png 801w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14-300x207.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-05-14-768x529.png 768w"sizes="(max-width: 801px) 100vw, 801px" /><figcaption>代码注释工具</figcaption></figure>
</div/>
<h2 class="wp-block-heading" id="markdownallinone">5. Markdown 多合一</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" target="_blank"  rel="nofollow">Markdown All in One</a>是一个单一的扩展，可以满足您 <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" target="_blank"  rel="nofollow"> 所有的 Markdown</a>需求，例如自动预览、快捷方式、自动完成等。</p>
<p>自 2004 年发布以来，Markdown 已成为最受欢迎和首选的标记语言之一。世界各地的技术作家广泛使用 Markdown 来撰写文章、博客、文档等，因为其轻量级的简单性和跨平台使用。它的流行催生了 Markdown 的其他变体，例如 <a href="https://github.github.com/gfm/" target="_blank"  rel="nofollow">GitHub Flavored Markdown</a>、<a href="https://mdxjs.com/" target="_blank"  rel="nofollow">MDX</a> 等。</p>
<p>例如，要在 Markdown 中加粗某些文本，您可以选择该文本并使用快捷方式来提高您的工作效率。<code>Ctrl&nbsp;+&nbsp;B</code></p>
<figure class="wp-block-image size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="391" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Markdown-All-In-One-Extension.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-938"/><figcaption>Markdown 预览工具</figcaption></figure/>
<h2 class="wp-block-heading" id="icons">6. 图标</h2>
<p>拥有描述性图标可以帮助您区分文件和文件夹。图标也让开发变得更有趣。</p>
<p>这是两个 VS Code 选项卡之间的比较。一个有图标，另一个没有。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="805" height="495" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-939"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41.png 805w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41-300x184.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-07-41-768x472.png 768w"sizes="(max-width: 805px) 100vw, 805px" /><figcaption>图标扩展插件</figcaption></figure>
</div/>
<p>您可以选择许多图标扩展。流行的图标集合包括：</p>
<ul class="wp-block-list">
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons" target="_blank"  rel="nofollow">vscode-icons</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" target="_blank"  rel="nofollow">材质图标主题</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons" target="_blank"  rel="nofollow">材质主题图标</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=LaurentTreguier.vscode-simple-icons" target="_blank"  rel="nofollow">简单的图标</a></li>
</ul>
<h2 class="wp-block-heading" id="prettier">7. 更漂亮的代码</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank"  rel="nofollow">Prettier</a>是一个固执的代码格式化程序。它在 GitHub 上拥有超过 38.5 万颗星，是最流行的代码格式化程序之一。在您的代码中使用一致的格式和样式可以节省大量时间，尤其是在与其他开发人员协作时。</p>
<p>以下是 Prettier 如何格式化代码的过程：</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="730" height="411" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Prettier-Formatted-Code-Example.gif" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-940"/><figcaption>Prettier 格式化代码</figcaption></figure>
</div/>
<p>当您使用本地解析版本的 Prettier 时，此扩展支持 <a href="https://prettier.io/docs/en/plugins.html" target="_blank"  rel="nofollow">Prettier 插件</a>。<br /> 您可以进一步配置此扩展以满足您的格式需求，甚至可以通过自动保存触发它。</p>
<h2 class="wp-block-heading" id="importcost">8. 进口成本</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost" target="_blank"  rel="nofollow">导入成本 </a> 是一个扩展，它向您显示代码中导入包的估计大小。在处理项目时，重要的是不要通过导入重包来损害用户体验。避免这种情况的一种方法是跟踪代码中附加依赖项的大小。</p>
<div class="wp-block-image">
<figure class="aligncenter"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" decoding="async" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Import-Cost-Extension-Example.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt="导入成本扩展示例" class="wp-image-33140"/></figure>
</div/>
<p>当导入过大时，导入成本会通过以红色显示大小来警告您。您可以配置应视为小、中或大的大小。</p>
<h2 class="wp-block-heading" id="profileswitcher">9. 配置文件切换器</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher" target="_blank"  rel="nofollow">Profile Switcher</a>使您能够在 VS Code 中使用各种配置和设置在多个配置文件之间 <a href="https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher" target="_blank"  rel="nofollow"> 切换 </a> 和设置。</p>
<p>此扩展对技术博主、YouTubers 等内容创建者特别有用。无需在每次需要显示 VS Code 屏幕时更改设置 / 配置，您可以设置配置文件所需的设置。</p>
<p>两个配置文件之间切换的方法：<code>Default</code>和。<code>Content&nbsp;Creation</code></p>
<h2 class="wp-block-heading" id="gitlens">10. GitLens</h2>
<p><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" target="_blank"  rel="nofollow">GitLens</a>是由 <a href="https://www.amod.io/" target="_blank"  rel="nofollow">Eric Amodio</a> 创建、开发和维护的 Visual Studio Code<a href="https://github.com/eamodio/vscode-gitlens" target="_blank"  rel="nofollow">的开源 </a> 扩展。它结合了 Git 和 VS Code 的功能。<a href="https://www.amod.io/" target="_blank"  rel="nofollow"></a></p>
<p>此扩展的最佳功能之一是能够通过 Git 责备注释和代码镜头可视化代码作者身份。</p>
<figure class="wp-block-image size-large"><img title="2022 程序员必备的 10 大 VS Code 扩展插件推荐"
             alt="2022 程序员必备的 10 大 VS Code 扩展插件推荐" loading="lazy" decoding="async" width="807" height="144" data-src="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41.png" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-941"srcset="https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41.png 807w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41-300x54.png 300w, https://www.gaoredu.com/wp-content/uploads/2021/08/Snipaste_2021-08-28_23-11-41-768x137.png 768w"sizes="(max-width: 807px) 100vw, 807px" /><figcaption>GitLens 扩展插件</figcaption></figure/>
<p>这只是 <a href="https://gitlens.amod.io/#features" target="_blank"  rel="nofollow">GitLens 扩展</a> 的众多 <a href="https://gitlens.amod.io/#features" target="_blank"  rel="nofollow"> 功能之一</a>。其他显着特点包括：</p>
<ul class="wp-block-list">
<li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#revision-navigation-" target="_blank"  rel="nofollow">ř</a><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#revision-navigation-" target="_blank"  rel="nofollow">时空视点导航 </a> 通过一个文件的历史记录（向后和向前）</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#current-line-blame-" target="_blank"  rel="nofollow">行 </a> 尾的不显眼的 <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#current-line-blame-" target="_blank"  rel="nofollow"> 当前行责任 </a> 注释显示提交</li>
<li>一个 <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#status-bar-blame-" target="_blank"  rel="nofollow"> 状态栏怪 </a> 注释显示提交和作家谁最后修改了当前行</li>
</ul>
<h2 class="wp-block-heading" id="conclusion">总结</h2>
<p>以上就是高热度网分享给大家 2021 年每个开发人员都应该知道的 10 个 <a href="https://code.visualstudio.com/docs/editor/extension-gallery" target="_blank"  rel="nofollow">VS Code 扩展</a> 插件和 vscode 使用教程，每个都堪称是黑科技，希望每个人都可以通过这些工具提高自己的工作效率。</p>


<p>Visual Studio Code是开发人员社区中使用最广泛的代码编辑器之一，本文将分享给大家 2021 年&#8230;</p>


2022程序员必备的10大VS Code扩展插件推荐

<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>本文提供了 2020 年全网最新的免费 React 全套视频教程,Redux 视频教程,React 源码深入解析，React 项目实战视频教程，React 全栈开发前端视频教程免费下载。</p>
</blockquote>
<h2 class="wp-block-heading">一、React 是什么，为什么要学习 React？</h2>
<figure class="wp-block-image size-large"><img title="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载"
             alt="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载" loading="lazy" decoding="async" width="750" height="422" data-src="https://www.gaoredu.com/wp-content/uploads/2020/12/timg.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-882"srcset="https://www.gaoredu.com/wp-content/uploads/2020/12/timg.jpg 750w, https://www.gaoredu.com/wp-content/uploads/2020/12/timg-300x169.jpg 300w"sizes="(max-width: 750px) 100vw, 750px" /><figcaption>React 是什么？为什么学习 React？</figcaption></figure/>
<p>React 是一个简单的 javascript UI 库，用于构建高效、快速的用户界面。它遵循组件设计模式、<em><strong>声明式编程范式 </strong></em> 和<em><strong>函数式编程 </strong></em> 概念，以使前端应用程序更高效。是目前前端单页面应用程序开发者使用最多的框架。与此并驾齐驱的还有 Vue，Angular，是三大主流的前端开发框架。&nbsp;</p>
<p>由于 React 具有</p>
<p>由于 React 具有 <strong> 易于学习 </strong>、<strong> 丰富的用户界面 </strong>、<strong> 提高工作效率 </strong>、<strong> 受到伟大公司的信赖 </strong>、<strong> 这是热门和趋势 </strong>，以及<strong> 强大的社区支持 </strong> 这 6 个特点，学习 React 以及成为开发者必备的技能。</p>
<h2 class="wp-block-heading">二、React（JSX/Redux/Flux）入门视频教程</h2>
<p>最新《从 0 开始彻底征服 ReactJS》全套视频教程，总共有 18 个章节，从基础到原理层面深入剖析 React，该视频的目录如下：</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载"
             alt="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载" loading="lazy" decoding="async" width="595" height="254" data-src="https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_195555.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-883"srcset="https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_195555.jpg 595w, https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_195555-300x128.jpg 300w"sizes="(max-width: 595px) 100vw, 595px" /><figcaption>彻底征服 React.js 视频教程</figcaption></figure>
</div/>
<p>第一章：课程介绍 <br /> 第二章：第一个 React 应用程序 <br /> 第三章：JSX 用法 <br /> 第四章：创建组件 <br /> 第五章：组件的生命周期 <br /> 第六章：组件的属性 <br /> 第七章：组件的事件 <br /> 第八章：组件之间的通信 <br /> 第九章：props 与 state 的博弈 <br /> 第一十章：实用工具 <br /> 第一十一章：开发环境 <br /> 第一十五章：Facebook Flux<br />第一十四章：FLUX 架构 <br /> 第一十三章：树组件开发实战 <br /> 第一十七章：Redux<br />第一十六章：Reflux<br />第一十九章：有问必答</p>
<p>《<strong>彻底征服 React.js + Flux + Redux 实战》全套视频教程 </strong> 链接:&nbsp;<a rel="noreferrer noopener" href="http://www.52tech.tech/go/?url=https://pan.baidu.com/s/1sngFsnz" target="_blank" rel="nofollow">https://pan.baidu.com/s/1sngFsnz</a>&nbsp; 密码: w5fv</p>
<h2 class="wp-block-heading">三、React 项目实战视频教程</h2>
<p>React16+React-Router4 从零打造企业级电商后台管理系统课程针对有一些前端基础，但对前端框架还不够了解，不能灵活使用的同学，手把手带你用 React+React-Router 从技术选型开始，直至部署上线，开发一个后台管理系统，让你在实际开发中，打开前端框架的大门，告别小白时代！</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载"
             alt="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载" loading="lazy" decoding="async" width="800" height="291" data-src="https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200205.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-884"srcset="https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200205.jpg 800w, https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200205-300x109.jpg 300w, https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200205-768x279.jpg 768w"sizes="(max-width: 800px) 100vw, 800px" /><figcaption>React16+React-Router4 项目实战视频教程</figcaption></figure>
</div/>
<h3 class="wp-block-heading">3.1 接触最前沿的技术</h3>
<p>采用 React16 + React-Router4<br />结合 yarn、webpack、ES6 和 Sass<br />等技术，体验最新奇的开发方式</p>
<h3 class="wp-block-heading">3.2 企业级后台管理系统</h3>
<p>典型并且实用的企业级开发模式：<br />前后端分离、分层设计、模块化 <br /> 开发等技术</p>
<h3 class="wp-block-heading">3.3 深入理解技术原理</h3>
<p>开发代码的同时，带你了解相关 <br /> 技术的原理，比如资源请求过程<br />cookie-session 原理，Router 原理等</p>
<p><strong>React16+React-Router4 从零打造企业级电商后台管理系统视频下载 &nbsp;</strong></p>
<p>链接:&nbsp;<a rel="noreferrer noopener" href="http://www.52tech.tech/go/?url=https://pan.baidu.com/s/1MgRe5QzTCXa9bnsd7wwbkg" target="_blank" rel="nofollow">https://pan.baidu.com/s/1MgRe5QzTCXa9bnsd7wwbkg</a>&nbsp; 提取码:8t23</p>
<h2 class="wp-block-heading">四、React 源码深入解析视频教程</h2>
<p>React 源码深度解析 高级前端工程师必备技能 React 毫无疑问是前端界主流的框架，而框架本身就是热点。课程以讲解 React 实现原理为主，并在实现过程中讲解这么做的原因，带来的好处以及规避了哪些问题。理解源码之后对于 React 开发过程中出现的一系列问题都可以非常轻松得进行解决，也是能力提升，晋升高级开发工程师的必备技能。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载"
             alt="【免费】2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载" loading="lazy" decoding="async" width="800" height="384" data-src="https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200535.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-885"srcset="https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200535.jpg 800w, https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200535-300x144.jpg 300w, https://www.gaoredu.com/wp-content/uploads/2020/12/2020-12-05_200535-768x369.jpg 768w"sizes="(max-width: 800px) 100vw, 800px" /><figcaption>React 源码深入解析视频教程</figcaption></figure>
</div/>
<p>链接:&nbsp;<a rel="noreferrer noopener" href="http://www.52tech.tech/go/?url=https://pan.baidu.com/s/1oHp6wHASikOrNH_bFilDrQ" target="_blank" rel="nofollow">https://pan.baidu.com/s/1oHp6wHASikOrNH_bFilDrQ</a>&nbsp; 提取码:mjr2</p>
<p>以上就是高热度网分享的 2020 最新 React 全套视频教程,Redux 视频教程,React 源码深入解析前端视频教程下载，欢迎大家下载学习。</p>


<p>本文提供了 2020 年全网最新的免费 React 全套视频教程,Redux 视频教程,React 源码深入解&#8230;</p>


【免费】2020最新React全套视频教程,Redux视频教程,React源码深入解析前端视频教程下载

<div class="wp-block-cover has-pale-cyan-blue-background-color has-background-dim is-position-center-center">
<div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size">最新 WebGL/ThreeJS/OpenGL 游戏实战 / 计算机图形学视频教程下载</p>
</div>
</div>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>这里收集了全网最新的 2020 免费 WebGL 视频教程，OPenGL 入门和游戏引擎实战视频教程和计算机图形学相关的视频教程和学习资料，包括 WebGL 入门，Threee.JS 实战教程、三维粒子引擎开发等精品视频教程，欢迎大家免费下载。</p>
</blockquote>
<h2 class="wp-block-heading">一、计算机图形学基础入门视频教程下载</h2>
<p>对于还没有学习过计算机图形学的萌新来说，建议先去学习一下图形学相关的知识，这里推荐一下上海交通大学的计算机图形学视频教程，搞定坐标变换、图形渲染、光照等基础知识，学习它就够了。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载"
             alt="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载" loading="lazy" decoding="async" width="1015" height="490" data-src="https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_193054.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-866"srcset="https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_193054.jpg 1015w, https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_193054-300x145.jpg 300w, https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_193054-768x371.jpg 768w"sizes="(max-width: 1015px) 100vw, 1015px" /><figcaption>计算机图形学</figcaption></figure>
</div/>
<p>此外，最近风靡 B 站的黑科技游戏 GAMES101- 现代计算机图形学入门 - 闫令琪视频教程也是很火爆哈，也去试听了一下，感觉讲的还不错，感兴趣的小伙伴们也可以去听听这套教程。</p>
<p><iframe style="width: 100%; height: 500px; max-width: 100%；align:center; padding:20px 0;" src="//player.bilibili.com/player.html?aid=90798049&amp;bvid=BV1X7411F744&amp;cid=155049937&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></p>
<p>附件：上海交大计算机图形学视频教程下载链接:&nbsp;<a rel="noreferrer noopener" href="http://www.52tech.tech/go/?url=https://pan.baidu.com/s/1M_OeAHJI5jm-VIuezYQdrA" target="_blank" rel="nofollow">https://pan.baidu.com/s/1M_OeAHJI5jm-VIuezYQdrA</a>&nbsp; 提取码: gcbs&nbsp;</p>
<h2 class="wp-block-heading">二、WEBGL 和 ThreeJS 相关视频教程下载</h2>
<p><em>WebGL</em>是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过前端就可以绘制出惊艳的 3D 效果。ThressJS 是基于 WebGL 封装的一个 3D 版的 JS 库，使用它可以降低开发门槛，让你快速上手 3D 游戏的开发。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img title="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载"
             alt="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载" loading="lazy" decoding="async" data-src="https://www.gaoredu.com/wp-content/uploads/2020/11/OIP.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-867"width="578"height="458"srcset="https://www.gaoredu.com/wp-content/uploads/2020/11/OIP.jpg 474w, https://www.gaoredu.com/wp-content/uploads/2020/11/OIP-300x238.jpg 300w"sizes="(max-width: 578px) 100vw, 578px" /><figcaption>WebGL 视频教程免费下载</figcaption></figure>
</div/>
<h2 class="wp-block-heading">2.1 WebGL 免费视频教程下载</h2>
<p>这套 WebGL 视频教程总共有 10 个课时，基本上涉及了 WebGL 所有的知识点，从图形学基础，材质、坐标变化、材质、光照，讲解的也是十分全面的。</p>
<p>从 Lesson1-Lesson10【完整版】链接：<a rel="noreferrer noopener" href="http://www.52tech.tech/go/?url=https://share.weiyun.com/5JFxEXz" target="_blank" rel="nofollow">https://share.weiyun.com/5JFxEXz</a> 4zu9wy</p>
<p>此外，这里还有一套 ThreeJS 视频教程，也欢迎大家下载：</p>
<p>链接: <a href="https://pan.baidu.com/s/1O1SntjyUdnW5y_JEJZv3PA" target="_blank"  rel="nofollow">https://pan.baidu.com/s/1O1SntjyUdnW5y_JEJZv3PA</a> 提取码: 51ij</p>
</p>
<h2 class="wp-block-heading">2.2 WebGL 学习资料下载</h2>
<p>WebGL 编程指南 PDf 电子版免费下载：<a href="https://pan.baidu.com/s/1qYLqGOG" target="_blank"  rel="nofollow">https://pan.baidu.com/s/</a><a href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank"  rel="nofollow">1qYLqGOG</a> 密码: 2mva</p>
<p>OpenGLES 2.0 编程指南下载：<a href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank"  rel="nofollow">https://pan.baidu.com/s/1c165QFI</a> 密码: b4s8</p>
<p>HTML5 与 WEBGL 编程下载：<a href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank"  rel="nofollow">https://pan.baidu.com/s/1bpNdfSN</a> 密码: 7ixf</p>
<p>WEBGL learn：<a href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank"  rel="nofollow">https://pan.baidu.com/s/1jHVwezk</a> 密码: nnng</p>
<h2 class="wp-block-heading">三、OpenGL 精品视频教程免费下载</h2>
<h2 class="wp-block-heading">3.1 OpenGL 视频教程</h2>
<p>OpenGl<em>OpenGL</em>（英语：Open Graphics Library）是用于渲染 2D、3D 矢量图形的跨语言、跨平台的应用程序编程接口（API）。是基于 C /C++ 语言开发的一门计算机图形库，这里提供了三维粒子引擎和游戏开发的相关视频教程，涉及到安卓手机 app 黑科技游戏的开发。</p>
<figure class="wp-block-image size-large"><img title="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载"
             alt="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载" loading="lazy" decoding="async" width="800" height="413" data-src="https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_195517.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""class="wp-image-868"srcset="https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_195517.jpg 800w, https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_195517-300x155.jpg 300w, https://www.gaoredu.com/wp-content/uploads/2020/11/2020-11-29_195517-768x396.jpg 768w"sizes="(max-width: 800px) 100vw, 800px" /><figcaption>OpenGL 视频教程免费下载</figcaption></figure/>
<p>入门基础：链接:&nbsp;<a rel="noreferrer noopener" href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank" rel="nofollow">https://pan.baidu.com/s/1i5tefoL</a>&nbsp; 密码: zbh9<br />中文基础：链接:&nbsp;<a rel="noreferrer noopener" href="https://pan.baidu.com/s/1dFm0GUX" target="_blank" rel="nofollow">https://pan.baidu.com/s/</a><a rel="noreferrer noopener" href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank" rel="nofollow">1dFm0GUX&nbsp;</a>密码:iyh4<br />三维粒子引擎制作：链接:&nbsp;<a rel="noreferrer noopener" href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank" rel="nofollow">https://pan.baidu.com/s/1mhVX232</a>&nbsp; 密码:sgz6<br />OpenGLES 视频：链接:&nbsp;<a rel="noreferrer noopener" href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank" rel="nofollow">https://pan.baidu.com/s/1slz93MP</a>&nbsp; 密码:ds52<br />安卓黑科技 3D 游戏开发：链接:&nbsp;<a rel="noreferrer noopener" href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank" rel="nofollow">https://pan.baidu.com/s/1c1FsNyo</a>&nbsp; 密码:ji32</p>
<h2 class="wp-block-heading">3.2 OpenGL 学习资料</h2>
<p>再推荐一本 NeHe 的 OpenGl 教程，很经典，强烈推荐！<br />书籍资料：<a href="http://url.cn/5ZKm4nB" target="_blank" rel="noreferrer noopener" rel="nofollow">http://url.cn/5ZKm4nB</a>&nbsp;&nbsp; 密码：g3BIAr<br />代码：<a href="http://url.cn/5nJEa04" target="_blank" rel="noreferrer noopener" rel="nofollow">http://url.cn/5nJEa04</a>&nbsp; 密码：qrtc6f</p>
<p>OpenGL 库文件：链接:&nbsp;<a rel="noreferrer noopener" href="https://pan.baidu.com/s/1hsGgNB2" target="_blank" rel="nofollow">https://pan.baidu.com/s/1hsGgNB2</a>&nbsp; 密码: 55qm</p>
<p>技术文档：链接:&nbsp;<a rel="noreferrer noopener" href="https://pan.baidu.com/s/1zsAZciRw3-7dYt1asLsIDg" target="_blank" rel="nofollow">https://pan.baidu.com/s/1bpHCVrp</a>&nbsp; 密码: mkmn</p>
<p class="has-luminous-vivid-orange-background-color has-background"><strong>注意 </strong>：<strong> 最新 WebGL/ThreeJS/OpenGL 游戏实战 </strong> 视频教程经过多次更新传播后，经常会出现链接失效的问题，如果大家在使用的过程中发现链接失效或者无法访问的问题，大家可以通过关注下方的微信公众号，回复“webgl”，即可获取最新的 <strong> 下载链接</strong>。</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img title="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载"
             alt="【免费】2021 年最火的 WebGL 前端视频教程_OpenGL 实战视频教程免费下载" decoding="async" data-src="https://www.gaoredu.com/wp-content/uploads/2020/01/wechat_logo.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt=""/><figcaption>高热度网微信公众号</figcaption></figure>
</div/>
<p>以上就是高热度网分享的 2020 最新的 WebGL 黑科技视频教程，OPenGL 入门和游戏引擎实战视频教程和计算机图形学相关的视频教程和学习资料，欢迎大家下载，学习过程中遇到什么问题也欢迎留言。</p>


<p>这里收集了全网最新的 2020 免费 WebGL 视频教程，OPenGL 入门和游戏引擎实战视频教程和计算机图&#8230;</p>


【免费】2021年最火的WebGL前端视频教程_OpenGL实战视频教程免费下载

<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>高热度网提供的最新 Python 视频教程主要包括 python 全栈工程师完整版黑科技视频教程、中谷教育 python 中文视频教程 (python 视频教程)、<strong>Python 实战</strong> 视频教程、小甲鱼零基础入门学习 Python 视频教程全套 96 集、极速 8 天深入理解 Python 教程这 5 套 Python 视频教程百度网盘免费下载。</p>
</blockquote>
<div class="wp-block-cover has-background-dim" style="background-image:url(https://www.gaoredu.com/wp-content/uploads/2020/04/t0194a8e70aa6267543.jpg)">
<div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<p class="has-text-align-center has-large-font-size">Python 视频教程合集免费下载</p>
</div>
</div>
<h2 class="wp-block-heading">1.python 全栈工程师完整版视频教程</h2>
<p>python 全栈工程师完整版视频教程是目前最新最全的 python 视频教程，总共有 92 天的课程，总共有近 62GB 的大小，这套 Python 视频教程从 Python 的基础篇，前端篇，web 框架篇、项目实战篇基本上涉及到了 Python 开发过程中的所有知识点。</p>
<figure class="wp-block-image size-large"><img title="最新 Python 视频教程（5 套）百度网盘免费下载"
             alt="最新 Python 视频教程（5 套）百度网盘免费下载" loading="lazy" decoding="async" width="678" height="487" data-src="https://www.gaoredu.com/wp-content/uploads/2020/04/090620_77833932.jpg" data-lazy="true" src="https://www.gaoredu.com/wp-content/themes/wordpress-theme-puock-2.8.0/assets/img/z/load.svg" alt="python 全栈工程师完整版视频教程" class="wp-image-770" srcset="https://www.gaoredu.com/wp-content/uploads/2020/04/090620_77833932.jpg 678w, https://www.gaoredu.com/wp-content/uploads/2020/04/090620_77833932-300x215.jpg 300w" sizes="(max-width: 678px) 100vw, 678px" /><figcaption>python 全栈工程师完整版视频教程</figcaption></figure/>
<p>python 全栈工程师完整版视频教程百度网盘下载链接：<a rel="noreferrer noopener" href="http://www.52tech.tech/go/?url=https://pan.baidu.com/s/1BmZDHsW_fXquamxoh7JH6A" target="_blank" rel="nofollow">https://pan.baidu.com/s/1BmZDHsW_fXquamxoh7JH6A</a>&nbsp; 密码：hcqb</p>
<h2 class="wp-block-heading">2. 中谷教育 python 中文视频教程(python 视频教程)</h2>
<p>中谷教育 python 中文视频教程 (python 视频教程) 是一个十分实用的 python 中文视频教程。高热度网分享的中谷教育 python 中文视频教程 (python 视频教程) 完整版教程非常适合零基础新手入门想自学 python，视频由新手入门到精通讲解了 Python 程序编程的有关专业知识，期望对需要自学 Python 程序编程的有帮助。</p>
<p>中谷教育 python 中文视频教程 (python 视频教程) 百度网盘下载：<a href="https://pan.baidu.com/s/1LKDPwWB6JmtIdERLiFlCmw" target="_blank" rel="noreferrer noopener" rel="nofollow">https://pan.baidu.com/s/1LKDPwWB6JmtIdERLiFlCmw</a> 密码：7xve</p>
<h2 class="wp-block-heading">3.<strong>Python 实战 </strong> 视频教程</h2>
<h3 class="wp-block-heading">3.1 课程简介</h3>
<p>python 实战演练整套教学视频是一个价值 1680 元的 python 视频教程，该视频教程是 Python 的实战篇视频教程，能够帮助我们深层次理解 python 这门语言，而且通过讲授老师的典型案例和实战演练教程让我们变成 python 顶级高手。</p>
<h3 class="wp-block-heading">3.2 教程目录</h3>
<ul class="wp-block-list">
<li>第一节：爬虫入门之爬虫基础了解</li>
<li>第二节：常用的爬虫模块及使用方法</li>
<li>第三节：12306 官网登录详解</li>
<li>第四节：验证码自动输入</li>
<li>第五节：检测余票机制</li>
<li>第六节：下单 1 </li>
<li>第七节：下单 2 </li>
<li>第八节：下单 3 </li>
</ul>
<h3 class="wp-block-heading">3.3 教程下载</h3>
<p>python 实战全套教学视频百度网盘下载链接：<a href="https://pan.baidu.com/s/1xvBf1oImNvA9nOp4vbwb5A" target="_blank" rel="noreferrer noopener" rel="nofollow">https://pan.baidu.com/s/1xvBf1oImNvA9nOp4vbwb5A</a> 密码: 36gs</p>
<h2 class="wp-block-heading">4. 小甲鱼零基础入门学习 Python 视频教程全套 96 集</h2>
<h3 class="wp-block-heading">4.1 课程简介</h3>
<p>小甲鱼零基础入门学习 Python 视频教程前半段分关键介绍 Python3 的语法特性，后半部分着重介绍 Python3 在爬虫、Tkinter、Pygame 游戏软件开发等范例上的使用。所有全系列共 16 个章节目录，前面 13 个章节目录从 1 个小游戏引入 Python，进一步介绍 Python 的语法和语言特色。末尾 3 个章节目录为范例的演示讲解，是前面主要内容的总结和增强。</p>
<h3 class="wp-block-heading">4.2 教程目录</h3>
<ul class="wp-block-list">
<li>第一章 就这么愉快地开始吧</li>
<li>第二章 用 Python 设计一个游戏</li>
<li>第三章 成为高手前必须知道的一些基础知识</li>
<li>第四章 了不起的分支和循环</li>
<li>第五章 列表、元组和字符串</li>
<li>第六章 函数</li>
<li>第七章 字典和集合</li>
<li>第八章 永久储存</li>
<li>第九章 异常处理</li>
<li>第十章 图形用户界面入门</li>
<li>第十一章 类和对象</li>
<li>第十二章 魔法方法</li>
<li>第十三章 模块</li>
<li>第十四章 论一只爬虫的自我修养</li>
<li>第十五章 GUI 的最终选择：Tkinter</li>
<li>第十六章 Pygame : 游戏开发</li>
</ul>
<h3 class="wp-block-heading">4.3 视频教程下载</h3>
<p>小甲鱼零基础入门学习 Python 视频教程全套 96 集下载链接: <a href="https://pan.baidu.com/s/1eRFZwRo#257c" target="_blank" rel="noreferrer noopener" rel="nofollow">https://pan.baidu.com/s/1eRFZwRo</a> 密码: 257c</p>
<h2 class="wp-block-heading">5. 极速 8 天深入理解 Python 教程</h2>
<h3 class="wp-block-heading">5.1 教程目录</h3>
<ul class="wp-block-list">
<li>第一节 1-python 简介和开发环境构建</li>
<li>第二节 2-python 基础数据类型</li>
<li>第三节 3- 字符串处理函数</li>
<li>第四节 4- 字符串处理函数和函数的参数</li>
<li>第五节 5- 面向对象</li>
<li>第六节 6- 模块</li>
<li>第七节 7- 文件操作</li>
<li>第八节 8- 文件读写指针操作</li>
<li>第九节 9- 应用案例一</li>
<li>第一十节 10- 应用案例二</li>
<li>第一十一节 11- 网络编程 requests 模块</li>
<li>第一十二节 12- 网络编程 socket 编程</li>
<li>第一十三节 13-python 调用 c 和 c ++ 模块</li>
<li>第一十四节 14-python 无缝调用 c </li>
<li>第一十五节 15. 服务器架构</li>
<li>第一十六节 16.django 演示</li>
</ul>
<h3 class="wp-block-heading">5.2 教程下载</h3>
<p> 8 天深入理解 Python 教程下载链接: <a href="https://pan.baidu.com/s/1rwfBKxKUuyiJn_ZvxjYFoQ" target="_blank"  rel="nofollow">https://pan.baidu.com/s/1rwfBKxKUuyiJn_ZvxjYFoQ</a> 提取码: ucj2</p>
<p>以上就是高热度网整理的最新 5 套 Python 视频教程，这对于大伙们无论是 Python 基础入门或者进阶学习都是非常不错的黑科技视频教程下载资源哈，同时提供了相关的百度网盘免费下载地址。</p>


<p>高热度网提供的最新 Python 视频教程主要包括 python 全栈工程师完整版黑科技视频教程、中谷教育 p&#8230;</p>
