分类 javascript 下的文章

2024-08-19

在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为全局可用，可以通过以下步骤完成：

安装Node.js：在宝塔面板中，选择软件管理 -> Node.js，然后安装你需要的Node.js版本。
配置环境变量：安装完成后，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服务代码编译并部署到服务器，你可以遵循以下步骤：

在本地开发环境中编写和测试你的Node.js服务代码。
确保所有依赖项都在package.json文件中列出，并且已经安装好。
使用npm或yarn安装所有依赖项：
```
npm install
# 或者
yarn install
```
进行代码编译（如果需要）。如果你使用的是TypeScript或Babel等编译器，运行编译命令：
```
npm run build
# 或者
yarn build
```
打包你的应用程序。你可以使用tar命令或其他打包工具将所有文件压缩成一个包：
```
tar -czvf node_app.tar.gz .
```
将打包好的文件上传到服务器。你可以使用scp或其他文件传输工具：
```
scp node_app.tar.gz user@server_ip:/path/to/directory
```

在服务器上解压缩文件：




mkdir node_app
tar -xzvf node_app.tar.gz -C node_app

在服务器上安装Node.js和npm（如果尚未安装）。

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




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

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

System

2024-08-19

所有,javascript

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

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

解决方案通常涉及检查网络连接、更新代码以修复初始化错误、确保浏览器兼容性以及处理可能的跨域问题。如果问题依然存在，可以考虑查看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 变量，因为闭包保持了这个变量的引用。

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配置，并确保项目能够运行和进行代码校验。

- 阅读更多 -

Vue初入，了解Vue的发展与优缺点

System

2024-08-19

所有,javascript

Vue是一个渐进式JavaScript框架，它的目标是通过尽可能简单的API提供高效的数据驱动的组件。

Vue的发展历程：

2013年，由中国的开发者Evan You开发，最初命名为Seed。
2014年，Seed更名为Meteor，并发布了第一个版本。
2015年，Evan You开始了新项目，命名为Vue，并在GitHub上开源。
2016年，Vue 1.0发布，但并未获得广泛的关注。
2017年，Vue 2.0发布，引入了很多新特性，如单文件组件、数据绑定、虚拟DOM等，并且性能有了大幅提升。
2020年，Vue 3.0发布，引入了Composition API、更好的TypeScript支持、更优化的渲染机制等。

Vue的优点：

轻量级：Vue.js 库非常小，通常通过CDN直接在浏览器中加载，无需构建系统。
快速：Vue 使用基于依赖追踪的响应式系统，更新视图时非常快速。
组合式API：Vue 3 的 Composition API 允许开发者以更简洁的方式组合业务逻辑。
虚拟DOM：Vue 使用了虚拟DOM，只会更新变化的部分，减少了重绘的开销。
社区活跃：Vue 拥有一个庞大且活跃的社区，有很多第三方库和插件可供选择。

示例代码：




<!DOCTYPE html>
<html>
<head>
  <title>Vue 示例</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
 
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    });
 
    const vm = app.mount('#app');
  </script>
</body>
</html>

这段代码创建了一个简单的Vue应用，其中包含一个含有message数据属性的组件，该属性绑定到了DOM中id为app的div元素上。当message属性变化时，视图会自动更新。

- 阅读更多 -