1. 首页
  2. 分类
  3. 所有
【Node.js 常用命令（第一篇）】揭秘Node.js：掌握这些常用命令，让你在开发路上风生水起！
System
2024-08-09
所有,nodejs

在Node.js中，有一些常用的命令，这些命令可以帮助我们初始化新项目，安装依赖，运行代码等等。以下是一些常用的Node.js命令：

  1. 创建新的Node.js项目：



npm init

这个命令会引导你创建一个新的Node.js项目，它会询问你一系列问题，如项目名称、版本、描述、入口点、测试命令、git仓库、关键字等。完成后，它会在当前目录生成一个package.json文件。

  1. 安装依赖：



npm install <package_name>

这个命令会将指定的包下载并安装到当前项目中。它会将包添加到node_modules目录，并且会在package.json的dependencies部分添加该包。

  1. 全局安装包：



npm install -g <package_name>

这个命令会将指定的包下载并安装为全局包。

  1. 卸载依赖：



npm uninstall <package_name>

这个命令会从当前项目中移除指定的包，并且会从package.json的dependencies部分移除该包。

  1. 更新依赖：



npm update <package_name>

这个命令会更新指定的包到最新版本，并且会更新package.json中的版本号。

  1. 运行Node.js代码：



node <file_name.js>

这个命令会运行指定的Node.js文件。

  1. 运行开发依赖的脚本：



npm run <script_name>

这个命令会运行在package.json的scripts部分定义的脚本。

  1. 列出已安装的全局包：



npm list -g --depth 0

这个命令会列出所有全局安装的包，--depth 0参数确保只列出顶层包，不包括它们的依赖。

  1. 列出项目的依赖：



npm list

这个命令会列出当前项目所有安装的依赖。

  1. 清除缓存：



npm cache clean --force

这个命令会清除npm缓存，有时候可以解决安装问题。

这些命令是Node.js开发中最常用的。每个命令都有其特定的用途，熟练掌握这些命令将会极大地提升你的开发效率。

- 阅读更多 -
Electron 开发环境搭建指南：从 Node.js 到第一个桌面应用
System
2024-08-09
所有,nodejs



# 安装Electron模块
npm install electron --save-dev
 
# 初始化Electron应用
./node_modules/.bin/electron --init
 
# 运行Electron应用
./node_modules/.bin/electron .

以上是一个简单的示例，展示了如何在已有的Node.js项目中安装和初始化Electron，并运行第一个桌面应用。这里使用了./node_modules/.bin/electron来直接调用项目中安装的Electron二进制文件，而不是全局安装的Electron。这样做可以确保使用与项目相关的依赖版本，避免可能的版本冲突。

- 阅读更多 -
win10 node.js卸载、安装、配置详解
System
2024-08-09
所有,nodejs

在Windows 10上卸载、安装和配置Node.js的步骤如下：

卸载Node.js

  1. 打开“控制面板” -> “程序” -> “程序和功能”。
  2. 在列表中找到Node.js，然后点击它。
  3. 点击“卸载”。

安装Node.js

  1. 访问Node.js官方网站（https://nodejs.org/）下载最新版的Windows安装包。
  2. 运行安装包，按照提示完成安装。

配置Node.js

安装完成后，您可能还需要配置npm的全局模块和缓存位置，以及更新Node.js到最新版本。

  1. 打开命令提示符或PowerShell。
  2. 运行以下命令以更新npm到最新版本：



npm install -g npm@latest
  1. 如果需要配置模块和缓存位置，可以使用以下命令：



npm config set prefix /path/to/global/modules
npm config set cache /path/to/global/npm-cache

替换/path/to/global/modules和/path/to/global/npm-cache为您希望设置的实际路径。

  1. 要检查Node.js和npm的版本，可以使用以下命令：



node -v
npm -v

这些步骤提供了Node.js在Windows 10上的基本卸载、安装和配置过程。

- 阅读更多 -
Node.js的crypto模块 加密
System
2024-08-09
所有,nodejs

在Node.js中，可以使用crypto模块来进行加密操作。以下是一个使用crypto模块的AES-256-CBC算法进行加密的例子：




const crypto = require('crypto');
 
// 加密函数
function encrypt(text, secretKey) {
  const iv = crypto.randomBytes(16); // 初始化向量
  const cipher = crypto.createCipheriv('aes-256-cbc', crypto.createHash('sha256').update(secretKey).digest(), iv);
  let encrypted = cipher.update(text);
  encrypted = Buffer.concat([encrypted, cipher.final()]);
  return iv.toString('hex') + ':' + encrypted.toString('hex');
}
 
// 解密函数
function decrypt(text, secretKey) {
  let textParts = text.split(':');
  let iv = Buffer.from(textParts.shift(), 'hex');
  let encryptedText = Buffer.from(textParts.join(':'), 'hex');
  let decipher = crypto.createDecipheriv('aes-256-cbc', crypto.createHash('sha256').update(secretKey).digest(), iv);
  let decrypted = decipher.update(encryptedText);
  decrypted = Buffer.concat([decrypted, decipher.final()]);
  return decrypted.toString();
}
 
// 使用示例
const secretKey = 'your-256-bit-secret-key'; // 256位密钥
const originalText = 'Hello World!';
 
const encryptedText = encrypt(originalText, secretKey);
console.log('Encrypted Text:', encryptedText);
 
const decryptedText = decrypt(encryptedText, secretKey);
console.log('Decrypted Text:', decryptedText);

在这个例子中，encrypt函数使用SHA256哈希值作为密钥，并生成一个随机的初始化向量（IV）。然后，它创建一个Cipher实例，并用密钥和IV对文本进行加密。解密过程中，先将加密文本分割为IV和加密文本，然后使用相同的密钥和IV进行解密。

请确保你的密钥是安全的，并且不要在不安全的环境中暴露。

- 阅读更多 -
Linux系统之部署Node.js环境
System
2024-08-09
所有,nodejs



#!/bin/bash
# 安装Node.js和npm的脚本
 
# 定义Node.js和npm的版本
NODE_VERSION=v14.17.0
NPM_VERSION=6
 
# 移除旧版本的Node.js和npm
sudo apt-get purge -y nodejs npm
 
# 安装Node.js
sudo curl -sL https://deb.nodesource.com/setup_$NODE_VERSION | sudo -E bash -
sudo apt-get install -y nodejs
 
# 安装npm
sudo npm install -g npm@$NPM_VERSION
 
# 验证Node.js和npm的安装
node -v
npm -v

这段代码提供了一个简化版本的脚本，用于在Linux系统中安装特定版本的Node.js和npm。它首先移除系统中已有的Node.js和npm版本，然后通过NodeSource进行安装，并验证安装是否成功。这个过程可以确保系统中的Node.js和npm是最新的或特定版本，适用于生产环境。

- 阅读更多 -
html 简单的网页横向滚动
System
2024-08-09
所有,html

要创建一个简单的HTML横向滚动页面，您可以使用<marquee>标签或CSS来实现视觉滚动效果。但请注意，<marquee>标签是一个非标准特性，已被W3C宣布弃用。

以下是使用CSS实现横向滚动的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横向滚动示例</title>
<style>
  .scroll-container {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
  }
  .scroll-content {
    display: inline-block;
    animation: scroll-left 10s linear infinite;
  }
  @keyframes scroll-left {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>
</head>
<body>
 
<div class="scroll-container">
  <div class="scroll-content">
    这是一段将会滚动的文本内容。这是一段将会滚动的文本内容。
  </div>
</div>
 
</body>
</html>

在这个例子中，.scroll-container 创建了一个滚动容器，.scroll-content 是需要滚动的内容。CSS @keyframes 规则定义了一个名为 scroll-left 的动画，使得内容从右向左滚动。您可以根据需要调整动画的时长（现在设置为10秒）和滚动速率。

- 阅读更多 -
结合html与Echarts绘制饼状图
System
2024-08-09
所有,html



<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>
</html>

这段代码创建了一个简单的饼状图，使用ECharts库来渲染图表。图表的配置项包括标题、工具提示、图例和系列数据（饼图的数据）。这个例子展示了如何将ECharts集成到一个HTML页面中，并设置了基本的图表选项。

- 阅读更多 -
vue3+vite项目在html中输出环境变量
System
2024-08-09
所有,html

在Vue 3 + Vite项目中，你可以通过import.meta.env对象来访问环境变量。环境变量通常定义在.env文件中，并且可以有多个文件，比如.env.local、.env.development.local等。

首先，在项目根目录下创建.env文件，并添加你的环境变量：




# .env
VUE_APP_API_URL=https://api.example.com

然后，在Vue组件中，你可以使用import.meta.env来访问这些变量：




<template>
  <div>
    API URL: {{ apiUrl }}
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const apiUrl = ref(import.meta.env.VUE_APP_API_URL);
 
onMounted(() => {
  console.log(apiUrl.value); // 将会输出 "https://api.example.com"
});
</script>

请确保你的环境变量名以VUE_APP_开头，这是Vite默认识别的环境变量前缀。在你的Vite配置或者Vue项目中，这个前缀是可以更改的，但是出于简洁性和常规使用情况，推荐使用默认的VUE_APP_前缀。

- 阅读更多 -
html好看的登录界面2（十四种风格登录源码）_html登录页面
System
2024-08-09
所有,html

以下是一个使用HTML和CSS创建的简单而又好看的登录界面示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
  .login-container {
    width: 100%;
    margin: 0 auto;
    margin-top: 100px;
    max-width: 500px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .login-container input[type="text"],
  .login-container input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
  }
  .login-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
  }
  .login-container input[type="submit"]:hover {
    background-color: #4cae4c;
  }
  .login-container a {
    text-decoration: none;
    color: #5cb85c;
    display: block;
    text-align: center;
    margin-top: 20px;
  }
</style>
</head>
<body>
 
<div class="login-container">
  <h2>Login to Your Account</h2>
  <form action="">
    <input type="text" placeholder="Username" required>
    <input type="password" placeholder="Password" required>
    <input type="submit" value="Login">
  </form>
  <a href="#">Forgot Password?</a>
</div>
 
</body>
</html>

这个示例使用了简单的HTML结构和CSS样式来创建一个现代化的登录界面。它有一个居中的登录容器，包含一个标题、输入框、提交按钮和一个忘记密码的链接。这个界面简洁而又美观，适合用在个人项目或者小型网站上。

- 阅读更多 -
“治疗“xss攻击的“特效药“:DOMPurify，让HTML更安全
System
2024-08-09
所有,html

DOMPurify是一个用于消除不安全的输入的JavaScript库，它可以帮助你防止XSS攻击。以下是如何使用DOMPurify的示例代码：

首先，你需要安装DOMPurify库：




npm install dompurify

然后，你可以在你的JavaScript代码中引入并使用DOMPurify：




const { DOMPurify } = require('dompurify');
 
// 假设你有一些不安全的HTML内容
let unsafeHtml = '<script>alert("XSS")</script>这是安全的文本';
 
// 使用DOMPurify来消除不安全的部分
let safeHtml = DOMPurify.sanitize(unsafeHtml);
 
// 输出结果，你会看到<script>标签被消除了
console.log(safeHtml); // 输出: "这是安全的文本"

DOMPurify不仅仅可以消除不安全的标签，还可以移除标签属性，例如onclick、onerror等事件处理属性，以及style、class等，从而有效地提升你的网站或应用的安全性。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号