1. 首页
  2. 标签
  3. Javascript
JS三种for遍历方法
System
2024-08-19
所有,javascript

JavaScript中常见的三种for循环遍历方法：

  1. 传统for循环



for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}
  1. for...in循环（不建议用于数组遍历，常用于对象属性的遍历）



for (let key in array) {
    if (array.hasOwnProperty(key)) { // 检查属性是否是对象自身的
        console.log(array[key]);
    }
}
  1. forEach方法（需要数组上下文，无法使用break、continue、return语句控制循环）



array.forEach(function(value, index) {
    console.log(value);
});
  1. for...of循环（ES6新增，可用于遍历数组、字符串、Map、Set等可迭代的数据结构）



for (let value of array) {
    console.log(value);
}

每种方法都有其适用场景，选择合适的遍历方法取决于具体需求。

- 阅读更多 -
nodejs服务端实现post请求
System
2024-08-19
所有,javascript

在Node.js中，可以使用内置的http模块来创建一个简单的服务器，并处理POST请求。以下是一个简单的例子，使用http模块和querystring模块来处理POST请求：




const http = require('http');
const querystring = require('querystring');
 
const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString(); // 转换为字符串
    });
    req.on('end', () => {
      const parsedData = querystring.parse(body);
      // 处理POST数据
      console.log(parsedData);
      res.end('POST request received');
    });
  } else {
    // 对于其他HTTP方法，返回405 Method Not Allowed
    res.statusCode = 405;
    res.end('Method Not Allowed');
  }
});
 
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

这段代码创建了一个监听在端口3000的HTTP服务器。对于POST请求，它会读取请求体中的数据，并使用querystring.parse解析成一个对象。然后，你可以根据需要处理这些数据。对于非POST请求，它会返回一个405状态码。

- 阅读更多 -
在宝塔linux中把nodejs设置成全局可用node命令执行
System
2024-08-19
所有,javascript

在宝塔面板中设置Node.js为全局可用，可以通过以下步骤完成：

  1. 安装Node.js：在宝塔面板中，选择软件管理 -> Node.js，然后安装你需要的Node.js版本。
  2. 配置环境变量：安装完成后，Node.js 默认不会添加到全局变量 PATH 中。你需要手动配置环境变量，使得 node 和 npm 命令可以在任何位置执行。

以下是配置环境变量的步骤：

a. 登录SSH终端。

b. 执行以下命令，找到Node.js和npm的安装路径：




which node
which npm

c. 使用你喜欢的文本编辑器（如 vim 或 nano）编辑 /etc/profile 文件：




vi /etc/profile

d. 在文件的末尾添加以下内容（替换 [Node.js安装路径] 为实际路径）：




export NODE_HOME=[Node.js安装路径]
export PATH=$PATH:$NODE_HOME/bin

e. 保存并退出编辑器。

f. 使环境变量更改立即生效，执行：




source /etc/profile

现在，你应该能够在任何位置使用 node 和 npm 命令了。可以通过执行 node -v 和 npm -v 来验证是否配置成功。

- 阅读更多 -
three.js使用dragControls实现拖动
System
2024-08-19
所有,javascript

在Three.js中，可以使用DragControls来实现对物体的拖动功能。以下是一个简单的例子，展示了如何使用DragControls来拖动一个立方体。

首先，确保你已经引入了Three.js库和DragControls.js模块。




<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r128/examples/jsm/controls/DragControls.js"></script>

然后，创建一个场景、相机、渲染器和一个物体：




// 创建场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
camera.position.z = 5;

接下来，初始化拖动控件并添加你想要拖动的物体：




const dragControls = new THREE.DragControls([cube], camera, renderer.domElement);

最后，在渲染循环中更新拖动控件的状态并渲染场景：




function animate() {
    requestAnimationFrame(animate);
 
    // 更新拖动控件
    dragControls.update();
 
    // 渲染场景
    renderer.render(scene, camera);
}
 
animate();

完整的代码示例如下：




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Draggable Cube</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://rawcdn.githack.com/mrdoob/three.js/r128/examples/jsm/controls/DragControls.js"></script>
</head>
<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
 
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 创建立方体
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
 
        camera.position.z = 5;
 
        // 初始化拖动控件
        const dragControls = new THREE.DragControls([cube], camera, renderer.domElement);
 
        function animate() {
            requestAnimationFrame(animate);
 
            // 更新拖
- 阅读更多 -
编译打包nodejs服务代码部署到服务器
System
2024-08-19
所有,javascript

为了将Node.js服务代码编译并部署到服务器，你可以遵循以下步骤：

  1. 在本地开发环境中编写和测试你的Node.js服务代码。
  2. 确保所有依赖项都在package.json文件中列出，并且已经安装好。

  3. 使用npm或yarn安装所有依赖项：

    


npm install
# 或者
yarn install

  4. 进行代码编译（如果需要）。如果你使用的是TypeScript或Babel等编译器，运行编译命令：

    


npm run build
# 或者
yarn build

  5. 打包你的应用程序。你可以使用tar命令或其他打包工具将所有文件压缩成一个包：

    


tar -czvf node_app.tar.gz .

  6. 将打包好的文件上传到服务器。你可以使用scp或其他文件传输工具：

    


scp node_app.tar.gz user@server_ip:/path/to/directory

  7. 在服务器上解压缩文件：

    


mkdir node_app
tar -xzvf node_app.tar.gz -C node_app
  8. 在服务器上安装Node.js和npm（如果尚未安装）。

  9. 在服务器上启动你的Node.js应用程序：

    


cd node_app
npm start
# 或者如果你的启动脚本是其他名称，例如`server.js`
node server.js

确保服务器的防火墙和安全组设置允许你使用的端口进行通信。如果你的应用程序需要后台运行，可以使用screen或pm2等工具来确保应用程序持续运行。

- 阅读更多 -
vue项目中视频实时播放时 播放器遇到的问题和解决过程 flv.js - EasyPlayer - LivePlayer
System
2024-08-19
所有,javascript

问题描述不够详细，无法提供精确的解决方案。但是，我可以提供一个通用的解决流程，用于处理在使用EasyPlayer进行flv格式视频实时播放时可能遇到的问题：

  1. 确认flv.js库是否正确引入项目中。
  2. 检查视频流地址是否正确，服务器是否能正常提供flv视频流。
  3. 确认是否有正确的网络权限来访问视频流。
  4. 检查flv.js的初始化代码是否正确，包括是否指定了正确的播放容器和视频流地址。
  5. 查看浏览器是否支持flv格式视频的实时播放。
  6. 如果播放器出现错误，检查控制台输出的错误信息，根据错误信息进行针对性的解决。

解决方案通常涉及检查网络连接、更新代码以修复初始化错误、确保浏览器兼容性以及处理可能的跨域问题。如果问题依然存在，可以考虑查看EasyPlayer的文档或者寻求社区的帮助。

- 阅读更多 -
【THREE.JS】网页中的炫酷3D
System
2024-08-19
所有,javascript

在Web中创建炫酷的3D内容通常需要使用Three.js库。以下是一个简单的Three.js示例，它创建了一个包含一个立方体的场景：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的Three.js示例</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 场景
        var scene = new THREE.Scene();
 
        // 相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
 
        // 渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 立方体
        var geometry = new THREE.BoxGeometry();
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
 
        // 旋转立方体
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
 
        animate();
    </script>
</body>
</html>

这段代码创建了一个简单的3D场景，包含一个绿色的立方体，并且会持续旋转。Three.js提供了丰富的几何形状、材质和效果，可用于创建各种复杂的3D动画和交互式应用。

- 阅读更多 -
js(JavaScript)数据结构之树（Tree）
System
2024-08-19
所有,javascript

在JavaScript中，树是一种常见的数据结构，它可以用来表示层级关系。下面是一个简单的树结构实现，以及如何使用它的示例代码。




class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
 
  addChild(childNode) {
    this.children.push(childNode);
  }
}
 
class Tree {
  constructor() {
    this.root = null;
  }
 
  addNode(value) {
    const newNode = new TreeNode(value);
    if (!this.root) {
      this.root = newNode;
    }
    return newNode;
  }
 
  traverse(callback) {
    function traverseNode(node) {
      callback(node.value);
      node.children.forEach((child) => {
        traverseNode(child);
      });
    }
    if (this.root) {
      traverseNode(this.root);
    }
  }
}
 
// 使用示例
const tree = new Tree();
const node1 = tree.addNode('A');
const node2 = tree.addNode('B');
const node3 = tree.addNode('C');
const node4 = tree.addNode('D');
const node5 = tree.addNode('E');
 
node1.addChild(node2);
node1.addChild(node3);
node2.addChild(node4);
node2.addChild(node5);
 
tree.traverse((value) => console.log(value));  // 输出树的节点值

这段代码首先定义了一个TreeNode类来表示树中的节点，每个节点可以有多个子节点。然后定义了一个Tree类，它可以添加节点，并且提供了一个遍历整棵树的方法。最后，我们创建了一个树，添加了节点并构建了节点之间的层级关系，并使用traverse方法遍历了整棵树，打印出每个节点的值。

- 阅读更多 -
深入理解JS中的闭包
System
2024-08-19
所有,javascript

闭包是JavaScript中一个重要的概念，它允许你从内部函数访问外部函数作用域时的变量，即使外部函数已经执行完毕。

闭包的一个常见用途是创建可以访问和修改私有变量的函数，这样可以隐藏数据，创建不可变对象，或者创建工厂模式等。

下面是一个简单的闭包例子：




function createCounter() {
  let count = 0;
  return function increment() {
    count++;
    console.log(count);
  };
}
 
const counter = createCounter();
counter(); // 输出: 1
counter(); // 输出: 2

在这个例子中，createCounter 是一个外部函数，它返回一个内部函数 increment。increment 函数可以访问并修改 createCounter 作用域中的 count 变量。即使 createCounter 函数执行完毕并返回后，increment 仍然可以访问 count 变量，因为闭包保持了这个变量的引用。

- 阅读更多 -
vue3+js+viter+element UI+Axios+pinia+ESLint校验的项目初始化基本流程
System
2024-08-19
所有,javascript



# 安装Vite
npm init vite@latest my-vue-app --template vue-ts
 
# 进入项目目录
cd my-vue-app
 
# 安装依赖
npm install
 
# 安装Element Plus
npm install element-plus --save
 
# 安装Axios
npm install axios --save
 
# 安装Pinia
npm install pinia --save
 
# 安装ESLint及相关插件
npm install eslint eslint-plugin-vue --save-dev
 
# 初始化ESLint配置文件
npx eslint --init
 
# 安装Vue3相关插件
npm install sass --save-dev
npm install sass-loader --save-dev
npm install vue-tsc --save-dev
 
# 安装其他必要的依赖
npm install prettier --save-dev

以上命令将会创建一个名为my-vue-app的Vue 3项目，并安装Element UI、Axios、Pinia以及ESLint及其必要的插件。同时，它还会初始化ESLint配置，并确保项目能够运行和进行代码校验。

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