1. 首页
  2. 标签
  3. Javascript
一篇文章了解 threejs 在 vue 项目中的基本使用
System
2024-08-15
所有,vue.js



<template>
  <div id="container"></div>
</template>
 
<script>
import * as THREE from 'three';
 
export default {
  name: 'ThreeJsComponent',
  mounted() {
    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.getElementById('container').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 animate = function () {
      requestAnimationFrame(animate);
 
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
    };
 
    animate();
  }
}
</script>
 
<style>
#container {
  height: 100vh;
}
</style>

这段代码在Vue组件的mounted生命周期钩子中初始化了一个Three.js场景，创建了一个3D立方体，并设置了相机、渲染器，然后开始了循环动画渲染流程。这是Three.js在Vue项目中的一个基本用法示例。

- 阅读更多 -
Web前端开发实战：HTML5+CSS3+JavaScript+Vue+Bootstrap
System
2024-08-15
所有,vue.js

这是一个Web前端开发的简单示例，使用了HTML5, CSS3, JavaScript, Vue.js 和 Bootstrap。这个示例创建了一个简单的网站，展示了如何使用这些技术构建一个响应式网页。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web前端实战示例</title>
    <!-- 引入Bootstrap样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <style>
        /* 自定义CSS样式 */
        .jumbotron {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="jumbotron">
            <h1 class="display-4">{{ title }}</h1>
            <p class="lead">{{ subtitle }}</p>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ cards[0].title }}</h5>
                        <p class="card-text">{{ cards[0].text }}</p>
                    </div>
                </div>
            </div>
            <!-- 其他列组件 -->
        </div>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                title: '欢迎来到我的网站',
                subtitle: '这是一个简单的Vue.js + Bootstrap网页',
                cards: [
                    { title: '卡片1', text: '这是卡片的内容。' },
                    // 其他卡片数据
                ]
            }
        });
    </script>
</body>
</html>

这个示例展示了如何使用Vue.js来创建数据驱动的视图，以及如何使用Bootstrap提供的样式库来快速构建响应式网页。这个简单的网站可以作为学习Web前端开发的起点。

- 阅读更多 -
NodeJS中实现一个真正的Sleep，Sleep期间不影响其它线程执行
System
2024-08-15
所有,javascript

在Node.js中，实现一个真正的sleep函数，即在指定的时间内暂停代码执行，但不影响其他线程执行，可以使用Promise结合setTimeout来实现。这里的"真正的sleep"意味着当前线程会暂停执行，但不会阻塞事件循环，从而不影响其他线程的执行。

以下是一个简单的实现：




function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
 
// 使用方法
async function demo() {
  console.log('Before sleep');
  await sleep(2000); // 暂停2秒
  console.log('After sleep');
}
 
demo();

在上面的代码中，sleep函数返回一个Promise，在指定的时间ms后调用resolve，这样await sleep(2000)会暂停执行2秒钟，但不会阻塞事件循环。这样其他线程可以正常执行。

- 阅读更多 -
EdgeOne 边缘函数 + Hono.js + Fauna 搭建个人博客
System
2024-08-15
所有,javascript

以下是一个使用EdgeOne、Hono.js和FaunaDB搭建个人博客的高层次架构示例。请注意，EdgeOne和Hono.js的具体API和配置细节可能会随着时间而变化，因此以下代码示例仅供参考。

  1. 安装EdgeOne CLI工具：



npm install -g edgeone
  1. 使用EdgeOne创建一个新的函数：



// 保存为 blog.js
module.exports = async function(context, callback) {
  const faunadb = require('faunadb'),
        q = faunadb.query;
 
  const client = new faunadb.Client({
    secret: context.secrets.FAUNADB_SECRET // 从环境变量中获取
  });
 
  // 假设这是一个处理博客文章的逻辑
  const post = {
    title: context.body.title,
    content: context.body.content
  };
 
  try {
    const response = await client.query(
      q.Create(q.Collection('posts'), { data: post })
    );
    callback(null, { body: response.data });
  } catch (error) {
    callback(error);
  }
};
  1. 在Hono.js中配置API端点来使用这个函数：



const edgeOne = require('edgeone');
 
// 假设已经有一个Hono.js服务器实例
const server = Hono.post("/posts") // 定义一个处理POST请求的路由
  .receiveJson() // 接收JSON类型的请求体
  .bind(edgeOne("blog.js")) // 绑定之前创建的EdgeOne函数
  .done(); // 完成路由配置
 
server.start(); // 启动服务器
  1. 在FaunaDB中创建集合和权限：



// 使用FaunaDB的CLI或者控制台执行以下查询
CreateCollection({ name: "posts" })
CreateRole({
  name: "blog_role",
  privileges: [{ collection: "posts", actions: ["create"] }],
  roles: ["public"]
})

以上代码示例提供了一个基本框架，展示了如何将EdgeOne函数与Hono.js和FaunaDB集成。请注意，这只是一个教育性示例，并且可能需要根据实际需求进行调整和扩展。

- 阅读更多 -
React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App
System
2024-08-15
所有,javascript

以下是一个简化的React、TypeScript、NodeJS和MongoDB搭配使用的Todo App的核心代码示例。

前端部分（React + TypeScript）




import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
const App: React.FC = () => {
  const [todos, setTodos] = useState([]);
 
  useEffect(() => {
    axios.get('/api/todos').then(response => {
      setTodos(response.data);
    });
  }, []);
 
  // ... 其他UI渲染和功能代码
};
 
export default App;

后端部分（NodeJS + TypeScript）




import express from 'express';
import mongoose from 'mongoose';
 
const app = express();
const port = 3001;
 
// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/todos_app', { useNewUrlParser: true });
 
// 定义Todo模型
const todoSchema = new mongoose.Schema({
  name: String,
  isCompleted: Boolean
});
const Todo = mongoose.model('Todo', todoSchema);
 
// 获取所有Todos
app.get('/api/todos', (req, res) => {
  Todo.find({}, (err, todos) => {
    if (err) {
      res.send(err);
    } else {
      res.json(todos);
    }
  });
});
 
// ... 其他API端点处理代码
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

以上代码仅展示了核心功能，实际应用中还需要包含数据库模型、验证器、错误处理等。这个示例旨在展示如何使用React构建前端界面，以及如何使用NodeJS和MongoDB构建后端API。

- 阅读更多 -
win7系统为搭建vue3环境安装高版本nodejs和pnpm踩的坑
System
2024-08-15
所有,javascript

在Windows 7上安装较新版本的Node.js和使用pnpm时可能会遇到兼容性问题。以下是解决这些问题的方法：

  1. 安装Node.js：

    • 由于Windows 7不支持Node.js的最新版本（如Node.js 16及以上），你需要安装一个较低的版本，例如Node.js 14。可以使用nvm（Node Version Manager）来管理不同版本的Node.js。

  2. 使用pnpm：

    • 如果你想使用pnpm而不是npm或yarn，你需要确保使用与Node.js版本兼容的pnpm版本。

以下是具体步骤：

  1. 安装nvm：

  2. 安装Node.js 14：

    • 打开命令提示符（cmd）或PowerShell，运行以下命令：

      


nvm install 14
nvm use 14
nvm alias default 14

  3. 安装pnpm：

    • 使用npm安装pnpm：

      


npm install -g pnpm

如果在安装过程中遇到权限问题，可能需要以管理员身份运行命令提示符。

注意：确保你安装的Node.js和pnpm版本与你的项目和Vue 3的要求相兼容。

- 阅读更多 -
js树形结构数据扁平化(全网最详细解析)
System
2024-08-15
所有,javascript



// 假设有一个树形结构的对象数组
let treeData = [
  {
    id: 1,
    title: '一级菜单1',
    children: [
      {
        id: 2,
        title: '二级菜单1-1',
        children: [
          { id: 3, title: '三级菜单1-1-1' },
          { id: 4, title: '三级菜单1-1-2' }
        ]
      },
      { id: 5, title: '二级菜单1-2' }
    ]
  },
  { id: 6, title: '一级菜单2' }
];
 
// 使用递归函数将树形结构数据扁平化
function flattenTree(tree) {
  let result = [];
  function recurse(nodes) {
    nodes.forEach((node) => {
      result.push({ id: node.id, title: node.title });
      if (node.children && node.children.length > 0) {
        recurse(node.children);
      }
    });
  }
  recurse(tree);
  return result;
}
 
// 调用函数并打印结果
let flatData = flattenTree(treeData);
console.log(flatData);

这段代码定义了一个flattenTree函数，它接受一个树形结构的数组作为参数，并返回一个扁平化后的对象数组。这个函数通过递归遍历每个节点，收集节点的信息并最终将其放入结果数组中。这是一个常见的数据处理技巧，对于开发者需要处理树形结构数据时非常有用。

- 阅读更多 -
Moment.js 计算时间差
System
2024-08-15
所有,javascript

在Moment.js中，你可以使用moment()函数来创建时间对象，然后使用diff()函数来计算两个时间对象之间的差异。diff()函数可以接受另一个时间对象作为参数，并返回一个表示时间差的对象。你还可以指定想要得到的时间单位，比如"milliseconds"、"seconds"、"minutes"、"hours"、"days"等。

以下是一个使用Moment.js计算时间差的例子：




// 引入Moment.js库
const moment = require('moment');
 
// 创建两个时间对象
const startTime = moment('2023-01-01');
const endTime = moment('2023-12-31');
 
// 计算时间差，默认是毫秒
const difference = endTime.diff(startTime);
 
// 转换为指定的时间单位
const differenceInSeconds = endTime.diff(startTime, 'seconds');
const differenceInMinutes = endTime.diff(startTime, 'minutes');
const differenceInHours = endTime.diff(startTime, 'hours');
const differenceInDays = endTime.diff(startTime, 'days');
 
// 输出结果
console.log(`时间差（毫秒）: ${difference}`);
console.log(`时间差（秒）: ${differenceInSeconds}`);
console.log(`时间差（分钟）: ${differenceInMinutes}`);
console.log(`时间差（小时）: ${differenceInHours}`);
console.log(`时间差（天）: ${differenceInDays}`);

在这个例子中，我们计算了2023年开始到2023年结束的时间差，并将结果转换为不同的时间单位。

- 阅读更多 -
Three.js设置相机lookAt无效
System
2024-08-15
所有,javascript

解释：

在Three.js中，如果你发现camera.lookAt()函数无效，可能的原因是相机的位置或目标点未按预期改变，或者有其他的3D对象（比如一个子元素）在影响相机的视角。

解决方法：

  1. 确保在调用lookAt之前，相机的位置已经被正确设置。
  2. 确保没有其他的代码（比如动画循环中的代码）在修改相机的位置或旋转。
  3. 确保没有其他3D对象在相机视线之内或相机视角之外，这可能会影响lookAt的表现。
  4. 如果使用了任何的GUI库或者其他JavaScript库，确保没有其他的代码冲突。
  5. 如果在动画循环中调用lookAt，确保循环的逻辑没有问题，并且在每一帧都正确地调用了lookAt函数。

示例代码：




// 设置相机位置
camera.position.set(0, 0, 10);
// 设置相机目标点
var target = new THREE.Vector3(0, 0, 0);
// 使相机看向目标点
camera.lookAt(target);

确保这段代码在你的Three.js场景初始化的合适位置执行，并且没有被其他代码覆盖。如果问题依然存在，请检查是否有更新Three.js版本或相关依赖库后出现的不兼容问题。

- 阅读更多 -
vue2项目使用exceljs多表头导出
System
2024-08-15
所有,javascript

在Vue 2项目中使用exceljs实现多表头导出，你需要先安装exceljs库：




npm install exceljs

然后，你可以使用以下代码示例来创建一个包含多表头的Excel文件并导出：




import ExcelJS from 'exceljs';
 
export function exportMultiHeaderExcel(data, fileName) {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
 
  // 定义多表头
  const header = [
    ['表头1', '表头2', '表头3'],
    ['子表头1', '子表头2', '子表头3']
  ];
 
  header.forEach((headerRow, index) => {
    const row = worksheet.addRow(headerRow);
    if (index === 0) {
      // 第一行设置为多重行
      row.eachCell((cell, index) => {
        cell.fill = {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: 'FFFFFFFF' },
          bgColor: { argb: 'FF000000' }
        };
        cell.font = { bold: true };
        cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
      });
    } else {
      // 第二行设置为正常样式
      row.eachCell((cell, index) => {
        cell.font = { bold: true };
        cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
      });
    }
  });
 
  // 添加数据行
  data.forEach(rowData => {
    worksheet.addRow(rowData);
  });
 
  // 确定文件名
  fileName = fileName || 'export.xlsx';
 
  // 导出Excel文件
  workbook.xlsx.writeBuffer().then(buffer => {
    const data = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
    // 使用a标签下载文件
    const url = URL.createObjectURL(data);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
}
 
// 使用示例
const data = [
  ['单元格1', '单元格2', '单元格3'],
  ['单元格4', '单元格5', '单元格6']
];
exportMultiHeaderExcel(data, '多表头导出.xlsx');

这段代码定义了一个exportMultiHeaderExcel函数，它接受数据和文件名作为参数，然后创建一个包含多表头的Excel文件并提示用户下载。你可以根据自己的需求调整header数组来定义你的多表头结构，以及data数组来添加你的数据。

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