Web与Nginx网站服务

已于 2025-09-05 19:01:13 修改
阅读量915 收藏 25
点赞数 7
CC 4.0 BY-SA版权
文章标签： 前端 nginx 运维
于 2025-09-04 20:40:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jstjx__ml/article/details/151193604

1. Web 概念

1.1 Web 的基本概念

Web（World Wide Web，万维网）是运行在互联网之上的一个超文本信息系统，它依赖于HTTP/HTTPS 协议实现浏览器与服务器之间的交互。

特点：

  • 分布式：资源分布在世界各地的服务器上

  • 跨平台：只要有浏览器，就能访问资源

  • 无状态：每次 HTTP 请求都是独立的，服务器不会记住客户端状态（除非使用 Cookie/Session）

1.2 B/S 架构模型

Web 采用B/S 架构（Browser/Server）：

  • Browser（浏览器）：用户的入口，发送请求、渲染页面

  • Server（服务器）：接收请求，返回所需资源或动态内容

B/S 架构示意图：

用户浏览器 ──> Web服务器(Nginx/Apache)
                 │
                 └─> 应用服务器(PHP/Python/Java)
                          │
                          └─> 数据库(MySQL/Redis)

1.3 Web 请求与响应过程

一次完整的 Web 访问过程包括以下步骤：

  1. 输入 URL：用户在浏览器输入 http://www.example.com

  2. DNS 解析：浏览器将域名解析为 IP 地址

  3. 建立连接：浏览器与 Web 服务器建立 TCP 连接（3 次握手）

  4. 发送请求：浏览器发起 HTTP 请求（GET/POST）

  5. 服务器处理：

    • Web 服务器处理静态资源请求

    • 动态请求转发到应用服务器（如 Tomcat、Django）

    • 应用服务器可能再查询数据库

  6. 返回响应：Web 服务器将结果打包成 HTTP 响应报文返回浏览器

  7. 渲染页面：浏览器解析 HTML、加载 CSS/JS、渲染最终页面

Web 请求-响应流程：

浏览器 ----> Web服务器 ----> 应用服务器 ----> 数据库
    <----       <----             <----

1.4 静态资源与动态资源

  • 静态资源：不需要服务器额外处理，直接返回即可

    • HTML、CSS、图片、视频、JS 文件

    • 优点：速度快，压力小

  • 动态资源：需要服务器端代码计算生成，再返回客户端

    • PHP 脚本、Python Flask/Django、Java Servlet、Ruby

    • 优点：个性化内容，支持交互

静态与动态资源对比：

静态资源：用户请求 → Web服务器直接返回
动态资源：用户请求 → Web服务器 → 应用服务器运行代码 → 返回结果

1.5 Web 的发展阶段

  • Web 1.0（只读）：静态页面为主，用户只能浏览

  • Web 2.0（交互式）：用户可生成内容，AJAX(前端) 技术普及

  • Web 3.0（智能化）：语义网、区块链、去中心化概念兴起

1.6 实验：搭建最小 Web 服务

实验目标：体验一次最简单的 Web 请求与响应过程 Wireshark 并且抓包

实验步骤：

  1. 创建一个静态页面：

运行

<!-- index.html -->
<html>
<head><title>My First Web</title></head>
<body>
<h1>Hello Web!</h1>
<p>This is my first web page.</p>
</body>
</html>

HTML 文档结构：

运行

<!-- index.html -->
<html> <!-- 标签 -->
<head> <!-- 头部 -->
    <title>My First Web</title>
</head>    
<body> <!-- 主体 -->
    <h1>Hello Web!</h1> <!-- 一级标题 -->
    <p>This is my first web page.</p> <!-- 段落标签 -->
</body>
</html>

1.7 小结

  • Web 是基于 B/S 架构 的信息交互方式

  • 核心是 请求-响应模型，通过 HTTP/HTTPS 协议传输数据

  • Web 可提供 静态资源 和 动态资源

2. HTTP 与 HTTPS 协议

2.1 HTTP与HTTPS区别

  • HTTP：明文传输，不安全

  • HTTPS：在 HTTP 上加入 SSL/TLS 加密，防止中间人攻击

2.2 HTTPS 握手流程

TLS 握手过程：客户端发起请求 → 服务端返回证书 → 双方协商加密算法 → 建立安全通道

TLS 握手过程（建立安全通道）流程：

  1. 客户端 Hello：浏览器发起请求，告诉服务器自己支持哪些加密算法

  2. 服务端 Hello + 证书：网站返回 SSL 证书（证明身份），选择一种加密算法

  3. 客户端验证证书：浏览器检查证书是否可信（CA 颁发、没过期、域名匹配）

  4. 协商密钥：双方生成一个临时密钥，用于对称加密后续通信

  5. 加密通信开始：后续 HTTP 数据都通过加密通道传输

2.3 HTTP状态码

2.3.1 HTTP 状态码概览

HTTP 状态码都是三位数字，按首位分为五类：

类型范围含义大白话理解
1xx100–199信息性状态码"我收到了请求，还在处理中"
2xx200–299成功"请求成功，服务器给你东西了"
3xx300–399重定向"你要的东西搬家了，去新地址找"
4xx400–499客户端错误"你请求有问题（URL错、权限不够）"
5xx500–599服务器错误"服务器出问题，暂时拿不到东西"
2.3.2 常用状态码详解

2xx 成功：

状态码含义类比
200 OK请求成功"东西拿到了"
201 Created创建成功"你提交的表单/资源已创建"
204 No Content成功，但没有内容"操作成功，但没有额外东西返回"

3xx 重定向：

状态码含义类比
301 Moved Permanently永久搬家"这个页面永久换地址了"
302 Found临时搬家"暂时换地址，下一次还用旧地址"
304 Not Modified内容未改"东西没变，你可以用缓存"

4xx 客户端错误：

状态码含义类比
400 Bad Request请求格式错"你写的请求我看不懂"
401 Unauthorized未认证"先登录，再访问"
403 Forbidden禁止访问"你没权限"
404 Not Found找不到页面"东西搬走或根本没这东西"

5xx 服务器错误：

状态码含义类比
500 Internal Server Error服务器内部出错"服务器崩了"
502 Bad Gateway网关错误"我去找别的服务器，结果那边挂了"
503 Service Unavailable服务不可用"服务器忙不过来了，稍后再试"
504 Gateway Timeout网关超时"找别的服务器太慢，超时了"

生活中的 HTTP 状态码类比：

场景状态码对应情况
打开网页正常200成功拿到网页
点链接页面搬家301/302浏览器自动跳到新地址
输入错网址404"没找到这个页面"
登录需要权限401"先登录才能看"
网站挂了500"服务器出问题了"

HTTP 状态码就是服务器对你请求的"回话信息"，告诉你请求成功没、东西搬没搬、你有没有权限、或者服务器出问题了。

3. Nginx 概念

3.1 Nginx 介绍

Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器。Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。其将源代码以类 BSD 许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。2011 年 6 月 1 日，Nginx 1.0.4 发布。

Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，单台物理服务器可支持30,000～50,000个并发请求。并在一个 BSD-like 协议下发行。由俄罗斯的程序设计师 Igor Sysoev 所开发，供俄国大型的入口网站及搜索引擎 Rambler（俄文：Рамблер）使用。其特点是占有内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用 Nginx 网站用户有：百度 BWS、新浪、网易、腾讯等。

Nginx 是一个高性能 Web 服务器，它可以做很多事情：

  • 静态资源服务：可以直接把网页、图片、视频这些文件发给用户

  • 反向代理：用户访问你的服务器，Nginx 可以帮你把请求转发到后端真正处理请求的服务器

  • 负载均衡：当有很多后端服务器时，Nginx 可以智能分配流量，让每台服务器都不忙不过来

  • 高并发处理：用事件驱动的方式处理请求，能同时处理成千上万的用户请求，而不会占用太多资源

优势：

  • 轻量级，占用内存小

  • 支持百万级并发访问

  • 稳定可靠，开源且社区活跃

Nginx 官网：

3.2 简述Nginx和Apache的差异

  • Nginx是一个基于事件的Web服务器，Apache是一个基于流程的服务器

  • Nginx避免子进程的概念，Apache是基于子进程的

  • Nginx在内存消耗和连接方面更好，Apache在内存消耗和连接方面一般

  • Nginx的性能和可伸缩性不依赖于硬件，Apache依赖于CPU和内存等硬件

  • Nginx支持热部署，Apache不支持热部署

  • Nginx对于静态文件处理具有更高效率，Apache相对一般

  • Nginx在反向代理场景具有明显优势，Apache相对一般

3.3 Nginx 进程结构

web请求处理机制：

  • 多进程方式：服务器每接收到一个客户端请求就有服务器的主进程生成一个子进程响应客户端，直到用户关闭连接，这样的优势是处理速度快，子进程之间相互独立，但是如果访问过大会导致服务器资源耗尽而无法提供请求。

  • 多线程方式：与多进程方式类似，但是每收到一个客户端请求会有服务进程派生出一个线程来个客户方进行交互，一个线程的开销远远小于一个进程，因此多线程方式在很大程度减轻了web服务器对系统资源的要求，但是多线程也有自己的缺点，即当多个线程位于同一个进程内工作的时候，可以相互访问同样的内存地址空间，所以他们相互影响，一旦主进程挂掉则所有子线程都不能工作了，IIS服务器使用了多线程的方式，需要间隔一段时间就重启一次才能稳定。

工作进程（worker process）的功能：

  • 所有 Worker 进程都是平等的

  • 实际处理：网络请求，由 Worker 进程处理

  • Worker进程数量：一般设置为核心数，充分利用CPU资源，同时避免进程数量过多，导致进程竞争CPU资源，增加上下文切换的损耗

  • 接受处理客户的请求

  • 将请求依次送入各个功能模块进行处理

  • I/O调用，获取响应数据

  • 与后端服务器通信，接收后端服务器的处理结果

  • 缓存数据，访问缓存索引，查询和调用缓存数据

  • 发送请求结果，响应客户的请求

  • 接收主程序指令，比如重启、升级和退出等

4. Nginx安装

--------编译安装Nginx服务--------
 官方下载 https://nginx.org/download/nginx-1.20.2.tar.gz 

4.1关闭防火墙，将安装nginx所需软件包传到/opt目录下


systemctl stop firewalld
systemctl disable firewalld
setenforce 0

nginx-1.20.2.tar.gz       

4.2安装依赖包


#nginx的配置及运行需要pcre、zlib等软件包的支持，因此需要安装这些软件的开发包，以便提供相应的库和头文件。
yum install -y gcc gcc-c++ make pcre pcre-devel zlib zlib-devel openssl openssl-devel

4.3创建运行用户、组（Nginx 服务程序默认以 nobody 身份运行，建议为其创建专门的用户账号，以便更准确地控制其访问权限）


useradd -M -s /sbin/nologin nginx

4.4编译安装Nginx


cd /opt
tar zxvf nginx-1.20.2.tar.gz -C /opt/

cd nginx-1.20.2/
./configure \
--prefix=/usr/local/nginx \                            #指定nginx的安装路径
--user=nginx \                                        #指定用户名
--group=nginx \                                        #指定组名
--with-http_stub_status_module
--with-http_ssl_module                           #启用 http_stub_status_module 模块以支持状态统计
操作

cd nginx-1.20.2/
./configure \
--prefix=/usr/local/nginx \
--user=nginx \
--group=nginx \
--with-http_stub_status_module \
--with-http_ssl_module
    

make && make install

ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/        #让系统识别nginx的操作命令


4.5检查、启动、重启、停止 nginx服务


nginx -t                                #检查配置文件是否配置正确
#启动
nginx

#停止
cat /usr/local/nginx/logs/nginx.pid        #先查看nginx的PID号
kill -3 <PID号>
kill -s QUIT <PID号>
killall -3 nginx
killall -s QUIT nginx
#重载
kill -1 <PID号>
kill -s HUP <PID号>
killall -1 nginx
killall -s HUP nginx
#日志分割，重新打开日志文件
kill -USR1 <PID号>
#平滑升级
kill -USR2 <PID号>
 

5. Nginx 配置

认识Nginx服务的主配置文件 nginx.conf：

vim /usr/local/nginx/conf/nginx.conf

5.1 全局配置

#user nobody;                   #运行用户，若编译时未指定则默认为 nobody
worker_processes 4;             #工作进程数量，可配置成服务器内核数 * 2，如果网站访问量不大，一般设为1就够用了
#error_log logs/error.log;      #错误日志文件的位置
#pid logs/nginx.pid;            #PID 文件的位置

5.2 I/O 事件配置

events {
    use epoll;                     # 使用 epoll 模型处理连接，适用于 Linux 2.6+ 内核
    worker_connections 4096;       # 每个工作进程最大连接数为 4096
}

注意：

  • 需执行 ulimit -n 65535 调整进程可打开的最大文件数（连接数受系统限制）。

  • 可通过 /etc/security/limits.conf 永久修改文件句柄限制。

  • 若工作进程数为 8，最大连接数约为 4096×8=32,768（实际性能受硬件和带宽影响）。

5.2 HTTP 基础配置

http {
    include       mime.types;      # 文件扩展名与类型映射表
    default_type  application/octet-stream;  # 默认文件类型
    sendfile      on;              # 开启高效文件传输模式
    keepalive_timeout 65;          # 连接保持超时时间（秒）
    
    server {
        listen 80;                 # 监听端口
        server_name www.kgc.com;   # 域名（可空格分隔多个）
        charset utf-8;             # 默认字符集
        location / {
            root html;             # 网站根目录（相对路径为 /usr/local/nginx/html）
            index index.html index.php;  # 默认首页
        }
        error_page 500 502 503 504 /50x.html;  # 错误页映射
        location = /50x.html {
            root html;             # 错误页所在目录
        }
    }
}

5.3 访问状态统计（需预装 http_stub_status_module）

location /status {
    stub_status on;        # 开启状态统计
    access_log off;        # 关闭此位置的日志记录
}

验证命令：

curl -s http://IP/status

输出示例：

Active connections: 3 
server accepts handled requests: 100 100 200

5.4 基于授权的访问控制

location / {
    auth_basic "Secret Area";                     # 认证提示文字
    auth_basic_user_file /usr/local/nginx/passwd.db;  # 密码文件路径
}

生成密码文件：

htpasswd -c /usr/local/nginx/passwd.db username
chown nginx /usr/local/nginx/passwd.db
chmod 400 /usr/local/nginx/passwd.db

5.5 基于客户端的访问控制

location / {
    allow 192.168.10.20;   # 允许特定 IP
    deny all;              # 拒绝其他所有 IP（规则自上而下匹配）
}

6. 虚拟主机配置

6.1 基于域名

server {
    listen 80;
    server_name www.yjs.com;
    root /var/www/html/yjs;
    index index.html;
    access_log logs/www.yjs.access.log;  # 独立日志
}

server {
    listen 80;
    server_name www.benet.com;
    root /var/www/html/benet;
    index index.html;
    access_log logs/www.benet.access.log;
}

6.2 基于 IP

server {
    listen 192.168.10.21:80;
    server_name www.yjs.com;
    root /var/www/html/yjs;
}

server {
    listen 192.168.10.40:80;
    server_name www.benet.com;
    root /var/www/html/benet;
}

6.3 基于端口

server {
    listen 192.168.10.21:8080;
    server_name www.yjs.com;
    root /var/www/html/yjs;
}

server {
    listen 192.168.10.21:8888;
    server_name www.benet.com;
    root /var/www/html/benet;
}

7. 其他关键配置说明

  • 日志格式：
    log_format 可定义包含客户端 IP、请求时间、状态码、Referer 等信息的日志格式。

  • 路径匹配：

    • root：完整路径（如 root /var/www/html/test 访问 /1.html → /var/www/html/test/1.html）。

    • alias：路径别名（如 alias /var/www/html 访问 /test/1.html → /var/www/html/1.html）。

  • 反向代理：
    proxy_pass http://backend_server; 用于将请求转发至后端服务器。

操作提示

  1. 修改配置后使用 nginx -t 测试语法。

  2. 重启服务：systemctl restart nginx。

  3. 基于域名的虚拟主机需在 /etc/hosts 或 DNS 中配置域名解析。

  4. 基于 IP 的虚拟主机需为服务器绑定多个 IP（如 ifconfig ens33:0 192.168.10.40）。

Nginx 搭建Web服务
weixin_73488808的博客
04-25 1771
1.web服务器的主机ip：192.168.78.1282.web服务器的默认访问目录为/var/www/html默认发布内容为default‘s page3.站点news.timinglee.org默认发布目录为/var/www/virtual/timinglee.org/news默认发布内容为 news.timinglee.org4.站点login.timinglee.org在被访问时必须强制走加密协议，其默认。
使用nginx搭建web服务
weixin_47347505的博客
07-05 2262
使用nginx搭建一个简单的web服务
快速上手！使用Docker和Nginx部署Web服务的完美指南
热门推荐
qq_35716689的博客
01-27 32万+
本文将为您提供一个完整的指南，教您如何使用Docker和Nginx来部署和管理Web服务，包括域名和SSL证书的配置。
web服务器之nginx配置详解
liangzhenmeng的博客
07-24 2万+
💡语法: proxy_cache_key string;string为生成Key的规则，如:schemeschemescheme💡语法: proxy_no_cache string…;string为条件，例如$cookie_nocache $arg_nocache $arg_comment;💡语法: proxy_cache_bypass string…
nginx-web服务器
A_Apprentice的博客
07-18 3933
nginx-web服务器
Web服务器之Nginx介绍
XBlithe的博客
07-08 2970
Nginx (engine x) 是一个高性能的Web和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服器。Nginx处理高并发能力是十分强大的，能经受高负载的考验。而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新 。性能是 Nginx 最重要的考量，其占用内存少、并发能力强、能支持高达 5w 个并发连接数，最重要的是， Nginx 是免费的并可以商业化，配置使用也比较简单。 详细介绍 nginx官网正
使用nginx搭建web网站
12-07 2185
概念Nginx是一款轻量级HTTP服务器，也是一款邮箱代理服务器，同时具有反向代理、通用TCP/UDP代理的功能。Nginx可以运行x86、ARM等多种平台上，同时支持Linux、Windows等主流的操作系统。特点支持高并发单机Nginx可支持十万级的并发连接，经过优化后可最高支持百万级并发连接内存资源消耗低在同级web服务器中，Nginx占用的内存最少，一万非活跃的httpkeep-alive连接仅消耗2.5M内存高扩展性。
Nginx Web服务器搭建
settng style
07-20 4845
Nginx服务器是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。Nginx专为性能优化而开发，性能是器最重要的考量，实现上非常注重效率，能经受高负载的考验，据报告能支持高达50,000个并发连接数。Nginx不仅能做反向代理，实现负载均衡；还能可以作正向代理来进行上网等功能。...
部署Nginx Web服务器
Reloaded12138的博客
11-04 1824
部署Nginx Web服务器 什么是Nginx Nginx是一种很流行的Web服务器软件，具备高性能、高拓展性、高可靠性、低内存耗等优势。能够反向代理HTTP、HTTPS、SMTP、POP3、IMAP，也可以作为一个负载均衡器和HTTP缓存。同时他还是一个免费的开源的高性能的HTTP服务器。Nginx以其高性能、稳定性、丰富的特性、以及简单配置和低资源消耗而著称。 与传统的服务器不同，Nginx不依赖线程处理请求。相反，它使用了一个更具可拓展性的事件驱动（异步）体系结构。这种体系结构使用较小的内存量，但更重
一个比 Nginx 还简单的 Web 服务器
江南一点雨的专栏
08-30 1万+
企业级的 Web 服务器非常多，Nginx、Tomcat、Apache、IIS、FastAPI、Flask 等。今天松哥再给大家介绍一个开源的 Web 服务器，这款服务器具备自动 HTTPS 功能和高度可配置性，它的名字是：Caddy。Caddy 是一个 Go 编写的 Web 服务器，类似于 Nginx，Caddy 提供了更加强大的功能，随着 v2 版本发布，Caddy 已经可以作为中小型站点 Web 服务器的另一个选择。Caddy 轻量简单，对新手也比较友好，我们一起来看下 Caddy 的用法吧。
《Nginx高性能Web服务器》.pdf
10-27
特别地，书中还探讨了如何将Nginx与Memcached结合以实现文件缓存和双层缓存模式，这些策略能够进一步提升Web服务的性能和响应速度。 书中还介绍了Nginx的自动脚本篇，提供了多个实用的脚本，以便于用户自动化配置、...
Nginx高性能WEB服务器系列.pdf
05-12
Nginx与Tomcat的结合不仅可以提升Web应用的性能，还可以优化资源使用，增强系统的整体稳定性和可靠性。 在Nginx的配置方面，文档提到了如何设置Rewrite规则，这些规则可以用来实现URL重写和重定向，对于搜索引擎...
nginx 隐藏版本号与WEB服务器信息的解决方法
09-30
总结一下，隐藏Nginx版本号和自定义Web服务器信息的关键步骤包括：下载和解压Nginx源码，修改源码文件，编译和安装，修改配置文件，以及重启服务。这个过程有助于提升服务器的安全性，减少被针对性攻击的风险。当然...
web服务器nginx+部署前端vue项目
03-22
### Nginx 与前端 Vue 项目的部署 #### 一、Nginx 概述 Nginx 是一款广泛使用的高性能 HTTP 和反向代理 web 服务器。它以其出色的并发处理能力和较低的内存消耗而闻名。根据相关报告，Nginx 能够支持高达 50,000 ...
MySQL常见报错分析及解决方案总结(13)---使用 TRUNCATE 语句删除数据后，页面报错 “not found” ，数据库表自增 ID 被重置
最新发布
SSHLY3的博客
09-05 477
摘要： 在Windows环境下，Java程序使用TRUNCATE清空MySQL表后，可能导致前端报"notfound"错误。原因是TRUNCATE会重置自增ID（从1开始），而业务逻辑可能依赖旧ID。解决方法包括：改用DELETE保留ID序列、手动重置自增ID为原最大值、清除缓存中的旧ID，或避免依赖自增ID连续性（如改用UUID）。核心是通过调整清表方式或业务逻辑，确保ID一致性。 （150字）
Vue基础知识-脚手架开发-子传父-props回调函数实现和自定义事件（$on绑定、$emit触发、$off解绑）实现
2503_91308956的博客
09-04 1007
本文演示了Vue2中两种子组件向父组件传递数据的方法：1）通过props回调函数，父组件传递回调函数给子组件，子组件调用该函数传参；2）通过自定义事件，父组件给子组件绑定事件，子组件用$emit触发并传参。
前端自动化打包服务器无法安装高版本 Node.js v22 问题解决
Jason
09-03 826
摘要： 针对高版本Node.js因GLIBC依赖缺失无法运行的问题，本文提出了三种解决方案：升级系统Glibc（风险高）、降级Node版本或使用容器技术。最终选择通过Docker容器隔离环境，采用Node22-alpine镜像构建自动化部署流程。方案包含docker-compose配置、容器内pnpm安装及构建脚本，并实现编译产物自动同步到生产目录，同时确保了文件权限和服务的平滑重启，有效规避了系统库版本冲突问题。（143字）
详解前端模块化导入中 .、.. 与 @ 的路径区别
2301_81781871的博客
09-04 762
.和虽为简单符号，却直接影响前端项目的模块化规范。和..是基于当前文件的相对路径，是简化绝对路径的配置型别名。在实际开发中，需根据目录层级和项目规范灵活选择，以写出清晰、可维护的导入代码。掌握路径规则，不仅能减少「模块找不到」的报错，更是前端工程化素养的基础体现。
Vue3 + Ant Design Vue 实现多选下拉组件（支持分组、搜索与标签省略）
weixin_42285486的博客
09-03 1079
通用性强：可复用于任何多选列表场景技术点清晰：展示 Vue3 组合式 API + Ant Design Vue 高级用法扩展方向支持远程搜索，减少本地数据加载压力支持分组标题显示，优化用户体验支持自定义标签渲染，显示更多信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值