「终极收藏」前端开发必备：超全JavaScript公共方法大全

夲奋亻Jay

于 2024-05-24 10:23:15 发布

阅读量934

点赞数 31

分类专栏： Js（Javascript）文章标签： javascript 公共方法库

本文链接：https://blog.csdn.net/qq_29101285/article/details/139167931

版权

Js（Javascript）专栏收录该内容

35 篇文章 0 订阅

订阅专栏

引言

在前端开发中，JavaScript是必不可少的一部分，而掌握各种常用的公共方法更是提升开发效率和代码质量的关键。无论你是初学者还是资深开发者，了解并熟练运用这些方法都能让你的代码更加简洁、高效。本篇博客将为你详细汇总并解析最全的JavaScript公共方法，涵盖数组、对象、字符串、日期等各个方面的常用技巧。希望通过这篇文章，能为你的前端开发之路提供有力的帮助，成为你开发过程中不可或缺的参考指南。

下面开始啦，建议收藏起来，前端开发项目必备。

1 安装js-tool-big-box工具包

1.1 安装

我已经将所有公共方法，按模块的形式，集成到了js-tool-big-box工具包中，大家不比担心安装后会使项目体积变大，不会的。

执行安装命令：

npm i js-tool-big-box

npm包地址：js-tool-big-box - npm (npmjs.com) 包中提供了工具的学习文档地址以及作者

1.2 截至目前的方法集合

那么js-tool-big-box这个方法库现在都有哪些公共方法可以供大家使用了呢，我们看一下下面的图就知道啦

2 时间日期类

想要使用时间日期类的公共方法，需要先在项目中导入 timeBox 对象，所有的时间日期类方法都在这个对象下面，引入代码如下：

import { timeBox } from 'js-tool-big-box';

2.1 更灵活的年月日时分秒

    const year = timeBox.getMyYear(null, '年');
    console.log(year); // 2024年
    const yearALB = timeBox.getMyYear(null, 'سنة');
    console.log(yearALB); // 2024سنة
    const month = timeBox.getMyMonth(null, '月');
    console.log(month); // 05月
    const date = timeBox.getMyDate(null);
    console.log(date); // 23
    const hour = timeBox.getMyHour(null, 'hour');
    console.log(hour); // 20hour
    const minutes = timeBox.getMyMinutes(null, 'min');
    console.log(minutes); // 10min
    const seconds = timeBox.getMySeconds(null, '秒');
    console.log(seconds); // 10秒

2.2 日期时间转换

    const dateTime1 = timeBox.getFullDateTime(null, 'YYYY-MM-DD', '/');
    console.log(dateTime1); // 2024/05/22
    const dateTime2 = timeBox.getFullDateTime(null, 'YYYY-MM-DD hh:mm', '~');
    console.log(dateTime2); // 2024`05`22 20:11
    const dateTime3 = timeBox.getFullDateTime(null, 'YYYY-MM-DD hh:mm:ss');
    console.log(dateTime3); // 2024-05-22 20:11:22

2.3 个性的时间组合

const hourShow= timeBox.getMyDate(null, '点');
const minShow= timeBox.getMyMinutes(null, '分');
const timeShow = `${hourShow} ${minShow}`; // 8点 22分

2.4 某个时间距离现在

const unitObj = {
      beforeUnit: 'before',
      afterUnit: 'after',
      yearUnit: 'year',
      monthUnit: 'month',
      dateUnit: ' days ',
      hourUnit: 'hour',
      minutesUnit: 'min',
      secondUnit: 'sec'
    }
    const showData = timeBox.getDistanceNow('1908-12-02 06:00:00', unitObj); // 溥仪登基啦
    console.log('溥仪登基详细时间===', showData); 
    const showData1 = timeBox.getDistanceNow('2030-04-19 20:15:59');  // 移民火星啦
    console.log('人类移民火星详细时间===', showData1);

注意：这个方法返回的是详细的时间对象，需要甄别使用哪个具体的详细信息。

2.5 平年还是闰年

    const leapYear = timeBox.getLeapYear('2024-12');
    console.log('=-=2024年是', leapYear ? '闰年': '平年'); // 闰年
    const leapYear1 = timeBox.getLeapYear('2019'); 
    console.log('=-=2019年是', leapYear1 ? '闰年': '平年'); // 平年
    const leapYear2 = timeBox.getLeapYear(null); 
    console.log('=-=今年是', leapYear2 ? '闰年': '平年'); // 闰年

2.6 指定月份的天数

      const days = timeBox.getDaysInMonth('2023', 11);
      console.log('2023年12月的天数===', days); // 31
      const days1 = timeBox.getDaysInMonth(null, 1);
      console.log('今年2月的天数===', days1);   // 29

2.7 属相

      const bornAnimal = timeBox.getAnimalOfBorn('2025');
      console.log('2025年出生的人属相是：==-==', bornAnimal); // snake
      const bornAnima2 = timeBox.getAnimalOfBorn('1990-10-25');
      console.log('1990年出生的人属相是：==-==', bornAnima2); // house

2.8 获取指定年份的法定节假日

const holiday2024 = timeBox.getHoliday('2024');
console.log('----', holiday2024);

注意：这个方法只能获取2024年以后的法定节假日显示

3 页面存储类

页面存储包含获取浏览器url的参数，cookie设置、获取、删除等，localStorage的设置，获取等。想使用存储类的公共方法，需要先在项目中导入 storeBox 对象：

import { storeBox } from 'js-tool-big-box';

3.1 获取浏览器url参数值

以 http://127.0.0.1:8080/#/404?type=text&go2=232323&q=my2521 为例

const param = storeBox.getUrlParam('q');
console.log('获取到q的参数为：：：', param); // my2521

3.2 设置cookie

storeBox.setCookie('school', '我的中学', 1000*10);
storeBox.setCookie('name', 'zhangsan');

3.3 获取cookie

const myCookie1 = storeBox.getCookie('school');
console.log('我设置过的school是：：', myCookie1); // 我的中学

3.4 删除cookie

storeBox.deleteCookie('name');
const myNmaeCookie = storeBox.getCookie('name');
console.log('我已把name这个cookie删了：：', myNmaeCookie);

3.5 设置localStorage

storeBox.setLocalstorage('today', '星期一', 1000*6);

3.6 获取localStorage的值

const today = storeBox.getLocalstorage('today');
console.log('6秒后获取的值===', today);

4 事件相关

目前事件相关的公共方法主要是有防抖和节流2个，需要现在项目中导入 eventBox 对象：

import { eventBox } from 'js-tool-big-box';

4.1 防抖

<template>
  <div>
    <input @keyup="handleChange" v-model="inputVal" />
  </div>
</template>
 
<script>
import { eventBox } from 'js-tool-big-box';
 
export default {
  name: 'dj',
  data () {
    return {
      inputVal: ''
    }
  },
 
    created() {
        this.myDebounce = eventBox.debounce((data) => {
          this.sendAjax(data);
        }, 2000);
      },
 
methods: {
    handleChange(event) {
      const val = event.target.value;
      this.myDebounce(val);
    },
    sendAjax(data) {
      console.log('发送时间：：', new Date().getTime());
      console.log('发送请求：', data);
    },
  }
}
</script>

4.2 节流

<script>
import { eventBox } from 'js-tool-big-box';
 
export default {
  name: 'dj',
  data () {
    return {
      inputVal: ''
    }
  },
  created() {
    this.myThrottle = eventBox.throttle((data) => {
      this.sendAjax(data);
    }, 2000);
  },
  methods: {
    handleChange(event) {
      const val = event.target.value;
      this.myThrottle(val);
    },
    sendAjax(data) {
      console.log('发送时间：：', new Date().getTime());
      console.log('发送请求：', data);
    },
  }
}
</script>

5 Number相关方法学习

工具库也提供了Number相关的方法学习，需要先在项目中导入 numberBox 对象：

import { numberBox } from 'js-tool-big-box';

5.1 千分号分割

const num1 = numberBox.formatNumberWithCommas(13498345.333, 2);
console.log('num1转化后：', num1); // 13,498,345.33
const num11 = numberBox.formatNumberWithCommas(13498345.333);
console.log('num11转化后：', num11); // 13,498,345

5.2 判断是否大于0

const num2 = numberBox.isGreater0('-33.23');
    console.log('-33.23是大于0的数字吗？', num2); // false
    const num3 = numberBox.isGreater0('33.23s'); 
    console.log('33.23s是大于0的数字吗？', num3); // false
    const num33 = numberBox.isGreater0(2024); 
    console.log('2024是大于0的数字吗？', num33); // true

5.3 判断是否大于0的整数

const num4 = numberBox.isGreater0Integer('33.23');
    console.log('33.23是大于0的整数吗？', num4);  // false
    const num5 = numberBox.isGreater0Integer(99);
    console.log('99是大于0的整数吗？', num5);  // true

5.4 生成指定范围内的随机数

// 生成80到100的随机整数
const num6 = numberBox.getRandomNumber(80, 100);
console.log('80到100的随机整数：：', num6); // 86
// 生成50到56并带有2位小数的随机数
const num7 = numberBox.getRandomNumber(50, 56, 2);
console.log('50到56并带有2位小数的随机数：：', num7); // 55.57

5.5 生成指定位数的随机数

// 生成一个4位的随机数字
const num66 = numberBox.generateUniqueRandomNumber(4);
console.log('生成的4位的随机数字：', num66); // 6257
// 生成一个6位的随机数字
const num77 = numberBox.generateUniqueRandomNumber(6);
console.log('生成的6位的随机数字：', num77); // 371420

5.6 数字转小写中文

const num8 = numberBox.numberToChinese('456788.12');
    console.log('看一下456788.12的中文小写展示：', num8);
    const num9 = numberBox.numberToChinese(122456788.5);
    console.log('看一下122456788.5的中文小写展示：', num9);

5.7 数字转大写中文

const num10 = numberBox.numberToChinese(22456788.5, 'upper');
console.log('看一下22456788.5的中文大写展示：', num10);

6 字符串相关方法学习

字符串相关的方法呢，js-tool-big-box工具库对外提供了 stringBox 对象，可供开发者使用：

import { stringBox } from 'js-tool-big-box';

6.1 字符串反转

const string1 = stringBox.reverseString('Hello, World!');
console.log('需要反转的字符串：：', string1);

6.2 横岗转小驼峰

const string2 = stringBox.hyphenToCamelCase('my-class-name', 'small');
console.log('小驼峰转换：：', string2);

6.3 横岗转大驼峰

const string3 = stringBox.hyphenToCamelCase('my-class-name', 'big');
console.log('大驼峰转换：：', string3);

6.4 版本号比较

const versionResult = stringBox.compareVersions('1.0.21', '1.0.12');
console.log('1.0.21和1.0.12比较：', versionResult); // 1
const versionResult1 = stringBox.compareVersions('1.2.21', '1.3.12');
console.log('1.2.21和1.3.12比较：', versionResult1); // -1
const versionResult2 = stringBox.compareVersions('1.1.3', '1.1.3.1');
console.log('1.1.3和1.1.3.1比较：', versionResult2); // -1
const versionResult3 = stringBox.compareVersions('1.1.3', '1.1.3');
console.log('1.1.3和1.1.3比较：', versionResult3); // 0

6.5 获取字符串字节长度

注意：这里不是获取字符串的长度，是字节长度，注意区分

const str1 = 'Hello world!!!';
const str2 = '我是The first one,😶 HaHa~';
const str1ByteLength = stringBox.byteLength(str1);
const str2ByteLength = stringBox.byteLength(str2);
console.log('Hello world!!!的字节长度是：', str1ByteLength); // 14
console.log('我是The first one,😶 HaHa~：', str2ByteLength); // 30

6.6 生成UUID

const myUUID1 = stringBox.generateUUID();
console.log('获取到的uuid值第一次', myUUID1);
// 8a556cd8-4c53-38dd-149d-38a32fe27cb9

6.7 通过身份证号获取生日、性别和年龄

const cardStr = '53010219200508011XF';
const idCardObj = stringBox.getInfoByIdCard(cardStr);
console.log('此人身份详情：', idCardObj);

6.8 字符串中间加星号遮盖

const cardStr = '53010219200508011X';
const phone = '13344445555';
const cardStrMask = stringBox.maskString(cardStr, 4, 4, '*', 6);
const phoneMask = stringBox.maskString(phone, 4, 4, '*', 3);
console.log('身份证号加星后为：', cardStrMask);
console.log('手机号加星后为：', phoneMask);

7 正则验证相关方法学习

之前我们经常需要写正则表达式做一些验证，现在好了，我们有了公共方法，再也不用四处找去了，工具库提供了 matchBox 对象

import { matchBox } from 'js-tool-big-box';

7.1 邮箱验证

const email1 = '232322@qq.com';
const email2 = '232322qq.ff';
const emailResult1 = matchBox.email(email1);
const emailResult2 = matchBox.email(email2);
console.log('emailResult1验证结果：', emailResult1); // true
console.log('emailResult2验证结果：', emailResult2); // false

7.2 手机号验证

const phone1 = '13813313212';
    const phone2 = '2381331320';
    const phoneResult1 = matchBox.phone(phone1);
    const phoneResult2 = matchBox.phone(phone2);
    console.log('phoneResult1验证结果：', phoneResult1); // true
    console.log('phoneResult2验证结果：', phoneResult2); // false

7.3 url格式验证

const url1 = 'https://aa.test.com/user?q=3';
    const url2 = '//33.co m/ user';
    const urlResult1 = matchBox.url(url1);
    const urlResult2 = matchBox.url(url2);
    console.log('urlResult1验证结果：', urlResult1); // true
    console.log('urlResult2验证结果：', urlResult2); // false

7.4 身份证号码格式验证

const idCard1 = '120333199007712322x';
    const idCard2 = '220333299007712322';
    const idCardResult1 = matchBox.idCard(idCard1);
    const idCardResult2 = matchBox.idCard(idCard2);
    console.log('idCardResult1验证结果：', idCardResult1); // false
    console.log('idCardResult2验证结果：', idCardResult2); // true

7.5 IP地址格式验证

const ip1 = '192.168.1.111';
    const ip2 = '333.168.299.0';
    const ipResult1 = matchBox.ip(ip1);
    const ipResult2 = matchBox.ip(ip2);
    console.log('ipResult1验证结果：', ipResult1); // true
    console.log('ipResult2验证结果：', ipResult2); // false

7.6 邮政编码验证

const postal1 = '075616';
    const postal2 = '956s6';
    const postalResult1 = matchBox.postal(postal1);
    const postalResult2 = matchBox.postal(postal2);
    console.log('postalResult1验证结果：', postalResult1); // true
    console.log('postalResult2验证结果：', postalResult2); // false

7.7 是否Unicode字符

    const code1 = 'A';
    const code2 = '😶';
    const code3 = '🧚‍♂️';
    const code1Result = matchBox.checkUnicode(code1);
    const code2Result = matchBox.checkUnicode(code2);
    const code3Result = matchBox.checkUnicode(code3);
    console.log('A是不是一个Unicode character？', code1Result);
    console.log('😶是不是一个Unicode character？', code2Result);
    console.log('🧚‍♂️是不是一个Unicode character？', code3Result);

8 发送请求相关

目前正常的Ajax还没有整理，fetch有自己的请求方法，很好用，所以这里只是封装了JSONP请求的公共方法，js-tool-big-box对外供了 ajaxBox 对象供开发者使用：

import { ajaxBox } from 'js-tool-big-box';

8.1 发送JSONP跨域请求

ajaxBox.sendJSONP('http://127.0.0.1:3000/users/bar', 'callback', function(data){
      console.log('获取到的JSONP请求数据', data);
});

9 data数据相关方法学习

data这里就内容会慢慢比较多，逐渐去丰富，工具库对外提供了 dataBox 方法供开发者使用：

import { dataBox } from 'js-tool-big-box';

9.1 获取幸运者

const peopleData = '张三0, 张三1, 张三2, 张三3, 张三4, 张三5, 张三6, 张三7, 张三8, 张三9, 张三10, 张三11, 张三12, 张三13, 张三14, 张三15, 张三16, 张三17, 张三18, 张三19, 张三20, 张三21, 张三22, 张三23, 张三24, 张三25, 张三26, 张三27, 张三27, 张三29, 张三30, 张三31, 张三32, 张三33, 张三34, 张三35, 张三36, 张三37, 张三38, 张三39, 张三40';
 
this.luckPeople = dataBox.luck(peopleData, 3);

9.2 复制文字到剪贴板

const text = '我在CSDN写工具，js-tool-big-box';
dataBox.copyText(text, () => {
        // 复制成功后的业务逻辑
      }, () => {
        // 复制异常后的业务逻辑
      }

9.3 数组去重

const arr1 = [1, 2, 3, 5, 1, 2, 3, 4];
const arr2 = [1, 2, 'jim', '1', 'tom', 1, '张三', 2, '3'];
const uniqueArr1 = dataBox.uniqueArray(arr1);
const uniqueArr2 = dataBox.uniqueArray(arr2);
console.log('去重后的arr1的值为：', uniqueArr1);
// [1, 2, 3, 5, 4]
console.log('去重后的arr2的值为：', uniqueArr2);
// [1, 2, 'jim', '1', 'tom', '张三', '3']

10 浏览器相关

公共方法，怎么能少的了浏览器相关的内容呢，js-tool-big-box对外提供了 browserBox 对象供开发者使用：

import { browserBox } from 'js-tool-big-box';

10.1 判断是否手机端浏览器

const checkBrowser = browserBox.isMobileBrowser();
console.log('当前是手机端浏览器吗？', checkBrowser);

10.2 检测某个元素是否处于可视范围内

mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const isInScreen = browserBox.isElementInViewport('.demo');
      console.log('.demo在可视区域内吗？', isInScreen);
    },
  }

转载【经海路大白狗：https://blog.csdn.net/xingyu_qie?type=blog】

对于前端开发人员来说，Node.js 是一种熟悉的技术。虽然 Nginx 和 Node.js 在某些理念上有相似之处，比如都支持 HTTP 服务、事件驱动和异步非阻塞操作，但两者并不冲突，各有各自擅长的领域：

「Nginx」：擅长处理底层的服务器端资源，如静态资源处理、反向代理和负载均衡。
「Node.js」：更擅长处理上层的具体业务逻辑。

而两者的结合可以实现更加高效和强大的应用服务架构，下面我们就来看一下。借助文章目录阅读，效率更高。目前您可能还用不到这篇文章，不过可以先收藏起来。希望将来它能为您提供所需的帮助！

Nginx 是什么？

Nginx 是一个高性能的HTTP和反向代理服务器，由俄罗斯程序员Igor Sysoev于 2004 年使用 C 语言开发。它最初设计是为了应对俄罗斯大型门户网站的高流量挑战。

反向代理是什么？（🔥面试会问）

让我们先从代理说起。Nginx 常被用作反向代理，那么什么是正向代理呢？

「正向代理」：客户端知道要访问的服务器地址，但服务器只知道请求来自某个代理，而不清楚具体的客户端。正向代理隐藏了真实客户端的信息。例如，当无法直接访问国外网站时，我们通过代理服务器访问特定网址。

「反向代理」：多个客户端向反向代理服务器发送请求，Nginx 根据一定的规则将请求转发至不同的服务器。客户端不知道具体请求将被转发至哪台服务器，反向代理隐藏了后端服务器的信息。

Nginx 的核心特性

Nginx包含以下七个核心特性，使它成为处理高并发和大数据量请求的理想选择：

「1. 事件驱动」：Nginx采用高效的异步事件模型，利用 I/O 多路复用技术。这种模型使 Nginx 能在占用最小内存的同时处理大量并发连接。

「2. 高度可扩展」：Nginx能够支持数千乃至数万个并发连接，非常适合大型网站和高并发应用。例如：为不同的虚拟主机设置不同的 worker 进程数，以增加并发处理能力：

http {
  worker_processes auto; # 根据系统CPU核心数自动设置worker进程数
}

「3. 轻量级」：相较于传统的基于进程的Web服务器（如Apache），Nginx的内存占用更低，得益于其事件驱动模型，每个连接只占用极小的内存空间。

「4. 热部署」：Nginx支持热部署功能，允许在不重启服务器的情况下更新配置和模块。例如：在修改了 Nginx 配置文件后，可以快速热部署 Nginx 配置：

sudo nginx -s reload

「5. 负载均衡」：Nginx内置负载均衡功能，通过upstream模块实现客户端请求在多个后端服务器间的分配，从而提高服务的整体处理能力。以下是一个简单的upstream配置，它将请求轮询分配到三个后端服务器：

upstream backend {
    server backend1.example.com;
    server backend2.example.com;
    server backend3.example.com;
}

server {
    location / {
        proxy_pass http://backend; # 将请求转发到upstream定义的backend组
    }
}

「6. 高性能」：Nginx 在多项 Web 性能测试中表现卓越，能快速处理静态文件、索引文件及代理请求。比如：配置 Nginx 作为反向代理服务器，为大型静态文件下载服务：

location /files/ {
  alias /path/to/files/; # 设置实际文件存储路径
  expires 30d; # 设置文件过期时间为30天
}

「7. 安全性」：Nginx支持SSL/TLS协议，能够作为安全的Web服务器或反向代理使用。

server {
  listen 443 ssl;
  ssl_certificate /path/to/fullchain.pem; # 证书路径
  ssl_certificate_key /path/to/privatekey.pem; # 私钥路径
  ssl_protocols TLSv1.2 TLSv1.3; # 支持的SSL协议
}

搭建 Nginx 服务

如何安装？

在 Linux 系统中，可以使用包管理器来安装 Nginx。例如，在基于 Debian 的系统上，可以使用 apt：

sudo apt update
sudo apt install nginx

在基于 Red Hat 的系统上，可以使用 yum 或 dnf：

sudo yum install epel-release
sudo yum install nginx

在安装完成后，通常可以通过以下命令启动 Nginx 服务：

sudo systemctl start nginx

设置开机自启动：

sudo systemctl enable nginx

启动成功后，在浏览器输入服务器 ip 地址或者域名，如果看到 Nginx 的默认欢迎页面，说明 Nginx 运行成功。

常用命令有哪些

在日常的服务器管理和运维中，使用脚本来管理 Nginx 是很常见的。这可以帮助自动化一些常规任务，如启动、停止、重载配置等。以下是一些常用的 Nginx 脚本命令，这些脚本通常用于 Bash 环境下：

启动 Nginx：nginx
停止 Nginx：nginx -s stop
重新加载 Nginx：nginx -s reload
检查 Nginx 配置文件：nginx -t（检查配置文件的正确性）
查看 Nginx 版本：nginx -v

其他常用的配合脚本命令：

查看进程命令：ps -ef | grep nginx
查看日志，在logs目录下输入指令：more access.log

。。。还有哪些常用命令，评论区一起讨论下！

配置文件构成（🔥核心重点，一定要了解）

Nginx配置文件主要由指令组成，这些指令可以分布在多个上下文中，主要上下文包括：

main: 全局配置，影响其他所有上下文。
events: 配置如何处理连接。
http: 配置HTTP服务器的参数。
- location: 基于请求的URI来配置特定的参数。
- server: 配置虚拟主机的参数。

worker_processes auto;   # worker_processes定义Nginx可以启动的worker进程数，auto表示自动检测 

# 定义Nginx如何处理连接 
events {   
    worker_connections 1024;  # worker_connections定义每个worker进程可以同时打开的最大连接数 
}  
  
# 定义HTTP服务器的参数  
http {  
    include mime.types;  # 引入mime.types文件，该文件定义了不同文件类型的MIME类型  
    default_type application/octet-stream;  # 设置默认的文件MIME类型为application/octet-stream  
    sendfile on;  # 开启高效的文件传输模式  
    keepalive_timeout 65;  # 设置长连接超时时间  

    # 定义一个虚拟主机  
    server {  
        listen 80;  # 指定监听的端口
        server_name localhost;  # 设置服务器的主机名，这里设置为localhost  
        
        # 对URL路径进行配置  
        location / {  
            root /usr/share/nginx/html;  # 指定根目录的路径  
            index index.html index.htm;  # 设置默认索引文件的名称，如果请求的是一个目录，则按此顺序查找文件  
        }  

        # 错误页面配置，当请求的文件不存在时，返回404错误页面  
        error_page 404 /404.html;  

        # 定义/40x.html的位置  
        location = /40x.html {  
            # 此处可以配置额外的指令，如代理、重写等，但在此配置中为空  
        }  

        # 错误页面配置，当发生500、502、503、504等服务器内部错误时，返回相应的错误页面  
        error_page 500 502 503 504 /50x.html;  

        # 定义/50x.html的位置  
        location = /50x.html {  
            # 同上，此处可以配置额外的指令  
        }  
    }  
}

这个配置文件设置了Nginx监听80端口，使用root指令指定网站的根目录，并为404和50x错误页面提供了位置。其中，user和worker_processes指令在main上下文中，events块定义了事件处理配置，http块定义了HTTP服务器配置，包含一个server块，该块定义了一个虚拟主机，以及两个location块，分别定义了对于404和50x错误的处理。

进入正题，详细看下如何配置

打开 Nginx 配置世界大门

下面这段是 Nginx 配置定义了一个服务器块（server block），它指定了如何处理发往特定域名的 HTTP 请求。

server {
    listen 80;  # 监听80端口，HTTP请求的默认端口
    client_max_body_size 100m;  # 设置客户端请求体的最大大小为100MB
    index index.html;  # 设置默认的索引文件为index.html
    root /user/project/admin;  # 设置Web内容的根目录为/user/project/admin

    # 路由配置，处理所有URL路径
    location ~ /* {
        proxy_pass http://127.0.0.1:3001;  # 将请求代理到本机的3001端口
        proxy_redirect off;  # 关闭代理重定向

        # 设置代理请求头，以便后端服务器可以获取客户端的原始信息
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 定义代理服务器失败时的行为，如遇到错误、超时等，尝试下一个后端服务器
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
        proxy_max_temp_file_size 0;  # 禁止代理临时文件写入

        # 设置代理连接、发送和读取的超时时间
        proxy_connect_timeout 90;
        proxy_send_timeout 90;
        proxy_read_timeout 90;

        # 设置代理的缓冲区大小
        proxy_buffer_size 4k;
        proxy_buffers 4 32k;
        proxy_busy_buffers_size 64k;
        proxy_temp_file_write_size 64k;
    }

    # 对图片文件设置缓存过期时间，客户端可以在1天内使用本地缓存
    location ~ .*.(gif|jpg|jpeg|png|swf)$ {
        expires 1d; 
    }

    # 对JavaScript和CSS文件设置缓存过期时间，客户端可以在24小时内使用本地缓存
    location ~ .*.(js|css)?$ {
        expires 24h;
    }

    # 允许访问/.well-known目录下的所有文件，通常用于WebFinger、OAuth等协议
    location ~ /.well-known {
        allow all;
    }

    # 禁止访问隐藏文件，即以点开头的文件或目录
    location ~ /. {
        deny all;
    }

    # 指定访问日志的路径，日志将记录在/user/logs/admin.log文件中
    access_log /user/logs/admin.log;
}

注意：Nginx 支持使用正则表达式来匹配 URI，这极大地增强了配置的灵活性。在 Nginx 配置中，正则表达式通过 ~ 来指定。

例如，location ~ /* 可以匹配所有请求。另一个例子是 location ~ .*.(gif|jpg|jpeg|png|swf)$，这个表达式用于匹配以 gif、jpg、jpeg、png 或 swf 这些图片文件扩展名结尾的请求。

Nginx 配置实战（🔥可以复制，直接拿来使用）

以下是一些常见的 Nginx 配置实战案例：

1、静态资源服务：前端web

server {
    listen 80;
    server_name example.com;
    location / {
        root /path/to/your/static/files;
        index index.html index.htm;
    }
    location ~* .(jpg|png|gif|jpeg)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
}

在这个案例中，Nginx 配置为服务静态文件，如 HTML、CSS、JavaScript 和图片等。通过设置 root 指令，指定了静态文件的根目录。同时，对于图片文件，通过 expires 指令设置了缓存时间为 30 天，减少了服务器的负载和用户等待时间。

2、反向代理

server {
    listen 80;
    server_name api.example.com;
    location / {
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

这个案例展示了如何配置 Nginx 作为反向代理服务器。当客户端请求 api.example.com 时，Nginx 会将请求转发到后端服务器集群。通过设置 proxy_set_header，可以修改客户端请求的头部信息，确保后端服务器能够正确处理请求。

3、负载均衡

http {
    upstream backend {
        server backend1.example.com;
        server backend2.example.com;
        server backend3.example.com;
    }
    server {
        listen 80;
        server_name example.com;
        location / {
            proxy_pass http://backend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

在这个负载均衡的案例中，Nginx 将请求分发给多个后端服务器。通过 upstream 指令定义了一个服务器组，然后在 location 块中使用 proxy_pass 指令将请求代理到这个服务器组。Nginx 支持多种负载均衡策略，如轮询（默认）、IP 哈希等。

4、HTTPS 配置

server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate /path/to/your/fullchain.pem;
    ssl_certificate_key /path/to/your/private.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers on;
    location / {
        root /path/to/your/https/static/files;
        index index.html index.htm;
    }
}

这个案例展示了如何配置 Nginx 以支持 HTTPS。通过指定 SSL 证书和私钥的路径，以及设置 SSL 协议和加密套件，可以确保数据传输的安全。同时，建议使用 HTTP/2 协议以提升性能。

5、安全防护

server {
    listen 80;
    server_name example.com;
    location / {
        # 防止 SQL 注入等攻击
        rewrite ^/(.*)$ /index.php?param=$1 break;
        # 限制请求方法，只允许 GET 和 POST
        if ($request_method !~ ^(GET|POST)$ ) {
            return 444;
        }
        # 防止跨站请求伪造
        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-Content-Type-Options "nosniff";
        add_header X-XSS-Protection "1; mode=block";
    }
}

通过 rewrite 指令，可以防止一些常见的 Web 攻击，如 SQL 注入。这种限制请求方法，可以减少服务器被恶意利用的风险。同时，添加了一些 HTTP 头部来增强浏览器安全，如防止点击劫持和跨站脚本攻击（XSS）等。

Nginx 深入学习-负载均衡

在负载均衡的应用场景中，Nginx 通常作为反向代理服务器，接收客户端的请求并将其分发到一组后端服务器。这样做不仅可以分散负载、提升网站的响应速度，更能提高系统的可用性。

健康检查

Nginx 能够监测后端服务器的健康状态。如果服务器无法正常工作，Nginx 将自动将请求重新分配给其他健康的服务器。

http {
    upstream myapp1 { # 定义了后端服务器组
        server srv1.example.com;
        server srv2.example.com;
        server srv3.example.com;
        
        # 健康检查配置。
        # 每10秒进行一次健康检查，如果连续3次健康检查失败，则认为服务器不健康；
        # 如果连续2次健康检查成功，则认为服务器恢复健康。
        check interval=10s fails=3 passes=2;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://myapp1;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

❝

check interval=10s fails=3 passes=2; 这样的配置语法在开源版本的 NGINX 上是不支持的。这是 ngx_http_upstream_check_module 模块的特有语法，而该模块不包含在 NGINX 的开源版本中，需要自行下载、编译和安装。该模块是开源免费的，具体详情请参见 ngx_http_upstream_check_module 文档（https://github.com/yaoweibin/nginx_upstream_check_module）。

❞

Nginx 会定期向定义的服务器发送健康检查请求。如果服务器响应正常，则认为服务器健康；如果服务器没有响应或者响应异常，则认为服务器不健康。当服务器被标记为不健康时，Nginx 将不再将请求转发到该服务器，直到它恢复健康。

负载均衡算法

Nginx 支持多种负载均衡算法，可以适应不同的应用场景。以下是几种常见的负载均衡算法的详细说明和示例：

「1、Weight轮询（默认）」：权重轮询算法是 Nginx 默认的负载均衡算法。它按顺序将请求逐一分配到不同的服务器上。通过设置服务器权重（weight）来调整不同服务器上请求的分配率。

upstream backend {
  server backend1.example.com weight=3; # 设置backend1的权重为3
  server backend2.example.com; # backend2的权重为默认值1
  server backend3.example.com weight=5; # 设置backend3的权重为5
}

如果某一服务器宕机，Nginx会自动将该服务器从队列中剔除，请求代理会继续分配到其他健康的服务器上。

「2、IP Hash 算法：」 根据客户端IP地址的哈希值分配请求，确保客户端始终连接到同一台服务器。

upstream backend {
  ip_hash; # 启用IP哈希算法
  server backend1.example.com;
  server backend2.example.com;
}

根据客户端请求的IP地址的哈希值进行匹配，将具有相同IP哈希值的客户端分配到指定的服务器。这样可以确保同一客户端的请求始终被分配到同一台服务器，有助于保持用户的会话状态。

「3、fair算法：」 根据服务器的响应时间和负载来分配请求。

upstream backend {
  fair; # 启用公平调度算法
  server backend1.example.com;
  server backend2.example.com;
  server backend3.example.com;
}

它结合了轮询和IP哈希的优点，但Nginx默认不支持公平调度算法，需要安装额外的模块（upstream_fair）来实现。

「4、URL Hash 算法：」 根据请求的 URL 的哈希值分配请求，每个请求的URL会被分配到指定的服务器，有助于提高缓存效率。

upstream backend {
  hash $request_uri; # 启用URL哈希算法
  server backend1.example.com;
  server backend2.example.com;
}
# 根据请求的URL哈希值来决定将请求发送到backend1还是backend2。

这种方法需要安装Nginx的hash软件包。

开源模块

Nginx拥有丰富的开源模块，有很多还有待我们探索，除了一些定制化的需求需要自己开发，大部分的功能都有开源。大家可以在 NGINX 社区、GitHub 上搜索 “nginx module” 可以找到。

总结

虽然前端人员可能不经常直接操作 Nginx，但了解其基本概念和简单的配置操作是必要的。这样，在需要自行配置 Nginx 的情况下，前端人员能够知晓如何进行基本的设置和调整。

我的博客只写前端博文，点击我去看更多喜欢的前端博文，欢迎大家一起讨论学习！【https://blog.csdn.net/qq_29101285?spm=1011.2266.3001.5343】

夲奋亻Jay

关注

31
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
「终极收藏」前端开发必备：超全JavaScript公共方法大全

在前端开发中，JavaScript是必不可少的一部分，而掌握各种常用的公共方法更是提升开发效率和代码质量的关键。无论你是初学者还是资深开发者，了解并熟练运用这些方法都能让你的代码更加简洁、高效。本篇博客将为你详细汇总并解析最全的JavaScript公共方法，涵盖数组、对象、字符串、日期等各个方面的常用技巧。希望通过这篇文章，能为你的前端开发之路提供有力的帮助，成为你开发过程中不可或缺的参考指南。
复制链接

扫一扫