分类前端技术下的文章

NPM 版本管理 node 和 _npm 版本管理

2024-08-07

所有,npm

NPM (Node Package Manager) 是 Node.js 的默认包管理器。通过 NPM，可以安装、更新和管理项目所需的依赖项。

要管理 Node.js 和 NPM 的版本，可以使用 nvm (Node Version Manager)。nvm 允许你安装和切换不同版本的 Node.js 和 NPM。

以下是如何使用 nvm 管理 Node.js 和 NPM 版本的步骤：

安装 nvm：

在 Linux 或 macOS 上，你可以使用 cURL 或 Wget 来安装：




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 或者
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

在 Windows 上，你可以使用 nvm-windows：




https://github.com/coreybutler/nvm-windows/releases

重新启动终端或命令提示符，使 nvm 命令生效。
安装特定版本的 Node.js 和 NPM：
```
nvm install node
```
这将安装最新版本的 Node.js 和 NPM。你也可以指定版本号：
```
nvm install 14.17.0
```
切换到特定版本的 Node.js 和 NPM：
```
nvm use 14.17.0
```
查看当前使用的 Node.js 和 NPM 版本：
```
node -v
npm -v
```
如果需要，你可以列出所有已安装的版本：
```
nvm ls
```

卸载旧版本或清理不需要的版本：




nvm uninstall <version>
nvm uninstall --lts

以上步骤可以帮助你管理 Node.js 和 NPM 的版本。使用 nvm 可以在同一台机器上安装和切换不同版本的 Node.js，这对于维护项目的兼容性非常有帮助。

js给对象循环添加多个键值

2024-08-07

要在JavaScript中给对象循环添加多个键值，可以使用for循环结合对象字面量语法。以下是一个简单的例子：




let obj = {};
const keysToAdd = ['key1', 'key2', 'key3'];
const values = [10, 20, 30];
 
for (let i = 0; i < keysToAdd.length; i++) {
  obj[keysToAdd[i]] = values[i];
}
 
console.log(obj);

这段代码会给obj对象添加三个键值对，键分别是'key1', 'key2', 'key3'，值分别是10, 20, 30。

JS实现背景图的颜色实时渐变

2024-08-07

在JavaScript中，可以使用HTML5 Canvas元素和其提供的createLinearGradient()方法来实现背景颜色的实时渐变。以下是一个简单的例子：

HTML部分：




<canvas id="gradientCanvas" width="400" height="400"></canvas>

JavaScript部分：




const canvas = document.getElementById('gradientCanvas');
const ctx = canvas.getContext('2d');
 
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');
 
function renderGradient() {
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}
 
renderGradient(); // 首次渲染渐变
 
// 可以添加逻辑来监听事件或者动态改变渐变，例如：
// window.addEventListener('resize', function() {
//   // 当窗口大小改变时，可能需要调整渐变的方向
//   gradient.direction = ...
//   renderGradient();
// });

这段代码创建了一个从红色到绿色的垂直渐变，并将其应用到了canvas元素的背景。你可以根据需要调整createLinearGradient()方法的参数来改变渐变的方向和路径。如果需要实时更新渐变，可以将渲染函数放在一个interval中，或者在某些用户交互事件中调用。

Node.js实现WebSocket

2024-08-07

所有,nodejs

在Node.js中，可以使用ws模块来实现WebSocket服务器。以下是一个简单的例子：

首先，通过npm安装ws模块：




npm install ws

然后，使用以下代码创建一个简单的WebSocket服务器：




const WebSocket = require('ws');
 
// 创建WebSocket服务器实例，监听端口3000
const wss = new WebSocket.Server({ port: 3000 });
 
wss.on('connection', function connection(ws) {
  // 当客户端连接时触发
 
  ws.on('message', function incoming(message) {
    // 当服务器接收到客户端发来的消息时触发
    console.log('received: %s', message);
  });
 
  // 发送消息给客户端
  ws.send('something');
});
 
console.log('WebSocket server is running on ws://localhost:3000');

运行上述代码后，你将有一个运行中的WebSocket服务器监听3000端口。任何连接到这个端口的客户端都将与服务器进行WebSocket通信。

HTML5 标题如何实现不换行

2024-08-07

在HTML5中，要实现标题不换行，可以使用CSS样式white-space: nowrap;。这个样式规则可以防止文本自动换行，即使在空间不足的情况下。

下面是一个简单的例子，演示如何应用这个样式：




<!DOCTYPE html>
<html>
<head>
<style>
.no-wrap {
  white-space: nowrap;
}
</style>
</head>
<body>
 
<h1 class="no-wrap">这是不换行的标题文本</h1>
 
</body>
</html>

在这个例子中，<h1>标签中的文本将不会换行，即使在视口（viewport）或其父元素的宽度不足以容纳全部文本的情况下。通过为<h1>标签添加class="no-wrap"，我们应用了一个CSS类.no-wrap，该类通过设置white-space: nowrap;规则来实现不换行的效果。

AES+MD5前后端数据传输加密

2024-08-07

在前后端数据传输中，通常使用对称加密算法来保证数据的安全性，如AES。为了确保数据的完整性，通常会结合摘要算法如MD5进行。以下是一个简单的AES加密和MD5摘要的JavaScript示例：




// 引入CryptoJS库（需要先安装crypto-js）
var CryptoJS = require("crypto-js");
var CryptoJS = require("crypto-js");
 
// 密钥（保证其保密性，不要公开）
var secretKey = "your-256-bit-secret-key"; // 256位密钥
 
// 对数据进行AES加密
function encryptData(data) {
    var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), secretKey);
    return ciphertext.toString();
}
 
// 对数据进行MD5摘要
function generateDigest(data) {
    return CryptoJS.MD5(data).toString();
}
 
// 使用示例
var data = { "message": "Hello, World!" };
var encryptedData = encryptData(data);
var digest = generateDigest(encryptedData);
 
console.log("Encrypted Data:", encryptedData);
console.log("Digest:", digest);
 
// 发送数据时，将加密数据和摘要发送到服务器
// 服务器接收后，使用相同的密钥和摘要算法验证数据

在服务器端，你需要使用相同的密钥和加密算法来解密数据，并使用MD5来验证数据的完整性。务必确保密钥的保密性，不要在前端或者代码库中暴露密钥。

注意：这个示例仅用于说明如何进行简单的数据加密和摘要。在实际应用中，应该使用更安全的加密算法和更复杂的密钥管理方式。

HTML5入门到入土

2024-08-07

HTML5是HTML的最新标准，它在原有的基础上增加了很多新特性，比如画布（Canvas）、视频（Video）和音频（Audio）的支持。

以下是一个简单的HTML5页面示例，包含了视频和画布元素：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 示例</title>
</head>
<body>
    <h1>欢迎来到HTML5的世界</h1>
    
    <!-- 视频元素 -->
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
    
    <!-- 画布元素 -->
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
        您的浏览器不支持Canvas。
    </canvas>
    
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

在这个示例中，我们使用了HTML5的<video>标签来嵌入一个视频，使用了<canvas>标签来创建一个绘图区域。这只是HTML5能力的一小部分，HTML5还有很多其他的新特性和提升，如本地存储、离线应用、新的表单输入类型、地理位置、多线程等。

JQuery插件秀：生成PDF文件（文本+上传图片+电子签名）

2024-08-07

所有,jquery

使用jQuery插件生成PDF文件涉及几个关键步骤：创建PDF文档，添加文本和图片，以及实现电子签名。以下是一个简化的代码示例，展示如何使用jsPDF库和jQuery实现这些功能：




<!DOCTYPE html>
<html>
<head>
    <title>PDF Generator</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
 
<div id="content">
    <p>这是PDF文档中的文本内容。</p>
    <!-- 图片将通过此元素上传 -->
    <input type="file" id="imageInput" accept="image/*" />
    <!-- 电子签名的canvas将被插入此处 -->
    <div id="signature-pad"></div>
    <button id="generatePdf">生成PDF</button>
</div>
 
<script>
    $(document).ready(function() {
        $('#generatePdf').click(function() {
            // 初始化jspdf
            var doc = new jspdf.jsPDF();
 
            // 添加文本到PDF
            doc.text(20, 20, 'Hello World!');
 
            // 当图片被选中时添加到PDF
            $('#imageInput').change(function() {
                var file = this.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var imgData = e.target.result; // 转换为base64
                        doc.addImage(imgData, 'JPEG', 20, 40, 100, 100); // 添加图片到PDF
                    };
                    reader.readAsDataURL(file);
                }
            });
 
            // 假设你已经有了电子签名的canvas
            var canvas = $('#signature-pad')[0];
            if (canvas) {
                // 将canvas转换为图片添加到PDF
                var dataURL = canvas.toDataURL('image/png');
                doc.addImage(dataURL, 'PNG', 20, 160, 150, 50);
            }
 
            // 保存PDF文件
            doc.save('generated.pdf');
        });
    });
</script>
 
</body>
</html>

在这个例子中，我们首先引入了必要的jsPDF库和jQuery。在文档加载完成后，我们绑定了生成PDF的点击事件，然后使用jspdf.jsPDF创建一个新的PDF实例。我们使用text方法添加文本，addImage添加图片，并假设你已经有了一个电子签名的canvas。最后，我们调用save方法保存PDF文件。

请注意，这个例子没有实现电子签名的代码，实际情况下你需要使用专门的库来实现这一功能，如SignaturePad。此外，上传图片的处理是基于FileReader API的，它不直接处理大文件上传，对于大文件，你可能需要采取分块上传的策略。

Educoder jQuery DOM操作

2024-08-07

所有,jquery




// 确保DOM完全加载
$(document).ready(function() {
    // 获取所有的input元素
    var $inputs = $('input');
 
    // 绑定事件处理器到input元素的keydown事件
    $inputs.on('keydown', function(event) {
        // 检查按下的是否是回车键（keyCode 13）
        if (event.which === 13) {
            // 阻止默认行为（防止表单提交）
            event.preventDefault();
 
            // 执行自定义的处理函数
            handleEnterPress(event);
        }
    });
 
    // 自定义的处理函数
    function handleEnterPress(event) {
        var $target = $(event.target);
        // 获取输入框的值
        var inputValue = $target.val();
        // 执行其他操作，例如添加到列表等
        console.log('Enter pressed on input with value:', inputValue);
    }
});

这段代码首先确保在DOM完全加载后绑定事件处理器。当用户在任意的input元素内按下回车键时，它会阻止表单的默认提交行为并调用一个自定义的处理函数，该函数可以用来执行更多的操作，例如添加输入到列表中。