Nginx学习笔记

2023-05-16

文章目录

  • 一、Nginx初始
  • 二、正向代理和反向代理
    • (一)正向代理
    • (二)正向代理的使用场景
    • (三)反向代理
    • (四)反向代理的使用场景
  • 三、Nginx的安装
    • (一):Linux下安装Nginx
    • (二):Windows下安装Nginx
  • 四、Nginx常用命令
  • 五、Nginx配置(nginx.conf文件内容模块及作用)
    • (一)文件内容及模块
    • (1)、全局块的作用
    • (2)、events块的作用
    • (3)、Http块的作用
    • (3.1、虚拟主机的配置
    • (3.2、日志的配置
  • 六、反向代理配置
    • (一)配置反向代理的nginx.conf文件
    • (二)实现在同一域名下,根据不同的访问路径访问不同的项目
  • 七、负载均衡
    • (一)概念
    • (二)负载均衡器可以处理的四大类型的请求
    • (三)负载均衡的调度算法
    • (四)负载均衡的使用
  • 八、动静分离
    • (一)概念
    • (二)实现方式
    • (三)动静分离的应用
  • 九、location块补充
    • (一)、匹配规则
    • (二) URL重写


一、Nginx初始

Nginx是一个高性能的Http和反向代理服务器,也是一个IMAP/POP3/SMTP等邮件代理服务器

二、正向代理和反向代理

如果客户端(client)不能直接访问服务端(server),则需要代理服务器(proxy)进行访问

(一)正向代理

正向代理:客户端通过设置,使用代理服务器去访问远程服务器

(二)正向代理的使用场景

1、可以访问原来无法访问的资源
2、可以做缓存使用,加快访问速度
3、对客户端授权或记录访问信息等

(三)反向代理

反向代理:服务器通过代理服务接收连接请求,然后再转发给内部网络的服务器,将服务器的结果返回给客户端,此时这种代理叫反向代理

(四)反向代理的使用场景

1、保证内网的安全,阻止web攻击
2、负载均衡,优化网站的负载(处理能力)

注意:正向代理知道是通过代理服务器访问服务端的,但是反向代理不知道是通过代理服务器访问服务端的
一句话总结:代理服务器站在客户端一边(客户端知道是通过代理服务器访问的)就是正向代理,代理服务器站在服务器端一边(客户端不知道是通过代理服务器访问的),就是反向代理

三、Nginx的安装

(一):Linux下安装Nginx

以openssl为例:
1、在各官网下载相关组件: Nginx 、openssl 、 zlib 、 pcre等
2、通过rz 上传压缩包
3、通过tar -xvf *.tar.gz进行解压缩
4、通过cd 文件夹名 进入解压后的文件夹中
5、通过 ./config 执行配置相关的检查
6、通过make & make install进行编译和安装

注意:如上过程适用于zlib和pcre ,对于pcre而言,执行检查命令为./configure
7、安装nginx过程中、执行配置检查
图片:
8、仍然执行make以及make install
9、nginx安装成功,./nginx进行验证
注意事项:nginx服务器,需要虚拟机开放80端口的访问
防火墙配置(同样适用于tomcat开放8080 8081端口)
firewall-cmd --list-all 查看当前配置
firewall-cmd --add-service=http --permanent 开放http访问
firewall-cmd --add-port=80/tcp --permanent 开放80端口
firewall-cmd --reload 重启防护墙保护
JDK的安装:
1、解压缩—拷贝目录到/usr/local/java
2、更改环境变量 vim /etc/profile
图片
3、让环境变量生效 source /ect/profile
4、验证版本 java --version
Tomcat的安装
1、解压缩—拷贝目录到 /usr/local/tomcat
2、直接执行 ./startup.sh 启动

(二):Windows下安装Nginx

四、Nginx常用命令

nginx安装包所在目录 /usr/local/src/
nginx安装目录:/usr/local/nginx/
启动命令:./nginx
验证方式:浏览器访问 虚拟机ip地址(出现nginx欢迎页面)
关闭方式:
1、./nginx -s stop 原生命令
2、也可以通过linux关闭进程的命令关闭,
查看文件 cat nginx.pid
杀死进程:kill +参数+pid 形式 (pid表示进程的id)
如:kill -9 pid 强行停止服务
kill -TERM pid 快速停止服务
kill -QUIT pid 平缓停止服务
注意:启动后,进程id存放位置 /usr/local/nginx/nginx.pid
查看所有命令: ./nginx -h
信号处理命令:./nginx -s +(stop,quit,reopen,reload)
其中reload 是重新加载命令,在更改配置后使用
quit仍然是平缓停止的意思(完整有序),stop快速停止

五、Nginx配置(nginx.conf文件内容模块及作用)

查看nginx配置:cat nginx.conf

(一)文件内容及模块


#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 {
    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;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

分为三个部分:全局块、events块、http块。

(1)、全局块的作用

全局块:全局指令,指定运行时的用户组、进程id存在位置、日志存放位置、worker process数量等
如:

#配置用户或者用户组
#user  nobody;

#允许生成的进程数(支持的并发数量)
worker_processes  1;

#配置日志的路径 可以配置日志级别 (debug | info | notice | warn | error | crit)
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#配置存储进程id的文件地址
#pid        logs/nginx.pid;

(2)、events块的作用

影响nginx服务器和用户网络连接的配置,比如每个进程的最大连接数、选取哪种事件驱动模型、以及在网络连接过程中,是否开启多个,是否序列化等

events {
	#配置每个进程的最大连接数,默认为1024
    worker_connections  1024;
}

(3)、Http块的作用

配置代理、缓存、日志等绝大部分功能的地方,可以嵌套多个server块,而且不同的server可以对应不同的域名(就是在一个nginx服务器上配置多个域名,这种方式通常称为虚拟主机),

虚拟主机:同一台Nginx服务器,可以支持多个网站的运行,每个虚拟主机之间都相互独立,具有完整功能。(可以节约使用成本)

(3.1、虚拟主机的配置

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;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
	#配置对应的虚拟主机
    server {
    	#监听的端口
        listen       80;
        #监听的域名
        server_name  localhost;
        	
		#定位出路径或文件地址
        location / {
        	#部署项目jar包的相对路径
            root   html;
            #默认跳转的首页地址
            index  index.html index.htm;
        }
    }    
}

配置指定域名(www.ceshi.com),访问到虚拟机的页面
1、在安装目录下,创建一个存放要部署的项目文件夹,如:mkdir ceshi
2、将要部署的文件存放在ceshi文件夹中
3、注意在配置config文件时记得备份一份,防止配置出错
更改配置如下

 server {
        listen       80;
        server_name  www.ceshi.com;
        location / {
            root   ceshi;
            index  index.html index.htm;
        }
    }    

4、给域名配置ip地址的映射(更改C:\Windows\System32\drivers\etc 下的host文件)

# Copyright (c) 1993-2009 Microsoft Corp.
#
		.............
		
# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

#给域名配置ip地址的映射
192.168.1.20		www.ceshi.com

5、浏览器输入虚拟机地址或者域名,均能返回项目首页

(3.2、日志的配置

通过日志,可以获取用户的地址信息、跳转来源、终端、以及url访问量的

	
	#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;

日志的demo

127.0.0.1 - - [12/Sep/2022:17:56:58 +0800] "GET /favicon.ico HTTP/1.1" 404 555 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.33"

log_format main 参数说明

名字用途
remote_addr客户端的ip地址
remote_user客户端的用户名称
time_local访问时间和时区
request请求方法
status响应状态码 如:200
body_bytes_sent主体内容字节数 如:612
http_referer记录是从哪个链接访问过来的
http_user_agent代表用户使用的代理,一般为浏览器
http_x_forwarded_for通过代理服务器来记录客户端的ip地址

可以通过脚本实现日志切割(每天生成一份日志)
1、重命名日志文件
2、让nginx重新从配置文件总读取日志文件名,这样就可以达到在新的日志文件中记录日志效果

六、反向代理配置

前提:在linux系统中安装好jdk和tomcat(配置好环境变量)
安装路径:
1、jdk路径:/usr/local/java/
2、tomcat路径:/usr/local/tomcat/
启动方式:/usr/local/tomcat/bin 执行 ./startup.sh
关闭方式:执行 ./shutdown.sh
验证方式: 虚拟机ip:8080 可以看到tomcat页面

需求:
访问www.ceshi.com 显示百度的页面

(一)配置反向代理的nginx.conf文件

	#配置对应的虚拟主机
    server {
    	#监听的端口
        listen       80;
        #监听的域名
        server_name  www.ceshi.com;
        	
		#定位出路径或文件地址
        location / {
        	#部署项目jar包的相对路径
            root   ceshi;
            #将域名请求,跳转发送到百度上,相当于直接访问https://www.baidu.com
            proxy_pass  https://www.baidu.com
            #默认跳转的首页地址
            index  index.html index.htm;
        }
    }    

注意:更改配置文件nginx.conf文件后,执行重加载命令 ./nginc -s reload

(二)实现在同一域名下,根据不同的访问路径访问不同的项目

**需求:**一个nginx服务器连接多个项目,当域名对应的路径不同时,跳转不同的项目

配置nginx.conf配置文件

#配置对应的虚拟主机
    server {
    	#监听的端口
        listen       80;
        #监听的域名
        server_name  www.ceshi.com;
        	
		#定位出路径或文件地址
        location ~/baidu1 {  #~/baidu1 表示当访问www.ceshi.com+baidu1时跳转的页面为https://baidu.com
        	#部署项目jar包的相对路径
            root   ceshi;
            #将域名请求,跳转发送到百度上,相当于直接访问https://www.baidu.com
            proxy_pass  https://www.baidu.com
            #默认跳转的首页地址
            index  index.html index.htm;
        }
        #定位出路径或文件地址
        location ~/guge1 {  #~/guge1 表示当访问www.ceshi.com+guge时跳转的页面为https://www.guge.com
        	#部署项目jar包的相对路径
            root   guge1;
            #将域名请求,跳转发送到百度上,相当于直接访问https://www.baidu.com
            proxy_pass  https://www.guge.com
            #默认跳转的首页地址
            index  index.html index.htm;
        }
    }    

七、负载均衡

(一)概念

早期使用DNS(域名解析系统)做负载,具体而言,给客户端解析不同的ip地址,让流量直接到达服务器。
clientN 先到达负载均衡器(load balancer) 再通过调度算法 分配到不同的serverN
优点:
1、通过健康检测,避免单点故障
2、当发现节点故障时,从集群中移除,保证应用的高可用
四层负载均衡,在OSI模型的传输层,主要是转发
七层负载均衡,在OSI模型的应用层,主要是代理

(二)负载均衡器可以处理的四大类型的请求

HTTP/HTTPS/TCP/UDP等

(三)负载均衡的调度算法

1、轮询:相当于将服务器从第一台到最后一台形成一个环状,每接收一个请求,则从第一台开始循环遍历。
2、最小连接,优先选择连接数最小的服务器,适用于会话时间较长的业务处理
3、ip映射,根据请求的ip地址进行散列,让同一个ip下的请求都映射到同一服务器上,可以解决session问题(粘性会话)

(四)负载均衡的使用

需求:当访问虚拟机ip 192.168.2.10/lb/index.html时,通过负载均衡,让请求平均分配到8080和8081tomcat端口中
1、分别找到两个tomcat的安装目录,如/usr/local/tomcat/webapps
创建lb目录, mkdir lb
创建访问页面 ,cp tomcat1/index.html
查看页面内容, cat lb/index.html
2、配置nginx.conf
注意:使用负载均衡时,需要在http块下创建一个upstream 名字 块,如

http{
	#创建upstream块,用来记录server列表的的地址和端口
	upstream  myserver{
		server 192.168.1.20:8080
		server 192.168.1.20:8081
	}
	server{
	
	}
}

再增加一个location

location ~/lb/ {
	#将请求映射到负载均衡器中 参数为配置的upstream名称
	proxy_pass  http://myserver;
}

完整如:

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;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
    #创建upstream块,用来记录server列表的的地址和端口
	upstream  myserver{
		server 192.168.1.20:8080
		server 192.168.1.20:8081
	}
    
	#配置对应的虚拟主机
    server {
    	#监听的端口
        listen       80;
        #监听的域名
        server_name  localhost;
        	
		location ~/lb/ {
			#将请求映射到负载均衡器中  参数为配置的upstream名称
			proxy_pass  http://myserver;
		}
    }    
}

以上时默认的轮询调度算法

如果需要某个服务器处理的更多些,则需要额外设置权重,则在server 后面加 weigth=数字,weight的默认值是1

如:

     upstream  myserver{
		server 192.168.1.20:8080 weight=2
		server 192.168.1.20:8081 weigth=1
	}

如果需要根据ip地址,固定server处理,可以使用ip_hash。
如:

upstream  myserver{
		server 192.168.1.20:8080 weight=2;
		server 192.168.1.20:8081 weigth=1;
		ip_hash;
	}

八、动静分离

(一)概念

将动态和静态请求分离开,不能单纯的理解为动态页面和静态页面的物理分离。
如果是静态资源请求,直接查找nginx上的静态资源地址
如果是动态资源请求,通过反向代理,映射到tomcat路径下的资源

(二)实现方式

1、单独把静态文件放在独立的服务器及独立的域名下,推荐方案
2、将动态资源和静态资源混合在一起,通过nginx来分开

(三)动静分离的应用

需求:
访问图片等静态资源时,可以直接从nginx中获取,访问jsp等动态资源时,通过tomcat返回结果
处理流程
1、在/usr/local/tomcat/webapps下通过rz命令上传本地的index.jsp
2、在/usr/local/nginx/image下通过rz命令上传本地的test.png图片
3、配置nginx.conf文件
如:

#配置动态资源的请求转发	
		location ~.*.jsp$ {
			#将请求映射到负载均衡器中  参数为配置的upstream名称
			proxy_pass  http://myserver;
		}
		#配置静态资源的请求转发	
		location ~.*\.(gif|jpg|png|css)$ {
			#配置静态资源的存放路径
			root /usr/local/nginx/image
			#在浏览器端使用缓存,配置过期时间,相当于redis 3d表示三天
			ecpire 3d}

完整配置

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;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
    #创建upstream块,用来记录server列表的的地址和端口
	upstream  myserver{
		server 192.168.1.20:8080
	}
    
	#配置对应的虚拟主机
    server {
    	#监听的端口
        listen       80;
        #监听的域名
        server_name  localhost;
        #配置动态资源的请求转发	
		location ~.*.jsp$ {
			#将请求映射到负载均衡器中  参数为配置的upstream名称
			proxy_pass  http://myserver;
		}
		#配置静态资源的请求转发	
		location ~.*\.(gif|jpg|png|css)$ {
			#配置静态资源的存放路径
			root /usr/local/nginx/image
			#在浏览器端使用缓存,配置过期时间,相当于redis 3d表示三天
			ecpire 3d}
    }    
}

4、验证方式:分别访问:http://192.168.1.20/jsp/index.html和http://192.168.1.20/test.png

九、location块补充

(一)、匹配规则

1、location=/uri 精确匹配
2、location^~ /uri 前缀匹配 顺序在正则之前
3、location /uri 前缀匹配,顺序在正则匹配之后
4、location -pattern 区别大小写的正则匹配
5、location -*pattern 不区分大小写的正则匹配
6、location / 通用匹配,接受未匹配到其他location的请求

匹配顺序:
首先会精确匹配,然后会进行前缀匹配,具体顺序按照指令长度,从长到短的顺序依次匹配。但是在正则匹配时,是按照配置文件的顺序依次匹配的,如果不希望前缀匹配进行正则匹配,那么使用^~

(二) URL重写

对url的规范处理,域名更换时的新旧跳转,一些额外的参数调整等

#配置对应的虚拟主机
    server {
    	#监听的端口
        listen       80;
        #监听的域名
        server_name  www.ceshi.com;
        #url重写,当访问www.ceshi.com 时,地址栏会变成www.baidu.com
      	rewrite ^/(.*) http://www.baidu.com/$1 pernanent;
    }  
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Nginx学习笔记 的相关文章

  • 4位数值比较器电路

    4位数值比较器电路 题目描述 xff1a 使用门级描述方式 xff0c 实现4位数值比较器 某4位数值比较器的功能如下表 96 timescale 1ns 1ns module comparator 4 input 3 0 A input
  • Maven项目pom.xml project标签爆红解决方法

    今天在打开项目的时候 xff0c 发现了一个Maven项目的问题 xff0c 在Maven项目的pom xml文件中 xff0c project标签爆出了一个错误 parent relativePath of POM com hrp spr
  • 人工智能学习笔记五——孪生神经网络

    本文将用孪生神经网络模型 xff0c 对手写数字集minist进行相似度比较 xff0c 用的框架是keras 如果还不清楚神经网络 xff0c 可以看一下这篇文章 神经网络 caodong0225 github io MNIST 是一个手
  • Docker Swarm实战初探

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 环境 宿主机 xff1a macOS 10 15 7虚拟机平台 xff1a Parallels Desktop 15 1 2虚拟机
  • 零基础DIY四轴飞行器超级详细保姆级教程(STM32F407ZGT6主控、WIFI图传、陀螺仪平衡、气压计/超声波定高、手机蓝牙控制等功能)

    前言 大四毕业后暑假没事做就花了一点DIY了一个四轴飞行器 xff0c 是比较大的那种F450机架 xff0c 不是那种PCB板做机架的小四轴 xff0c 因为我也是从零基础开始做的四轴 xff0c 现在就想把自己的过程写成博客分享在网上
  • shell教程

    shell 简介 Shell是一种脚本语言 xff0c 通常用于在Unix和类Unix操作系统上进行命令行交互 它是用户与操作系统内核之间的接口 xff0c 允许用户通过命令行或脚本文件来控制计算机上的操作 Shell程序通常用于执行复杂的
  • matlab画图常用函数image、imagesc、imshow区别

    1 image函数 从数组显示图像 xff0c 直接把矩阵中的值当作索引值 xff08 称为直接映射 xff09 xff0c 即数值1对应RGB1 xff0c 数值2对应于RGB2 xff0c 当小于1或大于64时表现为两端的颜色 语法1
  • 树莓派WiFi连接问题及网页打开问题的解决

    树莓派WiFi连接问题及网页打开问题的解决 一 问题描述 前一段时间在网上买了一个树莓派 4b计划做一个人脸识别的智能锁 xff0c 前一段时间整赶上期末考试 xff0c 挤时间做了做人脸识别以及人体红外感知模块 xff0c 大致能简单实现
  • C++11之正则表达式(regex_match、regex_search、regex_replace)

    在C 43 43 11中引入了正则表达式 字符规则 先来了解一下这个字符的含义吧 字符描述 转义字符 匹配字符行尾 匹配前面的子表达式任意多次 43 匹配前面的子表达式一次或多次 xff1f 匹配前面的子表达式零次或一次 m 匹配确定的m次
  • Java中Lambda表达式使用及详解

    Java中Lambda表达式使用及详解 前言 一 Lambda表达式的简介 Lambda表达式 xff08 闭包 xff09 xff1a java8的新特性 xff0c lambda运行将函数作为一个方法的参数 xff0c 也就是函数作为参
  • 栈的出栈次序及次序种类

    学过数据结构的程序猿应该都清楚 xff0c 栈是一种先入后出 xff0c 后入先出 xff08 LIFO xff09 的表 即插入和删除都只能在一个位置上进行 xff0c 即栈顶位置 对栈的基本操作有Push xff08 入栈 xff09
  • ANO匿名飞控时间片调度移植至普通STM32工程

    工程结构 时间片调度相关的代码位于SCHEDULER目录下的Scheduler和Task文件中 xff0c 匿名飞控原本的时钟由传感器输出的1ms脉冲实现的外部中断提供 xff0c 为使时间片调度算法可以用于一般的工程 xff0c 此处改为
  • for(let i in arr) for(let i of arr )与普通for循环的区别

    span class token keyword let span arr span class token operator 61 span span class token punctuation span span class tok
  • 执行webpack命令出错:无法识别webpack && Can‘t resolve ‘./src‘ in xxx

    一 webpack 无法将 webpack 项识别为 cmdlet 函数 脚本文件或可运行程序的名称 解决方案 xff1a 全局安装webpack 和webpack cli 命令 xff1a cnpm install webpack cli
  • 豆瓣API获取的图片不显示

    一 问题 xff1a 使用豆瓣API获取到的数据不能正常显示 二 解决方法 从控制台中查看图片的url地址发现 xff1a 同为一个网站提供的数据但是提供的url地址的域名却不同 这是不符合情理的 xff0c 因为为了使数据有规律 xff0
  • 使用 vue cli 的 vue serve命令单独运行.vue文件报错: Error: Cannot find module ‘@vue/compiler-sfc/package.json‘

    目录 一 问题 二 无需配置直接运行 vue文件 三 解决 1 详细错误 四 总结 一 问题 根据vue cli官方文档 https cli vuejs org zh guide prototyping html学习无需配置直接运行 vue
  • sass文件中使用深度选择器 /deep/不起作用

    目录 一 问题 二 原因 三 解决 使用deep深度选择器的基本步骤 四 总结 一 问题 1 想在当前的 vue文件中使用 deep 深度选择器修改第三库引入的组件或自定义组件的样式 xff0c 但是修改不成功 二 原因 1 自定义组件my
  • IconFont使用方式简介

    一 在线引入方式 1 iconfont中选择需要的图标 xff0c 加入购物车 图1 2 点击图1所示的购物车 xff0c 弹出如图2所示的弹框 依次点击 添加至项目 选择需要添加的项目 再点击确定 跳转到如图3所示的页面 图2 3 点击图
  • el-select下拉框没有数据

    目录 一 问题 二 问题详细描述 三 解决方法 四 总结 一 问题 1 突然发现给options赋值了 xff0c 但是下拉框没有数据 xff0c 就很奇怪 二 问题详细描述 1 直接用假数据 手动添加的数据 xff09 赋值给option
  • vue在html标签 {{}} 中调用函数的方法

    目录 一 问题 1 xff09 实现上述需求 xff1a 有两种方式 2 xff09 两种实现方式对比 xff1a 二 解决方法 xff08 在html渲染时调用函数 xff09 三 总结 注 xff1a 不想仔细看的 xff0c 可以直接

随机推荐

  • vue watch报错:Error in callback for watcher “xxx“: “TypeError: Cannot read properties of undefined ...

    目录 一 问题 二 解决方法 三 总结 一 问题 1 监听了一个data里面的对象竟然报错了 xff0c 错误还奇奇怪怪的 xff1a 不能在 undefined上使用 apply方法 1 xff09 详细错误如下 xff1a vue es
  • toFixed()*100保留的小数位数和预想的不一致

    目录 一 问题 二 原因及解决方法 三 总结 一 问题 1 因为演示需要 xff0c 要造一些假数据 xff0c 一些数据要求保留2位小数 这需求真的不难 xff0c 不就是parseFloat toFixed 不就完了 2 所以很快就写了
  • scss、css样式中使用变量的方法;Vue动态改变css等样式文件中的变量

    目录 一 问题 二 原因及解决方法 三 总结 一 问题 1 遇到一些样式 设置的值都是重复的不想重复写 xff0c 想和js一样定义一个常量 xff0c 然后直接引用这个常量 2 想要在js中动态设置样式中的值 xff0c 在 css sc
  • fengMap报错 :Uncaught TypeError: Cannot read properties of undefined (reading ‘Q‘)

    目录 一 问题 二 原因 三 总结 tips 如嫌繁琐 xff0c 直接看总结即可 xff01 一 问题 详细错误 xff1a fengmap map min js 8d2c 47451 Uncaught TypeError Cannot
  • docker-compose启动并使用MongoDB

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 创建docker compose yml文件 span class token key atrule version span s
  • c++实现文本输入输出

    介绍一种我喜欢的c 43 43 文本输入输出方式 这种方式我经常用来写代码调试 c 43 43 文本输入输出 xff0c 需要用到freopen函数 xff0c 它包含在头文件 lt cstdio gt 不过我在使用c 43 43 的时候
  • Halcon 第五章『模板匹配Matching』◆第4节:基于形状的模板匹配|Shape-Based

    一 介绍 基于形状的模板匹配 xff0c 也称为基于边缘方向梯度的匹配 xff0c 是一种最常用也最前沿的模板匹配算法 该算法以物体边缘的梯度相关性作为匹配标准 xff0c 原理是提取ROI中的边缘特征 xff0c 结合灰度信息创建模板 x
  • python与SUMO连接报错Error: tcpip::Socket::accept() Unable to create listening socket: Address already in

    Error tcpip Socket accept Unable to create listening socket Address already in use 原因 xff0c 端口号被占用 xff0c 把端口号改掉 xff08 1
  • 超详细VMware CentOS7(有可视化界面版)安装教程

    前言 xff1a 在我们使用虚拟机的时候 xff0c 不要去担心我们的一些操作会使虚拟机损坏或者有没有可能会使我们的电脑本身出现一些问题 xff0c 要记住无论我们把我们的虚拟机如何都不会影响我们本身的机器 xff0c 因为它只是虚拟的 x
  • 使用ESP8266驱动TFT显示屏

    1 准备工作 材料 xff1a ESP8266开发板 1 54寸IPS显示屏 开发环境 xff1a Arduino 驱动库 xff1a TFT eSPI 连线 xff1a SCK GPIO14D5MOSIGPIO13D7RESGPIO2D4
  • PX4学习笔记(3)

    1 编译PX4 1 1 编译对应的代码 教程链接 xff1a https docs px4 io main zh dev setup building px4 html 由于我使用的是pixhawk 2 4 8 xff0c 应该使用以下命令
  • VDO---虚拟数据优化

    学习目标 xff1a 理解什么是VDO xff0c VDO有什么作用 学会使用VDO 内容前导 xff1a VDO xff08 Virtual Data Optimize xff0c 虚拟数据优化 xff09 是一种通过压缩或删除存储设备上
  • 阿里云轻量应用服务器centos7搭建hadoop伪分布式集群

    centos7上hadoop伪分布式集群配置 写在前面 云计算实验 xff0c hadoop完全式分布集群 xff0c 没那么多服务器就搞了个伪分布式 纯粹为了应付老师 xff0c 教程是一边查一遍弄的 xff0c 重复装了一次 xff0c
  • Eigen/Sparse稀疏矩阵SparseMatrix

    关于Eigen的稀疏矩阵的介绍 xff1a 原文链接 1 SparseMatrix的格式 SparseMatrix主要包含以下4个数组 xff1a Values stores the coefficient values of the no
  • SpringBoot事件监听器的四种方式

    Java事件监听 事件监听的概念 xff1a 事件监听就是让电脑通过你的操作得到一些数据并对这些数据做出反应 xff0c 反馈相应的行为或者指令的操作 java中的事件机制的参与者有3种角色 xff1b event object 事件状态对
  • OAI搭建步骤(EPC+eNB)

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 文章目录 一 系统概述二 搭建核心网EPC openair cn 2 1 准备主机2 2 更换内核2 3 获取openair cn
  • Layui网址

    http laizhefa com layer index html
  • Spring Security

    Spring Security简介 Spring Security是一个高度自定义的安全框架 利用Spring IOC DI和AOP功能 xff0c 为系统提供了声明式安全访问控制功能 xff0c 减少了为系统安全而编写大量重复代码的工作
  • Hibernate基本使用

    Hibrenate框架 一 Hibrenate 1 是一个持久层框架 xff0c 实现jdbc的封装 是一个全自动的ORM框架 2 ORM xff1a 对象 关系 数据库表 映射 xff0c orm致力于将数据库操作转换成Java程序熟悉的
  • Nginx学习笔记

    文章目录 一 Nginx初始二 正向代理和反向代理 xff08 一 xff09 正向代理 xff08 二 xff09 正向代理的使用场景 xff08 三 xff09 反向代理 xff08 四 xff09 反向代理的使用场景 三 Nginx的