在数字化浪潮席卷全球的今天，ERP（Enterprise Resource Planning，企业资源计划）系统早已不是大型企业的“专属配置”，而是各类企业实现资源整合、流程标准化、决策智能化的核心支撑。所谓ERP全流程，并非单纯的“软件安装与操作”，而是一套涵盖“前期准备、实施落地、业务联动、优化迭代”的完整管理工程，贯穿企业采购、生产、销售、财务、人力等所有核心环节，实现从“分散管理”到“全局协同”的跨越。本文将从全流程拆解、核心模块联动、实施关键节点、价值体现四个维度，详细解析ERP全流程的核心逻辑与实操要点，帮你全面掌握ERP系统的运行本质。

一、ERP全流程总览：从规划到迭代的完整闭环

ERP全流程的核心目标是“打破信息孤岛、整合企业资源、优化业务流程、提升管理效率”，其完整链路可分为前期准备阶段、实施落地阶段、业务运营阶段、优化迭代阶段四大板块，各阶段环环相扣、层层递进，形成“规划-落地-运行-优化”的闭环管理。不同于单一软件的操作流程，ERP全流程更强调“管理思维与信息技术的深度融合”，每一个环节都需兼顾系统配置与企业实际业务场景，避免“为了上系统而上系统”。

简单来说，ERP全流程的本质是“用系统固化流程、用数据驱动决策”——通过标准化的流程设计，让企业各部门的业务活动可追溯、可管控；通过实时的数据共享，让管理层快速掌握企业运营全貌，实现资源的最优配置。无论是中小企业的进销存+财务一体化，还是大型制造企业的全链路生产管控，ERP全流程的核心逻辑始终一致，只是在模块配置和流程细节上根据企业规模、行业特性进行适配。

二、ERP全流程详细拆解：四大阶段+核心步骤

（一）前期准备阶段：筑牢基础，避免实施翻车

前期准备是ERP实施成功的前提，很多企业上ERP失败，根源在于前期准备不足、需求模糊。该阶段的核心是“明确目标、梳理需求、搭建团队”，具体分为3个关键步骤：

1. 需求调研与目标明确

企业需组织各部门（采购、生产、销售、财务、人力等）开展全面调研，明确“为什么上ERP”“上ERP要解决什么问题”“期望达成什么目标”。比如，有的企业核心需求是解决“库存积压与缺货并存”的问题，有的企业则是为了实现“财务与业务数据同步，减少手工记账误差”。调研完成后，需形成详细的需求文档，明确核心需求、次要需求，划分优先级，避免后期实施过程中需求反复变更，导致项目延期、成本超支。

同时，需结合企业发展战略，设定可量化的实施目标，比如“库存周转率提升30%”“订单交付周期缩短20%”“财务结账效率提升50%”，为后续实施验收提供明确标准。

2. 项目团队搭建与责任划分

ERP实施不是IT部门的“独角戏”，而是需要企业全员参与的系统工程。需搭建由“企业高层、IT部门、各业务部门负责人、核心操作人员”组成的项目组，明确各角色的职责：

• 企业高层：负责统筹全局，审批项目预算、协调跨部门资源，确保项目顺利推进；

• IT部门：负责系统安装、配置、技术支持，解决实施过程中的技术难题；

• 业务部门负责人：负责梳理本部门业务流程，配合系统配置，推动部门员工适应新流程；

• 核心操作人员：负责测试系统功能，反馈使用问题，协助开展全员培训。

此外，建议引入专业的ERP实施服务商，借助其经验优化流程设计，规避实施风险——尤其是对于缺乏数字化经验的中小企业，专业服务商的指导能大幅提升实施效率。

3. 系统选型与预算规划

根据企业需求、规模、行业特性，选择适配的ERP系统。目前市场上的ERP系统主要分为三类：通用型ERP（如SAP、Oracle）、行业专用ERP（如制造业的用友U9、零售业的金蝶K3）、中小企业轻量化ERP（如用友畅捷通、管家婆）。选型时需重点关注“系统兼容性、可扩展性、易用性、售后服务”，避免盲目追求“功能全面”而选择超出企业需求的系统，导致成本浪费。

同时，制定详细的项目预算，涵盖系统采购费、实施服务费、培训费用、后期维护费等，明确预算分配，避免后期出现资金缺口。

（二）实施落地阶段：从蓝图到落地，核心环节不缺位

实施落地是ERP全流程的核心环节，也是最复杂、最耗时的阶段，核心是“将企业业务流程转化为系统可实现的功能，完成从‘手工管理’到‘系统管理’的切换”。根据行业通用标准，该阶段可分为6个标准化步骤，遵循“蓝图不确认，不进配置；数据不准确，绝不上线；用户不会用，不能切系统”的原则，确保实施质量。

1. 业务蓝图设计与确认

项目组与实施服务商合作，根据前期调研的需求，梳理企业现有业务流程，识别流程中的痛点、冗余环节，设计符合企业实际的“ERP业务蓝图”。蓝图需明确各模块的功能配置、流程节点、数据流转逻辑，比如“采购流程从需求提交到入库结算的全节点、各节点的责任人、数据如何同步到财务模块”。

蓝图设计完成后，需组织各部门负责人审核确认，签字归档——这是后续系统配置、测试、培训的核心依据，一旦确认，不得随意变更，若确需变更，需走正规的变更流程，避免项目混乱。

2. 系统配置与二次开发

IT部门与实施服务商根据业务蓝图，进行系统配置：包括基础信息设置（如企业组织架构、员工信息、物料编码、供应商信息、客户信息）、流程配置（如采购流程、销售流程、生产流程的节点设置）、权限配置（如不同岗位的系统操作权限，避免越权操作）、报表配置（如库存报表、销售报表、财务报表的格式与数据来源）。

对于一些特殊行业或企业的个性化需求，若通用ERP系统无法满足，可进行少量二次开发，但需严格控制开发范围和成本，避免过度开发导致系统不稳定、维护难度增加。开发完成后，需进行单元测试，确保每个开发功能可正常使用。

3. 数据准备与导入

数据是ERP系统的“血液”，数据的准确性直接决定ERP系统的运行效果。该步骤的核心是“清理历史数据、规范数据格式、完成数据导入”，需梳理的核心数据包括：

• 基础数据：物料编码、供应商信息、客户信息、员工信息、会计科目等；

• 期初数据：库存期初数量与金额、财务期初余额、应收应付期初数据、生产工单期初数据等；

• 业务数据：未完成的采购订单、销售订单、生产计划等。

数据准备过程中，需安排专人负责数据清理，剔除重复数据、错误数据，规范数据格式，确保数据的准确性和一致性。数据清理完成后，通过系统的数据导入功能，将数据批量导入ERP系统，导入后需进行数据校验，确认数据无误后，方可进入下一环节。

4. 测试与问题优化

数据导入完成后，进入系统测试阶段，核心是“验证系统功能是否符合业务蓝图，流程是否顺畅，数据是否准确”，测试分为三个层级：

• 单元测试：针对单个模块、单个功能进行测试，比如“采购模块的订单提交、审核功能，库存模块的入库、出库功能”，确保每个功能可正常使用；

• 集成测试：测试各模块之间的联动性，比如“采购入库后，库存数据是否自动更新，财务模块是否自动生成应付凭证”，确保数据流转顺畅；

• UAT用户测试：由各部门核心操作人员亲自操作，模拟实际业务场景，测试系统的易用性和实用性，反馈使用过程中遇到的问题（如流程繁琐、操作不便、数据错误等）。

测试过程中，需详细记录问题，由实施服务商和IT部门及时优化调整，反复测试，直到所有问题解决，系统功能完全符合业务需求。

5. 全员培训与操作演练

系统测试通过后，需开展全员培训，确保每个员工都能熟练操作ERP系统——这是系统顺利上线的关键，若员工不会用，即使系统功能再完善，也无法发挥其价值。培训需分岗位、分模块进行，针对不同岗位的工作职责，讲解对应的系统操作流程，比如：

• 采购人员：讲解采购需求提交、采购订单创建、入库单审核等操作；

• 仓库人员：讲解入库、出库、库存盘点、库存查询等操作；

• 财务人员：讲解凭证生成、账务处理、报表查询等操作。

培训完成后，组织员工进行操作演练，模拟实际业务场景，熟练操作流程，解决员工操作过程中遇到的疑问，确保员工能够独立完成本职工作相关的系统操作。

6. 上线切换与并行运行

培训完成后，进入系统上线切换阶段，通常采用“并行运行”的方式：即同时运行旧的手工管理模式（或旧系统）和新的ERP系统，为期1-2周。并行运行期间，员工需同时在两个模式下开展工作，对比两个模式的结果，确认ERP系统的数据准确性和流程顺畅性。

并行运行无异常后，正式停止旧模式，全面切换到ERP系统运行。上线初期，需安排实施服务商和IT部门专人值守，及时解决员工操作过程中遇到的问题，处理系统运行中的异常，确保系统稳定运行。上线稳定后，组织项目验收，由各部门负责人确认系统功能、流程符合需求，项目验收通过后，ERP实施落地阶段正式完成。

（三）业务运营阶段：模块联动，实现全流程管控

ERP系统正式上线后，进入业务运营阶段，核心是“通过系统实现各部门业务的协同运作，完成从采购、生产、销售到财务、人力的全流程管控”。该阶段的核心是“模块联动、数据共享”，各核心模块相互配合，形成完整的业务闭环，以下结合ERP核心模块，详细解析业务运营流程。

1. 采购管理流程（供应链起点）

采购管理是ERP全流程的起点，核心是“按需采购、控制成本、保障供应”，完整流程如下：

1. 需求提交：各部门（如生产部门、仓库部门）根据实际需求，在ERP系统中提交采购需求单，注明物料名称、规格、数量、需求日期等信息；

2. 采购计划：采购部门根据采购需求单，结合库存数据，制定采购计划，确定采购数量、供应商、采购价格、交货日期；

3. 询价比价：采购部门在系统中发起询价比价，对比多个供应商的报价、资质，确定合适的供应商；

4. 采购订单：在系统中创建采购订单，发送给供应商，订单信息自动同步到库存模块和财务模块；

5. 到货验收：供应商送货后，仓库部门在系统中核对物料信息，确认无误后，办理入库手续，系统自动更新库存数据；

6. 付款结算：财务部门根据采购订单、入库单，在系统中生成应付凭证，审核通过后，安排付款，付款后系统自动更新应付账款数据。

7. 库存管理流程（供应链核心）

库存管理的核心是“实时监控库存、优化库存结构、避免积压与缺货”，完整流程如下：

1. 入库管理：采购入库、生产入库、退货入库等，均需在系统中录入入库单，注明物料名称、数量、规格、入库日期，系统自动更新库存数量；

2. 出库管理：销售出库、生产领料、退货出库等，录入出库单，系统自动扣减库存数量，实时更新库存余额；

3. 库存盘点：定期在系统中发起库存盘点，对比系统库存与实际库存，录入盘点差异，调整系统库存，确保账实一致；

4. 库存预警：系统可设置库存上下限，当库存低于下限或高于上限时，自动发出预警，提醒相关人员及时处理（如采购、清库）；

5. 库存查询：各部门可根据权限，在系统中查询实时库存数据，为采购、生产、销售决策提供依据。

6. 生产管理流程（制造企业核心）

生产管理流程适用于制造企业，核心是“按计划生产、控制生产进度、保障产品质量”，完整流程如下：

1. 生产计划：生产部门根据销售订单、市场需求，在系统中制定生产计划，明确生产产品、数量、生产周期、生产工序；

2. 物料需求计划（MRP）：系统根据生产计划、物料清单（BOM）、库存数据，自动计算所需物料的数量、采购时间，生成物料需求计划，同步到采购模块；

3. 生产工单：根据生产计划，在系统中创建生产工单，分配生产任务到各生产工序、各班组；

4. 生产领料：生产班组根据生产工单，在系统中提交领料申请，仓库部门审核后，发放物料，系统自动扣减库存；

5. 生产执行：生产过程中，在系统中记录生产进度、生产工时、产品质量等信息，实时反馈生产状态；

6. 成品入库：生产完成后，质检部门在系统中进行质量检验，检验合格后，办理成品入库手续，系统自动更新成品库存；

7. 生产核算：系统自动统计生产过程中的物料消耗、人工成本、制造费用，生成生产成本报表，为成本控制提供依据。

8. 销售管理流程（供应链终点）

销售管理的核心是“拓展客户、提升销量、及时回款”，完整流程如下：

1. 客户管理：在系统中录入客户信息，建立客户档案，记录客户资质、合作历史、回款情况等，实现客户精细化管理；

2. 报价管理：根据客户需求，在系统中生成报价单，注明产品名称、规格、价格、交货期等，提交客户确认；

3. 销售订单：客户确认报价后，在系统中创建销售订单，明确订单数量、交货期、付款方式，订单信息自动同步到库存模块和生产模块；

4. 发货管理：仓库部门根据销售订单，在系统中生成发货单，安排发货，发货后系统自动扣减库存，同步到财务模块；

5. 开票结算：财务部门根据销售订单、发货单，在系统中生成销售发票，提交客户付款，客户付款后，在系统中记录回款信息，更新应收账款数据；

6. 售后管理：客户反馈售后问题（如退货、换货），在系统中记录售后信息，安排处理，处理完成后，更新订单状态和库存数据。

7. 财务管理流程（全流程核心枢纽）

财务管理是ERP系统的核心枢纽，核心是“实现财务与业务数据同步，精准核算、规范管控”，完整流程如下：

1. 账务处理：系统自动接收采购、销售、库存等模块的业务数据，生成记账凭证（如采购入库生成应付凭证、销售发货生成应收凭证），减少手工记账误差；

2. 成本核算：系统自动归集生产、采购、销售过程中的成本费用，进行成本核算，生成成本报表，为成本控制提供依据；

3. 应收应付管理：实时监控应收账款、应付账款，跟踪回款进度、付款进度，设置回款预警，避免坏账、逾期付款；

4. 固定资产管理：在系统中录入固定资产信息，记录固定资产购置、折旧、报废等情况，自动计提折旧，生成固定资产报表；

5. 财务报表：系统自动生成资产负债表、利润表、现金流量表等财务报表，实时反映企业财务状况，为管理层决策提供数据支持；

6. 预算管理：设置企业年度预算、部门预算，实时监控预算执行情况，对比实际发生额与预算额，及时调整预算，控制成本。

7. 人力资源管理流程（企业支撑）

人力资源管理模块作为ERP系统的重要支撑，核心是“实现员工全生命周期管理，优化人力资源配置”，完整流程如下：

1. 招聘管理：在系统中发布招聘需求，筛选简历，安排面试，录用后录入员工信息，建立员工档案；

2. 入职管理：办理员工入职手续，录入员工基本信息、岗位信息、薪资信息，分配系统操作权限；

3. 考勤管理：员工打卡记录自动同步到系统，统计考勤数据（如迟到、早退、请假），生成考勤报表；

4. 薪资管理：根据员工岗位、考勤、绩效等数据，在系统中计算薪资，生成薪资条，同步到财务模块，安排薪资发放；

5. 绩效评估：设置绩效考核指标，定期开展绩效考核，录入考核结果，为员工晋升、薪资调整提供依据；

6. 离职管理：办理员工离职手续，更新员工状态，清理系统权限，归档员工档案。

（四）优化迭代阶段：持续完善，实现价值最大化

ERP全流程并非“一劳永逸”，企业的业务模式、市场环境、发展战略会不断变化，因此，ERP系统需要持续优化迭代，才能始终适配企业发展需求。该阶段的核心是“收集反馈、分析数据、优化流程”，具体分为3个关键步骤：

1. 常态化反馈与问题收集

建立常态化的反馈机制，鼓励各部门员工反馈系统使用过程中遇到的问题、流程繁琐的环节、功能缺失的需求，定期整理反馈意见，分类汇总，为优化迭代提供依据。比如，销售部门反馈“销售订单审核流程繁琐，影响效率”，财务部门反馈“报表格式不符合企业需求”，均需及时记录、分析。

2. 数据复盘与流程优化

定期对ERP系统的运行数据进行复盘，分析关键指标（如库存周转率、订单交付周期、财务结账效率），对比实施目标，找出差距，分析原因。同时，梳理现有业务流程，识别冗余环节、瓶颈环节，结合反馈意见，优化流程配置和系统功能，比如简化审核流程、增加个性化报表、优化数据流转逻辑。

3. 系统升级与维护

定期对ERP系统进行升级，安装系统补丁，修复系统漏洞，确保系统稳定运行；同时，根据企业发展需求，新增模块或功能（如新增客户关系管理模块、项目管理模块），拓展系统的可扩展性。此外，加强系统数据备份，防止数据丢失，定期开展系统安全检查，防范安全风险。

三、ERP全流程实施的关键节点与避坑指南

（一）三大关键节点（重中之重）

结合行业实施经验，ERP全流程实施有三个不可逾越的关键节点，直接决定项目成败：

• 节点一：蓝图确认。业务蓝图是实施的核心依据，必须经过各部门签字确认，避免后期需求反复变更，导致项目延期、成本超支；

• 节点二：数据导入。数据准确性是系统运行的基础，必须严格清理、校验数据，确保数据无误后再导入系统，否则会导致系统数据混乱，无法正常使用；

• 节点三：全员培训。员工是系统的使用者，必须确保全员熟练操作，否则系统无法落地，前期所有投入都会白费。

（二）常见坑点与避坑建议

1. 坑点一：需求模糊，目标不明确。避坑建议：前期调研要全面，明确核心需求和可量化目标，形成详细的需求文档，避免“拍脑袋上系统”；

2. 坑点二：高层不重视，跨部门协作不畅。避坑建议：企业高层要亲自统筹，明确各部门职责，建立跨部门协作机制，及时协调解决协作中的问题；

3. 坑点三：过度依赖实施服务商，自身团队不参与。避坑建议：企业核心团队要全程参与实施过程，熟悉系统配置和流程设计，避免后期服务商撤离后，无法独立维护系统；

4. 坑点四：忽视数据质量，导入错误数据。避坑建议：安排专人负责数据清理和校验，建立数据规范，确保数据的准确性和一致性；

5. 坑点五：上线后不优化，系统与业务脱节。避坑建议：建立常态化优化机制，定期复盘数据、收集反馈，持续优化流程和系统功能，让系统始终适配企业业务需求。

四、ERP全流程的核心价值：不止是“管流程”，更是“提效率、降成本、促决策”

很多企业认为，ERP全流程就是“用系统代替手工记账、管库存”，其实这只是ERP的基础价值。真正的ERP全流程，是通过数字化手段，实现企业资源的全面整合和流程的标准化、智能化，其核心价值体现在三个层面：

1. 提升运营效率，减少人工成本

通过系统自动化处理重复性工作（如手工记账、数据统计、订单审核），减少人工操作，降低人为误差，提升工作效率。比如，财务部门无需手工录入采购、销售凭证，系统自动生成，结账效率提升50%以上；仓库部门无需手工盘点库存，系统实时监控库存数据，盘点效率提升60%以上。

2. 优化资源配置，降低企业成本

通过实时的数据共享，管理层可以快速掌握企业资源（物料、资金、人力）的使用情况，优化资源配置，避免浪费。比如，通过库存数据实时监控，避免库存积压，降低库存成本；通过生产计划优化，合理分配生产资源，降低生产成本；通过应收账款跟踪，减少坏账，降低资金占用成本。

3. 提供数据支撑，助力科学决策

ERP系统整合了企业所有核心业务数据，通过报表分析、数据可视化，为管理层提供实时、准确的运营数据，帮助管理层快速识别业务痛点、市场趋势，做出科学的决策。比如，通过销售数据报表，分析不同产品的销量、利润，调整产品结构；通过成本数据报表，分析成本构成，优化成本控制策略。

五、总结：ERP全流程，是企业数字化转型的必经之路

ERP全流程不是简单的“软件实施”，而是一套涵盖“前期准备、实施落地、业务运营、优化迭代”的完整管理工程，其核心是“以系统为载体，以流程为核心，以数据为驱动，实现企业资源的全面整合和管理升级”。无论是中小企业的轻量化管理，还是大型企业的全链路管控，ERP全流程都能帮助企业打破信息孤岛、优化业务流程、提升运营效率、降低企业成本。

需要注意的是，ERP全流程的落地，并非一蹴而就，需要企业高层重视、全员参与、持续优化。只有将ERP系统与企业实际业务深度融合，才能充分发挥其价值，助力企业在数字化转型的道路上稳步前行，实现高质量发展。

在网页开发中，我们经常会遇到**FOUC（Flash of Unstyled Content）**问题，即页面在CSS样式加载完成前，会短暂显示未样式化的内容，造成视觉上的闪烁。本文将详细介绍如何通过时序控制技巧来解决这个问题。

问题分析

什么是FOUC？

FOUC（Flash of Unstyled Content）是指网页在CSS样式表加载完成前，浏览器会使用默认样式显示HTML内容，导致页面出现短暂的”原始”状态，然后突然变成设计好的样式，造成视觉上的闪烁。

问题产生的原因

1
2
3
4
5
6
7

graph TD
    A[HTML解析] --> B[文本立即显示]
    B --> C[默认样式: 白底黑字]
    C --> D[CSS文件下载]
    D --> E[CSS解析应用]
    E --> F[JavaScript执行]
    F --> G[最终样式显示]

时序问题：

1. HTML解析阶段：浏览器立即显示文本内容
2. CSS加载延迟：外部CSS文件需要时间下载和解析
3. JavaScript执行延迟：需要等待DOM加载完成

解决方案原理

核心思想：多重保险机制

我们采用内联样式 + 外部CSS + JavaScript控制的三重保险机制：

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
28

<!-- 1. 内联样式（立即生效） -->
<style>
    .content-title,
    #card .card-inner header h1,
    .content-subtitle,
    .enter,
    .arrow,
    h1, h2, h3 {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    }
    
    /* 确保页面背景始终是深色的 */
    html, body {
        background: #222325 !important;
    }
    
    /* 当元素有in类时显示 */
    .content-title.in,
    #card .card-inner.in header h1,
    .content-subtitle.in,
    .enter.in,
    .arrow.in {
        opacity: 1 !important;
        visibility: visible !important;
    }
</style>

2. 外部CSS文件（双重保险）

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

/* 防止页面加载时的闪烁 */
.content-title,
#card .card-inner header h1,
.content-subtitle,
.enter,
.arrow,
h1, h2, h3 {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.content-title.in,
#card .card-inner.in header h1,
.content-subtitle.in,
.enter.in,
.arrow.in {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 确保页面背景始终是深色的 */
html, body {
    background: var(--color-content) !important;
}

3. JavaScript控制显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function loadIntro(){
    document[hiddenProperty] || loadIntro.loaded || (
        setTimeout(function(){
            $(".wrap").classList.add("in"),
            $(".content-title").classList.add("in"),
            $(".enter").classList.add("in"),
            $(".arrow").classList.add("in"),
            setTimeout(function(){
                $(".content-subtitle").innerHTML="<span>"+_toConsumableArray(subtitle).join("</span><span>")+"</span>",
                $(".content-subtitle").classList.add("in")
            },270)
        },0),
        loadIntro.loaded=!0
    )
}

技术要点详解

1. 内联样式优先原则

为什么使用内联样式？

• 最高优先级：内联样式的优先级高于外部CSS文件
• 立即生效：在HTML解析阶段就开始生效，无需等待外部文件加载
• 可靠性高：不依赖网络请求，确保样式立即应用

1
2
3
4
5
6
7

<!-- 内联样式示例 -->
<style>
    .target-element {
        opacity: 0 !important;  /* 立即隐藏 */
        visibility: hidden !important;  /* 双重保险 */
    }
</style>

2. !important 的重要性

为什么使用 !important？

• 防止覆盖：确保我们的隐藏规则不会被其他CSS规则覆盖
• 优先级保证：即使在CSS文件加载后，这些规则仍然有效

1
2
3
4

.target-element {
    opacity: 0 !important;  /* 确保不被覆盖 */
    visibility: hidden !important;
}

3. 双重隐藏策略

为什么同时使用 opacity 和 visibility？

• opacity: 0：使元素透明，但仍在文档流中
• visibility: hidden：完全隐藏元素，不占用空间
• 双重保险：确保元素在各种情况下都被隐藏

1
2
3
4
5

.target-element {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

4. 渐进式显示控制

JavaScript的时序控制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 1. 立即隐藏所有元素
// 2. 等待DOM加载完成
// 3. 逐步添加显示类
// 4. 触发CSS过渡动画

function loadIntro(){
    setTimeout(function(){
        // 给元素添加显示类
        $(".content-title").classList.add("in");
        $(".enter").classList.add("in");
        $(".arrow").classList.add("in");
        
        // 延迟显示副标题
        setTimeout(function(){
            $(".content-subtitle").classList.add("in");
        }, 270);
    }, 0);
}

时序控制流程图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

sequenceDiagram
    participant Browser as 浏览器
    participant HTML as HTML解析
    participant InlineCSS as 内联样式
    participant ExternalCSS as 外部CSS
    participant JS as JavaScript
    
    Browser->>HTML: 开始解析HTML
    HTML->>InlineCSS: 立即应用内联样式
    InlineCSS->>Browser: 元素隐藏，背景深色
    
    Browser->>ExternalCSS: 下载并解析外部CSS
    ExternalCSS->>Browser: 继续隐藏规则
    
    Browser->>JS: DOM加载完成
    JS->>Browser: 添加显示类
    Browser->>Browser: 触发CSS过渡动画
    Browser->>Browser: 元素平滑显示

最佳实践

1. 识别需要控制的元素

1
2
3
4
5
6
7

/* 常见的需要控制的元素 */
.content-title,           /* 主标题 */
#card .card-inner header h1,  /* 卡片标题 */
.content-subtitle,        /* 副标题 */
.enter,                   /* 按钮 */
.arrow,                   /* 箭头 */
h1, h2, h3               /* 所有标题元素 */

2. 设置合适的过渡时间

1
2
3

.target-element {
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

时间选择考虑因素：

• 1秒：足够平滑，不会让用户等待太久
• ease-in-out：提供自然的加速和减速效果

3. 背景色立即设置

1
2
3

html, body {
    background: #222325 !important;  /* 深色背景 */
}

为什么重要：

• 避免白色背景闪烁
• 与最终设计保持一致

常见问题与解决方案

问题1：某些元素仍然闪烁

解决方案：

1
2
3
4
5
6
7
8
9
10
11

/* 更广泛的元素选择器 */
.content-title,
#card .card-inner header h1,
.content-subtitle,
.enter,
.arrow,
h1, h2, h3,
.main-content * {  /* 所有主要内容 */
    opacity: 0 !important;
    visibility: hidden !important;
}

问题2：动画效果不流畅

解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.target-element {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;  /* 添加位移 */
    transition: opacity 1s ease-in-out, 
                visibility 1s ease-in-out,
                transform 1s ease-in-out;
}

.target-element.in {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

问题3：移动端性能问题

解决方案：

1
2
3
4
5
6

/* 针对移动端优化 */
@media (max-width: 768px) {
    .target-element {
        transition: opacity 0.5s ease-in-out;  /* 缩短时间 */
    }
}

总结

通过这种时序控制技巧，我们成功解决了FOUC闪烁问题：

1. 内联样式：确保在HTML解析阶段就隐藏元素
2. 外部CSS：提供双重保险，确保隐藏规则持续有效
3. JavaScript控制：在合适的时机触发元素的显示
4. 平滑过渡：通过CSS过渡动画提供良好的用户体验

这种方法的优势在于：

• 可靠性高：多重保险机制确保效果
• 用户体验好：平滑的过渡动画
• 兼容性强：适用于各种浏览器和设备
• 维护性好：代码结构清晰，易于理解和修改

通过掌握这种时序控制技巧，我们可以为用户提供更加流畅和专业的网页体验。

这个问题通常与KVM（内核虚拟机）虚拟化支持有关。

1. 确认主机支持虚拟化

首先检查你的CPU是否支持虚拟化技术：

1

grep -E 'vmx|svm' /proc/cpuinfo

如果没有输出，则表示机器的CPU不支持硬件虚拟化，无法运行macOS容器。若有输出，继续下一步。

2. 检查KVM模块是否加载

运行以下命令检查KVM模块是否已加载：

1

lsmod | grep kvm

• Intel CPU：应看到kvm_intel模块。
• AMD CPU：应看到kvm_amd模块。

若未加载，手动加载模块：

1
2
3
4
5

# Intel CPU
sudo modprobe kvm_intel

# AMD CPU
sudo modprobe kvm_amd

3. 检查/dev/kvm权限

确认/dev/kvm文件存在：

1

ls -l /dev/kvm

• 如果文件不存在，可能是虚拟化未启用或KVM驱动未正确安装。

• 如果文件存在但权限不足，添加当前用户到kvm组：

  1	sudo usermod -aG kvm $USER

  然后重新登录或重启系统使权限生效。

1. 对有道理的说话做系统性的研究。

2. 增强说话与思考的能力。

最终目标是让讲话有道理，并能理解他人反驳的理由。比如两个人因为买衣服时颜色的选择而吵架，原因通常是因为对颜色的主观认同，背后可能有客观或受欢迎的道理。争吵是因为假设背后的道理存在客观标准，有人因追求自我而不遵循大众喜好的理由，指出颜色好看的争吵是无谓的争吵，意识到争吵无谓就不要再继续争吵了。

普通学科与逻辑学不能简单类比

1. 懂理财才有好晚年? 懂得一些理财知识和方法无疑是有益的。经济学家们也普遍倡导合理理财，通过有效的资产配置实现财富的保值增值。例如，学习一些基本的投资知识，了解股票、基金、债券等不同投资产品的特点和风险，能够帮助我们做出更明智的投资决策。​
   然而，不懂理财知识并不一定就意味着会有凄凉的晚年。生活中，我们也能看到一些人虽然对复杂的理财知识知之甚少，但他们通过踏实工作、勤俭节约，同样积累了一定的财富，过上了安稳的生活。而且，即使自己不精通理财，也可以通过与专业的理财顾问交流，或者向善于理财的朋友请教，来获取合理的理财建议。这就如同我们不一定非要成为厨师才能品尝到美味佳肴，只要懂得寻找合适的资源，同样能够享受美食带来的愉悦。
2. 虽然每个人都知道物体会动、看得到光、也会使用电器，但不是每个人都是物理学家。虽然但是懂一些物理原理对安全有好处，至少在电器的安全使用上有些概念。
3. 虽然每个人都知道食物放久不能吃，但并非都是生物学家。

类比论证不是有效论证

虽然都会说话与判断道理，但学逻辑有益沟通。理解类比论证的问题，避免不合理推论。

生活中，父母常常会拿自己的孩子与别人家的孩子进行类比，这种类比的初衷可能是希望激励孩子进步，但往往会给孩子带来很大的心理压力，甚至引发亲子之间的矛盾。因为每个孩子都是独一无二的，他们有着不同的性格、兴趣爱好和学习方式，简单地将两个孩子进行类比，并不能全面、客观地评价孩子的表现。

要及时反思自己是否存在不当类比。我们要明白，即使类比论证的推论看起来没有道理，也不能就此判定结论一定错误。在某些情况下，可能只是类比的方式不恰当，但结论本身可能是有一定合理性的。然而，为了避免陷入错误的思维陷阱，我们需要及时反思自己的思维过程，审视是否存在不当类比的情况。

• 公司会议上，大家为方案争得面红耳赤，散会时问题却依然悬而未决；
• 朋友聚会聊起热门话题，没说两句就开始互怼，好好的氛围瞬间变得火药味十足。

本文就结合《罗伯特议事原则》和逻辑学干货，学习如何让讨论既有深度又有结果。

一、先定规矩：讨论不是 “抢麦”

围绕主题讨论

《罗伯特议事原则》的动议中心原则是讨论的核心。

简单来说，讨论得有个明确的主题，所有发言都要围绕具体提议展开。这就好比玩游戏，得先明确任务，队友之间才能默契配合闯关。比如公司要讨论下个月的促销活动，有人抱怨去年活动效果差，有人吐槽预算少，但没人提出具体方案，这就是典型的跑题。正确做法是，发起人先抛出动议：“我提议下个月做满减活动，用优惠券刺激消费，大家觉得可行吗？” 其他人再围绕这个提议发表看法。

发言完整原则

生活中总有这样的人，别人话还没说完就急着打断：“你说的不对！我觉得应该……” 这种行为在逻辑学里叫 “诉诸打断谬误“，直接剥夺了对方完整表达的机会。《罗伯特议事原则》规定，一人发言时，其他人必须保持安静，等对方说完，下一个人再举手申请发言。这就像接力赛跑，只有等前一棒稳稳交棒，下一棒才能顺利起跑，讨论才能顺畅进行。

二、讲逻辑：别让情绪左右逻辑

很多时候，讨论变争吵，是因为我们不小心掉进了逻辑陷阱。以你提议更换办公软件，同事不认同为例：

1.人身攻击

回避讨论的话题，转而质疑说话人的身份、动机或地位

• 质疑身份 回答：”你不会是某office的管理员吧？”

• 质疑动机 回答：”你收了某office多少钱？”

• 质疑地位 回答：”你就一文员” | “你上次方案都搞砸了，这次肯定也不行。”

2.转移话题

• 同事：”隔壁家的某office产品也不好用，你怎么不说？”

3.以偏概全

用个例以偏概全的诡辩

• 同事：”我身边的人也用某office很久了，也没发现问题”

4.偷换概念

假设有人提出了观点A，诡辩者不直接反驳，而是把观点A偷换成B，然后反驳观点B，让围观者认同观点B是错误的，然后进而让围观者同意观点A也是错误的。通常观点B的是一个明显错误的命题，诡辩者把观点B当成一个靶子来攻击，所以又称为稻草人诡辩法

• 同事：”把某office产品公司弄倒闭了，对大家都没好处”

5.诉诸恐惧

• 同事：”不好用？那就都别用了”

6.诉诸传统

• 同事：”我们公司一直用的某office很久了，历史证明这个软件很好用”

7.诉诸信心

采用信心来代替逻辑和证据，跟这类人很难讨论，因为不讲逻辑，缺乏共同的讨论基础

• 同事：“我相信某office就是最好的”

正确做法是针对 “换软件” 这件事理性讨论：“这个软件操作太复杂，我们团队学习成本太高，有没有更简单的选择？”

三、找共识：讨论的终极目标

限时限次原则

《罗伯特议事原则》中的限时限次原则，能有效避免无意义的争论。规定每个人的发言时间和对同一议题的发言次数，既能防止有人霸占话语权，又能让讨论更聚焦。就像辩论赛，双方都有固定的发言时间，才能保证比赛公平高效。

多数裁决原则

当讨论进入白热化，逻辑学中的求同存异策略就显得尤为重要。先把大家达成共识的部分梳理出来，比如讨论旅游目的地，有人想去海边，有人想去爬山，但大家都同意 “选个三天能往返的地方”，这就是共识。基于这个基础再讨论细节，就容易多了。《罗伯特议事原则》还强调多数裁决原则，在充分讨论后，尊重多数人的意见，这不是妥协，而是为了推动讨论得出结果，避免陷入僵局。

总结

回到文章开头的两个举例：

• 公司会议上，大家为方案争得面红耳赤，散会时问题却依然悬而未决；

  下次开会前，不妨和同事约定：每人发言不超过 3 分钟，先举手再发言；

• 朋友聚会聊起热门话题，没说两句就开始互怼，好好的氛围瞬间变得火药味十足。

  朋友聚会聊到有争议的话题，试试用 “我理解你的想法，不过我觉得……” 这样的句式开头，减少对立感。

正确讨论问题，本质上是一场思维的协作。《罗伯特议事原则》为我们提供规则框架，逻辑学教会我们理性思考，当两者结合，讨论就不再是 “各说各话” 的混乱战场，而是共同解决问题、创造价值的合作舞台。

在现代的网络架构中，通常会使用Docker容器来实现应用的隔离和部署。本文将介绍如何使用Cloudflare Tunnels来实现内网穿透Docker桥接网络，从而实现在没有公网IP的情况下，通过访问公网地址来访问内网中的Docker容器。

选择Cloudflare Tunnels的原因

1. 免费：Cloudflare Tunnels是Cloudflare提供的免费服务，无需额外付费。
2. 安全：Cloudflare Tunnels采用了先进的加密技术，确保了数据的安全性。
3. 易用：Cloudflare Tunnels提供了简单易用的API和命令行工具，方便用户进行配置和管理。
4. 支持自定义域名：Cloudflare Tunnels支持自定义域名

准备工作

在开始之前，我们需要准备以下工具和环境：

• 运行在Docker上的应用程序（需要穿透的服务）
• 一个部署在Cloudflare的域名

实践

1. 访问cloudflare控制台, 选择Zero Trust, 点击Tunnels, 点击Create Tunnels,隧道类型选择Cloudflared, 填写Tunnels名称, 点击Create Tunnels.

2. 安装连接器，选择Docker安装，记住命令中的Token。

3. 配置公共主机名，选择自定义域名，填写自己的域名即可。服务处请根据自己的需求选择，因为我的应用在部署在本地的8080端口，所以配置类型为HTTP，URL为177.10.0.1:8080，点击Save。（177.10.0.1是应用服务入口的容器的IP地址，实际部署时请根据实际情况修改）

4. 打开你的应用程序项目，编辑docker-compose.yml文件(本文以docker-compose.yml为例，其他项目自行修改)。

把cloudflared服务添加到桥接容器的网络中, 如下：

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
28
29
30

version: "1"
services:
  demo-nginx:
    container_name: demo-web
    ports:
      - "8080:8080"
    build:
      context: ./
      dockerfile: ./Dockerfile
    expose:
      - "8080"
    networks:
      network:
        ipv4_address: 177.10.0.1

  # 新增的cloudflared服务
  demo-cloudflared:
    image: cloudflare/cloudflared:latest
    container_name: demo-cloudflared
    command: [ "tunnel", "--no-autoupdate", "run", "--token", "123456" ]
    networks:
      network:
        ipv4_address: 177.10.0.2

networks:
  network:
    ipam:
      driver: default
      config:
        - subnet: '177.10.0.0/16'

5. 启动容器，执行以下命令：

1

docker-compose up -d

6. 访问公网地址，即可访问到内网中的Docker容器, 访问地址为：https://你的域名。

   如果遇到访问失败的情况，可以检查以下几点：

• cloudflared服务是否正常启动
• cloudflared和应用程序是否在同一个网络中

以代码的编写到发布的过程，通常需要：

1
2
3
4

1.创建、编写
2.build
3.发布到仓库
4.更新服务

在此流程中，存在很多重复的步骤（不重复的地方只有编写的内容）。
这些步骤不仅重复繁琐，还对本地环境的依赖比较强。要是有一种方式，可以自动完成这些步骤，那就太棒了。本文将介绍一种基于Github Action的自动化部署方案，并以hexo为例，实现从编写到发布，只需一个上传步骤，即可完成整个流程的快速发布。

Github Action

是什么

Github Action是一个持续集成和持续部署（CI/CD）平台，它允许您定义在代码仓库中发生特定事件时运行的任务。且免费、与 GitHub 生态深度集成

持续集成：频繁地（一天多次）将代码集成到主干。 每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。许多团队发现这种方法可以显著减少集成问题，并允许团队更快地开发高质量的软件。 这是持续交付和持续部署的基础。

如何使用

官方文档中，有详细介绍，这里就不再赘述。

快速实战

这里以hexo为例，通过实战快速入门，实现自动化部署。

实现目的

从markdown编写到发布，只需一个上传步骤，即可完成整个流程的快速发布。

前置条件

• 需要的基础：GitHub 账号、仓库、基础命令行知识
• 环境准备：无需本地安装工具

步骤

1.创建仓库

1. 登录GitHub账号，创建两个仓库

• xxx.github.io: 用于存放博客的静态资源，如index.html、css、js等，xxx为github用户名

• blog: 用于存放hexo博客的源代码

2.构建Hexo

把构建的hexo项目提交到xxx仓库中

git init
git checkout -b gh-pages
git add .
git commit -m “init”
git remote add origin https://github.com/hinsyeow/hinsyeow.github.io.git
git push -u origin gh-pages –force #强制覆盖

3.创建Github Action

返回到github，在xxx仓库中，找到 Settings->Pages->Build and deployment，将 source 选择为 GitHub Actions

随后，在提示

1

Use a suggested workflow, browse all workflows, or create your own.

中选择create your own

创建文件.github/workflows/pages.yml

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

name: Pages

on:
  push:
    branches:
      - gh-pages # 我们设置的分支是 gh-pages

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: false #recursive
      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
          # Ref: https://github.com/actions/setup-node#supported-version-syntax
          node-version: "20.11.1"
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

3.配置Github Secrets

为了安全，我们需要配置Github Secrets，用于存放私密信息，如ssh key等

1.先生成ssh key

1

ssh-keygen -t rsa -b 4096 -C "你的 GitHub 邮箱" -f hexo_deploy_key

2.在生成的文件夹中找到id_rsa.pub，复制内容，以此为ssh key

3.在Github仓库的Settings->Secrets中添加DEPLOY_KEY，值为ssh key，用于提交代码,部署到Github Pages

到这里，我们就可以通过push代码，自动部署到Github Pages了

在当今分布式办公与远程协作日益普及的背景下，安全、高效的异地组网与远程连接方案显得尤为重要。Tailscale作为一款基于WireGuard协议的现代VPN解决方案，凭借其简单易用的特性和强大的功能，为用户提供了便捷的组网与远程访问能力。本文将深入探讨如何利用Tailscale实现异地组网，并通过SSH协议进行安全的远程连接。

一、Tailscale

1.1 Tailscale简介

Tailscale 是一个基于 WireGuard 协议的现代VPN软件，旨在简化网络连接与管理。与传统VPN不同，Tailscale采用了零配置网络（Zero-Config Networking）技术，无需复杂的路由器配置，即可快速实现设备间的安全通信。其主要功能包括内网穿透、虚拟组网、远程访问等，广泛应用于家庭网络、企业办公和开发测试等场景。

1.2 技术原理

Tailscale基于WireGuard协议构建，利用加密隧道技术在设备间建立安全连接。WireGuard是一种快速、现代的VPN协议，具有高性能、低延迟和简洁的设计特点。Tailscale通过自动配置IP地址和路由规则，实现设备间的自动发现与连接，形成一个虚拟的私有网络（Tailnet）。在这个网络中，所有设备都拥有唯一的IP地址，并且可以通过该地址进行直接通信，就像它们处于同一个局域网中一样。

1.3 优势分析

• 简单易用：无需专业的网络知识，只需在设备上安装Tailscale客户端并登录账号，即可自动加入网络。
• 安全可靠：采用端到端加密技术，确保数据传输的安全性。同时，Tailscale支持多因素认证（MFA）和设备验证，进一步增强了网络的安全性。
• 高性能：基于WireGuard协议的高效实现，Tailscale在网络性能方面表现出色，能够提供低延迟、高带宽的连接体验。
• 跨平台支持：支持Windows、macOS、Linux、iOS、Android等多种操作系统，方便用户在不同设备间进行连接与协作。

2. Tailscale安装

客户端安装

登录Tailscale官网，注册账号，然后下载对应的客户端，安装即可。

安装完成后，打开Tailscale客户端，登录账号，然后登录控制台,就可以看到已经连接的设备了。
在控制台上，可以看到每台设备的IP地址，这些IP地址都是在同一个局域网内的，可以直接通过这些IP地址进行内网穿透，组网，远程连接等操作。

检查网络是否正常

从某台设备上ping另一台设备的IP地址，如果ping通，说明网络正常。

服务器sshd安装

服务器上安装sshd服务，然后启动sshd服务，这样就可以通过ssh远程连接服务器了。

1
2

sudo apt install openssh-server
sudo systemctl start sshd

客户端ssh连接服务器

在客户端上，通过ssh连接服务器

1
2

ssh username@server_ip
#username是服务器上的用户名，server_ip是服务器的IP地址, 如果是默认端口，可以不用指定端口号。

VSCode Remote SSH

在VSCode中，安装Remote SSH插件，然后通过Remote SSH插件，连接服务器，就可以在本地编辑服务器上的文件了。

安装以下插件

Remote - SSH
Remote - SSH: Editing Configuration Files
Remote - SSH: Explorer

在VSCode中，按下F1，输入Remote SSH，选择Remote-SSH: Open Configuration File，然后选择config文件，编辑config文件，添加以下内容

1
2
3

Host server
    HostName server_ip
    User username

免密登录

以下操作，以客户端和服务端都为Windows为例，Linux和MacOS类似。

客户端生成密钥

在客户端上，打开PowerShell，输入以下命令，生成密钥

1

ssh-keygen

服务端添加密钥

拷贝客户端生成的公钥到服务端的.ssh目录下，在authorized_keys文件中追加粘贴。（如果没有authorized_keys文件，可以新建一个）

然后编辑sshd_config文件，添加以下配置

1
2
3

PubkeyAuthentication yes
AuthorizedKeysFile  .ssh/authorized_keys
PasswordAuthentication no  (需要将默认的yes改为no,很重要)

注释掉以下配置

1
2

#Match Group administrators
      #AuthorizedKeysFile __PROGRAMDATA__/ssh/administrators_authorized_keys

重启sshd服务

1
2

net stop sshd
net start sshd

客户端免密登录

编辑客户端的.ssh目录下的config文件，添加IdentityFile配置，内容为客户端的私钥路径。

1
2
3
4

Host server
    HostName server_ip
    User username
    IdentityFile C:\Users\username\.ssh\id_rsa

Git保存用户名密码

在客户端上，打开PowerShell，输入以下命令，保存用户名密码（需要输入过一次用户名密码）

1

git config --global credential.helper store 

JWT 是一种基于 JSON 的轻量级开放标准，以 JSON 对象的形式存在，由三部分组成，通过点号（.）分隔，分别是头部（Header）、载荷（Payload）和签名（Signature）。在后续的内容中，我们将详细介绍 JWT 的这三个组成部分。

JWT 长啥样

（一）头部（Header）

头部通常由两部分组成：令牌的类型（typ）和签名算法（alg） 。以最常见的 JSON 格式来表示，头部可能是这样的：

1
2
3
4
5
6
7

{

     "alg": "HS256",

     "typ": "JWT"

}

在这个例子中，”alg”: “HS256” 表示使用的签名算法是 HMAC SHA256 ，这种算法在保证数据完整性和安全性方面表现出色，就像给你的数据上了一把坚固的锁；”typ”: “JWT” 则明确声明了这是一个 JWT 令牌，让接收方一眼就能识别它的身份。

为了能在网络中安全传输，头部会被进行 Base64 编码 ，转换后的字符串就像是一种特殊的 “密文”，可以在各种网络环境中稳定传输。例如，上面的 JSON 格式头部经过 Base64 编码后，可能会变成这样一串字符：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 。虽然看起来像乱码，但只要掌握了解码规则，就能还原出原始的头部信息。

（二）载荷（Payload）

载荷是 JWT 中真正携带有效信息的部分，它就像是一个包裹，里面装着各种你想要传递的数据。载荷部分也是一个 JSON 对象，包含了许多声明（claims），这些声明可以分为三类：

• 注册声明：是一些预定义的声明，虽然不是强制使用，但推荐使用，它们就像是一些通用的标签，方便大家理解和使用。常见的注册声明有：iss（issuer，签发者），就像快递的寄件人，标识这个 JWT 是由谁生成的；exp（expiration time，过期时间），规定了这个 JWT 的有效期限，一旦超过这个时间，JWT 就会失效，就像食品的保质期一样；sub（subject，主题），说明这个 JWT 是关于谁或什么的，比如用户 ID 等；iat（issued at，签发时间），记录了 JWT 的生成时间，方便追踪和管理。

• 公共声明：是可以由使用 JWT 的各方自定义的声明，但为了避免冲突，建议使用一些大家都认可的名称。比如，我们可以定义一个 “name” 声明来表示用户的姓名，或者用 “role” 声明来表示用户的角色。这些公共声明可以根据具体的业务需求来灵活定义，为 JWT 赋予更多的业务含义。

• 私有声明：是在特定的应用场景中使用的声明，只有应用的开发者和相关人员知道其含义，就像是一种内部的约定。比如，某个电商应用可能会定义一个 “cart_id” 声明来表示用户购物车的 ID，这个声明对于其他不了解该应用业务的人来说可能毫无意义，但在这个应用内部却非常重要。

以下是一个载荷的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13

{

     "sub": "1234567890",

     "name": "John Doe",

     "admin": true,

     "iat": 1516239022,

     "exp": 1516239022 + 3600

}

在这个示例中，”sub” 声明表示用户的 ID 为 “1234567890”；”name” 声明显示用户的姓名是 “John Doe”；”admin”: true 表示该用户具有管理员权限；”iat” 声明记录了 JWT 的签发时间为 1516239022（这是一个时间戳，表示从 1970 年 1 月 1 日 00:00:00 UTC 到签发时间的秒数）；”exp” 声明则规定了 JWT 的过期时间，这里设置为签发时间加上 3600 秒（即 1 小时后过期）。

与头部类似，载荷也会被 Base64 编码 ，编码后的字符串用于在 JWT 中传输。例如，上述载荷经过 Base64 编码后，可能会变成这样：

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMiwiZXhwIjoxNTE2MjM5MDIyKzM2MDAifQ

这样，即使在传输过程中信息被截取，没有正确的解码方式也无法获取其中的有效信息，从而保证了数据的安全性。

（三）签名（Signature）

签名是 JWT 的重要组成部分，它的作用是验证 JWT 在传输过程中没有被篡改，并且确保这个 JWT 确实是由合法的签发者生成的，就像文件上的签名盖章，用来证明文件的真实性和完整性。

要生成签名，需要使用编码后的头部、编码后的载荷、一个密钥（secret）以及头部中指定的签名算法 。以 HS256 算法为例，生成签名的过程如下：

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
28
29
30
31
32
33
34
35

import hmac

import hashlib

import base64

# 假设已经有编码后的头部和载荷

encoded_header = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"

encoded_payload = "eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMiwiZXhwIjoxNTE2MjM5MDIyKzM2MDAifQ"

secret = "your_secret_key"  # 密钥，必须保密

# 拼接编码后的头部和载荷

message = encoded_header + "." + encoded_payload

# 使用HMAC SHA256算法生成签名

signature = hmac.new(

       secret.encode('utf-8'),

       message.encode('utf-8'),

       hashlib.sha256

).digest()

# 对签名进行Base64编码

encoded_signature = base64.urlsafe_b64encode(signature).rstrip(b'=').decode('utf-8')

print(encoded_signature)

生成的签名会附加在编码后的头部和载荷之后，通过点号（.）分隔，最终形成完整的 JWT 。例如：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMiwiZXhwIjoxNTE2MjM5MDIyKzM2MDAifQ.abcdefghijklmnopqrstuvwxyz123456 。

在验证 JWT 时，接收方会使用相同的密钥和签名算法，根据接收到的头部和载荷重新计算签名 。如果计算得到的签名与 JWT 中附带的签名一致，就说明 JWT 在传输过程中没有被篡改，是可信的；反之，如果签名不一致，就说明 JWT 可能被恶意修改过，或者是伪造的，接收方就会拒绝这个 JWT。

这里要特别强调的是，密钥（secret）的保密非常重要 。如果密钥泄露，任何人都可以使用这个密钥生成合法的签名，从而伪造出有效的 JWT，这将严重威胁到系统的安全。所以，在实际应用中，一定要妥善保管密钥，采用安全的存储方式和传输方式，比如使用环境变量来存储密钥，避免将密钥硬编码在代码中。

三、JWT 认证流程

现在，我们已经对 JWT 的结构有了深入的了解，接下来就进入 JWT 的实际应用环节 ——JWT 认证流程。这个流程就像是一场精心编排的舞台剧，各个角色（客户端和服务器）按照特定的步骤和规则进行交互，以确保用户能够安全、顺利地访问受保护的资源。下面，我们就来详细解析这场 “舞台剧” 的每一幕。

（一）用户登录

想象一下，你来到了一个需要身份验证才能进入的在线系统，比如一个电商平台或者一个办公系统。首先，你会在客户端（通常是网页或者移动应用）的登录界面输入你的用户名和密码 ，就像你在现实生活中出示你的身份证和密码来证明你的身份一样。然后，客户端会将这些登录信息打包成一个请求，发送给服务器 。这个请求就像是一封带着你身份信息的信件，被投递到服务器的 “信箱” 中。

在前端代码中，使用 JavaScript 的 fetch API 发送登录请求可能像这样：

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

fetch('/api/login', {

     method: 'POST',

     headers: {

       'Content-Type': 'application/json'

     },

     body: JSON.stringify({

       username: 'your_username',

       password: 'your_password'

     })

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error('Error:', error));

在这个示例中，我们使用 fetch 函数向/api/login发送一个 POST 请求，请求头中设置了Content-Type为application/json，表示我们发送的数据是 JSON 格式。请求体中包含了用户输入的用户名和密码，通过JSON.stringify方法将其转换为 JSON 字符串。服务器接收到这个请求后，就会开始验证用户的身份。

（二）服务器验证身份并生成 JWT

服务器收到客户端发来的登录请求后，就像是收到了一封需要验证身份的信件，它会打开信件（解析请求），取出里面的用户名和密码 。然后，服务器会根据事先存储在数据库中的用户信息来验证这些凭证是否正确 ，这就好比在现实生活中，工作人员会核对你的身份证和密码是否与档案中的信息一致。

如果验证通过，恭喜你，你成功证明了自己的身份！服务器就会开始生成 JWT 。生成 JWT 的过程就像是制作一张专属你的通行证，服务器会按照我们前面介绍的 JWT 结构，创建头部、载荷和签名 。头部中会指定签名算法，比如常用的 HS256；载荷中会包含用户的一些基本信息，比如用户 ID、用户名、角色等，还会设置一些声明，如签发时间（iat）和过期时间（exp）；最后，服务器会使用一个密钥（secret）和指定的签名算法来生成签名 ，这个密钥就像是制作通行证的特殊印章，只有拥有这个印章的服务器才能制作出有效的通行证。

以下是使用 Python 的 PyJWT 库生成 JWT 的伪代码示例：

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import jwt

import datetime

def login(username, password):

       # 假设这里有一个函数authenticate用于验证用户身份

       user = authenticate(username, password)

       if user:

           # 定义载荷

           payload = {

               'user_id': user.id,

               'username': user.username,

               'role': user.role,

               'iat': datetime.datetime.utcnow(),

               'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=30)  # 设置30分钟后过期

           }

           # 密钥，必须保密

           secret = 'your_secret_key'

           # 生成JWT

           token = jwt.encode(payload, secret, algorithm='HS256')

           return token

       else:

           return None

在这个示例中，login函数接收用户名和密码作为参数，调用authenticate函数验证用户身份。如果验证通过，就创建一个包含用户信息和声明的载荷，使用指定的密钥和 HS256 算法生成 JWT 并返回。如果验证失败，则返回None。

（三）返回 JWT 给客户端

服务器成功生成 JWT 后，就像是制作好了你的专属通行证，它会把这个 JWT 返回给客户端 。这个 JWT 通常会以 JSON 格式返回，就像把通行证放在一个信封里寄回给你。例如：

1
2
3
4
5

{

     "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE1MTYyMzkwMjI3fQ.abcdefghijklmnopqrstuvwxyz123456"

}

在这个 JSON 数据中，token字段的值就是生成的 JWT，它由三部分组成，通过点号（.）分隔，分别是编码后的头部、编码后的载荷和签名 。客户端接收到这个 JWT 后，就可以开始使用它来访问受保护的资源了。

（四）客户端存储 JWT

客户端收到服务器返回的 JWT 后，就像是收到了一张珍贵的通行证，它需要妥善保管这张通行证，以便在后续的请求中使用 。通常，客户端会将 JWT 存储在本地存储（localStorage）或会话存储（sessionStorage）中 。本地存储就像是你的一个私人保险柜，里面的东西除非你主动清除，否则会一直存在；会话存储则像是一个临时的小盒子，当你关闭浏览器标签页时，里面的东西就会消失。

在前端代码中，使用 JavaScript 将 JWT 存储在本地存储中的示例如下：

1
2
3

const jwtToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE1MTYyMzkwMjI3fQ.abcdefghijklmnopqrstuvwxyz123456';

localStorage.setItem('token', jwtToken);

在这个示例中，我们使用localStorage.setItem方法将 JWT 存储在本地存储中，键名为token，值为接收到的 JWT。这样，在后续的请求中，我们就可以从本地存储中取出这个 JWT，发送给服务器进行身份验证。需要注意的是，由于本地存储和会话存储中的数据可以被 JavaScript 读取，存在一定的安全风险，所以在实际应用中，要采取一些安全措施，比如使用 HTTPS 来加密传输数据，防止 JWT 被窃取。

（五）发送带 JWT 的请求

当客户端需要访问受保护的资源时，就像是你拿着通行证去进入一个特定的区域，它会在请求中带上之前存储的 JWT 。通常，JWT 会被放在请求头的 Authorization 字段中，格式为Bearer <JWT> ，这里的Bearer就像是通行证的类型标识，告诉服务器这是一个 JWT 认证请求。

在前端代码中，使用 JavaScript 的 fetch API 发送带 JWT 的请求可能像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

fetch('/api/protected', {

     method: 'GET',

     headers: {

       'Authorization': \`Bearer \${localStorage.getItem('token')}\`

     }

})

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error('Error:', error));

在这个示例中，我们向/api/protected发送一个 GET 请求，请求头中设置了Authorization字段，其值为Bearer加上从本地存储中取出的 JWT。服务器接收到这个请求后，就会根据 JWT 来验证用户的身份和权限。

（六）服务器验证 JWT

服务器接收到带有 JWT 的请求后，就像是工作人员检查你的通行证是否有效，它会开始验证 JWT 的有效性 。验证过程主要包括以下几个方面：

• 签名验证：服务器会使用与生成 JWT 时相同的密钥和签名算法，根据接收到的头部和载荷重新计算签名 。如果计算得到的签名与 JWT 中附带的签名一致，就说明 JWT 在传输过程中没有被篡改，是可信的；反之，如果签名不一致，就说明 JWT 可能被恶意修改过，或者是伪造的，服务器就会拒绝这个 JWT。

• 过期时间验证：服务器会检查 JWT 载荷中的过期时间（exp）声明 。如果当前时间已经超过了过期时间，说明 JWT 已经失效，服务器会拒绝这个 JWT；只有在当前时间在过期时间之前，JWT 才是有效的。

• 有效载荷验证：服务器还会检查 JWT 载荷中的其他声明，比如用户 ID、角色等 ，以确保用户具有访问请求资源的权限。例如，如果某个资源只允许管理员访问，而 JWT 中的角色声明不是 “admin”，服务器就会拒绝这个请求。

以下是使用 Python 的 PyJWT 库验证 JWT 的伪代码示例：

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
28
29

import jwt

def protected_route(request):

       token = request.headers.get('Authorization').split()\[1]  # 从请求头中获取JWT

       try:

           # 密钥，必须保密

           secret = 'your_secret_key'

           # 验证JWT

           payload = jwt.decode(token, secret, algorithms=\['HS256'])

           user_id = payload\['user_id']

           # 继续处理请求，比如根据用户ID获取用户信息等

           return {'message': 'Request processed successfully', 'user_id': user_id}

       except jwt.ExpiredSignatureError:

           return {'error': 'Token expired'}, 401

       except jwt.InvalidTokenError:

           return {'error': 'Invalid token'}, 401

在这个示例中，protected_route函数从请求头中获取 JWT，使用指定的密钥和 HS256 算法验证 JWT 的有效性。如果验证成功，就可以从载荷中获取用户 ID，并继续处理请求；如果 JWT 过期，会捕获ExpiredSignatureError异常，返回错误信息和 401 状态码；如果 JWT 无效，会捕获InvalidTokenError异常，返回错误信息和 401 状态码。

（七）访问受保护资源

如果 JWT 验证通过，就像是你的通行证被工作人员认可，服务器会允许用户访问受保护的资源 。服务器会根据请求的内容，返回相应的资源数据给客户端 。例如，如果你请求的是用户的个人信息，服务器会从数据库中查询出你的个人信息并返回给你；如果你请求的是一个文件，服务器会将文件内容发送给你。

以下是一个简单的示例，展示如何根据用户 ID 获取用户信息并返回：

1
2
3
4
5
6
7
8
9
10
11
12
13

def get_user_info(user_id):

       # 假设这里有一个函数从数据库中获取用户信息

       user = get_user_from_db(user_id)

       if user:

           return {'user_info': {'id': user.id, 'name': user.name, 'email': user.email}}

       else:

           return {'error': 'User not found'}, 404

在这个示例中，get_user_info函数接收用户 ID 作为参数，调用get_user_from_db函数从数据库中获取用户信息。如果找到用户，就返回用户信息；如果未找到用户，就返回错误信息和 404 状态码。在实际应用中，protected_route函数验证 JWT 通过后，可以调用get_user_info函数获取用户信息并返回给客户端。

（八）过期和刷新

JWT 通常会设置一个过期时间，这是为了增强安全性 。就像你的车票有一个有效期，过了有效期就不能使用了。如果 JWT 过期了，客户端在发送请求时，服务器会拒绝这个请求，提示用户需要重新登录或刷新 JWT 。

为了避免用户频繁重新登录，客户端可以在 JWT 过期前进行刷新 。刷新 JWT 的过程通常是客户端向服务器发送一个刷新请求，这个请求中会带上旧的 JWT 。服务器验证旧 JWT 的有效性（虽然它可能快过期了，但还在有效期内），如果验证通过，就会生成一个新的 JWT 并返回给客户端 。客户端收到新的 JWT 后，就可以用它来继续访问受保护的资源了。

在前端代码中，使用 JavaScript 发送刷新 JWT 的请求示例如下：

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

fetch('/api/refresh', {

     method: 'POST',

     headers: {

       'Authorization': \`Bearer \${localStorage.getItem('token')}\`

     }

})

.then(response => response.json())

.then(data => {

       if (data.token) {

           localStorage.setItem('token', data.token);  // 更新本地存储的JWT

       }

})

.catch(error => console.error('Error:', error));

在这个示例中，我们向/api/refresh发送一个 POST 请求，请求头中带上旧的 JWT。服务器接收到请求后，如果验证通过，会返回一个包含新 JWT 的 JSON 数据。客户端接收到数据后，检查是否有token字段，如果有，就更新本地存储中的 JWT。

（九）退出登录

当用户选择退出登录时，就像是你主动交出了通行证，客户端可以简单地删除存储的 JWT ，以阻止进一步的访问。在前端代码中，使用 JavaScript 删除本地存储中的 JWT 示例如下：

1

localStorage.removeItem('token');

在这个示例中，我们使用localStorage.removeItem方法删除键名为token的本地存储项，这样就删除了存储的 JWT。当用户再次发送请求时，由于没有有效的 JWT，服务器会拒绝请求，提示用户需要重新登录。

四、JWT 的优点

通过前面的介绍，我们已经深入了解了 JWT 的结构和认证流程，现在来总结一下 JWT 在实际应用中展现出的诸多优点。

（一）无状态性，减轻服务器压力

JWT 是一种无状态的认证机制 ，这意味着服务器不需要在后端存储任何与 JWT 相关的会话信息。在传统的基于会话（Session）的认证方式中，服务器需要在内存或数据库中保存用户的会话状态，记录用户的登录信息、权限等 。随着用户数量的增加，服务器需要维护大量的会话数据，这会消耗大量的服务器资源，增加服务器的负担，就像一个仓库需要存放大量的物品，占用了很多空间和资源。

而 JWT 则不同，每个 JWT 都包含了用户身份验证和授权所需的所有信息 。服务器在接收到请求时，只需要验证 JWT 的有效性，而不需要查询额外的会话数据，大大减轻了服务器的压力 。这就好比你去图书馆借书，传统方式是图书馆工作人员需要在本子上记录你借了什么书，而 JWT 方式就像是你自己带着一张借书清单，工作人员只需要核对清单的真实性，不需要再去查找其他记录，这样可以提高效率，减少工作人员的工作量。这种无状态性使得应用更容易扩展，可以轻松地部署到多个服务器上，实现负载均衡，提高系统的性能和可用性。

（二）自包含性，方便传输

JWT 具有自包含性，它将用户的身份信息、权限信息以及其他相关声明都包含在一个 JSON 对象中 。这就像是一个包裹，里面装着你需要的所有东西。当 JWT 在客户端和服务器之间传输时，不需要再依赖其他外部资源来获取这些信息 ，因为所有必要的信息都已经包含在 JWT 内部。例如，在一个分布式系统中，不同的服务可能需要验证用户的身份和权限。如果使用 JWT，每个服务都可以独立地验证 JWT，而不需要与其他服务或数据库进行额外的通信来获取用户信息 ，就像每个服务都有一把钥匙，可以直接打开 JWT 这个包裹，获取里面的信息，非常方便快捷。这种自包含性不仅提高了数据传输的效率，还增强了系统的独立性和可维护性，使得各个服务之间的耦合度降低，更易于开发、测试和部署。

（三）安全性高，防止数据篡改

JWT 使用数字签名来验证令牌的真实性和完整性 ，这为数据的安全性提供了有力保障。在生成 JWT 时，服务器会使用一个密钥（secret）和指定的签名算法（如 HS256、RS256 等）对头部和载荷进行签名 ，生成的签名就像是文件上的盖章，用来证明文件的真实性。当服务器接收到 JWT 时，会使用相同的密钥和签名算法重新计算签名 ，并与 JWT 中附带的签名进行比较。如果两个签名一致，就说明 JWT 在传输过程中没有被篡改，是可信的；反之，如果签名不一致，就说明 JWT 可能被恶意修改过，或者是伪造的，服务器会拒绝这个 JWT。这就好比你收到一份重要文件，文件上有一个独特的印章，你可以通过验证印章来确认文件是否被篡改。此外，JWT 还可以使用加密算法对载荷进行加密，进一步保护数据的机密性，确保敏感信息在传输过程中不被窃取。

（四）跨域支持，适应复杂环境

在现代的 Web 应用开发中，跨域请求是一个常见的场景 。例如，前端应用可能部署在一个域名下，而后端 API 服务部署在另一个域名下，这就需要进行跨域通信。JWT 在跨域场景中表现出色，因为它可以直接在前端存储（如 localStorage、sessionStorage），并且可以很方便地在跨域请求中携带 。客户端在发送跨域请求时，只需要将 JWT 放在请求头的 Authorization 字段中，服务器就可以验证 JWT 的有效性，从而确认用户的身份和权限 。与传统的基于 Cookie 的认证方式相比，JWT 不需要依赖服务器端的 Session 来验证用户身份，避免了跨域 Cookie 带来的安全问题和复杂性 。这就像是你可以带着自己的通行证（JWT）自由穿梭在不同的区域（不同域名），而不用担心因为区域的不同而受到限制，非常适合在复杂的分布式系统和多域名环境中使用。

（五）可扩展性，满足多样化需求

JWT 具有良好的可扩展性，可以轻松地与其他身份验证和授权机制集成 ，如 OAuth、OpenID Connect 等。这使得 JWT 能够适应不同的应用场景和业务需求，为用户提供更加灵活和多样化的认证和授权解决方案 。例如，在一个大型的企业级应用中，可能需要同时支持多种登录方式，如用户名密码登录、第三方账号登录（如微信登录、QQ 登录）等。通过将 JWT 与 OAuth 等机制集成，可以实现统一的身份验证和授权管理 ，用户可以使用不同的方式登录，而系统可以通过验证 JWT 来确认用户的身份和权限。此外，JWT 还可以根据应用的需求，在载荷中添加自定义的声明信息 ，这些声明可以用于传递额外的业务数据或权限信息，进一步扩展 JWT 的功能，满足各种复杂的业务逻辑需求。

五、使用 JWT 的注意事项

在使用 JWT 为应用程序保驾护航时，还有一些关键的注意事项需要牢记，就像驾驶汽车时要遵守交通规则一样，只有注意这些要点，才能确保 JWT 的安全、有效使用。

• 保护密钥安全：密钥（secret）是 JWT 的核心机密，它就像一把万能钥匙，拥有它就能生成和验证有效的 JWT。如果密钥泄露，任何人都可以伪造 JWT，从而获得未授权的访问权限，这将对系统安全造成极大的威胁。因此，一定要将密钥存储在安全的地方，避免将其硬编码在代码中 。可以考虑使用环境变量来存储密钥，这样在部署应用程序时，可以方便地设置和管理密钥，同时也增加了密钥的安全性。例如，在 Node.js 应用中，可以使用dotenv库来加载环境变量，将密钥存储在.env文件中，然后在代码中通过process.env.SECRET_KEY来获取密钥。

• 设置合理过期时间：JWT 的过期时间（exp）是保证安全性的重要因素 。如果过期时间设置过长，一旦 JWT 被泄露，攻击者就有较长的时间利用它来访问受保护的资源；如果过期时间设置过短，用户可能需要频繁重新登录，这会影响用户体验。因此，需要根据应用程序的实际需求，设置一个合理的过期时间 。一般来说，对于一些安全性要求较高的应用，如金融类应用，可以将过期时间设置得较短，比如几分钟或几小时；对于一些普通的应用，可以将过期时间设置为一天或几天。同时，还可以结合刷新令牌（refresh token）机制，在 JWT 过期前为用户自动刷新令牌，避免用户频繁登录。

• 不存储敏感信息：虽然 JWT 的载荷部分可以存储各种信息，但不应该在其中存储敏感信息，如用户密码、银行卡号等 。因为 JWT 是可以被解码的，任何人都可以获取载荷中的信息，即使进行了 Base64 编码，也只是一种简单的编码方式，并非加密，很容易被破解。所以，在载荷中只应存储必要的非敏感信息，如用户 ID、用户名、角色等，对于敏感信息，应该在服务器端进行安全存储和管理 。

• 使用 HTTPS 传输：JWT 在传输过程中可能会被截获，因此使用 HTTPS 协议进行传输至关重要 。HTTPS 通过 SSL/TLS 协议对数据进行加密，确保数据在客户端和服务器之间传输时的机密性和完整性 ，可以有效防止 JWT 被窃取和篡改。如果使用 HTTP 协议传输 JWT，攻击者可以通过中间人攻击等手段获取 JWT，进而利用它进行恶意操作。所以，在生产环境中，一定要确保应用程序使用 HTTPS 协议来传输 JWT 。

• 防止重放攻击：重放攻击是指攻击者截获并重新发送有效的 JWT，以获取未授权的访问权限 。为了防止重放攻击，可以在 JWT 中添加一个唯一的标识符（如 JTI，JWT ID），并在服务器端维护一个已使用 JWT 的黑名单 。当服务器接收到 JWT 时，除了验证签名和过期时间外，还可以检查 JTI 是否在黑名单中，如果在黑名单中，则说明该 JWT 可能是被重放的，服务器可以拒绝这个 JWT。另外，也可以为 JWT 设置一个 “不可使用时间”（nbf，Not Before）声明，表示在这个时间之前 JWT 是无效的，这样可以进一步防止重放攻击 。

• 验证 JWT 来源：在服务器端验证 JWT 时，不仅要验证签名和过期时间等，还要确保 JWT 是来自合法的客户端 。可以通过验证请求的来源 IP 地址、检查请求头中的其他信息等方式来确认 JWT 的来源是否可信 。例如，在一些应用中，只允许特定 IP 地址段的客户端发送请求，对于其他来源的请求，即使 JWT 有效，也会被拒绝，这样可以有效防止 JWT 被恶意使用。

六、总结

JWT 授权认证作为现代网络应用中保障安全与便捷访问的关键机制，以其独特的结构和高效的流程，在身份验证领域占据了重要地位。从用户登录时的身份验证，到服务器生成 JWT 并返回给客户端，再到客户端存储 JWT 并在后续请求中携带，以及服务器对 JWT 的验证和对受保护资源的访问控制，每个环节都紧密相扣，确保了只有合法用户能够访问相应的资源。同时，JWT 的优点，如无状态性、自包含性、安全性高、跨域支持和可扩展性，使其成为众多应用开发者的首选认证方式。

然而，在享受 JWT 带来的便利时，我们也不能忽视使用过程中的注意事项，保护密钥安全、设置合理过期时间、不存储敏感信息、使用 HTTPS 传输以及防止重放攻击等，都是确保 JWT 安全有效使用的关键因素。

希望通过这篇文章，大家能够对 JWT 授权认证流程有一个全面而清晰的理解。如果你在实际应用中需要实现身份验证和授权功能，不妨尝试使用 JWT，相信它会为你的应用带来更高效、更安全的认证体验。如果你在学习或使用 JWT 的过程中有任何疑问，欢迎在留言区留言交流，让我们一起探讨，共同进步。

忙碌的夜晚，我喝着拿铁，坐在电脑旁，在指尖且飞快的敲着键盘的时候，键盘突然打不了字，window窗口栏变灰，应该是窗口失焦了，此时只需要动动鼠标，点击窗口恢复焦点，就可以继续愉悦的敲键盘了。

此起彼伏，窗口又失去了焦点，双手已然在键盘位只能再去移动鼠标..点击窗口…..

周而复始几次后，我终于忍不住了。。

二、问题确认

问题具有随机性、可复现，在排除了“可能不小心按错键导致失焦”的可能性后。

我就把问题的关键词确认在 “window11” “窗口失焦”。

三、SFW(Seach in Fxxking Web)方法

得到了的关键词，开始了从互联网找答案。

通过一番操作后，仍然得不到任何有用的信息。

四、问题重新分析、猜测

互联网找不到答案，从问题根源入手。

由我目前的前置知识得知：

1
2

Force Window to Always Be in Focus
// window必然会有一个窗口焦点

但从我的现象来看，失焦的时刻并没有其他页面弹出，所以猜测焦点可能被后台程序获取了？传说中的"焦点窃取"?

经过重新分析后，我确定下一步方向：找到窃取焦点的进程。

去Web查询窗口焦点的资料，发现了一个软件ViewWizard,不仅可以捕捉到窗口的句柄，还能捕捉到窗口的pid。

但是使用起来没有那么理想：失去焦点时并没有捕捉到。

所以我找到了一篇博客：用C#实现的window api 获取 当前焦点窗口的信息，根据博客提供的思路和window API ，写出获取窗口句柄的代码。

https://www.cnblogs.com/mq0036/p/12575627.html

代码完成后，执行程序，尝试复现问题。果不其然，窗口被一个叫TscShellContainerClass的窗口捕捉了。

再用回软件ViewWizard根据句柄查询PID。

知道了PID后，再通过命令查询线程的信息：

1

taskList|findstr XXXX

?这不是远程桌面的应用程序吗？他捕捉我焦点干嘛捏？

五、问题怎么产生、根源

• 通过process Manage，定位问题发生瞬间的调用信息

  从mstu.exe的调用树已经几乎可以确认是WSL的锅了。

自己平时也不会去用远程桌面，这个功能也是我前段时间为了能使用WSLg才打开的。

并且问题发生的时刻，我没有主动去开启远程桌面程序，不过我WSLg默认是启动的，还是不明白问题的原因。

于是在确定了导致问题发生的mstsc,开始SFW。

六、问题追溯

线索一：mstsc.exe

mstsc.exe stealing focus(mstsc.exe窃取了焦点)

1

https://answers.microsoft.com/en-us/windows/forum/all/mstscexe-stealing-focus/f9acb6fd-3c95-4e22-8f40-dc41dffbb178

帖子最终结果为官方也不知道。。当事人自己删除了wslg才临时解决问题。。

不过通过这一线索，基本可以确认问题出现在window 和 SubSystem linux 之间

线索二：Windows Subsystem for Linux GUI和mstsc.exe之间的联系

通过搜索得知，微软在WSLg System Distro里加了远程桌面服务套件——FreeRDP，一个支持Windows远程桌面协议（RDP）的服务端.

整个WSLg System Distro、Windows远程桌面客户端（mstsc.exe）的窗口都是对用户隐藏的，猜测是用户开启WSL或者敲完Linux GUI程序名的时候，这些隐藏的组件就已经在后台运行了。具体来说就是上图的WSLGd，微软解释说一个类似守护进程的程序，负责启动Weston、建立RDP通信等工作，如果它们挂了的话还要负责重启它们。

线索三、问题在于window通过RDP向WSL通信时

通过这一线索和开源的信息得知，当一些内容到shot（剪切板）时，负责RDP的线程发生崩溃。

最后发现了这个问题的issue：

官方解释和结论

由于从 FreeRDP 线程到 wayland 显示循环线程的多线程切换而导致事件源为 NULL，导致崩溃。

• 提供了临时解决的方案—关闭WSLg :)

「雪糕刺客」现象剖析

笔者认为，根据艾媒咨询发布的《2022年中国雪糕行业发展现状与消费趋势调查分析报告》显示，2021年中国雪糕市场规模达到1600亿元，预计2024年将超过2000亿元。随着市场规模的不断扩大，雪糕产品的种类日益丰富，价格区间也逐渐拉大。一些高端雪糕品牌通过独特的口味、精美的包装和品牌营销，将产品价格提升到了一个新的高度。

以某知名高端雪糕品牌为例，其部分产品售价高达几十元一支。这些高价雪糕通常定位为中高端消费群体，强调产品的品质、口感和文化内涵。然而，在一些便利店和超市中，这些高价雪糕与普通平价雪糕混放在一起，没有明确的价格标识，导致消费者在结账时才发现价格超出预期，从而产生了「被刺」的感觉。

「消费降级」背景下的思考

笔者认为，与此同时，「消费降级」也成为了当下社会的一个热门话题。所谓「消费降级」，并非指消费者降低消费标准，而是更加注重性价比，追求理性消费。在经济环境不稳定、生活成本上升的背景下，消费者对于价格的敏感度逐渐提高，更加倾向于购买物美价廉的商品。

根据国家统计局发布的数据显示，2022年上半年，全国居民人均消费支出11756元，比上年同期名义增长2.5%，扣除价格因素影响，实际增长0.8%。虽然消费支出仍在增长，但增速有所放缓。这一数据反映出消费者在消费决策时更加谨慎，对于非必要消费的支出有所减少。

「雪糕刺客」现象与「消费降级」之间存在着一定的关联。一方面，高价雪糕的出现满足了部分消费者对于品质和个性化的需求，是消费升级的一种表现；另一方面，在「消费降级」的大背景下，消费者对于高价商品的接受度逐渐降低，更加注重产品的性价比。因此，笔者认为雪糕企业需要在产品定位和价格策略上进行调整，以适应市场的变化。

结语

「雪糕刺客」和「消费降级」是当下消费市场中两个值得关注的现象。笔者认为，它们反映了消费者需求的变化和市场环境的复杂性。对于消费者来说，在购买商品时应更加理性，关注产品的价格和品质；对于企业来说，也应根据市场需求调整产品策略，提供更加符合消费者需求的产品。只有这样，才能实现消费者和企业的双赢。

背包问题（Knapsack problem）是一类经典的组合优化的NP完全（NP-Complete, NPC）问题。该问题可描述为：给定一组物品，每个物品有各自的重量和价值，在背包总重量限制下，如何选择物品以使背包内物品的总价值最大。由于NPC问题不存在多项式时间复杂度的解法，不过借助动态规划，我们能够以伪多项式时间复杂度求解背包问题。

背包问题主要有以下几种类型：

1. 01背包问题
2. 完全背包问题
3. 多重背包问题

一、01背包问题

1.1 问题描述

一共有 $N$ 件物品，第 $i$（$i$ 从1开始）件物品的重量为 $w[i]$，价值为 $v[i]$。在背包总重量不超过承载上限 $W$ 的情况下，求能够装入背包的物品的最大价值。

1.2 动态规划解法

1.2.1 定义状态数组

根据问题描述，我们定义二维状态数组 $dp[i][j]$，其中 $i$ 表示前 $i$ 件物品，$j$ 表示背包的当前承重。$dp[i][j]$ 表示在前 $i$ 件物品中选择，背包承重为 $j$ 时所能获得的最大价值。

1

dp[i][j]

1.2.2 状态转移方程

首先，将 $dp[0][0 dots W]$ 初始化为0，意味着将前0个物品（即没有物品）装入背包时，最大价值为0。当 $i > 0$ 时，$dp[i][j]$ 有以下两种情况：

1. 不装入第 $i$ 件物品：此时最大价值与只考虑前 $i - 1$ 件物品时相同，即 $dp[i - 1][j]$。
2. 装入第 $i$ 件物品（前提是 $j geq w[i]$）：装入第 $i$ 件物品后，背包的最大价值为装入前 $i - 1$ 件物品且背包承重为 $j - w[i]$ 时的最大价值加上第 $i$ 件物品的价值，即 $dp[i - 1][j - w[i]] + v[i]$。

因此，状态转移方程为：

1

dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - w[i]] + v[i]) // j >= w[i]

1.2.3 空间优化

由状态转移方程可知，$dp[i][j]$ 的值仅与 $dp[i - 1][0 dots j - 1]$ 有关。因此，我们可以使用滚动数组的方法对空间进行优化，将二维数组 $dp$ 优化为一维数组。需要注意的是，为了避免上一层循环的 $dp[0 dots j - 1]$ 被覆盖，$j$ 必须逆向枚举。优化后的伪代码如下：

1
2
3
4
5

// 01背包问题伪代码(空间优化版)
dp[0...W] = 0
for i = 1...N
    for j = W...w[i] // 必须逆向枚举!!!
        dp[j] = max(dp[j], dp[j - w[i]] + v[i])

此算法的时间复杂度为 $O(NW)$，空间复杂度为 $O(W)$。由于 $W$ 的值是其位数的幂，所以该时间复杂度为伪多项式时间。

二、完全背包问题

2.1 问题描述

完全背包问题（unbounded knapsack problem）与01背包问题的区别在于，每种物品的数量是无限的。即一共有 $N$ 种物品，每种物品有无限个，第 $i$（$i$ 从1开始）种物品的重量为 $w[i]$，价值为 $v[i]$。在总重量不超过背包承载上限 $W$ 的情况下，求能够装入背包的物品的最大价值。

2.2 动态规划解法

2.2.1 定义状态数组

与01背包问题类似，定义 $dp[i][j]$ 表示将前 $i$ 种物品装入限重为 $j$ 的背包中所能获得的最大价值，其中 $0 leq i leq N$，$0 leq j leq W$。

2.2.2 状态转移方程

初始状态同样将 $dp[0][0 dots W]$ 初始化为0。当 $i > 0$ 时，$dp[i][j]$ 有以下两种情况：

1. 不装入第 $i$ 种物品：即 $dp[i - 1][j]$，与01背包问题相同。
2. 装入第 $i$ 种物品：由于每种物品数量无限，装入第 $i$ 种物品后还可继续装入该种物品，因此状态应转移到 $dp[i][j - w[i]]$，即 $dp[i][j - w[i]] + v[i]$。

状态转移方程为：

1

dp[i][j] = max(dp[i - 1][j], dp[i][j - w[i]] + v[i]) // j >= w[i]

2.2.3 空间优化

与01背包问题不同，完全背包问题空间优化后 $j$ 必须正向枚举，因为状态转移方程中的第二项是 $dp[i]$ 而非 $dp[i - 1]$，需要覆盖之前的值。优化后的伪代码如下：

1
2
3
4
5

// 完全背包问题思路一伪代码(空间优化版)
dp[0...W] = 0
for i = 1...N
    for j = w[i]...W // 必须正向枚举!!!
        dp[j] = max(dp[j], dp[j - w[i]] + v[i])

该解法的时间复杂度为 $O(NW)$，空间复杂度为 $O(W)$。

2.3 另一种思路

除上述思路外，完全背包问题还可从装入第 $i$ 种物品的数量出发。01背包问题中每种物品只能取0件或1件，而完全背包问题中可选取0件、1件、2件 $cdots$ 直到超过背包限重（$k > j / w[i]$）。状态转移方程为：

1
2

# k为装入第i种物品的件数, k <= j/w[i]
dp[i][j] = max{(dp[i - 1][j - k * w[i]] + k * v[i]) for every k}

空间优化后，由于状态转移方程中的max项为 $dp[i - 1]$，与01背包问题相同，$j$ 必须逆向枚举。优化后的伪代码如下：

1
2
3
4
5
6

// 完全背包问题思路二伪代码(空间优化版)
dp[0...W] = 0
for i = 1...N
    for j = W...w[i] // 必须逆向枚举!!!
        for k = [0, 1... j/w[i]]
            dp[j] = max(dp[j], dp[j - k * w[i]] + k * v[i])

此方法在计算 $dp[i][j]$ 时并非 $O(1)$ 时间复杂度，因此总的时间复杂度高于第一种思路，为 $O(NWW)$ 级别。

2.4 转化为01背包问题

由于01背包问题是最基本的背包问题，我们可以将完全背包问题转化为01背包问题求解。最简单的方法是将第 $i$ 种物品转化为 $W / w[i]$ 件费用和价值均不变的物品，然后求解01背包问题。更高效的转化方法是采用二进制思想，将第 $i$ 种物品拆分为重量为 $w_i imes 2^k$、价值为 $v_i imes 2^k$ 的若干件物品，其中 $k$ 取遍满足 $w_i imes 2^k leq W$ 的非负整数。这样可将转换后的物品数量降为对数级别。具体代码见后续模板部分。

三、多重背包问题

3.1 问题描述

多重背包问题（bounded knapsack problem）与前面问题的不同之处在于，每种物品的数量是有限的。即一共有 $N$ 种物品，第 $i$（$i$ 从1开始）种物品的数量为 $n[i]$，重量为 $w[i]$，价值为 $v[i]$。在总重量不超过背包承载上限 $W$ 的情况下，求能够装入背包的物品的最大价值。

3.2 动态规划解法

与完全背包问题的第二种思路类似，从装入第 $i$ 种物品的数量出发，可装入0件、1件 $cdots$ $n[i]$ 件（同时需满足不超过背包限重）。状态转移方程为：

1
2

# k为装入第i种物品的件数, k <= min(n[i], j/w[i])
dp[i][j] = max{(dp[i - 1][j - k * w[i]] + k * v[i]) for every k}

空间优化后，$j$ 同样必须逆向枚举。优化后的伪代码如下：

1
2
3
4
5
6

// 多重背包问题伪代码(空间优化版)
dp[0...W] = 0
for i = 1...N
    for j = W...w[i] // 必须逆向枚举!!!
        for k = [0, 1... min(n[i], j/w[i])]
            dp[j] = max(dp[j], dp[j - k * w[i]] + k * v[i])

总的时间复杂度约为 $O(NWoverline{n}) = O(Wsum_{i}n_i)$ 级别。

3.3 转化为01背包问题

采用与完全背包问题类似的思路，可将多重背包问题转化为01背包问题。利用二进制思想将第 $i$ 种物品拆分为 $O(log n_i)$ 件物品，将原问题转化为复杂度为 $O(Wsum_{i}log n_i)$ 的01背包问题，相较于第一种分析方法有较大改进。具体代码见后续模板部分。

3.4 代码模板

以下是这三种背包问题的解题模板，方便实际解题时使用，尤其注意其中的二进制优化实现。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

/*
https://tangshusen.me/2019/11/24/knapsack-problem/
01背包, 完全背包, 多重背包模板(二进制优化). 
2020.01.04 by tangshusen.

用法:
    对每个物品调用对应的函数即可, 例如多重背包:
    for(int i = 0; i < N; i++) 
        multiple_pack_step(dp, w[i], v[i], num[i], W);

参数:
    dp   : 空间优化后的一维dp数组, 即dp[i]表示最大承重为i的书包的结果
    w    : 这个物品的重量
    v    : 这个物品的价值
    n    : 这个物品的个数
    max_w: 书包的最大承重
*/
void zero_one_pack_step(vector<int>&dp, int w, int v, int max_w){
    for(int j = max_w; j >= w; j--) // 反向枚举!!!
        dp[j] = max(dp[j], dp[j - w] + v);
}

void complete_pack_step(vector<int>&dp, int w, int v, int max_w){
    for(int j = w; j <= max_w; j++) // 正向枚举!!!
        dp[j] = max(dp[j], dp[j - w] + v);

    // 法二: 转换成01背包, 二进制优化
    // int n = max_w / w, k = 1;
    // while(n > 0){
    //     zero_one_pack_step(dp, w*k, v*k, max_w);
    //     n -= k;
    //     k = k*2 > n ? n : k*2;
    // }
}

void multiple_pack_step(vector<int>&dp, int w, int v, int n, int max_w){
   if(n >= max_w / w) complete_pack_step(dp, w, v, max_w);
   else{ // 转换成01背包, 二进制优化
       int k = 1;
       while(n > 0){
           zero_one_pack_step(dp, w*k, v*k, max_w);
           n -= k;
           k = k*2 > n ? n : k*2;
       }
   }
}

四、背包问题的其他变种

4.1 恰好装满

在某些背包问题中，存在必须恰好装满背包的限制。此时，基本思路不变，但初始化时有所不同。若没有恰好装满的限制，可将 $dp$ 数组全部初始化为0，因为任何容量的背包都有一个合法解“什么都不装”，其价值为0。若有恰好装满的限制，则应将 $dp[0 dots N][0]$ 初始化为0，其余 $dp$ 值初始化为 $-infty$，因为只有容量为0的背包在不装任何物品时可被“恰好装满”，其他容量的背包初始时没有合法解。

4.2 求方案总数

除了求最大价值外，还有一类问题是求装满背包或将背包装至指定容量的方案总数。对于这类问题，只需将状态转移方程中的 max 操作改为 sum 操作，整体思路基本不变。例如，在完全背包问题中，转移方程变为：

1

dp[i][j] = sum(dp[i - 1][j], dp[i][j - w[i]]) // j >= w[i]

4.3 二维背包

前面讨论的背包问题的容量限制通常只有一个维度（如重量），而二维背包问题则有两个限制条件（如重量和体积）。选择物品时必须同时满足这两个条件。此类问题的解法与一维背包问题类似，只是 $dp$ 数组需要多开一维。例如，在5.4节的LeetCode题目中会有具体应用。

4.4 求最优方案

一般来说，背包问题主要求解最优值。若需要输出达到最优值的具体方案，可以参考动态规划问题输出方案的常规方法：记录每个状态的最优值是由哪种策略推导出来的，然后根据该策略回溯到上一个状态，依次向前推导。以01背包问题为例，我们可以使用另一个数组 $G[i][j]$ 来记录方案。设 $G[i][j] = 0$ 表示计算 $dp[i][j]$ 时采用了max操作中的前一项（即 $dp[i - 1][j]$），$G[i][j] = 1$ 表示采用了后一项。这分别代表了两种策略：未装入第 $i$ 个物品和装入了第 $i$ 个物品。实际上，我们也可以直接从已经计算好的 $dp[i][j]$ 反推方案：若 $dp[i][j] = dp[i - 1][j]$，则说明未选择第 $i$ 个物品，反之则说明选择了。

五、LeetCode相关题目

5.1 Partition Equal Subset Sum（分割等和子集）

416. Partition Equal Subset Sum（分割等和子集）

题目给定一个只包含正整数的非空数组，要求判断是否可以将该数组分割成两个子集，使得两个子集的元素和相等。由于所有元素的和 $sum$ 已知，若能分割，则两个子集的和都应为 $sum / 2$（因此 $sum$ 不能为奇数）。该问题可转化为从数组中选取一些元素，使其和恰好为 $sum / 2$。若将数组元素的值视为物品的重量，每件物品的价值均为1，则这是一个恰好装满的01背包问题。

我们定义空间优化后的状态数组 $dp$，由于是恰好装满，应将 $dp[0]$ 初始化为0，其余元素初始化为 $INT_MIN$，然后按照类似1.2节的伪代码更新 $dp$：

1
2
3
4
5
6

int capacity = sum / 2;
vector<int>dp(capacity + 1, INT_MIN);
dp[0] = 0;
for(int i = 1; i <= n; i++)
    for(int j = capacity; j >= nums[i - 1]; j--)
        dp[j] = max(dp[j], 1 + dp[j - nums[i - 1]]);

更新完成后，若 $dp[sum / 2] > 0$，则说明满足题意。

由于该题最终只需判断是否能进行划分，因此 $dp$ 数组的每个元素可定义为 bool 类型，将 $dp[0]$ 初始化为 true，其余元素初始化为 false，转移方程使用或操作。完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

bool canPartition(vector<int>& nums) {
    int sum = 0, n = nums.size();
    for(int &num: nums) sum += num;
    if(sum % 2) return false;
    
    int capacity = sum / 2;
    vector<bool>dp(capacity + 1, false);
    dp[0] = true;
    for(int i = 1; i <= n; i++)
        for(int j = capacity; j >= nums[i - 1]; j--)
            dp[j] = dp[j] || dp[j - nums[i - 1]];
        
    return dp[capacity];
}

此外，该题还有一种更巧妙、更快的解法，基本思路是使用 bitset 记录所有可能子集的和，详见[我的Github](https://github.com/ShusenTang/LeetCode/blob/master/solutions/416. Partition Equal Subset Sum.md)。

5.2 Coin Change（零钱兑换）

322. Coin Change

题目给定一个目标金额 $amount$ 和一些硬币面值，假设每种面值的硬币数量无限，求最少需要多少个硬币才能组成目标金额。若将硬币面值视为物品重量，每个硬币的价值均为1，则该问题是一个恰好装满的完全背包问题。不过，这里求的是最少硬币数量，只需将2.2节的状态转移方程中的 max 操作改为 min 操作。由于是恰好装满，除 $dp[0]$ 外，其余元素应初始化为 $INT_MAX$。完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

int coinChange(vector<int>& coins, int amount) {
    vector<int>dp(amount + 1, INT_MAX);
    dp[0] = 0;
    
    for(int i = 1; i <= coins.size(); i++)
        for(int j = coins[i - 1]; j <= amount; j++){
            // 下行代码会在 1+INT_MAX 时溢出
            // dp[j] = min(dp[j], 1 + dp[j - coins[i - 1]]); 
            if(dp[j] - 1 > dp[j - coins[i - 1]])
                dp[j] = 1 + dp[j - coins[i - 1]];   
        }
    return dp[amount] == INT_MAX ? -1 : dp[amount];   
}

注意，1 + dp[j - coins[i - 1]] 可能会导致溢出，因此代码中采用了另一种写法。

此外，该题还可以通过搜索所有可能的组合并维护一个全局结果 $res$ 来求解，但直接搜索会超时，需要进行精心剪枝，剪枝后可击败99%的提交。详见[我的Github](https://github.com/ShusenTang/LeetCode/blob/master/solutions/322. Coin Change.md)。

5.3 Target Sum（目标和）

494. Target Sum

题目给定一个非负整数数组和一个目标值，要求给数组中的每个数字前添加正号或负号，使得组成的表达式结果等于目标值 $S$，求满足条件的组合数量。

假设所有元素的和为 $sum$，添加正号的元素和为 $A$，添加负号的元素和为 $B$，则有 $sum = A + B$ 且 $S = A - B$，解方程可得 $A = (sum + S) / 2$。因此，问题转化为从数组中选取一些元素，使其和恰好为 $(sum + S) / 2$，这是一个恰好装满的01背包问题，要求计算所有方案数。将1.2节状态转移方程中的 max 操作改为求和操作即可。需要注意的是，由于求的是方案数，$dp$ 数组应全部初始化为0，仅 $dp[0]$ 初始化为1。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

int findTargetSumWays(vector<int>& nums, int S) {
    int sum = 0;
    // for(int &num: nums) sum += num;
    sum = accumulate(nums.begin(), nums.end(), 0);
    if(S > sum || sum < -S) return 0; // 肯定不行
    if((S + sum) & 1) return 0; // 奇数
    int target = (S + sum) >> 1;
    
    vector<int>dp(target + 1, 0);
    
    dp[0] = 1;
    for(int i = 1; i <= nums.size(); i++)
        for(int j = target; j >= nums[i - 1]; j--)
            dp[j] = dp[j] + dp[j - nums[i - 1]];
    
    return dp[target];
}

5.4 Ones and Zeros（一和零）

474. Ones and Zeroes

题目给定一个仅包含0和1的字符串数组，要求从数组中选取尽可能多的字符串，使得这些字符串中包含的0和1的数量分别不超过 $m$ 和 $n$。

我们将每个字符串视为一个物品，字符串中0和1的数量分别视为两种“重量”，则该问题转化为一个二维01背包问题，背包的两个限重分别为 $m$ 和 $n$，要求背包能装下的物品的最大数量（可将每个物品的价值视为1）。

我们可以提前计算每个字符串的两个“重量” $w_0$ 和 $w_1$ 并存储在数组中，不过由于每个字符串的这两个值仅使用一次，因此可以在需要时直接计算。完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

int findMaxForm(vector<string>& strs, int m, int n) {
    int num = strs.size();
    int w0, w1;
    
    vector<vector<int>>dp(m + 1, vector<int>(n + 1, 0));
    
    for(int i = 1; i <= num; i++){
        w0 = 0; w1 = 0;
        // 计算第i - 1个字符串的两个重量
        for(char &c: strs[i - 1]){
            if(c == '0') w0 += 1;
            else w1 += 1;
        }
        
        // 01背包, 逆向迭代更新dp
        for(int j = m; j >= w0; j--)
            for(int k = n; k >= w1; k--)
                dp[j][k] = max(dp[j][k], 1 + dp[j - w0][k - w1]);
    }
    
    return dp[m][n];
}

复杂度分析概述

在评估排序算法时，主要关注以下几个指标：

• 时间复杂度：描述算法执行所需的时间随数据规模增长的变化趋势，通常用大O表示法。
• 空间复杂度：指算法执行过程中所需的额外存储空间。
• 稳定性：如果排序前后相等元素的相对顺序不变，则称该算法是稳定的。

冒泡排序（Bubble Sort）

算法原理

冒泡排序是一种简单直观的排序算法，它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。

适用场景

数据量较小且基本有序的情况。

代码实现

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
28
29
30
31

#include <iostream>
using namespace std;

// 冒泡排序函数
void bubbleSort(int arr[], int len) {
    for (int i = 0; i < len - 1; ++i) {
        bool swapped = false;
        for (int j = 0; j < len - i - 1; ++j) {
            if (arr[j] > arr[j + 1]) {
                // 交换相邻元素
                int temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
                swapped = true;
            }
        }
        // 如果没有发生交换，说明数组已经有序，提前退出
        if (!swapped) break;
    }
}

int main() {
    int arr[] = {6, 1, 5, 2, 4, 3};
    int len = sizeof(arr) / sizeof(arr[0]);
    bubbleSort(arr, len);
    for (int i = 0; i < len; ++i) {
        cout << arr[i] << " ";
    }
    cout << endl;
    return 0;
}

复杂度分析

• 时间复杂度：平均和最坏情况下为 $O(n^2)$，最好情况下（数组已经有序）为 $O(n)$。
• 空间复杂度：$O(1)$，只需要常数级的额外空间。
• 稳定性：稳定，因为只有在相邻元素逆序时才交换，相等元素不会交换位置。

选择排序（Selection Sort）

算法原理

选择排序是一种简单直观的排序算法。它首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。

适用场景

数据量较小的情况，对稳定性要求不高。

代码实现

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
28
29
30
31

#include <iostream>
using namespace std;

// 选择排序函数
void selectionSort(int arr[], int len) {
    for (int i = 0; i < len - 1; ++i) {
        int minIndex = i;
        for (int j = i + 1; j < len; ++j) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        if (minIndex != i) {
            // 交换元素
            int temp = arr[i];
            arr[i] = arr[minIndex];
            arr[minIndex] = temp;
        }
    }
}

int main() {
    int arr[] = {6, 1, 5, 2, 4, 3};
    int len = sizeof(arr) / sizeof(arr[0]);
    selectionSort(arr, len);
    for (int i = 0; i < len; ++i) {
        cout << arr[i] << " ";
    }
    cout << endl;
    return 0;
}

复杂度分析

• 时间复杂度：无论最好、最坏还是平均情况，时间复杂度均为 $O(n^2)$。
• 空间复杂度：$O(1)$，只需要常数级的额外空间。
• 稳定性：不稳定，例如 [5, 8, 5, 2] 排序后第一个 5 会和 2 交换位置，导致两个 5 的相对顺序改变。

插入排序（Insertion Sort）

算法原理

插入排序是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。

适用场景

数据量较小且基本有序的情况。

代码实现

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

#include <iostream>
using namespace std;

// 插入排序函数
void insertionSort(int arr[], int len) {
    for (int i = 1; i < len; ++i) {
        int temp = arr[i];
        int j = i - 1;
        // 从后向前扫描，找到合适的插入位置
        while (j >= 0 && arr[j] > temp) {
            arr[j + 1] = arr[j];
            j--;
        }
        arr[j + 1] = temp;
    }
}

int main() {
    int arr[] = {6, 1, 5, 2, 4, 3};
    int len = sizeof(arr) / sizeof(arr[0]);
    insertionSort(arr, len);
    for (int i = 0; i < len; ++i) {
        cout << arr[i] << " ";
    }
    cout << endl;
    return 0;
}

复杂度分析

• 时间复杂度：平均和最坏情况下为 $O(n^2)$，最好情况下（数组已经有序）为 $O(n)$。
• 空间复杂度：$O(1)$，只需要常数级的额外空间。
• 稳定性：稳定，因为插入时遇到相等元素不会交换位置。

希尔排序（Shell Sort）

算法原理

希尔排序是插入排序的一种更高效的改进版本。它的基本思想是将待排序的序列分割成若干个子序列，分别对这些子序列进行插入排序，随着增量逐渐减小，子序列的长度逐渐增加，整个序列变得越来越接近有序，最后对整个序列进行一次插入排序。

适用场景

数据量较大且基本无序的情况。

代码实现

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
28
29

#include <iostream>
using namespace std;

// 希尔排序函数
void shellSort(int arr[], int len) {
    for (int gap = len / 2; gap > 0; gap /= 2) {
        for (int i = gap; i < len; ++i) {
            int temp = arr[i];
            int j = i;
            // 对每个子序列进行插入排序
            while (j >= gap && arr[j - gap] > temp) {
                arr[j] = arr[j - gap];
                j -= gap;
            }
            arr[j] = temp;
        }
    }
}

int main() {
    int arr[] = {6, 1, 5, 2, 4, 3};
    int len = sizeof(arr) / sizeof(arr[0]);
    shellSort(arr, len);
    for (int i = 0; i < len; ++i) {
        cout << arr[i] << " ";
    }
    cout << endl;
    return 0;
}

复杂度分析

• 时间复杂度：希尔排序的时间复杂度与增量序列的选择有关，平均情况下约为 $O(n^{1.3})$，最坏情况下为 $O(n^2)$。
• 空间复杂度：$O(1)$，只需要常数级的额外空间。
• 稳定性：不稳定，因为不同子序列的插入操作可能会改变相等元素的相对顺序。

归并排序（Merge Sort）

算法原理

归并排序是采用分治法（Divide and Conquer）的一个非常典型的应用。它的基本思想是将一个序列分成两个子序列，分别对这两个子序列进行排序，然后将排好序的子序列合并成一个最终的有序序列。

适用场景

数据量较大且对稳定性有要求的情况。

代码实现

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

#include <iostream>
using namespace std;

// 合并两个有序子数组
void merge(int arr[], int left, int mid, int right) {
    int n1 = mid - left + 1;
    int n2 = right - mid;
    int L[n1], R[n2];
    // 复制数据到临时数组
    for (int i = 0; i < n1; ++i) L[i] = arr[left + i];
    for (int j = 0; j < n2; ++j) R[j] = arr[mid + 1 + j];
    int i = 0, j = 0, k = left;
    // 合并临时数组到原数组
    while (i < n1 && j < n2) {
        if (L[i] <= R[j]) {
            arr[k] = L[i];
            i++;
        } else {
            arr[k] = R[j];
            j++;
        }
        k++;
    }
    // 复制剩余元素
    while (i < n1) {
        arr[k] = L[i];
        i++;
        k++;
    }
    while (j < n2) {
        arr[k] = R[j];
        j++;
        k++;
    }
}

// 归并排序函数
void mergeSort(int arr[], int left, int right) {
    if (left < right) {
        int mid = left + (right - left) / 2;
        // 递归排序左右子数组
        mergeSort(arr, left, mid);
        mergeSort(arr, mid + 1, right);
        // 合并排好序的子数组
        merge(arr, left, mid, right);
    }
}

int main() {
    int arr[] = {6, 1, 5, 2, 4, 3};
    int len = sizeof(arr) / sizeof(arr[0]);
    mergeSort(arr, 0, len - 1);
    for (int i = 0; i < len; ++i) {
        cout << arr[i] << " ";
    }
    cout << endl;
    return 0;
}

复杂度分析

• 时间复杂度：无论最好、最坏还是平均情况，时间复杂度均为 $O(n log n)$。
• 空间复杂度：$O(n)$，主要用于合并操作时的临时数组。
• 稳定性：稳定，在合并过程中，相等元素会保持原有的相对顺序。

快速排序（Quick Sort）

算法原理

快速排序也是采用分治法的一种排序算法。它的基本思想是通过选择一个基准元素，将序列分为两部分，使得左边部分的所有元素都小于等于基准元素，右边部分的所有元素都大于基准元素，然后分别对左右两部分进行递归排序。

适用场景

数据量较大且基本无序的情况。

代码实现

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#include <iostream>
using namespace std;

// 分区函数
int partition(int arr[], int left, int right) {
    int pivot = arr[right];
    int i = left - 1;
    for (int j = left; j < right; ++j) {
        if (arr[j] < pivot) {
            i++;
            // 交换元素
            int temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
    }
    // 将基准元素放到正确的位置
    int temp = arr[i + 1];
    arr[i + 1] = arr[right];
    arr[right] = temp;
    return i + 1;
}

// 快速排序函数
void quickSort(int arr[], int left, int right) {
    if (left < right) {
        int pivotIndex = partition(arr, left, right);
        // 递归排序左右子数组
        quickSort(arr, left, pivotIndex - 1);
        quickSort(arr, pivotIndex + 1, right);
    }
}

int main() {
    int arr[] = {6, 1, 5, 2, 4, 3};
    int len = sizeof(arr) / sizeof(arr[0]);
    quickSort(arr, 0, len - 1);
    for (int i = 0; i < len; ++i) {
        cout << arr[i] << " ";
    }
    cout << endl;
    return 0;
}

复杂度分析

• 时间复杂度：平均和最好情况下为 $O(n log n)$，最坏情况下（例如数组已经有序）为 $O(n^2)$。
• 空间复杂度：平均情况下为 $O(log n)$，主要是递归调用栈的深度，最坏情况下为 $O(n)$。
• 稳定性：不稳定，在分区过程中可能会改变相等元素的相对顺序。

堆排序（Heap Sort）

算法原理

堆排序是利用堆这种数据结构所设计的一种排序算法。堆是一个近似完全二叉树的结构，并同时满足堆积的性质：即子节点的键值或索引总是小于（或者大于）它的父节点。堆排序的基本思想是先将数组构建成一个最大堆（升序排序）或最小堆（降序排序），然后将堆顶元素与最后一个元素交换，再对剩余元素重新调整为堆，重复这个过程直到整个数组有序。

适用场景

数据量较大且对空间复杂度有要求的情况。

代码实现

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

#include <iostream>
using namespace std;

// 调整堆
void heapify(int arr[], int n, int i) {
    int largest = i;
    int left = 2 * i + 1;
    int right = 2 * i + 2;
    // 找出左右子节点和根节点中的最大值
    if (left < n && arr[left] > arr[largest]) {
        largest = left;
    }
    if (right < n && arr[right] > arr[largest]) {
        largest = right;
    }
    if (largest != i) {
        // 交换元素
        int temp = arr[i];
        arr[i] = arr[largest];
        arr[largest] = temp;
        // 递归调整子树
        heapify(arr, n, largest);
    }
}

// 堆排序函数
void heapSort(int arr[], int n) {
    // 构建最大堆
    for (int i = n / 2 - 1; i >= 0; --i) {
        heapify(arr, n, i);
    }
    // 依次取出堆顶元素并调整堆
    for (int i = n - 1; i > 0; --i) {
        // 交换堆顶元素和最后一个元素
        int temp = arr[0];
        arr[0] = arr[i];
        arr[i] = temp;
        // 调整剩余元素为堆
        heapify(arr, i, 0);
    }
}

int main() {
    int arr[] = {6, 1, 5, 2, 4, 3};
    int len = sizeof(arr) / sizeof(arr[0]);
    heapSort(arr, len);
    for (int i = 0; i < len; ++i) {
        cout << arr[i] << " ";
    }
    cout << endl;
    return 0;
}

复杂度分析

• 时间复杂度：无论最好、最坏还是平均情况，时间复杂度均为 $O(n log n)$。
• 空间复杂度：$O(1)$，只需要常数级的额外空间。
• 稳定性：不稳定，在堆调整过程中可能会改变相等元素的相对顺序。

总结

不同的排序算法在不同的场景下有各自的优势。在实际应用中，需要根据数据规模、数据初始状态和对稳定性的要求等因素来选择合适的排序算法。以下是一些选择建议：

• 当数据量较小时，冒泡排序、选择排序和插入排序都是不错的选择，其中插入排序在数据基本有序时性能较好。
• 当数据量较大且基本无序时，希尔排序、快速排序和堆排序的性能相对较好。
• 当对稳定性有要求时，归并排序是一个合适的选择。

希望本文能帮助你深入理解各种排序算法的原理和应用场景，在实际编程中做出更合适的选择。

一、算法描述

贪心算法是一种在每一步选择中都采取在当前状态下最好或最优（即最有利）的选择，从而希望导致结果是全局最好或最优的算法。它并不从整体最优上加以考虑，所做出的仅是在某种意义上的局部最优解。

贪心算法没有固定的算法框架，算法设计的关键是贪心策略的选择。必须注意的是，贪心算法不是对所有问题都能得到整体最优解，选择的贪心策略必须具备无后效性，即某个状态以前的过程不会影响以后的状态，只与当前状态有关。

二、理论基础

贪心算法的理论基础主要基于贪心选择性质和最优子结构性质。

1. 贪心选择性质

贪心选择性质是指所求问题的整体最优解可以通过一系列局部最优的选择，即贪心选择来达到。这是贪心算法可行的第一个基本要素，也是贪心算法与动态规划算法的主要区别。在动态规划算法中，每步所做的选择往往依赖于相关子问题的解，因而只有在解出相关子问题后，才能做出选择。而在贪心算法中，仅在当前状态下做出最好选择，即局部最优选择，然后再去解做出这个选择后产生的相应的子问题。

2. 最优子结构性质

当一个问题的最优解包含其子问题的最优解时，称此问题具有最优子结构性质。问题的最优子结构性质是该问题可用动态规划算法或贪心算法求解的关键特征。

三、优势

1. 算法简单高效：贪心算法的实现通常比较简单，代码量少，执行效率高。由于它不需要像动态规划那样保存大量的中间状态，因此空间复杂度较低。
2. 时间复杂度低：在很多情况下，贪心算法可以在多项式时间内解决问题，时间复杂度通常为 $O(n)$ 或 $O(nlogn)$，其中 $n$ 是问题的规模。
3. 容易理解和应用：贪心策略直观易懂，容易被理解和应用到实际问题中。

四、Python代码实现

1. 一般贪心算法框架示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 贪心算法一般框架
def greedy_algorithm(problem_instance):
    solution = []  # 初始化解决方案
    candidates = get_candidates(problem_instance)  # 获取候选集
    while candidates and not is_solution_complete(solution):
        best_candidate = select_best_candidate(candidates)
        if is_safe(best_candidate, solution):
            solution.append(best_candidate)
        candidates.remove(best_candidate)
    return solution

# 以下函数需要根据具体问题实现
def get_candidates(problem_instance):
    pass

def select_best_candidate(candidates):
    pass

def is_safe(candidate, solution):
    pass

def is_solution_complete(solution):
    pass

2. 具体实例实现

田忌赛马

田忌赛马是一个经典的贪心算法应用场景。齐王和田忌各有 $n$ 匹马，每匹马有一个速度值，速度快的马会战胜速度慢的马。田忌可以通过合理安排马的出场顺序来尽可能多地赢得比赛。

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
28
29
30

def tianji_horse_race(qi_horses, tian_horses):
    qi_horses.sort()
    tian_horses.sort()
    qi_left, qi_right = 0, len(qi_horses) - 1
    tian_left, tian_right = 0, len(tian_horses) - 1
    win_count = 0
    while qi_left <= qi_right:
        if tian_horses[tian_right] > qi_horses[qi_right]:
            # 田忌最快的马比齐王最快的马快，用田忌最快的马对战齐王最快的马
            tian_right -= 1
            qi_right -= 1
            win_count += 1
        elif tian_horses[tian_left] > qi_horses[qi_left]:
            # 田忌最慢的马比齐王最慢的马快，用田忌最慢的马对战齐王最慢的马
            tian_left += 1
            qi_left += 1
            win_count += 1
        else:
            # 其他情况，用田忌最慢的马对战齐王最快的马
            if tian_horses[tian_left] < qi_horses[qi_right]:
                win_count -= 1
            tian_left += 1
            qi_right -= 1
    return win_count

# 示例
qi_horses = [3, 4, 5]
tian_horses = [2, 3, 4]
result = tianji_horse_race(qi_horses, tian_horses)
print(f"田忌赢得的比赛场数: {result}")

优势洗牌

给定两个长度相等的整数数组 A 和 B，A 相对于 B 的优势可以通过重新排列 A 中的元素，使得 A 中比 B 中对应位置元素大的个数最多。

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

from collections import deque

def advantage_count(A, B):
    A.sort()
    sorted_B = sorted(enumerate(B), key=lambda x: x[1])
    result = [-1] * len(A)
    remaining = deque()
    j = 0
    for num in A:
        if num > sorted_B[j][1]:
            index = sorted_B[j][0]
            result[index] = num
            j += 1
        else:
            remaining.append(num)
    
    for i in range(len(result)):
        if result[i] == -1:
            result[i] = remaining.popleft()
    return result

# 示例
A = [2, 7, 11, 15]
B = [1, 10, 4, 11]
result = advantage_count(A, B)
print(f"优势洗牌后的数组 A: {result}")

五、总结

贪心算法是一种简单而高效的算法策略，在满足贪心选择性质和最优子结构性质的问题中能够发挥很好的作用。通过合理选择贪心策略，可以在多项式时间内得到问题的近似最优解或全局最优解。但需要注意的是，不是所有问题都适合使用贪心算法，在使用时需要仔细分析问题的特性。在实际应用中，如资源分配、任务调度、图论等领域，贪心算法都有广泛的应用。