标签 Javascript 下的文章

2024-08-08

所有,nodejs

在IntelliJ IDEA中配置Node.js环境，你需要安装Node.js插件。以下是配置步骤：

打开IntelliJ IDEA。
确保你已经安装了Node.js，可以在终端中运行 node --version 来检查是否已安装。
打开项目设置（File > Project Structure）。
在左侧菜单中选择 "Project"。
在 "Project SDK" 中，如果没有列出Node.js，点击 "New..." 并选择 Node.js 版本。
如果已经安装了Node.js，在 "Project SDK" 中选择它。
在右侧的 "Project" 部分，确保设置了正确的 "Project language level"。
点击 "Apply" 和 "OK" 保存设置。

如果你想要使用IntelliJ IDEA的内置终端运行Node.js命令，可以按照以下步骤操作：

打开 "View > Tool Windows > Node.js and NPM" 工具窗口。
在 "Node.js and NPM" 工具窗口中，点击 "+" 按钮添加新的运行/调试配置。
选择 "Node.js" 类型，然后点击 "..." 选择你的入口文件。
在 "Configuration" 选项卡中，设置任何需要的环境变量或命令行参数。
点击 "Apply" 和 "OK" 保存配置。

现在，你可以在 "Node.js and NPM" 工具窗口中运行你的Node.js应用了。

Node.js 中的 RSA 加密、解密、签名与验证详解

2024-08-08

所有,nodejs




const NodeRSA = require('node-rsa');
const crypto = require('crypto');
 
// 生成密钥对
const key = new NodeRSA({b: 2048});
const publicKey = key.exportKey('pkcs8-public');
const privateKey = key.exportKey('pkcs8-private');
 
// 加密
const dataToEncrypt = 'Hello, World!';
const encryptedData = NodeRSA(publicKey).encrypt(dataToEncrypt, 'base64');
 
// 解密
const decryptedData = NodeRSA(privateKey).decrypt(encryptedData, 'utf8');
 
// 签名
const signKey = new NodeRSA(privateKey);
const dataToSign = 'Some data to sign';
const signature = signKey.sign(dataToSign, 'base64', 'buffer');
 
// 验证签名
const verifyKey = new NodeRSA(publicKey);
verifyKey.importKey(privateKey, 'pkcs8-private'); // 需要导入私钥来验证
const isVerified = verifyKey.verify(dataToSign, signature, 'base64', 'buffer');
 
// 输出结果
console.log('Encrypted Data:', encryptedData);
console.log('Decrypted Data:', decryptedData);
console.log('Signature:', signature.toString('base64'));
console.log('Signature Verified:', isVerified);

这段代码展示了如何在Node.js环境中使用node-rsa库进行RSA加密、解密、签名和验证。首先，我们生成了一个2048位的密钥对，然后使用公钥进行数据加密，私钥进行数据解密。接着，我们用私钥对数据进行签名，并用公钥验证签名的正确性。这个过程是安全通信和数据完整性的重要组成部分。

2024-08-08




// 导入必要的模块
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
 
// 设置静态文件目录
app.use(express.static('public'));
 
// 导入HTML文件
fs.readFile('routes/index.html', 'utf8', (err, html) => {
  if (err) {
    console.error('读取文件出错:', err);
    return;
  }
  app.get('/', (req, res) => {
    res.send(html);
  });
});
 
// 设置Nginx反向代理
app.all('/api/*', (req, res) => {
  // 假设Nginx运行在localhost的80端口
  req.pipe(request(req)).pipe(res);
});
 
// 设置CORS头部支持跨域请求
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});
 
// 监听3000端口
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000/');
});

这段代码示例展示了如何在Node.js的Express框架中设置静态文件目录、导入HTML文件、配置Nginx反向代理以及处理CORS问题。在实际开发中，这些技术和实践都非常有用，并且是构建现代Web应用的标准做法。

流式 HTML – 无需 JavaScript 即可实现异步 DOM 更新

2024-08-08

流式 HTML 是一种技术，它允许你在不使用 JavaScript 的情况下，异步更新 DOM。这是通过 HTML 中的 async 属性以及一些特殊的自定义元素实现的。

以下是一个简单的例子，展示如何使用流式 HTML 来异步更新 DOM：




<!DOCTYPE html>
<html>
<head>
    <title>Streaming HTML Example</title>
</head>
<body>
    <h1>流式 HTML 更新 DOM 示例</h1>
    <async-content>
        <!-- 在这里插入异步加载的内容 -->
    </async-content>
 
    <script>
        // 自定义元素的构造函数
        class AsyncContent extends HTMLElement {
            constructor() {
                super();
                // 创建一个 Shadow DOM
                const shadow = this.attachShadow({mode: 'open'});
                // 添加一个模板
                const template = document.createElement('template');
                template.innerHTML = `
                    <style>
                        p { color: blue; }
                    </style>
                    <p>加载中...</p>
                `;
                shadow.appendChild(template.content.cloneNode(true));
                
                // 异步获取内容并更新 DOM
                fetch('content.html')
                    .then(response => response.text())
                    .then(htmlContent => {
                        shadow.querySelector('p').innerHTML = htmlContent;
                    })
                    .catch(error => {
                        console.error('Error fetching content:', error);
                        shadow.querySelector('p').textContent = '内容加载失败';
                    });
            }
        }
 
        // 定义自定义元素
        customElements.define('async-content', AsyncContent);
    </script>
</body>
</html>

在这个例子中，我们定义了一个名为 async-content 的自定义元素，并在其构造函数中创建了一个 Shadow DOM。我们还添加了一个模板，其中包含加载时显示的文本。接着，我们使用 fetch API 异步获取外部内容，并在成功获取后更新 Shadow DOM 中的 <p> 元素的内容。如果获取过程中出现错误，我们会在 <p> 元素中显示错误信息。这个例子展示了如何使用流式 HTML 技术和自定义元素来实现 DOM 的异步更新，而无需 JavaScript。

2024-08-08

以下是一个简化的代码示例，展示了如何在树莓派上使用Flask来提供一个基于HTML和JavaScript的用户界面，并与MQTT代理进行通信以使用文心一言进行自然语言处理：




from flask import Flask, render_template, request, jsonify
import paho.mqtt.client as mqtt
import requests
 
app = Flask(__name__)
 
# MQTT 配置
MQTT_BROKER = "your_mqtt_broker_address"
MQTT_PORT = 1883
MQTT_KEEPALIVE_TIME = 60
 
# MQTT 客户端实例
client = mqtt.Client("pi_control_system")
client.connect(MQTT_BROKER, MQTT_PORT, MQTT_KEEPALIVE_TIME)
client.loop_start()
 
# 文心一言API配置
WUJUN_API_URL = "http://your_wujunyiyan_api_address"
 
@app.route("/")
def index():
    return render_template("index.html")
 
@app.route("/ask", methods=["POST"])
def ask():
    question = request.form["question"]
    data = {"text": question}
    response = requests.post(WUJUN_API_URL, json=data)
    return jsonify(response.json)
 
@app.route("/control", methods=["POST"])
def control():
    device = request.form["device"]
    action = request.form["action"]
    client.publish(f"control/{device}", action)
    return jsonify({"status": "success"})
 
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

在这个简化的代码示例中，我们创建了一个Flask应用程序，提供了两个路由：/用于渲染HTML页面，/ask用于向文心一言API发送请求并返回响应。另外，/control路由用于接收前端发送的控制命令，并将这些命令发送到MQTT代理，进而可能被树莓派上的其他智能设备执行。

注意：这个示例假设你已经有了文心一言API的有效地址和MQTT代理的配置信息。此外，对于MQTT客户端的实现和API请求的处理，你可能需要根据你的实际环境进行相应的调整。

JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

2024-08-08

以下是一个简化的代码示例，展示了如何使用jQuery、HTML和JavaScript来实现地图位置选取和地址模糊查询的基本功能。




<!DOCTYPE html>
<html>
<head>
    <title>地图选点和模糊查询</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入地图相关的JS库 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <style>
        #map {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <input type="text" id="address" placeholder="请输入地址">
    <button id="findAddress">查询</button>
 
    <script>
        var map;
        var geocoder;
        var marker;
 
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({map: map});
 
            $('#findAddress').on('click', function() {
                var address = $('#address').val();
                geocodeAddress(geocoder, map, marker, address);
            });
        }
 
        function geocodeAddress(geocoder, map, marker, address) {
            geocoder.geocode({'address': address}, function(results, status) {
                if (status === 'OK') {
                    map.setCenter(results[0].geometry.location);
                    marker.setPosition(results[0].geometry.location);
                } else {
                    alert('找不到地址: ' + status);
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，我们首先在HTML中定义了地图容器和用于输入地址的输入框，以及一个触发地址查询的按钮。在JavaScript部分，我们初始化了Google地图，并在地图上设置了一个标记，用于表示用户选取的位置。我们还为查询按钮绑定了点击事件，当用户点击按钮时，会调用geocodeAddress函数，使用Google地理编码服务查询输入的地址，并将查询结果显示在地图上。

请注意，您需要替换YOUR_API_KEY为您自己的Google Maps API密钥，以确保地图功能正常。

js插入节点/创建节点

2024-08-08

所有,css3

在JavaScript中，可以使用document.createElement方法创建新的节点，并使用Node.appendChild或Node.insertBefore方法将新创建的节点插入到DOM中。

例如，要创建一个<div>元素并将其插入到页面的<body>中，可以这样做：




// 创建一个新的div元素
var newDiv = document.createElement("div");
 
// 为新div添加内容
var newContent = document.createTextNode("这是新插入的div内容");
newDiv.appendChild(newContent);
 
// 插入到body中
document.body.appendChild(newDiv);

如果要插入到特定的位置，可以先找到该位置的节点，然后使用parentNode.insertBefore(newNode, referenceNode)方法：




// 假设已经存在一个元素，将新div插入到这个元素之前
var referenceElement = document.getElementById("existing-element");
var newDiv = document.createElement("div");
var newContent = document.createTextNode("这是新插入的div内容");
newDiv.appendChild(newContent);
 
// 插入到referenceElement之前
referenceElement.parentNode.insertBefore(newDiv, referenceElement);

以上代码展示了如何创建和插入新的节点。

2024-08-08

所有,css3

在HTML5、CSS3和JavaScript的基础上，我们可以创建一个简单的网页框架。以下是一个简单的HTML5文档结构示例，包含了必要的CSS和JavaScript引用：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端框架示例</title>
    <style>
        /* 在这里写入CSS样式 */
    </style>
</head>
<body>
    <!-- 页面内容 -->
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用HTML5, CSS3 和 JavaScript 创建的网页。</p>
 
    <!-- 在这里引入JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

在<style>标签中，你可以添加CSS样式来装饰你的页面。在<script src="script.js"></script>中，你可以引入外部的JavaScript文件来增加页面的交互性。

CSS样式示例：




body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}
 
h1 {
    color: #333;
    text-align: center;
}
 
p {
    color: #555;
    text-align: justify;
}

JavaScript示例（假设script.js文件包含以下代码）：




document.addEventListener('DOMContentLoaded', (event) => {
    console.log('页面已加载完成！');
});

这个简单的示例展示了如何组织一个基本的HTML5网页，并通过外部引入CSS和JavaScript来增强页面功能和样式。

2024-08-08

所有,css3

以下是一个使用HTML和CSS制作的简单的520情人节表白网页示例，包含一个CSS3动画的爱心背景：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>520表白网页</title>
<style>
  @keyframes heart-burst {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 0;
    }
  }
  body, html {
    height: 100%;
    margin: 0;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .heart {
    width: 100px;
    height: 100px;
    background: #ff0000;
    position: relative;
    animation: heart-burst 5s infinite;
  }
  .heart::before,
  .heart::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff0000;
  }
  .heart::before {
    left: -50px;
    top: 0;
    border-radius: 50% 0 0 0;
  }
  .heart::after {
    left: 0;
    top: -50px;
    border-radius: 0 0 0 50%;
  }
</style>
</head>
<body>
<div class="heart"></div>
<h1>我爱你！</h1>
</body>
</html>

这段代码创建了一个心形的背景，利用CSS3动画在屏幕中心弹力形成。同时，在心形的上方加上了“我爱你！”的表白话语。这个示例简单易懂，适合新手学习HTML和CSS的基础。

2024-08-08

所有,css

在Vue中，可以通过CSS媒体查询来实现不同分辨率下的不同样式，同时结合JavaScript来动态调整样式。以下是一个简单的例子：

在Vue组件的<style>标签中使用CSS媒体查询来定义不同分辨率下的样式规则：




/* 全屏样式 */
.fullscreen-style {
  /* 一些基础样式 */
}
 
/* 屏幕宽度小于600px时应用的样式 */
@media screen and (max-width: 600px) {
  .fullscreen-style {
    /* 小屏幕上的样式调整 */
  }
}
 
/* 屏幕宽度在600px到1200px之间时应用的样式 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
  .fullscreen-style {
    /* 中屏幕上的样式调整 */
  }
}
 
/* 屏幕宽度大于1200px时应用的样式 */
@media screen and (min-width: 1200px) {
  .fullscreen-style {
    /* 大屏幕上的样式调整 */
  }
}

使用JavaScript的window.innerWidth属性来获取当前浏览器的宽度，并根据宽度动态添加或移除类名：




export default {
  data() {
    return {
      currentBreakpoint: 'full' // 初始化为full以适应所有屏幕
    };
  },
  mounted() {
    this.updateBreakpoint();
    window.addEventListener('resize', this.updateBreakpoint);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateBreakpoint);
  },
  methods: {
    updateBreakpoint() {
      const breakpoints = {
        full: 0,
        small: 600,
        medium: 1200
      };
      let newBreakpoint = 'full';
      for (const [key, value] of Object.entries(breakpoints)) {
        if (window.innerWidth < value) {
          newBreakpoint = key;
          break;
        }
      }
      this.currentBreakpoint = newBreakpoint;
    }
  }
};

在上面的Vue组件中，我们定义了三个断点：full、small和medium。在mounted生命周期钩子中，我们调用updateBreakpoint方法来设置初始断点，并监听resize事件以便在窗口大小变化时更新当前断点。在beforeDestroy生命周期钩子中，我们移除监听器以防止内存泄漏。

这样，Vue组件会根据当前浏览器的宽度动态应用对应的CSS样式。