分类前端技术下的文章

2024-08-19

在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属性变化时，视图会自动更新。

- 阅读更多 -

超级详细的若依配置，包含nvm、nodejs，利用vscode配置前台若依

System

2024-08-19

所有,javascript

若依平台是基于Node.js的开发框架，以下是配置过程的简化版：

安装NVM（Node Version Manager）：
- 下载并安装NVM：https://github.com/nvm-sh/nvm#install--update-script
- 在终端运行以下命令安装Node.js：
```
nvm install node
```
使用npm安装若依前台：
```
npm install ruoyi-ui
```
配置VSCode以便开发：
- 安装必要的VSCode插件，如ESLint、Prettier等。
- 在VSCode中打开若依前台目录。
- 配置launch.json以启动前端项目。

以下是一个简化的launch.json配置示例，用于在VSCode中启动前端项目：




{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "启动前端",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

确保你的前端项目运行在8080端口，然后在VSCode中使用这个配置启动它。

注意：具体的配置可能会根据你的项目和环境有所不同，需要根据实际情况调整。

- 阅读更多 -

消灭前端闪烁魔鬼：Vue中的防抖术

System

2024-08-19

所有,vue.js

在Vue中，防抖可以通过定义一个自定义指令来实现，该指令可以包装事件监听器，并且只在用户停止输入一段时间后才触发。以下是一个简单的防抖指令的示例代码：




// 导入Vue
import Vue from 'vue';
 
// 定义防抖指令
Vue.directive('debounce', {
  // 当绑定元素 attribute 被插入到 DOM 中
  bind(el, binding, vnode) {
    let timeout = null;
    el.addEventListener(binding.arg, e => {
      if (timeout !== null) clearTimeout(timeout);
      timeout = setTimeout(() => {
        binding.value(e);
      }, binding.value.delay || 300);
    });
  }
});
 
// 在组件中使用
export default {
  methods: {
    // 防抖函数
    onInputDebounced(event) {
      console.log('输入内容变更:', event.target.value);
    }
  }
};
 
// 在模板中
<template>
  <input v-debounce:input="onInputDebounced" />
</template>

在这个例子中，我们定义了一个名为 debounce 的Vue指令，它会在绑定的事件（默认为 input）触发时设置一个延时。如果在这个延时期间再次触发该事件，则会清除当前的延时并重新设置。只有在延时期满后，绑定的方法会被调用一次。通过这种方式，我们可以防止在快速连续输入时频繁触发事件处理函数，从而减少不必要的计算或DOM操作。

- 阅读更多 -

Three.js给场景添加背景颜色，背景图，全景图

System

2024-08-19

所有,javascript

在Three.js中，您可以通过几种方式为场景设置背景色、背景图和全景图。

设置背景色：




// 创建场景
var scene = new THREE.Scene();
 
// 设置背景色
scene.background = new THREE.Color(0xff0000); // 红色背景

设置背景图：




// 创建场景
var scene = new THREE.Scene();
 
// 加载背景图纹理
var loader = new THREE.TextureLoader();
loader.load('path/to/your/background/image.jpg', function(texture) {
    // 设置背景材质
    scene.background = texture;
});

添加全景图（天空盒）：




// 创建场景
var scene = new THREE.Scene();
 
// 创建全景图材质
var material = new THREE.CubeTextureLoader()
    .setPath('path/to/your/skybox/')
    .load(
        ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']
    );
 
// 创建天空盒
var mesh = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), new THREE.MeshBasicMaterial({ map: material, side: THREE.BackSide }));
 
// 添加到场景
scene.add(mesh);

确保替换path/to/your/background/image.jpg和path/to/your/skybox/为实际的图片路径，并且将全景图六个面的图片文件名替换为正确的文件名。

- 阅读更多 -

如何使用 Docker 部署 Nest.js

System

2024-08-19

所有,javascript

要使用Docker部署Nest.js应用，你需要创建一个Dockerfile，并且可能还需要一个docker-compose.yml文件，如果你想要同时运行数据库等依赖服务的话。

以下是一个简单的例子：

首先，确保你的Nest.js项目中有一个Dockerfile：




# 使用Node.js官方Docker镜像
FROM node:16
 
# 设置工作目录为/usr/src/app
WORKDIR /usr/src/app
 
# 复制package.json文件和package-lock.json文件
COPY package*.json ./
 
# 安装项目依赖
RUN npm install
 
# 复制所有源代码到工作目录
COPY . .
 
# 暴露容器端口
EXPOSE 3000
 
# 运行Nest.js应用
CMD ["npm", "start"]

然后，创建一个docker-compose.yml文件来定义服务：




version: '3'
services:
  nestjs:
    build: .
    ports:
      - "3000:3000"

在你的Nest.js项目目录中，运行以下命令来构建和启动Docker容器：




docker-compose up --build

这将会构建你的Docker镜像，并启动一个服务，将容器的3000端口映射到主机的3000端口。

确保你的Nest.js项目的package.json中有start脚本定义，例如：




{
  "scripts": {
    "start": "nest start"
  }
}

这样，当你运行npm start时，Nest.js就会启动并监听3000端口。

System

2024-08-19

所有,javascript

题目描述：

给定一个学生信息列表，每个学生信息由姓名和身高组成。要找到身高最接近的小友。如果有多对小友身高相同，则输出字典序最小的一对。

输入描述：

学生信息列表，每个学生信息由姓名和身高组成，姓名和身高由空格分隔，学生信息由换行分隔。

输出描述：

找到身高最接近的小友的信息，姓名和身高之间用空格分隔。

示例输入：

Bob 120

Alice 130

Jane 110

示例输出：

Jane 110 Bob 120

解决方案：

Java 代码实现：




import java.util.*;
 
public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<Student> students = new ArrayList<>();
        while (scanner.hasNextLine()) {
            String[] info = scanner.nextLine().split(" ");
            students.add(new Student(info[0], Integer.parseInt(info[1])));
        }
        Student[] closestFriends = findClosestFriends(students);
        System.out.println(closestFriends[0].name + " " + closestFriends[0].height + " " + closestFriends[1].name + " " + closestFriends[1].height);
    }
 
    private static Student[] findClosestFriends(List<Student> students) {
        students.sort(Comparator.comparingInt(s -> s.height));
        int minDiff = Integer.MAX_VALUE;
        Student[] closest = new Student[2];
        for (int i = 1; i < students.size(); i++) {
            int diff = Math.abs(students.get(i).height - students.get(i - 1).height);
            if (diff < minDiff) {
                minDiff = diff;
                closest[0] = students.get(i - 1);
                closest[1] = students.get(i);
            }
        }
        return closest;
    }
 
    static class Student {
        String name;
        int height;
 
        public Student(String name, int height) {
            this.name = name;
            this.height = height;
        }
    }
}

Python 代码实现：




import sys
 
def find_closest_friends(students):
    students.sort(key=lambda s: s.height)
    min_diff = sys.maxsize
    closest = [None, None]
    for i in range(1, len(students)):
        diff = abs(students[i].height - students[i - 1].height)
        if diff < min_diff:
            min_diff = diff
            closest[0] = students[i - 1]
            closest[1] = students[i]
    return closest
 
class Student:
    def __init__(self, name, height):
        self.name = name
        self.height = height
 
if __name__ == "__main__":
    students = []
    for line in sys.stdin:
        name, height = line.split()
        students.append(Student(name, int(height)))
    closest_friends = find_closest_friends(students)
    print(f"{closest_friends[0].name} {

- 阅读更多 -