nginx入门与实战
网站服务
想必我们大多数人都是通过访问网站而开始接触互联网的吧。我们平时访问的网站服务 就是 Web 网络服务,一般是指允许用户通过浏览器访问到互联网中各种资源的服务。
Web 网络服务是一种被动访问的服务程序,即只有接收到互联网中其他主机发出的 请求后才会响应,最终用于提供服务程序的 Web 服务器会通过 HTTP(超文本传输协议)或 HTTPS(安全超文本传输协议)把请求的内容传送给用户。
目前能够提供 Web 网络服务的程序有 IIS、Nginx 和 Apache 等。其中,IIS(Internet Information Services,互联网信息服务)是 Windows 系统中默认的 Web 服务程序
2004 年 10 月 4 日,为俄罗斯知名门户站点而开发的 Web 服务程序 Nginx 横空出世。 Nginx 程序作为一款轻量级的网站服务软件,因其稳定性和丰富的功能而快速占领服务器市 场,但 Nginx 最被认可的还当是系统资源消耗低且并发能力强,因此得到了国内诸如新浪、 网易、腾讯等门户站的青睐。
web服务器和web框架的关系
web服务器(nginx):接收HTTP请求(例如www.pythonav.cn/xiaocang.jpg)并返回数据
web框架(django,flask):开发web应用程序,处理接收到的数据
NGINX
nginx是什么
nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件。它是一个俄罗斯人lgor sysoev开发的,作者将源代码开源出来供全球使用。
nginx比它大哥apache性能改进许多,nginx占用的系统资源更少,支持更高的并发连接,有更高的访问效率。
nginx不但是一个优秀的web服务软件,还可以作为反向代理,负载均衡,以及缓存服务使用。
安装更为简单,方便,灵活。
nginx可以说是非常nb了
面试回答nginx技巧
支持高并发,能支持几万并发连接
资源消耗少,在3万并发连接下开启10个nginx线程消耗的内存不到200M
可以做http反向代理和负载均衡
支持异步网络i/o事件模型epoll
Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性。Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很好的检验。它的最终目标是打造一个高效、稳定、安全、易用的Web平台。
安装环境准备
一. gcc 安装
安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum install gcc-c++
二. PCRE pcre-devel 安装
PCRE(Perl Compatible Regular Expressions) 是一个Perl库,包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式,所以需要在 linux 上安装 pcre 库,pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令: yum install -y pcre pcre-devel
三. zlib 安装
zlib 库提供了很多种压缩和解压缩的方式, nginx 使用 zlib 对 http 包的内容进行 gzip ,所以需要在 Centos 上安装 zlib 库。 yum install -y zlib zlib-devel
四. OpenSSL 安装
OpenSSL 是一个强大的安全套接字层密码库,囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议,并提供丰富的应用程序供测试或其它目的使用。
nginx 不仅支持 http 协议,还支持 https(即在ssl协议上传输http),所以需要在 Centos 安装 OpenSSL 库。
yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel openssl openssl-devel -y
安装,启动nginx
1.下载源码包
wget -c https://nginx.org/download/nginx-1.12.0.tar.gz
2.解压缩源码
tar -zxvf nginx-1.12.0.tar.gz
3.配置,编译安装 开启nginx状态监测功能
./configure --prefix=/opt/nginx1-12/ --with-http_ssl_module --with-http_stub_status_module
make && make install
4.启动nginx,进入sbin目录,找到nginx启动命令
cd sbin
./nginx #启动
./nginx -s stop #关闭
./nginx -s reload #重新加载
安装完成后检测服务
netstat -tunlp |grep 80
curl -I 127.0.0.1
#如果访问不了,检查selinux,iptables
部署一个web站点
nginx默认站点是Nginx目录下的html文件夹,这里可以从nginx.conf中查到
location /{
root html; #这里是默认的站点html文件夹,也就是 /opt/nginx1-12/html/文件夹下的内容
index index.html index.htm; #站点首页文件名是index.html
}
如果要部署网站业务数据,只需要把开发好的程序全放到html目录下即可
[root@oldboy_python /tmp 11:34:52]#ls /opt/nginx1-12/html/
index.html jssts.jpeg lhy.mp4 man.jpg wget-log
因此只需要通过域名/资源,即可访问
http://www.pyyuc.cn/man.jpg
Nginx的目录结构
[root@oldboy_python /opt/nginx1-12 11:44:02]#ls
client_body_temp conf fastcgi_temp html logs proxy_temp sbin scgi_temp static uwsgi_temp
- conf 存放nginx所有配置文件的目录,主要nginx.conf
- html 存放nginx默认站点的目录,如index.html、error.html等
- logs 存放nginx默认日志的目录,如error.log access.log
- sbin 存放nginx主命令的目录,sbin/nginx
Nginx主配置文件解析
Nginx主配置文件/etc/nginx/nginx.conf
是一个纯文本类型的文件,整个配置文件是以区块的形式组织的。一般,每个区块以一对大括号{}
来表示开始与结束。
CoreModule核心模块 user www; #Nginx进程所使用的用户
worker_processes 1; #Nginx运行的work进程数量(建议与CPU数量一致或auto)
error_log /log/nginx/error.log #Nginx错误日志存放路径
pid /var/run/nginx.pid #Nginx服务运行后产生的pid进程号
events事件模块 events {
worker_connections //每个worker进程支持的最大连接数
use epool; //事件驱动模型, epoll默认
}
http内核模块 //公共的配置定义在http{}
http { //http层开始
...
//使用Server配置网站, 每个Server{}代表一个网站(简称虚拟主机)
'server' {
listen 80; //监听端口, 默认80
server_name localhost; //提供服务的域名或主机名
access_log host.access.log //访问日志
//控制网站访问路径
'location' / {
root /usr/share/nginx/html; //存放网站代码路径
index index.html index.htm; //服务器返回的默认页面文件
}
//指定错误代码, 统一定义错误页面, 错误代码重定向到新的Locaiton
error_page 500 502 503 504 /50x.html;
}
...
//第二个虚拟主机配置
'server' {
...
} include /etc/nginx/conf.d/*.conf; //包含/etc/nginx/conf.d/目录下所有以.conf结尾的文件 } //http层结束
Nginx虚拟主机
如果每台linux服务器只运行了一个小网站,那么人气低,流量小的草根站长需要承担高额的服务器租赁费,也造成了硬件资源浪费。
虚拟主机就是将一台服务器分割成多个“虚拟服务器”,每个站点使用各自的硬盘空间,由于省资源,省钱,众多网站都使用虚拟主机来部署网站。
虚拟主机的概念就是在web服务里的一个独立的网站站点,这个站点对应独立的域名(IP),具有独立的程序和资源目录,可以独立的对外提供服务。
这个独立的站点配置是在nginx.conf中使用server{}代码块标签来表示一个虚拟主机。
Nginx支持多个server{}标签,即支持多个虚拟主机站点。
虚拟主机类型
基于域名的虚拟主机
通过不同的域名区分不同的虚拟主机,是企业应用最广的虚拟主机。 基于端口的虚拟主机
通过不同的端口来区分不同的虚拟主机,一般用作企业内部网站,不对外直接提供服务的后台,例如www.pythonav.cn:9000 基于IP的虚拟主机
通过不同的IP区分不同的虚拟主机,此类比较少见,一般业务需要多IP的常见都会在负载均衡中绑定VIP
Nginx状态信息(status)配置
Nginx状态信息(status)配置及信息详解
nginx与php-fpm一样内建了一个状态页,对于想了解nginx的状态以及监控nginx非常有帮助。为了后续的zabbix监控,我们需要先了解一下nginx的状态页。 Nginx状态信息(status)介绍
Nginx软件在编译时又一个with-http_stub_status_module模块,这个模块功能是记录Nginx的基本访问状态信息,让使用者了解Nginx的工作状态。
要想使用状态模块,在编译时必须增加--with-http_stub_status_module参数。
监测你的nginx是否安装了status模块
[root@master conf]# /opt/nginx/sbin/nginx -V
nginx version: nginx/1.12.0
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC)
configure arguments: --prefix=/opt/nginx/ --with-http_stub_status_module
启动status状态功能,修改配置文件
#在访问ip/status的时候,进入状态功能
location /status {
#开启nginx状态功能
stub_status on;
}
平滑重启nginx
./sbin/nginx -s reload
访问status页面
http://192.168.119.10/status
通过ab压测命令检测
yum -y install httpd-tools
-n requests #执行的请求数,即一共发起多少请求。
-c concurrency #请求并发数。
-k #启用HTTP KeepAlive功能,即在一个HTTP会话中执行多个请求。
ab -kc 1000 -n 100000 http://192.168.119.10/
status页面解析
基于域名的多虚拟主机实战
nginx可以自动识别用户请求的域名,根据不同的域名请求服务器传输不同的内容,只需要保证服务器上有一个可用的ip地址,配置好dns解析服务。
/etc/hosts是linux系统中本地dns解析的配置文件,同样可以达到域名访问效果
修改nginx.conf
[root@oldboy_python ~ 14:33:16]#egrep -v '#|^$' /opt/nginx1-12/conf/nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log logs/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name www.pyyuc.cn;
location /{
root html/pyyuc;
index index.html index.htm;
}
}
}
上述代码配置了一个www.pyyuc.cn域名的站点,虚拟主机的部分就是server{}里的内容
创建pyyuc.cn的站点目录和文件
[root@oldboy_python /opt/nginx1-12/html 14:36:08]#mkdir pyyuc
[root@oldboy_python /opt/nginx1-12/html 14:36:18]#echo "<meta charset=utf8>我是pyyuc站点" > pyyuc/index.html
[root@oldboy_python /opt/nginx1-12/html 14:37:21]#cat pyyuc/index.html
<meta charset=utf8>我是pyyuc站点
上述作用创建了一个html/pyyuc站点目录,对应于虚拟主机配置文件里的root根目录的设置html/pyyuc
然后生成一个首页文件index.html,内容是“我是pyyuc站点”
检查nginx语法重新加载nginx
[root@oldboy_python /opt/nginx1-12/html 14:37:28]#../sbin/nginx -t
nginx: the configuration file /opt/nginx1-12/conf/nginx.conf syntax is ok
nginx: configuration file /opt/nginx1-12/conf/nginx.conf test is successful
#平滑重启nginx
[root@oldboy_python /opt/nginx1-12/html 14:39:18]#../sbin/nginx -s reload
检查nginx端口,进程,访问pyyuc虚拟站点
[root@oldboy_python /opt/nginx1-12/html 14:40:02]#netstat -tunlp|grep nginx
[root@oldboy_python /opt/nginx1-12/html 14:40:29]#ps -ef|grep nginx #我这里是有dns解析,没有的话则需要/etc/hosts解析
#成功配置了pyyuc虚拟主机站点
[root@oldboy_python /opt/nginx1-12/html 14:41:37]#curl www.pyyuc.cn
<meta charset=utf8>我是pyyuc站点
配置多个域名的虚拟主机
其实就是新增一个server{}虚拟主机
egrep -v '#|^$' /opt/nginx1-12/conf/nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log logs/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name www.pyyuc.cn;
location /{
root html/pyyuc;
index index.html index.htm;
}
}
server {
listen 80;
server_name www.pythonav.cn;
location /{
root html/pythonav;
index index.html index.htm;
}
}
}
创建pythonav虚拟主机站点的目录和文件
[root@oldboy_python /opt/nginx1-12 14:47:21]#mkdir -p /opt/nginx1-12/html/pythonav
[root@oldboy_python /opt/nginx1-12 14:49:33]#echo "<meta charset=utf8>我是pythonav,未成年禁止入内"> /opt/nginx1-12/html/pythonav/index.html
[root@oldboy_python /opt/nginx1-12 14:50:44]#./sbin/nginx -t
nginx: the configuration file /opt/nginx1-12/conf/nginx.conf syntax is ok
nginx: configuration file /opt/nginx1-12/conf/nginx.conf test is successful
[root@oldboy_python /opt/nginx1-12 14:51:32]#./sbin/nginx -s reload
大功告成,基于域名的虚拟主机实战搞定
[root@oldboy_python /opt/nginx1-12 14:52:12]#curl www.pythonav.cn
<meta charset=utf8>我是pythonav,未成年禁止入内
[root@oldboy_python /opt/nginx1-12 14:52:40]#curl www.pyyuc.cn
<meta charset=utf8>我是pyyuc站点
nginx访问日志(access_log)
日志功能对每个用户访问网站的日志信息记录到指定的日志文件里,开发运维人员可以分析用户的浏览器行为,此功能由ngx_http_log_module模块负责,官网地址是:
http://nginx.org/en/docs/http/ngx_http_log_module.html
控制日志的参数
log_format 记录日志的格式,可定义多种格式
accsss_log 指定日志文件的路径以及格式
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
对应参数解析
$remote_addr 记录客户端ip
$remote_user 远程用户,没有就是 “-”
$time_local 对应[14/Aug/2018:18:46:52 +0800]
$request 对应请求信息"GET /favicon.ico HTTP/1.1"
$status 状态码
$body_bytes_sent 571字节 请求体的大小
$http_referer 对应“-” 由于是直接输入浏览器就是 -
$http_user_agent 客户端身份信息
$http_x_forwarded_for 记录客户端的来源真实ip 97.64.34.118
日志效果如下
66.102.6.6 - - [14/Aug/2018:18:46:52 +0800] "GET /favicon.ico HTTP/1.1" 404 571 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36 Google Favicon" "97.64.34.118"
nginx.conf默认配置
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"'; access_log logs/access.log main;
日志格式配置定义
log_format是日志关键字参数,不能变
main是日志格式指定的标签,记录日志时通过main标签选择指定的格式。
nginx限制网站来源IP访问
如果哪天发现你的nginx很慢,或者检查access.log时候,有一个some body疯狂请求你的nginx server,那么可以禁止这个IP访问
限制ip或ip段访问
禁止访问/av/底下的资源
location /av {
deny 122.71.240.254;
#alias /opt/nginx1-12/html/av;
allow 10.1.1.0/16;
}
Nginx错误页面优化
在网站运行过程中,可能因为页面不存在等原因,导致网站无法正常响应请求,此时web服务会返回系统的错误码,但是默认的错误页面很不友好。
因此我们可以将404,403等页面的错误信息重定向到网站首页或者其他指定的页面,提升用户访问体验。
server {
listen 80;
server_name www.pythonav.cn;
root html/pythonav;
location /{
index index.html index.htm;
}
#在pythonav路径下的40x.html错误页面
error_page 400 403 404 405 /40x.html;
}
40x.html
<img style='width:100%;height:100%;' src=https://pic1.zhimg.com/80/v2-77a9281a2bebc7a2ea5e02577af266a8_hd.png>
此时访问www.pythonav.cn/asdasd错误页面已经优化了
Nginx代理
正向代理
正向代理,也就是传说中的代理,他的工作原理就像一个跳板(VPN),简单的说:
我是一个用户,我访问不了某网站,但是我能访问一个代理服务器,这个代理服务器呢,他能访问那个我不能访问的网站,于是我先连上代理服务器,告诉他我需要那个无法访问网站的内容,代理服务器去取回来,然后返回给我。
反向代理
对于客户端而言,代理服务器就像是原始服务器。
nginx实现负载均衡的组件
ngx_http_proxy_module proxy代理模块,用于把请求抛给服务器节点或者upstream服务器池
实现一个简单的反向代理
机器准备,两台服务器
master 192.168.11.63 主负载
slave 192.168.11.64 web1
主负载均衡节点的配置文件
检查语法并启动nginx
[root@master 192.168.11.63 /opt/nginx1-12]$/opt/nginx1-12/sbin/nginx -t
nginx: the configuration file /opt/nginx1-12/conf/nginx.conf syntax is ok
nginx: configuration file /opt/nginx1-12/conf/nginx.conf test is successful
#启动nginx
[root@master 192.168.11.63 /opt/nginx1-12]$/opt/nginx1-12/sbin/nginx
#检查端口
[root@master 192.168.11.63 /opt/nginx1-12]$netstat -tunlp|grep nginx
tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 8921/nginx: master
此时访问master的服务器192.168.11.63:80地址,已经会将请求转发给slave的80端口
除了页面效果的展示以外,还可以通过log(access.log)查看代理效果
master端日志
slave端日志
nginx语法之location详解
https://www.cnblogs.com/pyyu/p/10085444.html
Keepalived高可用软件
什么是keepalived
Keepalived是一个用C语言编写的路由软件。该项目的主要目标是为Linux系统和基于Linux的基础架构提供简单而强大的负载均衡和高可用性设施。
还可以作为其他服务(nginx,mysql)的高可用软件
keepalived主要通过vrrp协议实现高可用功能。vrrp叫(virtual router redundancy protocol)虚拟路由器冗余协议,
目的为了解决单点故障问题,他可以保证个别节点宕机时。整个网络可以不间断的运行。
高可用故障切换原理
在keepalived工作时,主master节点会不断的向备节点发送心跳消息,告诉备节点自己还活着,
当master节点故障时,就无法发送心跳消息,备节点就无法检测到来自master的心跳了,于是调用自身的接管程序,接管master节点的ip资源以及服务,
当master主节点恢复时,备backup节点又会释放接管的ip资源和服务,回复到原本的备节点角色。
1.硬件环境准备
实验环境应该最好是4台虚拟机,环境有限因此用2台机器
master
slave
2.centos系统和nginx代理环境
nginx入门与实战 安装 启动 配置nginx Nginx状态信息(status)配置 正向代理 反向代理 nginx语法之location详解的更多相关文章
-
nginx语法之location详解
Location语法优先级排列 匹配符 匹配规则 优先级 = 精确匹配 ^~ 以某个字符串开头 ~ 区分大小写的正则匹配 ~* 不区分大小写的正则匹配 !~ 区分大小写不匹配的正则 !~* 不区分大小 ...
-
nginx入门与实战
网站服务 想必我们大多数人都是通过访问网站而开始接触互联网的吧.我们平时访问的网站服务 就是 Web 网络服务,一般是指允许用户通过浏览器访问到互联网中各种资源的服务. Web 网络服务是一种被动访问 ...
-
11,nginx入门与实战
网站服务 想必我们大多数人都是通过访问网站而开始接触互联网的吧.我们平时访问的网站服务 就是 Web 网络服务,一般是指允许用户通过浏览器访问到互联网中各种资源的服务. Web 网络服务是一种被动 ...
-
Nginx入门到实战
location 语法 location 有”定位”的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分,定位到不同的处理方式上. 比如, 碰 ...
-
正向代理/反向代理理解、Nginx概述、安装及配置详解
一.Nginx概述 nginx是一款*的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行网站的发布处理, ...
-
CAS (5) —— Nginx代理模式下浏览器访问CAS服务器配置详解
CAS (5) -- Nginx代理模式下浏览器访问CAS服务器配置详解 tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 nginx版本: nginx-1.9.8 ...
-
06 nginx Location详解之精准匹配
一:Location详解之精准匹配 location 语法 location 有”定位”的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分, ...
-
如果nginx 中worker_connections 值设置是1024,worker_processes 值设置是4,按反向代理模式下最大连接数的理论计算公式: 最大连接数 = worker_processes * worker_connections/4
如果nginx 中worker_connections 值设置是1024,worker_processes 值设置是4,按反向代理模式下最大连接数的理论计算公式: 最大连接数 = worker_pro ...
-
openresty开发系列2--nginx的简单安装,正向、反向代理及常用命令和信号控制介绍
openresty开发系列2--nginx的简单安装,正向.反向代理及常用命令和信号控制介绍 一.nginx的安装下载及编译安装1.Nginx下载:nginx-1.13.0.tar.gz,下载到:/u ...
随机推荐
-
“.Net 社区虚拟大会”(dotnetConf) 2016 Day 2 Keynote: Miguel de Icaza
美国时间 6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开,美国时间6.8 是第二天, Miguel de Icaza 做Keynote,Miguel 在波士顿Xa ...
-
vim - save current file with a new name but keep editing current file
http://superuser.com/questions/414110/vim-save-a-file-as-a-different-filename-but-keep-w-as-the-curr ...
-
hdu1050(贪心)
囧 . 想了好久,一开始想的是一个连通图怎样用黑白两色染色,想了各种算法发现都不好做,然后灵机一动这不是网路流吗,然后想怎么建图,如果转换成网络流这题就好做了,建图加个二分应该就可以解决了,最后又发现 ...
-
新建虚拟SAN
在SCVMM中,在每台主机上新建虚拟SAN(所使用的FC适配器必须一起用NPIV,否则不可用),新建完成后,在其主机的Hyper-V管理器中也可以看到 每台主机上的虚拟SAN名称必须相同 之后就 ...
-
HTTP状态码(HTTP Status codes)简介
HTTP可能大家都熟悉,就是超文本传输协议.浏览器通过HTTP与WEB Server通讯(也有一些其它软件比如IM使用HTTP协议传递数据),把我们的请求(HTTP Request)传递给服务器,服务 ...
-
JS——基础知识(三)
1.select (1)它的选择事件是onchange (2)他的选项索引可以通过value获取,比tab选项卡要方便一点. 2.数组常用方法 (1)添加元素 push():可以向一个数组末尾添加一个 ...
-
将root 当成arraylist放入数据sturts2 入门笔记
刚启动idea 就报出错误 [-- ::,] Artifact -sturts2:war exploded: Error during artifact deployment. See server ...
-
理解linux下的load
我们在做Linux负载计算的时候,我们需要了解负载的几个概念 1)Linux负载是什么 2)Linux负载怎么计算 3)如何区分目前负载是“好”还是“坏” 4)什么时候应该注意哪些不正常的值 1) ...
-
spring boot(二)web综合开发
上篇文章介绍了Spring boot初级教程:spring boot(一):入门,方便大家快速入门.了解实践Spring boot特性:本篇文章接着上篇内容继续为大家介绍spring boot的其它特 ...
-
Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...