l1n6yun's Blog

最近使用cmd比较多，就想在某个文件夹下右键打开cmd，这样不用每次都在默认情况下切换目录。无奈win10 1703版本下shift+右键不能打开cmd，只能打开powershell。

在我们写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示，接下来在文章中将为大家详细介绍几种清除浮动的方法，具有一定的参考价值，希望对大家有所帮助。

浮动导致的后果

1. 由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置
3. 如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

清除浮动的方法

1. 使用 clear:both 清除浮动

在代码中在放一个空的div标签，然后给这个标签设置 clear:both 来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

1

<div style="clear: both"></div>

2. 利用伪元素 clearfix 来清除浮动

给父级元素添加了一个 :after 伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

1
2
3
4
5
6

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
}

3. overflow 方法的使用

当给父元素设置了 overflow 样式，不管是 overflow:hidden 或 overflow:auto 都可以清除浮动只要它的值不为 visible 就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

1
2
3

.clearfix{
    overflow: auto
}

4. 双伪元素方法的使用

通过给父元素设置双伪元素来达到清除浮动的效果

1
2
3
4
5

.clearfix:before,.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

总结：以上就是本篇文章的全部内容了，希望通过这篇文章能够让大家对清除浮动的方法有所了解

编写一致、灵活和可持续的 HTML 和 CSS 代码的规范。

生命在于折腾，又把博客折腾到Hexo了。给Hexo点赞。

使用layer时候 想在弹出层 在打开的时候默认就是最大值

引言：走进 Crypto.js 的加密世界

在当今数字化时代，数据安全至关重要。无论是个人隐私信息，还是企业的商业机密，都面临着被窃取或篡改的风险。在前端开发中，保护数据在传输和存储过程中的安全是我们不可忽视的任务。而 Crypto.js，正是一款强大的 JavaScript 加密库，它为前端开发者提供了丰富的加密算法和工具，帮助我们轻松实现数据的加密和解密，在客户端层面为数据安全筑起一道坚实的防线。接下来，就让我们一起深入探索 Crypto.js 的使用方法。

Crypto.js 初相识

Crypto.js 是一个用纯 JavaScript 编写的加密库，它提供了一系列丰富的加密算法和工具，涵盖了哈希算法（如 MD5、SHA-1、SHA-256 等）、对称加密算法（如 AES、DES ）、非对称加密算法（如 RSA ）以及消息认证码（HMAC ）等。这些算法在前端开发中有着广泛的应用，比如当用户在网页上输入密码时，在将密码发送到服务器之前，可以使用 Crypto.js 进行加密，确保密码在传输过程中的安全性；又或者在前端对一些敏感的用户信息进行加密存储，防止数据被窃取。 它就像是一个加密工具箱，开发者可以根据不同的安全需求，从这个工具箱中选择合适的工具来保障数据的安全。 而且，由于它是纯 JavaScript 实现，所以既可以在浏览器环境中使用，也能在 Node.js 服务器端运行，具备出色的跨平台性。

快速上手 Crypto.js

（一）安装与引入

在开始使用 Crypto.js 之前，我们需要先将其安装到项目中，并引入到我们的代码文件里。如果是在 Node.js 项目中，我们可以借助 npm（Node 包管理器）来完成安装。首先，确保你已经安装了 Node.js 和 npm，打开终端，进入你的项目目录，然后执行以下命令：

1

npm install crypto-js

安装完成后，在需要使用 Crypto.js 的 JavaScript 文件中，使用require语句引入：

1

const CryptoJS = require('crypto-js');

如果你使用的是 ES6 的模块系统，也可以这样引入：

1

import CryptoJS from 'crypto-js';

对于在 HTML 页面中直接使用的情况，有多种引入方式。可以通过 CDN 链接来引入，比如：

1

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>

这样在页面的 JavaScript 代码中就可以直接使用CryptoJS对象了。你还可以从 Crypto.js 的 GitHub 仓库下载源码，将下载的crypto-js.js文件放置在你的项目文件夹中，例如my-project/libs/crypto-js/，然后在 HTML 文件中这样引入：

1

<script src="libs/crypto-js/crypto-js.js"></script>

（二）基本加密示例

下面我们通过一个简单的字符串加密示例，来初步感受一下 Crypto.js 的使用。这里我们使用 AES（高级加密标准）对称加密算法，它是一种被广泛应用的加密算法，具有较高的安全性和效率。假设我们有一个需要加密的字符串message和一个密钥secretKey ，代码如下：

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

// 引入CryptoJS库
const CryptoJS = require('crypto-js');
// 待加密的字符串
const message = 'Hello, Crypto.js!';
// 加密密钥，实际应用中请妥善保管
const secretKey ='mySecretKey12345';
// 使用AES算法进行加密
const encryptedMessage = CryptoJS.AES.encrypt(message, secretKey).toString();
console.log('加密后的密文:', encryptedMessage);
// 使用相同的密钥进行解密
const bytes = CryptoJS.AES.decrypt(encryptedMessage, secretKey);
const decryptedMessage = bytes.toString(CryptoJS.enc.Utf8);
console.log('解密后的明文:', decryptedMessage);

在上述代码中，我们首先引入了 Crypto.js 库。接着定义了要加密的字符串message和加密密钥secretKey 。然后使用CryptoJS.AES.encrypt方法对message进行加密，该方法接受两个参数，第一个是要加密的字符串，第二个是加密密钥，加密后的结果通过toString()方法转换为字符串形式进行存储或传输。在解密时，使用CryptoJS.AES.decrypt方法，传入加密后的密文和相同的密钥，解密后的结果是一个WordArray对象，再通过toString(CryptoJS.enc.Utf8)方法将其转换为 UTF - 8 编码的字符串，这样就得到了原始的明文。运行这段代码，你会在控制台看到加密后的密文和解密后的明文，明文与原始的message字符串一致，这表明我们成功地完成了一次加密和解密操作。

深入探究常用加密算法

在 Crypto.js 中，涵盖了多种类型的加密算法，每种算法都有其独特的特点和适用场景。下面我们将深入探究哈希算法和对称加密算法这两类常用算法在 Crypto.js 中的使用方法。

（一）哈希算法

哈希算法，也被称为散列算法或摘要算法，它能够将任意长度的数据转换为固定长度的哈希值。哈希值就像是数据的 “指纹”，具有唯一性和不可逆性，即从哈希值几乎无法反推出原始数据。不同的哈希算法在哈希值长度、安全性和计算效率等方面存在差异，适用于不同的应用场景。

1. MD5

MD5（Message - Digest Algorithm 5）是一种经典的哈希算法，生成 128 位（16 字节）的哈希值，通常以 32 位十六进制字符串的形式呈现。它具有计算速度极快的特点，在早期被广泛应用于文件校验和数字签名等场景 。例如，在文件传输过程中，发送方可以计算文件的 MD5 值并随文件一同发送，接收方在收到文件后重新计算文件的 MD5 值，若两者一致，则说明文件在传输过程中未被篡改。在一些低安全性要求的系统中，也会使用 MD5 对用户密码进行简单加密存储。然而，MD5 存在安全漏洞，研究人员已能够找到不同的输入产生相同的 MD5 哈希值，即存在碰撞现象，这使得它在安全性要求较高的场景中不再适用，如数字签名和加密证书等领域已逐渐弃用 MD5。

在 Crypto.js 中使用 MD5 进行加密非常简单，示例代码如下：

1
2
3
4
5
6

const CryptoJS = require('crypto-js');
// 待加密的字符串
const message = 'Hello, MD5!';
// 使用MD5算法进行加密
const hash = CryptoJS.MD5(message).toString();
console.log('MD5加密后的哈希值:', hash);

运行上述代码，控制台将输出类似5d41402abc4b2a76b9719d911017c592的 MD5 哈希值。这里CryptoJS.MD5(message)计算出message的 MD5 哈希值，它返回的是一个WordArray对象，通过toString()方法将其转换为十六进制字符串形式以便展示和存储。

2. SHA 系列

SHA（Secure Hash Algorithm）系列是美国国家安全局（NSA）设计的一组加密哈希函数，在数据完整性和身份验证方面发挥着至关重要的作用。SHA 系列包括 SHA - 1、SHA - 224、SHA - 256、SHA - 384、SHA - 512 等多个版本 ，不同版本生成的哈希值长度不同，安全性和计算复杂度也有所差异。

SHA - 1：生成 160 位（20 字节）的哈希值 。它曾经在数字签名、证书等领域广泛应用，计算速度较快，适用于低性能设备。但由于存在碰撞漏洞，攻击者能够找到两个不同的输入产生相同的哈希值，因此已被认为不再安全，近年来在密码学上逐渐被淘汰，特别是在 TLS、SSL 和加密证书中，已逐步被更安全的哈希算法所取代。

SHA - 256：属于 SHA - 2 家族，生成 256 位（32 字节）的哈希值，是目前最常用的哈希算法之一。它具有高安全性，抗碰撞能力强，计算复杂度较高，已被广泛应用和审计，不易被破解。在区块链领域，比特币等数字货币就使用 SHA - 256 算法来生成交易数据的加密哈希，从而创建安全且不可更改的交易记录，确保区块链系统的可信度；在数字签名、文件完整性校验等场景中也有广泛应用，例如在软件下载网站，会提供软件文件的 SHA - 256 哈希值，用户下载后可以通过计算文件的 SHA - 256 哈希值来验证文件是否完整、未被篡改。

SHA - 512：同样是 SHA - 2 家族的一部分，生成 512 位（64 字节）的哈希值。它的安全性更高，生成的哈希值更长，更难以受到碰撞攻击。对于 64 位系统，在处理较长输入时，SHA - 512 的性能可能优于 SHA - 256 。不过，由于其输出的哈希值较长，会占用更多存储空间，并且计算速度比 SHA - 256 稍慢，尤其在 32 位系统上性能表现较差。因此，SHA - 512 适用于对数据完整性和安全性要求极高的场景，如一些对安全性要求苛刻的密码学应用，但在大多数普通应用中，SHA - 256 已足够满足需求，所以 SHA - 512 的使用相对较少。

在 Crypto.js 中使用 SHA 系列算法的示例代码如下：

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

const CryptoJS = require('crypto-js');
// 待加密的字符串
const message = 'Hello, SHA!';
// 使用SHA - 1算法进行加密
const sha1Hash = CryptoJS.SHA1(message).toString();
console.log('SHA - 1加密后的哈希值:', sha1Hash);
// 使用SHA - 256算法进行加密
const sha256Hash = CryptoJS.SHA256(message).toString();
console.log('SHA - 256加密后的哈希值:', sha256Hash);
// 使用SHA - 512算法进行加密
const sha512Hash = CryptoJS.SHA512(message).toString();
console.log('SHA - 512加密后的哈希值:', sha512Hash);

运行上述代码，控制台会分别输出message的 SHA - 1、SHA - 256 和 SHA - 512 哈希值。这里CryptoJS.SHA1(message)、CryptoJS.SHA256(message)和CryptoJS.SHA512(message)分别计算出对应算法的哈希值，再通过toString()方法转换为十六进制字符串展示。

（二）对称加密算法

对称加密算法是指加密和解密使用相同密钥的加密方式。发送方使用密钥对明文进行加密，生成密文，接收方使用相同的密钥对密文进行解密，还原出明文。这种加密方式的优点是加密和解密速度快，效率高，适用于对大量数据进行加密处理；缺点是密钥的管理和分发比较困难，因为通信双方需要安全地共享同一个密钥，如果密钥在传输过程中被窃取，那么数据的安全性就无法得到保障。

1. AES

AES（Advanced Encryption Standard）即高级加密标准，是一种被广泛应用的对称加密算法。它的原理基于置换和代替操作，将明文按照固定大小（通常为 128 位，即 16 字节）进行分组，然后对每一分组进行多轮加密。每一轮加密都包含 SubBytes（字节替换）、ShiftRows（行移位）、MixColumns（列混淆）和 AddRoundKey（轮密钥加）这四种操作，通过这些操作对数据进行充分混淆和扩散，从而实现高效且安全的加密。AES 支持三种密钥长度：128 比特、192 比特和 256 比特 ，对于不同长度的密钥，加密轮数也不同，128 比特密钥对应 10 轮加密，192 比特密钥对应 12 轮加密，256 比特密钥对应 14 轮加密。

在使用 AES 加密时，涉及到一些重要参数：

密钥（Key）：用于加密和解密的关键信息，长度可以是 128 位、192 位或 256 位，密钥的安全性直接影响加密的安全性，务必妥善保管。

初始向量（Initialization Vector，IV）：在某些加密模式（如 CBC 模式）下需要使用初始向量，它是一个随机值，与密钥一起用于加密过程，目的是增加加密的随机性和安全性，防止相同的明文加密后产生相同的密文。

加密模式（Mode）：AES 支持多种加密模式，常见的有 ECB（电子密码本模式）、CBC（密码块链模式）、CTR（计数器模式）等。不同的加密模式具有不同的特点和适用场景。例如，ECB 模式简单直接，每个明文块独立加密，但如果明文存在重复块，加密后的密文也会有重复，容易被攻击者分析，适用于对安全性要求不高且数据块之间独立性较强的场景；CBC 模式引入了初始向量，使得每个密文块的生成不仅依赖于当前明文块和密钥，还依赖于前一个密文块，增强了安全性，适用于一般的加密场景；CTR 模式将加密转换为流密码，通过计数器生成密钥流与明文异或，加密和解密速度快，且可以并行处理，适用于对速度要求较高的场景。

填充方式（Padding）：当明文长度不是分组长度（128 位，16 字节）的整数倍时，需要进行填充。常见的填充方式有 PKCS7（在 JavaScript 中对应 PKCS5，两者在填充逻辑上对于 AES - 128 是一致的）、ZeroPadding 等。PKCS7 填充是在明文末尾填充一定数量的字节，填充字节的值等于需要填充的字节数，例如，如果需要填充 5 个字节，则填充的字节都是 0x05；ZeroPadding 则是在明文末尾填充 0 字节，使其满足分组长度要求。

下面通过一个详细的代码示例展示 AES 在 Crypto.js 中的加密和解密过程，使用 CBC 模式和 PKCS7 填充方式：

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

const CryptoJS = require('crypto-js');
// 待加密的字符串
const message = 'Hello, AES!';
// 加密密钥，长度必须是16字节（128位）、24字节（192位）或32字节（256位）
const secretKey = CryptoJS.enc.Utf8.parse('mySecretKey123456');
// 初始向量，长度必须是16字节
const iv = CryptoJS.enc.Utf8.parse('1234567890123456');
// 使用AES - CBC模式和PKCS7填充方式进行加密
const encryptedMessage = CryptoJS.AES.encrypt(message, secretKey, {
     iv: iv,
     mode: CryptoJS.mode.CBC,
     padding: CryptoJS.pad.Pkcs7
}).toString();
console.log('加密后的密文:', encryptedMessage);
// 使用相同的密钥和初始向量进行解密
const bytes = CryptoJS.AES.decrypt(encryptedMessage, secretKey, {
     iv: iv,
     mode: CryptoJS.mode.CBC,
     padding: CryptoJS.pad.Pkcs7
});
const decryptedMessage = bytes.toString(CryptoJS.enc.Utf8);
console.log('解密后的明文:', decryptedMessage);

在上述代码中，首先定义了待加密的字符串message、加密密钥secretKey和初始向量iv 。然后使用CryptoJS.AES.encrypt方法进行加密，传入三个参数：要加密的字符串message、加密密钥secretKey以及一个配置对象，在配置对象中指定了初始向量iv、加密模式CryptoJS.mode.CBC和填充方式CryptoJS.pad.Pkcs7 ，加密后的结果通过toString()方法转换为字符串形式。在解密时，使用CryptoJS.AES.decrypt方法，传入加密后的密文encryptedMessage、相同的密钥secretKey和配置对象，解密后的结果是一个WordArray对象，再通过toString(CryptoJS.enc.Utf8)方法将其转换为 UTF - 8 编码的字符串，得到原始的明文。运行代码后，控制台将输出加密后的密文和解密后的明文，明文应与原始的message字符串一致。

2. DES

DES（Data Encryption Standard）是一种早期的对称加密算法，它将 64 位的明文块加密成 64 位的密文块 。DES 的特点是加密和解密过程相对简单，计算速度较快，在早期的计算机系统和网络通信中得到了广泛应用。然而，随着计算机技术的发展，DES 逐渐暴露出一些缺点。由于其密钥长度较短，只有 56 位（实际使用 64 位密钥，但其中 8 位用于奇偶校验），在现代计算机的计算能力下，已经可以通过暴力破解的方式在较短时间内找到密钥，安全性较低。相比之下，AES 具有更强大的安全性，支持更长的密钥长度（128 位、192 位、256 位），加密轮数更多，加密过程更加复杂，能够有效抵御各种攻击，因此在大多数场景下，AES 已经取代了 DES 成为更常用的对称加密算法。

在 Crypto.js 中使用 DES 进行加密和解密的代码示例如下：

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

const CryptoJS = require('crypto-js');
// 待加密的字符串
const message = 'Hello, DES!';
// 加密密钥，长度必须是8字节（64位，实际有效位56位）
const secretKey = CryptoJS.enc.Utf8.parse('12345678');
// 使用DES算法进行加密
const encryptedMessage = CryptoJS.DES.encrypt(message, secretKey, {
     mode: CryptoJS.mode.ECB,
     padding: CryptoJS.pad.Pkcs7
}).toString();
console.log('DES加密后的密文:', encryptedMessage);
// 使用相同的密钥进行解密
const bytes = CryptoJS.DES.decrypt(encryptedMessage, secretKey, {
     mode: CryptoJS.mode.ECB,
     padding: CryptoJS.pad.Pkcs7
});
const decryptedMessage = bytes.toString(CryptoJS.enc.Utf8);
console.log('DES解密后的明文:', decryptedMessage);

上述代码定义了待加密字符串message和 8 字节的加密密钥secretKey 。使用CryptoJS.DES.encrypt方法进行加密，采用 ECB 模式和 PKCS7 填充方式，加密结果转换为字符串。解密时使用CryptoJS.DES.decrypt方法，传入密文、相同密钥和配置对象，最后将解密结果转换为 UTF - 8 编码字符串输出。运行代码后，可在控制台看到加密和解密的结果。不过，由于 DES 的安全性问题，在实际应用中，若非特殊需求，应优先选择更安全的 AES 等加密算法。

实际应用案例剖析

（一）数据传输加密

在 Web 应用开发中，前端向后端发送敏感数据的场景极为常见。例如，在一个在线银行系统中，用户进行转账操作时，需要将转账金额、收款账号等敏感信息发送到后端服务器进行处理。如果这些数据在传输过程中未加密，一旦被黑客截获，后果不堪设想。

我们可以使用 Crypto.js 中的 AES 加密算法来保障数据传输的安全。假设我们的前端使用 Vue 框架开发，代码示例如下：

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

<template>
   <div>
     <form @submit.prevent="sendData">
       <label for="amount">转账金额:</label>
       <input type="number" id="amount" v-model="amount" required>
       <label for="recipientAccount">收款账号:</label>
       <input type="text" id="recipientAccount" v-model="recipientAccount" required>
       <button type="submit">提交</button>
     </form>
   </div>
</template>
<script>
import CryptoJS from 'crypto-js';
export default {
   data() {
     return {
       amount: '',
       recipientAccount: ''
     };
   },
   methods: {
     sendData() {
       // 模拟后端的公钥，实际应用中应从服务器获取
       const publicKey = 'publicKey12345';
       const data = {
         amount: this.amount,
         recipientAccount: this.recipientAccount
       };
       // 使用AES加密数据
       const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), publicKey).toString();
       // 发送加密后的数据到后端
       fetch('/transfer', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({ encryptedData })
       })
       .then(response => response.json())
       .then(result => {
           console.log('后端返回结果:', result);
         })
       .catch(error => {
           console.error('请求出错:', error);
         });
     }
   }
};
</script>

在上述代码中，当用户在表单中输入转账金额和收款账号并点击提交按钮时，sendData方法被触发。该方法首先定义了一个模拟的后端公钥（实际应用中，应通过安全的方式从服务器获取公钥），然后将用户输入的数据对象转换为 JSON 字符串，使用 AES 算法和公钥对其进行加密，得到加密后的密文。最后，通过fetch API 将加密后的密文发送到后端的/transfer接口。在后端接收到加密数据后，使用相应的私钥进行解密，从而确保数据在传输过程中的安全性，有效防止数据被窃取或篡改。

（二）用户密码加密

在用户注册和登录功能中，用户密码的安全存储至关重要。如果将用户密码以明文形式存储在数据库中，一旦数据库泄露，用户的账号安全将受到严重威胁。利用 Crypto.js 对用户密码进行加密存储是一种有效的解决方案。

以 React 应用为例，在用户注册页面，当用户输入密码并提交注册信息时，我们可以使用 Crypto.js 对密码进行哈希处理，然后将哈希值存储到数据库中。代码示例如下：

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

import React, { useState } from'react';
import CryptoJS from 'crypto-js';
const Register = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const handleSubmit = (e) => {
     e.preventDefault();
     // 使用SHA - 256算法对密码进行哈希处理
     const hashedPassword = CryptoJS.SHA256(password).toString();
     // 模拟将用户名和哈希后的密码发送到后端进行注册
     const registerData = {
       username,
       password: hashedPassword
     };
     // 这里可以使用fetch或其他HTTP库将registerData发送到后端
     console.log('注册数据:', registerData);
   };
   return (
     <form onSubmit={handleSubmit}>
       <label>用户名:</label>
       <input
         type="text"
         value={username}
         onChange={(e) => setUsername(e.target.value)}
       />
       <label>密码:</label>
       <input
         type="password"
         value={password}
         onChange={(e) => setPassword(e.target.value)}
       />
       <button type="submit">注册</button>
     </form>
   );
};

export default Register;

在上述代码中，当用户在注册表单中输入用户名和密码并点击注册按钮时，handleSubmit函数被调用。该函数使用CryptoJS.SHA256方法对用户输入的密码进行哈希处理，得到密码的哈希值。然后将用户名和哈希后的密码组成一个对象registerData，模拟将其发送到后端进行注册操作（实际应用中，应使用fetch或其他 HTTP 库将数据发送到后端服务器）。在用户登录时，同样对用户输入的密码进行哈希处理，然后将哈希值与数据库中存储的哈希值进行比对，如果一致，则验证用户身份成功，这样就避免了密码明文存储带来的安全风险，极大地提高了用户账号的安全性。

使用技巧与注意事项

（一）密钥管理

密钥是加密和解密过程中的核心要素，其安全性直接决定了加密数据的安全性。在使用 Crypto.js 时，务必高度重视密钥的管理。首先，密钥的生成应采用安全可靠的方式，避免使用简单易猜测的字符串作为密钥，比如不要使用生日、电话号码等常见信息。对于对称加密算法，如 AES，建议使用足够长度的密钥，以增强加密的强度。例如，AES 支持 128 位、192 位和 256 位的密钥长度，在安全性要求较高的场景中，应优先选择 256 位的密钥。可以借助 Crypto.js 提供的工具函数来生成随机的高强度密钥，如CryptoJS.lib.WordArray.random(256 / 8)可以生成一个 256 位的随机密钥。其次，密钥的存储也至关重要，绝不能将密钥以明文形式存储在客户端或服务器端易被访问的位置。一种常见的做法是将密钥存储在安全的密钥管理系统中，或者使用硬件安全模块（HSM）来保护密钥。在前端应用中，也可以考虑将密钥与用户的某些唯一标识（如指纹、面部识别等生物特征，需在合法合规且用户授权的前提下）相结合，进一步提高密钥的安全性。总之，妥善管理密钥是保障数据加密安全的基础，任何疏忽都可能导致加密体系的崩溃，使数据面临被破解的风险。

（二）加密模式与填充方式选择

不同的加密模式和填充方式在加密效果和安全性上存在差异，开发者需要根据具体的应用需求来合理选择。在加密模式方面，以 AES 加密算法为例，常见的加密模式有 ECB（电子密码本模式）、CBC（密码块链模式）、CTR（计数器模式）等。ECB 模式简单直接，每个明文块独立加密，加密速度相对较快，但如果明文存在重复块，加密后的密文也会有重复，容易被攻击者分析和利用，因此它适用于对安全性要求不高且数据块之间独立性较强的场景，比如一些对数据保密性要求较低的内部测试数据加密。CBC 模式引入了初始向量（IV），每个密文块的生成不仅依赖于当前明文块和密钥，还依赖于前一个密文块，这使得加密后的密文具有更好的随机性和扩散性，安全性较高，适用于一般的加密场景，如用户敏感信息的传输加密。CTR 模式将加密转换为流密码，通过计数器生成密钥流与明文异或，具有加密和解密速度快、可以并行处理的优点，适用于对速度要求较高的场景，像实时视频流加密传输。在填充方式上，当明文长度不是加密算法分组长度的整数倍时，就需要进行填充。常见的填充方式有 PKCS7（在 JavaScript 中对应 PKCS5，两者在填充逻辑上对于 AES - 128 是一致的）、ZeroPadding 等。PKCS7 填充是在明文末尾填充一定数量的字节，填充字节的值等于需要填充的字节数，这种填充方式应用广泛，能够保证加密数据的完整性和正确性；ZeroPadding 则是在明文末尾填充 0 字节，虽然简单，但在某些情况下可能会导致安全性问题，比如当解密时无法准确判断填充的 0 是原始数据中的 0 还是填充的 0，所以在选择填充方式时，应优先考虑 PKCS7 填充方式，除非有特殊的需求。

（三）兼容性问题

在不同的环境中使用 Crypto.js，可能会遇到一些兼容性问题。在浏览器环境中，不同浏览器对 JavaScript 的支持存在差异，可能会导致 Crypto.js 的某些功能无法正常运行。例如，一些旧版本的浏览器可能不支持某些加密算法或特性，在使用之前，需要通过特性检测来判断浏览器是否支持所需的功能。可以使用if ('CryptoJS' in window)来检测浏览器是否已经成功引入了 Crypto.js 库。对于不支持的浏览器，可以考虑提供降级方案，比如提示用户升级浏览器，或者使用其他兼容的加密方式。在 Node.js 环境中，不同的 Node.js 版本对 Crypto.js 的兼容性也可能不同。随着 Node.js 的不断更新，一些底层的加密模块和 API 可能会发生变化，这可能会影响 Crypto.js 的运行。在使用时，要确保所使用的 Node.js 版本与 Crypto.js 库兼容，可以查看 Crypto.js 的官方文档或社区论坛，了解其支持的 Node.js 版本范围。如果遇到兼容性问题，可以尝试升级或降级 Node.js 版本，或者查找相关的解决方案和补丁。此外，在一些特殊的环境中，如 Web Workers、React Native 等，使用 Crypto.js 也可能会遇到一些问题，需要根据具体的环境特点进行针对性的调整和配置，以确保 Crypto.js 能够正常工作，保障数据加密功能的稳定运行。

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本

安装

1
2
3
4
5
6
7

# 需要管理员权限才能执行这些操作
npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 验证是否安装成功
vue --version

创建项目

1
2
3
4
5
6
7
8

vue create hello-world

# 选择预设
Vue CLI v4.5.15
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

运行项目

1
2

cd hello-word
npm run serve

启动成功

1
2
3
4
5
6
7
8

DONE  Compiled successfully in 2244ms                         下午10:20:26

 App running at:
 - Local:   http://localhost:8080/
 - Network: http://192.168.0.104:8080/

 Note that the development build is not optimized.
 To create a production build, run npm run build.

通常 PHP 都作为 HTTP 方式来请求，有些时候需要在 shell 命令写把 PHP 作为脚本来执行，比如定时任务。

curl: (60) SSL certificate : unable to get local issuer certificate