程序员博客

🙏废话不多说系列，直接开整🙏

前期知识储备：

1. 什么是防抖？

• ① 控制用户频繁快速点击同一个操作；
• ② 防止网络抖动；
• ③ 避免接口请求频繁过载；
  阅读全文 »

问题发现

前段时间我们新上线了一个应用，由于流量一直不大，集群的每秒查询率（QPS）大约只有 5。接口的响应时间大约在 30 毫秒左右。

最近我们接入了新的业务，业务方提供的数据显示，日常的 QPS 预计可以达到 2000，而在大促期间峰值 QPS 可能会达到 1 万。

为了评估系统的性能水平，我们进行了一次压力测试。测试在预发布环境进行。在压力测试过程中，我们观察到当单台服务器的 QPS 达到约 200 时，接口的响应时间没有明显变化，但是 CPU 利用率迅速上升，直到达到极限。

要通过接口管理 GitHub 的仓库，可以使用 GitHub 提供的 REST API 或 GraphQL API。以下是使用 GitHub REST API 管理仓库的一些基本步骤：

1. 获取访问令牌

首先，你需要生成一个 GitHub 个人访问令牌（Personal Access Token，PAT）。这个令牌用于认证你的 API 请求。

步骤：

• 登录 GitHub。
  阅读全文 »

在 React 项目中引入 Tailwind CSS，可以按照以下步骤进行设置：

1. 创建 React 项目

如果你还没有创建 React 项目，可以通过以下命令创建一个新的 React 项目：

1
2

npx create-react-app my-app
cd my-app

2. 安装 Tailwind CSS

在项目的根目录下执行以下命令来安装 Tailwind CSS 及其所需的依赖项：

Tailwind CSS 是一个实用优先的 CSS 框架，提供了一系列低级的 CSS 类，帮助你直接在 HTML 中构建自定义设计。以下是 Tailwind CSS 的一些基本语法和用法：

1. 布局 (Layout)

• 容器: container 类用于设置一个响应式的固定宽度的容器，并自动居中。

  1 2 3

  <div class="container mx-auto"> 内容 </div>

• 显示控制: block、inline-block、hidden 等类用于控制元素的显示类型。

  阅读全文 »

优势

1. 快速开发：Tailwind CSS 是一个高度可定制的原子化 CSS 框架，提供了大量的预定义样式类，可以大大加快开发速度。开发者只需使用这些类名，而无需编写自定义 CSS，从而减少了手动编写和维护 CSS 的负担。

2. 无设计限制：与其他框架如 Bootstrap 不同，Tailwind 不强制你遵循某种设计风格，而是给你提供了工具来创建自己独特的设计。它完全不限制 UI 的布局和外观。

   阅读全文 »

正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”）。

正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。

一、元字符及其基本语法

学习正则首要了解的是基本的元字符。以下是完整的元字符列表（参考菜鸟教程）

在这些元字符中，有一部分并不常用，常用的也不过是其中的一部分而已。所以掌握基础的元字符，就可以用于简单基础的正则匹配了。

前言

实际项目开发的时候，有的路由场景会比较复杂，比如数据库里的文章有很多，我们不可能一一去定义路由，此时该怎么办？组织代码的时候，有的路由是用于移动端，有的路由是用于 PC 端，该如何组织？如何有条件的渲染页面，比如未授权的时候显示登录框？如何让同一个路由根据情况不同展示不同的内容？

本篇我们会一一解决这些问题，在此篇，你将会感受到 App Router 强大的路由功能。

前言

路由（routers）是应用的重要组成部分。所谓路由，有多种定义，对于应用层的单页应用程序而言，路由是一个决定 URL 如何呈现的库，在服务层实现 API 时，路由是解析请求并将请求定向到处理程序的组件。简单的来说，在 Next.js 中，路由决定了一个页面如何渲染或者一个请求该如何返回。

Next.js 目前有两套路由解决方案，之前的方案称之为“Pages Router”，目前的方案称之为“App Router”，两套方案是兼容的，都可以在 Next.js 中使用。本篇我们会重点讲解 App Router，并学习 App Router 下路由的定义方式和常见的文件约定，学习完本篇，你将学会如何创建一个页面。

前言

欢迎学习 Next.js！在学习具体的知识点之前，我们先来创建一个 Next.js 项目。创建了可运行的项目，才能在学习的时候边调试边理解，从而达到事半功倍的效果。

幸运的是，Next.js 提供了开箱即用的 create-next-app脚手架，内置支持 TypeScript、ESLint 等功能，零配置即可实现自动编译和打包。

本篇我们会讲解创建项目的两种方式：自动创建项目和手动创建项目，以及开发项目时常用的脚本命令。同时我们会对脚本背后的 next 命令进行详解，帮助大家了解每个命令实现的功能以及可选参数。