学习 Nginx — 入门篇 🥳

linpengteng2023-09-13 11:25

初识 Nginx

概述/简介

Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件代理服务器，在 BSD-like 协议下发行,具有高性能、高可靠性、丰富的模块化支持和简单易用的优势。

应用场景

  1. 动静分离:

    为了加快网站的解析速度，我们可以把动态页面和静态页面分散到不同的服务器进行解析，加快解析速度，降低单个服务器的压力，比如仅对一些图片、样式、脚本等静态资源设置缓存。

  2. 正向代理:

    比如国内的客户想要直接访问Google官网是无法连接的，但如果该用户可以访问某服务器，而这个服务器可以访问Google官网，那么客户可以将此服务器设置为代理服务器，借助该服务器请求获得Google的响应报文，再转发给用户。此时这个服务器称之为正向代理服务器, 如我们通过VPN科学上网。

  3. 反向代理:

    相比正向代理，客户是对代理无感知，类似于中转站。客户只需要向公开的URL向代理服务器发送请求，代理服务器自行选择目标服务器处理请求并返回数据。用户并不关心是哪个具体的目标服务器最终向他提供并完成了服务。

  4. 负载均衡:

    Nginx可以作为反向代理服务器，通过优化请求的分配和处理方式，根据一定的权重分配后端服务器的负载，提高系统的可用性和可靠性，使其更稳定。

  5. 访问控制和安全:

    Nginx可以使用访问控制、基于域名/IP地址的访问限制等来提高服务器的安全性，有效保护Web应用程序和服务器。

安装 Nginx

Window 安装

  • 打开 nginx官网，在 Mainline version(开发版) 或 Stable version(稳定版) 选择下载。

  • 解压已下载的 nginx-1.xx.x.zip 即可。

Linux 安装

bash 复制代码 
  # 安装依赖包
  yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel
  
  # 切换目录 
  cd /usr/local 
  
  # 创建存放目录 nginx 
  mkdir nginx 
  
  # 切换到 nginx 目录下 
  cd nginx 
  
  # 下载 nginx 安装包 (查看版本 http://nginx.org/download/)
  wget http://nginx.org/download/nginx-1.xx.x.tar.gz 
  
  # 解压安装包 
  tar -xvf nginx-1.xx.x.tar.gz
  
  # 解压完成后，进入 nginx 下的目录 
  cd /usr/local/nginx/nginx-1.xx.x
  
  # 如果需要把软件安装到指定目录，可以执行 './configure' 
  ./configure --prefix=/xxx/xx 
  
  # 执行 make 命令 
  make 
  
  # 执行安装命令 
  make install

Mac 安装

推荐使用 Mac 电脑内置的 homebrew

bash 复制代码 
  # 安装
  brew install nginx

  # 查看
  brew info nginx

  # 升级
  brew upgrade nginx

  # 卸载
  brew uninstall nginx

Nginx 常用命令

注：Nginx 后续操作和讲解将以 Nginx-1.25.2 为例，在 Mac 环境进行。

测试配置文件

bash 复制代码 
  # 测试
  nginx -t
  
  # 测试 - 指定配置文件
  nginx -t -c /usr/local/etc/nginx/nginx.conf

启动/重启/关闭

bash 复制代码 
  # 启动 (-c 可以指定配置文件)
  nginx
  nginx -c /usr/local/etc/nginx/nginx.conf
  
  # 重启 (因改变了Nginx相关配置，需要重新加载配置而重载)
  nginx -s reload
  
  # 快速关闭 (不保存相关信息，并迅速终止web服务)
  nginx -s stop
  
  # 平稳关闭 (保存相关信息，有安排的结束web服务)
  nginx -s quit

开机自启动方式

bash 复制代码 
  # 启动 (无法指定配置文件?)
  brew services start nginx
  
  # 重启
  brew services restart nginx
  
  # 关闭
  brew services stop nginx
bash 复制代码 
  #brew services 相关知识
  brew services list # 查看使用brew安装的服务列表
  brew services run formula|--all # 启动服务（仅启动不注册）
  brew services start formula|--all # 启动服务，并注册
  brew services stop formula|--all # 停止服务，并取消注册
  brew services restart formula|--all # 重启服务，并注册
  brew services cleanup # 清除已卸载应用的无用的配置

查看/停止 Nginx 进程

bash 复制代码 
  # 查看进程
  ps -ef | grep nginx
  
  #关闭单个进程
  kill -s QUIT 单个进程号
  
  # 快速停止 Nginx：
  kill -TERM 主进程号

  # 强制停止 Nginx：
  pkill -9 nginx

Nginx 配置概览

配置路径信息

说明 路径
安装文件目录: /usr/local/Cellar/nginx
安装文件路径: /usr/local/Cellar/nginx/1.25.2
默认配置文件: /usr/local/etc/nginx/nginx.conf
服务器默认路径: /usr/local/var/www

配置文件结构

名称 作用
全局块 配置影响nginx全局的指令。一般有运行nginx服务器的用户组，nginx进程pid存放路径，日志存放路径，配置文件引入，允许生成worker process数等
events块 配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等
stream块 配置四层协议的转发、代理或者负载均衡等
http块 可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。如文件引入，mime-type定义，日志自定义，是否使用sendfile传输文件，连接超时时间，单连接请求数等
server块 配置虚拟主机的相关参数，一个http中可以有多个server
location块 配置请求的路由，以及各种页面的处理情况

常用内置变量

变量 说明
$args 获取请求 query_string 参数
$arg_name 获取请求 query_string 参数中, key 为 name 的值
$cookie_name 获取请求中的名称为 name 的 cookie
$http_name name 为请求头中的字段名称，请求头名称全部小写，并将破折号**-** 替换为下划线 _ , 如**$http_user_agent** 获取请求头中的 User-Agent 字段
$host 获取请求的 ip , 如果没有请求头中没有 Host 请求头，那么获取的是 url 中的 ip
$uri 获取请求路径中的 path , 不包括 query string , 如 localhost:8888/path/route?args=xxx 等于 /path/route
$request_uri 获取 path 和 query string , 如 localhost:8888/path/route?args=xxx 等于 /path/route?args=xxx
$request_method 获取请求方法, 值均为大写, 如为 GET ,POST ,DELETE ,PUT

Nginx 配置文件

在上个小节中，我们简单梳理了配置文件结构 ，那在这个小节中将主要讲解最常用配置块 (http 、server 以及 location)。

全局块

主要设置一些影响 Nginx 服务器整体运行的配置指令，这些指令的作用域是 Nginx 服务器全局。

bash 复制代码 
  #将user指令注释掉，或者配置成nobody的话所有用户都可以运行
  #user nobody;
  
  #指定工作线程数，可以制定具体的进程数，也可使用自动模式，这个指令只能在全局块配置
  worker_processes 1;
  
  #指定错误日志的路径和日志级别
  #error_log  logs/error.log;
  #error_log  logs/error.log  notice;
  #error_log  logs/error.log  info;
  
  #进程文件 
  #pid logs/nginx.pid;

events块

这里主要配置 Nginx 服务器与用户的网络连接，常用的设置包括

1.设置每个work process可以同时支持的最大连接数等

2.选取哪种事件驱动模型来处理连接请求

3.设置是否允许同时接收多个网络连接

4.设置网络连接的序列化

bash 复制代码 
  events {
    #对多个 nginx 进程接收连接进行序列化，防止多个进程对连接的争抢
    #accept_mutex on;
    
    #设置是否允许同时接收多个网络连接
    #multi_accept off;
  
    #use 模型名, 指定使用哪种网络IO模型 select、poll、kqueue、epoll 等
    #use epoll; 
    
    #单个后台 worker process 进程的最大并发链接数=
    worker_connections  1024;
  }

stream块

Nginx基于TCP/UDP端口的四层负载均衡（stream模块）配置, 并在server中拦截响应请求将请求转发到upstream中配置的服务器列表按一定的分配策略访问服务器。用法和http模块差不多，关键语法几乎一致。

bash 复制代码 
  stream {
    upstream backend {
      #最小连接数策略: 将请求优先分配给压力较小的服务器
      #least_conn;
    
      #最快响应时间: 优先分配给响应时间最短的服务器
      #fair;
    
      #客户端ip绑定: 同一个ip的请求永远只分配一台服务器, 解决动态网页session共享问题
      #ip_hash;
    
      # weight 设定服务器负载权重(默认是1), backup 备用服务器
      server 10.1.23.43:80599 weight=1;
      server 10.1.23.44:80599 weight=1;
      server 10.1.23.45:80599 weight=1 backup;
    }
    
    server {
      server_name www.domain.com;
      listen 80;
      
      location /api { 
        proxy_pass backend; 
      } 
    }
  }

http块

http块是 Nginx 服务器配置中的重要部分，代理、缓存和日志定义等绝大多数的功能，包含了http全局块、upstream块、server块。在这里主要讲解http全局块的配置。

bash 复制代码 
  http {
    include mime.types; #文件扩展名与文件类型映射表 
    default_type application/octet-stream; #默认文件类型
    charset utf-8; #默认编码
    
    server_names_hash_bucket_size 128; #服务器名字的 hash 表大小
    client_header_buffer_size 32k; #上传文件大小限制
    large_client_header_buffers 4 64k; #设定请求缓
    client_max_body_size 8m; #设定请求缓
    sendfile on; #开启高效文件传输模式，普通应用设为on，下载等重应用设为off 
    autoindex on; #开启目录列表访问，合适下载服务器，默认关闭
    tcp_nopush on; #防止网络阻塞
    tcp_nodelay on; #防止网络阻塞 
    
    ##连接客户端超时时间各种参数设置## 
    keepalive_timeout 120; #单位是秒，客户端连接时时间，超时后服务器端自动关闭连接 
    client_header_timeout 10; #客户端请求头的超时时间 
    client_body_timeout 10; #客户端请求主体超时时间 
    reset_timedout_connection on; #告诉 Nginx 关闭不响应的客户端连接
    send_timeout 10; #客户端响应超时时间，在两次客户端读取操作之间
    
    #FastCGI 可以将Web服务器和应用程序间(Java/Golang)的通信转换为基于TCP/IP的套接字连接
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 128k; 
    
    #传输文件压缩 gzip 模块设置, 需要和 --with-http_gzip_static_module 一起编译
    gzip on; #开启 gzip 压缩输出 
    gzip_min_length 1k; #最小压缩文件大小
    gzip_buffers 4 16k; #压缩缓冲区
    gzip_http_version 1.0; #压缩版本（默认 1.1，前端如果是 squid2.5 请使用 1.0） 
    gzip_comp_level 2; #压缩等级 (1 最小处理最快, 9 处理最慢传输速度最快)
    gzip_types text/plain application/x-javascript text/css application/xml; #压缩类型，默认就已经包含 text/html
    gzip_vary on; #设置为开启，服务器返回数据时会在头部带上"Vary:Accept-Encoding"的标识, 默认关闭
    
    #代理缓存服务器设置
    proxy_connect_timeout 10; #服务器连接的超时时间
    proxy_read_timeout 180; #连接成功后,等候后端服务器响应时间
    proxy_send_timeout 5; #后端服务器数据回传时间
    proxy_buffer_size 16k; #缓冲区的大小
    proxy_buffers 4 32k; #每个连接设置缓冲区的数量为number，每块缓冲区的大小为size
    proxy_busy_buffers_size 96k; #开启缓冲响应的功能以后，在没有读到全部响应的情况下，写缓冲到达一定大小时，nginx一定会向客户端发送响应，直到缓冲小于此值
    proxy_temp_file_write_size 96k; #设置nginx每次写数据到临时文件的size限制
    proxy_temp_path /tmp/temp_dir; #从后端服务器接收的临时文件的存放路径
    proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:512m inactive=10m max_size=64m;
    #以上 proxy_temp_path 和 proxy_cache_path 需要在同一个分区中
    #其中 levels=1:2 缓存级别, 表示采用2级目录结构
    #其中 keys_zone=cache_one:512m 缓存空间起名为 cache_one 大小为 512m
    #其中 max_size=64m 表示单个文件超过64m就不缓存了 
    #其中 inactive=10m 表示缓存的数据, 10分钟内没有被访问过就删除
    
    
    # 例 - 反向缓存代理服务器
    server {
      listen 80;
      server_name localhost;
      root /Users/html/;

      #要缓存文件的后缀，可以在以下设置。
      location ~ .*.(gif|jpg|png|css|js)(.*) {
        proxy_pass http://ip地址:8080; # nginx缓存里拿不到资源，向该地址转发请求，拿到新的资源，并进行缓存
        proxy_redirect off; # 设置后端服务器"Location"响应头
        proxy_set_header Host $host; #允许重新定义或者添加发往后端服务器的请求头
        proxy_cache cache_one; # 指定用于页面缓存的共享内存，对应http层设置的keys_zone
        proxy_cache_valid 200 302 24h; # 为不同的响应状态码设置不同的缓存时间
        proxy_cache_valid 301 30d; # 为不同的响应状态码设置不同的缓存时间
        proxy_cache_valid any 5m; # 为不同的响应状态码设置不同的缓存时间
        expires 90d; # 设置缓存时间
      }
    }

    
    # 例 - 负载均衡配置
    upstream backend {
      #最小连接数策略: 将请求优先分配给压力较小的服务器
      #least_conn;
    
      #最快响应时间: 优先分配给响应时间最短的服务器
      #fair;
    
      #客户端ip绑定: 同一个ip的请求永远只分配一台服务器, 解决动态网页session共享问题
      #ip_hash;
    
      # weight 设定服务器负载权重(默认是1), backup 备用服务器
      server 10.1.23.43:80599 weight=1;
      server 10.1.23.44:80599 weight=1;
      server 10.1.23.45:80599 weight=1 backup;
    }
    
    server {
      server_name www.domain.com;
      listen 80;
      
      location / { 
        proxy_pass http://backend; 
      } 
    }
    
    
    # 例 - 配置 https 
    server { 
      listen 443 ssl;
      server_name www.domain.com;
      
      ssl on;
      ssl_certificate /etc/nginx/server.crt;
      ssl_certificate_key /etc/nginx/server.key;
      ssl_session_timeout 5m;
      
      location / {
        root /usr/local/web/;
        add_header 'Cache-Control' 'no-store';
      }
    }
  }

server块

用于指定虚拟主机的域名或IP地址。如果一个请求的Host头中的值和server_name匹配，则nginx将会使用该虚拟主机配置处理该请求。

每个server块又分为全局server块，和一个或多个location块。在这里主要讲解server全局块的配置。

bash 复制代码 
  http {
    #指定服务器的IP地址
    server {
      listen 80;
      server_name 192.168.1.100;
      
      location / {
        root /var/www/html;
      }
    }


    #指定服务器的域名
    server {
      listen 80;
      server_name www.example.com;
      
      location / {
        root /var/www/html;
      }
    }


    #可以使用正则表达式匹配(需要～, 标志正则表达式)
    #下面可以匹配 www.example.com 和 example.com
    server {
      listen 80;
      server_name ~^(www.)?example.com$;
      
      location / {
        root /var/www/html;
      }
    }


    #可以使用通配符匹配, 只能用在如下两种情况
    #1.三段字符串组成名称的首段或尾段
    #2.两段字符串组成名称的尾段
    server {
      listen 80;
      server_name *.example.com example.*;
      
      location / {
        root /var/www/html;
      }
    }
  }

如果被多个虚拟主机的 server_name 匹配成功，那么请求处理优先级如下

1.准确匹配到 server_name

2.通配符在开始时匹配到 server_name

3.通配符在结尾时匹配到 server_name

4.正则表达式匹配 server_name

5.按顺序进行匹配 server_name

注意事项

1.server_name不应该包含端口号

2.server_name中使用空格隔开的多个域名

3.server_name默认值为localhost

location块

用来匹配不同的url请求，进而对请求做不同的处理和响应

root / alias 指令

root: 配置 URL 路径附加到根位置形成最终文件路径

alias: 配置 URL 路径映射到根位置以外的其他目录

bash 复制代码 
  http {
    server {
      listen 80;
      server_name www.example.com;
      
      # root (结尾 '/' 可有可无)
      # www.example.com/img1/1.png -> /var/www/html/img1/1.png
      location /img1 {
        root /var/www/html;
      }
      
      
      # alias (映射到某个目录, 必须以 '/' 结尾)
      # www.example.com/img2/1.png -> /var/www/html/1.png
      location /img2 {
        alias /var/www/html/;
      }
      
      
      # alias (映射到具体文件)
      # www.example.com/img2/1.png -> /var/www/html/1.png
      location ~ ^/img2/1.png$ {
        alias /var/www/html/1.png;
      }
    }
  }

rewrite 指令

作用: http 请求重定向处理

语法: rewrite regex replacement [flag]

bash 复制代码 
  http { 
    server {
      listen 80; 
      server_name www.example.com;
    
      #flag=redirect (临时重定向)
      location /to_redirect { 
        rewrite ^/to_redirect http://www.google.com redirect; 
      } 
  
      #flag=permanent (永久重定向)
      location /to_permanent { 
        rewrite ^/to_permanent http://www.google.com permanent; 
      }
  
      #flag=break (停止匹配，在当前 `location` 去搜索资源)
      location /to_break { 
        root /var/www/html/to_break;
        rewrite /to_break/(.*) /test/$1 break; 
      } 
  
      #flag=last (发送一个新的请求去匹配 location)
      location /to_last { 
        root /var/www/html/to_last;
        rewrite /to_last/(.*) /test/$1 last; 
      } 
  
      location /test/ { 
        root /var/www/html; 
      }
    }
  }

  • flag=redirect :

    临时重定向，浏览器根据响应状态 302 和 响应头 Location 跳转对应地址。

  • flag=permanent :

    永久重定向，浏览器根据响应状态 301 和 响应头 Location 跳转对应地址。

    当再次访问 www.example.com/to_permanen... 时 不会询问 nginx 直接跳转新地址。

  • flag=break :

    当访问 www.example.com/to_break/1.... 实际匹配第三个 location ，然后在当前上下文处理。其中 /to_break/1.jpg 被替换为 /test/1.jpg 进行处理，然后和 root 指定路径匹配，返回 /var/www/html/to_break/test/1.jpg 数据。

  • flag=last :

    当访问 www.example.com/to_last/1.p... 实际匹配第四个 location ，其中 /to_break/1.jpg 被替换为 /test/1.jpg 去匹配新的 location 进行处理，最终匹配第五个location ，返回 /var/www/html/test/1.jpg 数据。

try_files 指令

以指定顺序检查文件是否存在，并使用第一个找到的文件进行请求处理。如果找不到内容内部转发到最后一个参数 uri (获取请求路径中的path)

bash 复制代码 
  http { 
    server {
      listen 80; 
      server_name www.example.com;
      
      location /try/ { 
        root /var/www/html;
        index  index.html;
        try_files $uri $uri/ @proxy_pass; 
      } 
      
      location @proxy_pass { 
        default_type application/json; 
        return 200 "没到到页面代理数据"; 
      }
    }
  }

访问 www.example.com/try/file?qu... 时，$uri 为 /try/file

  1. 查找 root + $uri -> /var/www/html/try/file 找到则返回
  2. 查找 root + $uri/ -> /var/www/html/try/file/index.html 找到则返回
  3. 转发 @proxy_pass 处理

资源缓存配置

  • 协商缓存: ETag/if-None-Match 和 Last-Modified/if-Modify-Since 两种
  • 强制缓存: Cache-Control
bash 复制代码 
  http { 
    server {
      listen 80; 
      server_name www.example.com;
      
      location ~* \.(css|js|png|jpg|jpeg|gif)$ { 
        #协商缓存 (默认开启，可省略)
        #etag on;
        #if_modified_since exact;
        
        #强制缓存 (推荐)
        #Cache-Control=no-cache: 需要进行协商缓存，发送请求到服务器确认是否使用缓存
        #Cache-Control=no-store: 禁止使用缓存，每一次都要重新请求数据
        #Cache-Control=public: 可以被所有的用户缓存，包括终端用户和CDN中间代理服务器
        #Cache-Control=private: 只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器
        add_header Cache-Control "max-age=31536000"; #缓存一年
      }
    }
  }

Url 路由规则

规则 类型 匹配
= 精准匹配 严格匹配。如果请求匹配这个 location，那么将停止搜索并立即处理此请求
~ 正则匹配 区分大小写匹配(可用正则表达式)
~ 正则匹配 不区分大小写匹配(可用正则表达式)
!~ 正则匹配 区分大小写不匹配
!~ 正则匹配 不区分大小写不匹配
^~ 普通匹配 前缀匹配, 优先于正则匹配
@ 命名location "@" 定义一个命名的location，仅在在内部定向时使用

注意事项 (!~ 和 !~ * 仅支持在 if 中使用)

  • if ($host !~*) 这样的写法可行
  • if ($host !~) 这样的写法可行
  • location !~* 这样写法不支持
  • location !~ 这样写法不支持
bash 复制代码 
  http { 
    server {
      listen 80; 
      server_name www.example.com;
      
      #http://www.example.com/abcd - 正好完全匹配
      #http://www.example.com/ABCD - 如果运行 Nginx 系统本身对大小写不敏感, 则匹配
      #http://www.example.com/abcd?param - 匹配，因为忽略查询串参数
      #http://www.example.com/abcd/ - 不匹配，因为末尾存在反斜杠
      #http://www.example.com/abcde - 不匹配，因为不是完全匹配
      location = /abcd {}
      
      #http://www.example.com/abcd - 正好完全匹配
      #http://www.example.com/ABCD - 如果运行 Nginx 系统本身对大小写不敏感, 则匹配
      #http://www.example.com/abcd?param - 匹配，因为忽略查询串参数
      #http://www.example.com/abcd/ - 匹配
      #http://www.example.com/abcde - 匹配
      location /abcd {}
      
      #http://www.example.com/abcd - 正好匹配 ^/abcd$
      #http://www.example.com/ABCD - 不匹配，因为区分大小写
      #http://www.example.com/abcd?param - 匹配，因为忽略查询串参数
      #http://www.example.com/abcd/ - 不匹配正则表达式 ^/abcd$
      #http://www.example.com/abcde - 不匹配正则表达式 ^/abcd$
      location ~ ^/abcd$ {}
      
      #http://www.example.com/abcd - 正好匹配 ^/abcd$
      #http://www.example.com/ABCD - 匹配，因为不区分大小写
      #http://www.example.com/abcd?param - 匹配，因为忽略查询串参数
      #http://www.example.com/abcd/ - 不匹配正则表达式 ^/abcd$
      #http://www.example.com/abcde - 不匹配正则表达式 ^/abcd$
      location ~* ^/abcd$ {}
    }
  }

Url 匹配顺序

  1. =: 精准匹配，如果匹配成功，则停止其他匹配

  2. ^~ 和 无符号 : 普通匹配，遍历记录所有非正则匹配，选择字符最长的 location 作为匹配, 如果选择的 location 是使用了 ^~ 修饰符，则停止正则匹配

  3. 正则表达式指令匹配，按照配置文件里的顺序从上到下进行匹配，如果成功匹配就停止其他匹配。如果所有正则都未匹配成功，则使用普通字符串匹配结果（最长字符）

相关推荐
有梦想的刺儿1 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具22 分钟前
点击评论详情，跳到评论页面，携带对象参数写法：
前端
苹果醋330 分钟前
Java8-＞Java19的初步探索
java·运维·spring boot·mysql·nginx
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
雨雪飘零1 小时前
Windows系统使用OpenSSL生成自签名证书
nginx·证书·openssl
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理：Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法，脚手架，父子传参，refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解