centOS7安装、配置nginx，常用命令及禁用IP访问 安装所需插件1、安装gccgcc是linux下的编译器在此不多做解释，感兴趣的小伙伴可以去查一下相关资料，它可以编译 C,C++,Ada,Object C和Java等语言命令：查看gcc版本gcc -v一般阿里云的centOS7里面是都有的，没有安装的话会提示命令找不到，安装命令:yum -y install gcc2、pcre、pcre-devel安装pcre是一个perl库，包括perl兼容的正则表达式库，nginx的http模块使用pcre来解析正则表达式，所以需要安装pcre库。安装命令：yum install -y pcre pcre-devel3、zlib安装zlib库提供了很多种压缩和解压缩方式nginx使用zlib对http包的内容进行gzip，所以需要安装安装命令：yum install -y zlib zlib-devel4、安装opensslopenssl是web安全通信的基石，没有openssl，可以说我们的信息都是在裸奔。。。。。。安装命令：yum install -y openssl openssl-devel安装nginx1、下载nginx安装包wget http://nginx.org/download/nginx-1.9.9.tar.gz 2、把压缩包解压到usr/local/javatar -zxvf nginx-1.9.9.tar.gz3、切换到cd /usr/local/java/nginx-1.9.9/下面执行三个命令：./configure make make install4、切换到/usr/local/nginx安装目录5、配置nginx的配置文件nginx.conf文件，主要也就是端口可以按照自己服务器的端口使用情况来进行配置ESC键，wq！强制保存并退出6、启动nginx服务切换目录到/usr/local/nginx/sbin下面启动nginx命令：./nginx7、查看nginx服务是否启动成功ps -ef | grep nginx8、访问你的服务器IP显示说明安装和配置都没问题OK了nginx.conf说明#user nobody; worker_processes 1; #工作进程：数目。根据硬件调整，通常等于cpu数量或者2倍cpu数量。 #错误日志存放路径 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; # nginx进程pid存放路径 events { worker_connections 1024; # 工作进程的最大连接数量 } http { include mime.types; #指定mime类型，由mime.type来定义 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; #用log_format指令设置日志格式后，需要用access_log来指定日志文件存放路径 sendfile on; #指定nginx是否调用sendfile函数来输出文件，对于普通应用，必须设置on。 如果用来进行下载等应用磁盘io重负载应用，可设着off，以平衡磁盘与网络io处理速度，降低系统uptime。 #tcp_nopush on; #此选项允许或禁止使用socket的TCP_CORK的选项，此选项仅在sendfile的时候使用 #keepalive_timeout 0; #keepalive超时时间 keepalive_timeout 65; #gzip on; #开启gzip压缩服务 #虚拟主机 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$ { #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。 # root html; #根目录 # fastcgi_pass 127.0.0.1:9000; #请求转向定义的服务器列表 # fastcgi_index index.php; # 如果请求的Fastcgi_index URI是以 / 结束的, 该指令设置的文件会被附加到URI的后面并保存在变量$fastcig_script_name中 # 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; # ssl_prefer_server_ciphers on; # # location / { # root html; # index index.html index.htm; # } #} }重启1、验证nginx配置文件是否正确方法一：进入nginx安装目录sbin下，输入命令./nginx -t看到如下显示 `nginx.conf syntax is oknginx.conf test is successful` 说明配置文件正确！方法二：在启动命令-c前加-t2、重启Nginx服务方法一：进入nginx可执行目录sbin下，输入命令./nginx -s reload 即可方法二：查找当前nginx进程号，然后输入命令：kill -HUP 进程号 实现重启nginx服务nginx只允许域名访问，禁止ip访问这里介绍修改配置文件nginx.conf两种方法：1）在server段里插入如下正则：listen 80; server_name www.yuyangblog.net; if ($host != 'www.yuyangblog.net'){ return 403; }2)添加一个server新加的server（注意是新增，并不是在原有的server基础上修改）server { listen 80 default; server_name _; return 403; }参考资料：https://blog.csdn.net/qq_37345604/article/details/90034424https://www.cnblogs.com/codingcloud/p/5095066.htmlhttps://www.cnblogs.com/weifeng1463/p/9197971.html

centos7安装nodejs最新版本14以上 uname -aLinux vmcentos7-1 3.10.0-1160.11.1.el7.x86_64 #1 SMP Fri Dec 18 16:34:56 UTC 2020 x86_64 x86_64 x86_64 GNU/Linuxcd /usr/local/mkdir nodejscd nodejs到nodejs中文网，查看下载地址：wget https://npm.taobao.org/mirrors/node/v14.15.3/node-v14.15.3-linux-x64.tar.xzxz -d node-v14.15.3-linux-x64.tar.xztar -xvf node-v14.15.3-linux-x64.tarcd node-v14.15.3-linux-x64建立软连接，变为全局ln -s /usr/local/nodejs/node-v14.15.3-linux-x64/bin/npm /usr/local/bin/ln -s /usr/local/nodejs/node-v14.15.3-linux-x64/bin/node /usr/local/bin/vim /etc/profile以下两个路径为加入nodejs路径export NODE_HOME=/usr/local/nodejs/node-v14.15.3-linux-x64export PATH=$NODE_HOME/bin:$PATH配置生效source /etc/profile成功node -vv14.15.3npm -v6.14.9yarn下载和安装安装的两种方式：方式1：使用msi安装：首先进入yarn的官网 https://yarnpkg.com/zh-hans/docs/install#windows-stable，然后选择稳定版进行下载。然后双击安装即可。我电脑里面其实已经通过msi文件安装了一个yarn，路径为：E:developyarn1.7.0\方式2：通过npm命令进行安装：执行命令npm install yarn -g （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到C:UsersAdministratorAppDataRoamingnpm路径中。（2）查看安装路径如果不知道路径，可以使用where yarn命令查看电脑yarn的安装路径，可以看到我的安装路径为：E:developyarn1.7.0：查看yarn的安装路径（3）查看yarn版本号执行 yarn -v 或者yarn --version ，查看安装的yarn版本号，比如我的版本号是1.7.0。查看yarn的版本号yarn 换国内源yarn config set registry https://registry.npm.taobao.org/安装Node.js版本管理工具nvmgit clone git://github.com/creationix/nvm.git ~/nvm git下载仓库command -v nvm //验证安装设置启动自动运行echo "source ~/nvm/nvm.sh" >> ~/.bashrc source ~/.bashrcnvm list-remote //查看node版本nvm install v12.18.4 //安装node指定版本nvm use v12.18.4 //切换node版本转载至：https://www.cnblogs.com/xwhgr/p/14235167.html

Antd Upload 组件上传文件接收数据流并下载 一、应用场景主要是需要上传一个PDF文件，然后服务器会针对PDF文件，转换成WORD文件，然后返回WORD文件的下载流。二、解决方法1、默认情况下Antd的Upload组件上传文件后接收服务端返回的字符串，再返回给fileList，如果服务端返回二进制文件流，则Upload组件接收的也是二进制流的乱码字符串。2、JS接收流文件然后提供下载，主流是使用 blob对象 来将流转变为blob地址，然后提供下载。3、Ajax默认情况下，如果不设置responseType为blob则返回的内容就是字符串，但是直接返回的二进制流，转换成 blob对象 会造成数据损坏，查了资料说是utf8编码等之类的问题引起的，所以就需要设置 responseType='blob' 或者是 'arraybuffer' 然后转换为 blob对象 。4、antd的Upload组件，正好提供了一个 customRequest 属性可以自定义ajax请求。基于上述4点，我们只需要修改组件的 customRequest属性，就可以实现应用场景具体customRequest属性代码如下：customRequest(option) { const getError = (option, xhr) => { var msg = "cannot ".concat(option.method, " ").concat(option.action, " ").concat(xhr.status, "'"); var err = new Error(msg); err.status = xhr.status; err.method = option.method; err.url = option.action; return err; } const getBody = (xhr) => { debugger; if (xhr.responseType && xhr.responseType !== 'text') { return xhr.response; } var text = xhr.responseText || xhr.response; if (!text) { return text; } try { return JSON.parse(text); } catch (e) { return text; } } // eslint-disable-next-line no-undef var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; if (option.onProgress && xhr.upload) { xhr.upload.onprogress = function progress(e) { if (e.total > 0) { e.percent = e.loaded / e.total * 100; } option.onProgress(e); }; } // eslint-disable-next-line no-undef var formData = new FormData(); if (option.data) { Object.keys(option.data).forEach(function (key) { var value = option.data[key]; // support key-value array data if (Array.isArray(value)) { value.forEach(function (item) { // { list: [ 11, 22 ] } // formData.append('list[]', 11); formData.append("".concat(key, "[]"), item); }); return; } formData.append(key, option.data[key]); }); } // eslint-disable-next-line no-undef if (option.file instanceof Blob) { formData.append(option.filename, option.file, option.file.name); } else { formData.append(option.filename, option.file); } xhr.onerror = function error(e) { option.onError(e); }; xhr.onload = function onload() { // allow success when 2xx status // see https://github.com/react-component/upload/issues/34 if (xhr.status < 200 || xhr.status >= 300) { return option.onError(getError(option, xhr), getBody(xhr)); } return option.onSuccess(getBody(xhr), xhr); }; xhr.open(option.method, option.action, true); // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179 if (option.withCredentials && 'withCredentials' in xhr) { xhr.withCredentials = true; } var headers = option.headers || {}; // when set headers['X-Requested-With'] = null , can close default XHR header // see https://github.com/react-component/upload/issues/33 if (headers['X-Requested-With'] !== null) { xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); } Object.keys(headers).forEach(function (h) { if (headers[h] !== null) { xhr.setRequestHeader(h, headers[h]); } }); xhr.send(formData); return { abort: function abort() { xhr.abort(); } }; },修改上述属性后，则onChange等方法接收到的file或者fileList中的response则变为blob对象，然后将blob对象输出url放到对应的下载标签中就可以了。

2021 年对 React 前端程序员的 10 个代码最佳实践建议 写 React 程序这么多年，有些人可能还没注意到如何去规范项目代码，接下来呢，给 10 个建议，希望能帮到你！1. 组织好项目目录结构在 React 项目中，没有强制规定目录的结构，但是有一个好的规范，可以让你更好地组织代码，也能更好的进行代码后期维护。这里有个建议：经常被重复利用的 Component（组件）要抽出来，放到一个同一个目录下。这样的代码好理解，好维护。2. 让你的组件（Component）更紧凑注意一个原则：不要重复，不要重复，不要重复！！！让你的组件足够小，不要包含多余的内容，这样好维护。如果组件有包含别的组件，应该抽出来的，让其变成一个单独的组件。注意下面的两个原则：重用性 - 重复利用你的代码可维护性 - 迟量小，不复杂3. 明智地命名你的组件选择一个好记，容易理解的名称来命名组件。用英文名，而且首字母大写，以跟 html 元素区别开来。4. 不要重复（Don’t Repeat Yourself）不要重复是作为程序员写代码的原则了，这个不限于前端。不重复写代码会僻免代码冗余，而且更好维护，不会出现，改动一个功能，要到处改相同代码的情况。在 React 中僻免重复，可以适当使用 高阶组件5. 管理好状态数据（state）不要把 state 一把梭，跨组件间传递数据会让代码变得难维护。可以适当使用 context 或 redux6. 在 JavaScript 中写样式（CSS)我们经常在 .css 或 .scss 文件中写样式，当项目变得很大时，对可读性不友好，而且难维护 。我们应该在组件中写样式，这样维护样式时，直接找到组件，很好维护。可以使用下面的流行库来解决：https://styled-components.com/https://emotion.sh/docs/introductionhttps://glamorous.rocks/7. 把 render 和 state 尽量分开我们经常需要区分出有状态的组件和无状态组件。我们经常会从远程 load 一些数据，load 的数据可以作为参数传给子组件，迟早做到分开。如下图：8. 多用类型检查系统多用 TypeScript 作为类型约束，在运行之前就可以僻免一些不必要的出错。当然学习 TypeScript 是要成本的，但是 TypeScript 确实是强有力的工具，不仅有代码提示，还能提前发现错误。9. 使用 ESLint 工具每个程序员有自己的代码风格，如果在团队中开发，不同的代码风格会让项目合作变得困难。如何保证统一的代码风格呢？就要用工具来约束。我们可以使用 ESLint 这样的工具。写测试代码单元测试或集成测试能够在模拟环境跑一遍代码，很好地代替肉测。大团队都有这个，可以更好的保持代码健全性。一处代码修改了，整个功能都要测试，肉测很难全面测试，这个时候需要用到代码测试，金融系统更需要这个。推荐的工具：jesthttp://cypress.io/好，希望对大家有所帮助！文章转至：http://react-china.org/t/topic/37372/1

TypeError: _typeof4 is not a function，解决微信小程序报错 1、微信小程序编译后的报错截图：2、报错问题解决：右上角点击“详情”=>“本地设置”=>“将JS编译成ES5”=>取消勾选3、重新编译4、问题解决