标签 Javascript 下的文章

2024-08-19




// 引入Compressor.js库
import Compressor from 'compressorjs';
 
// 监听文件选择事件
document.getElementById('file-input').addEventListener('change', function(e) {
    // 获取文件对象
    const file = e.target.files[0];
 
    // 使用Compressor.js压缩图片
    new Compressor(file, {
        // 压缩配置
        quality: 0.6, // 压缩质量
        maxWidth: 1024, // 最大宽度
        maxHeight: 1024, // 最大高度
        success(result) {
            // 创建FormData对象用于构建表单数据集
            const formData = new FormData();
            formData.append('image', result); // 添加压缩后的文件到表单数据集
 
            // 使用AJAX上传图片
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);
            xhr.send(formData);
        },
        error(err) {
            console.error('压缩失败:', err.message);
        },
    });
});

这段代码展示了如何使用Compressor.js库来监听文件输入，当用户选择图片文件后，使用Compressor.js压缩图片，并将压缩后的图片通过AJAX上传到服务器。

System

2024-08-19

所有,javascript

在JavaScript中，遍历数组有多种方法，以下是其中的八种方法以及它们的使用场景和优缺点：

for 循环：

优点：最基本的循环结构，执行效率高。
缺点：代码量较多，不具有函数式编程特性。




for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

forEach 方法：

优点：函数式编程风格，代码简洁。
缺点：不能使用break语句中断循环，也不能使用return语句返回到外层函数。




array.forEach(element => {
  console.log(element);
});

for...of 循环：

优点：语法简洁，支持,break，continue，return等流程控制。
缺点：不适用于遍历对象和非序列的数据结构。




for (const element of array) {
  console.log(element);
}

map 方法：

优点：可以返回一个新数组，适合进行数据转换。
缺点：不适用于需要副作用的操作，不支持break，continue等流程控制。




array.map(element => {
  console.log(element);
  return element * 2; // 示例：返回新数组
});

filter 方法：

优点：可以基于条件过滤数组元素。
缺点：不适合用于遍历操作，只适合查询。




array.filter(element => {
  console.log(element);
  return element > 0; // 示例：过滤正数
});

reduce 方法：

优点：可以对数组的所有元素进行累计操作。
缺点：不适合简单的遍历，适合累计类操作。




array.reduce((accumulator, element) => {
  console.log(element);
  return accumulator + element; // 示例：累加
}, 0);

every 方法：

优点：可以检查数组中的所有元素是否满足条件。
缺点：不适合遍历操作，只适合查询。




array.every(element => {
  console.log(element);
  return element > 0; // 示例：检查所有元素是否为正数
});

some 方法：

优点：可以检查数组中是否有满足条件的元素。
缺点：不适合遍历操作，只适合查询。




array.some(element => {
  console.log(element);
  return element > 0; // 示例：检查是否有正数
});

以上每种方法都有自己的特点，可以根据实际需求选择最合适的遍历方式。在实际应用中，应该尽量减少对数组性能的影响，尽可能使用最合适的方法来完成任务。

- 阅读更多 -

NodeJs进程出现CPU100%解决方案

System

2024-08-19

所有,javascript

解释：

Node.js进程出现CPU 100%通常意味着进程正在执行大量的计算或无限循环，导致CPU使用率飙升。这可能是由于事件循环被大量同步操作占据，或者是异步操作的回调导致的无限递归。

解决方法：

检查无限循环：确保所有循环都有明确的退出条件。
优化代码：使用setTimeout或setInterval来避免无意的循环。
使用process.nextTick或setImmediate来避免递归回调导致的栈溢出。
使用cluster模块或其他工具来利用多核CPU。
使用async/await来简化异步代码，避免回调地狱。
使用性能分析工具（如node-inspector或Node.js自带的--inspect标志）来找出占用CPU的代码。
如果是外部库或模块导致的问题，检查是否有已知的性能问题或更新版本。

示例代码：




// 错误示例 - 无限循环
while (true) {
  // 代码逻辑
}
 
// 正确示例 - 使用setTimeout避免无限循环
setTimeout(function infiniteLoop() {
  // 代码逻辑
  // ...
  // 再次调用setTimeout以便定期执行代码逻辑
  setTimeout(infiniteLoop, 1000); // 每隔1秒执行一次
}, 1000);
 
// 正确示例 - 使用async/await优化异步代码
(async () => {
  while (true) {
    await someAsyncOperation();
    // 处理异步操作的结果
    // ...
  }
})();

确保在进行更改后进行充分的测试，以确保没有引入新的问题。

- 阅读更多 -

使用浏览器控制台js定时点击网页按钮

System

2024-08-19

所有,javascript

要使用JavaScript定时点击网页中的按钮，您可以使用setInterval函数配合click事件。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动点击按钮示例</title>
<script>
function autoClick() {
    // 获取按钮元素
    var button = document.getElementById('myButton');
    // 模拟点击按钮
    button.click();
}
 
// 设置定时器，每3秒执行一次autoClick函数
setInterval(autoClick, 3000);
</script>
</head>
<body>
 
<button id="myButton">点击我</button>
 
</body>
</html>

在这个例子中，页面加载时会自动开始每隔3秒点击一次ID为myButton的按钮。您可以根据需要更改定时器的时间间隔以及按钮的ID。

- 阅读更多 -

Nest.js权限管理系统开发jwt登录

System

2024-08-19

所有,javascript




import { Injectable, UnauthorizedException } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
 
@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor(private configService: ConfigService) {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: configService.get<string>('JWT_SECRET'),
    });
  }
 
  async validate(payload: any) {
    // 这里可以添加验证逻辑，比如检查jwt是否在黑名单中
    if (payload.isBlacklisted) {
      throw new UnauthorizedException('Token is blacklisted');
    }
    // 返回用户信息，这些信息可以用于应用的权限管理
    return payload;
  }
}

这段代码定义了一个JWT策略，用于处理用户登录时获取的JWT。在验证JWT时，它会检查JWT是否在黑名单中，如果在，则抛出一个未授权的异常。如果JWT没有被封禁，那么它会返回包含在JWT内的用户信息。这个例子展示了如何在Nest.js中结合配置服务来使用JWT，并在验证阶段添加额外的安全措施。

- 阅读更多 -

vite.config.js文件配置代理设置VITE_APP_BASE_API

System

2024-08-19

所有,javascript

在vite.config.js中配置代理服务器，可以将API请求代理到其他服务器。以下是一个配置示例，其中设置了一个环境变量VITE_APP_BASE_API，并使用这个变量来定义API的基础路径：




import { defineConfig } from 'vite';
import { loadEnv } from 'vite';
 
export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd());
 
  return {
    server: {
      // 配置代理规则
      proxy: {
        '/api': {
          target: env.VITE_APP_BASE_API, // 目标API服务器地址
          changeOrigin: true, // 是否改变源地址
          rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
        },
      },
    },
  };
});

在环境变量文件中（.env、.env.production等），你需要定义VITE_APP_BASE_API：




VITE_APP_BASE_API=https://api.example.com

这样配置后，当你的Vite开发服务器接收到以/api开头的请求时，它会将这些请求代理到https://api.example.com。这样，你就可以在不同环境中方便地切换API服务器，而不需要修改应用代码。

- 阅读更多 -

NAS上使用Docker搭建Wiki.js构建云知识库

System

2024-08-19

所有,javascript




# 使用Node.js官方镜像作为基础镜像
FROM node:lts-alpine
 
# 设置容器内的工作目录
WORKDIR /data
 
# 将package.json和package-lock.json复制到工作目录
COPY package*.json ./
 
# 安装Wiki.js及其依赖
RUN npm install wiki.js --save \
    && npm install bullmq redis --save \
    && npm install @wiki-js/puppeteer --save \
    && npm install @types/node --save-dev \
    && apk add --no-cache icu-libs icu \
    && apk add --no-cache libgcc libstdc++ \
    && apk add --no-cache libintl
 
# 复制所有源代码到工作目录
COPY . .
 
# 设置环境变量
ENV NODE_ENV=production \
    WIKI_PUBLIC_URL=http://your-wiki-url.com \
    WIKI_INSTALLER_NAME="Your Name" \
    WIKI_INSTALLER_EMAIL="your-email@example.com"
 
# 暴露80端口供外部访问
EXPOSE 80
 
# 启动Wiki.js
CMD ["node", "server"]

这个Dockerfile为在NAS上使用Docker搭建Wiki.js云知识库提供了一个基本的示例。它首先从Node.js的官方Alpine镜像创建一个环境，然后安装Wiki.js及其依赖，并设置必要的环境变量。最后，它暴露了80端口，并指定了启动命令。这个示例提供了一个简洁的模板，可以根据具体需求进行调整。

- 阅读更多 -

使用 LiteGraph.js 构建可视化工作流图

System

2024-08-19

所有,javascript




// 引入 LiteGraph 库
import { LGraph } from "litegraph.js";
 
// 创建一个新的图
var graph = new LGraph();
 
// 添加一个起始节点
var start = LiteGraph.createNode("start");
graph.add(start);
 
// 添加一个结束节点
var end = LiteGraph.createNode("end");
graph.add(end);
 
// 连接起始节点和结束节点
graph.connect(start, "on", end, "in");
 
// 渲染图到指定的 DOM 元素
var canvas = document.getElementById("my_canvas");
var graphcanvas = new LiteGraph.CanvasDebug(graph);
graphcanvas.resize(canvas.width, canvas.height);
graphcanvas.draw(true);
 
// 你可以继续添加更多的节点和连接
// ...

这段代码演示了如何使用LiteGraph.js库创建一个简单的工作流图，其中包括一个起始节点和一个结束节点以及它们之间的连接。然后，将这个图渲染到页面上的一个<canvas>元素中。这个例子提供了一个基本框架，可以在此基础上根据实际需求添加更多功能和节点类型。

System

2024-08-19

所有,javascript




<!DOCTYPE html>
<html>
<head>
    <title>一维码和二维码生成示例</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js"></script>
</head>
<body>
    <div id="barcode"></div>
    <div id="qrcode"></div>
 
    <script>
        // 一维码生成
        JsBarcode("#barcode", "123456789012", {
            format: "CODE128", // 指定条形码的格式
            lineColor: "#0aa", // 条形码颜色
            width: 2, // 条的宽度
            height: 100, // 条形码的高度
            displayValue: true // 是否在条形码下方显示文本
        });
 
        // 二维码生成
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "https://www.example.com",
            width: 128,
            height: 128,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
    </script>
</body>
</html>

这段代码展示了如何使用JsBarcode和qrcode.js库来生成一维条形码和二维码。在<script>标签中，我们首先实例化了一个JsBarcode来生成一维码，并指定了相关的选项，如格式、颜色和尺寸。然后，我们创建了一个新的QRCode实例来生成二维码，并设置了二维码的内容、尺寸和颜色配置。这个示例提供了一个简单的接口来生成这些码，并展示了如何将它们集成到HTML页面中。

- 阅读更多 -

H5页面pdf预览插件pdf.js的使用及问题解决

System

2024-08-19

所有,javascript




// 引入PDF.js
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
// 设置PDF.js的worker入口文件，这样可以避免跨域问题
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
 
// 创建一个用于预览的容器元素
const container = document.getElementById('pdf-container');
 
// 创建PDF.js的文档实例
let pdfDoc = null;
 
// 使用PDF.js加载PDF文件
function loadPDF(url) {
  pdfjsLib.getDocument(url).promise.then(
    (pdfDoc_) => {
      pdfDoc = pdfDoc_;
      renderPDFPage(1); // 渲染第一页
    },
    (reason) => {
      console.error('Error loading PDF: ', reason);
    }
  );
}
 
// 渲染PDF文档中的一页
function renderPDFPage(pageNumber) {
  pdfDoc.getPage(pageNumber).then(
    (page) => {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let viewport = page.getViewport({ scale: 1.5 }); // 可以调整scale来改变页面大小
 
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      container.appendChild(canvas);
 
      // 渲染页码
      let renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      page.render(renderContext).promise.then(
        () => {
          console.log('Page rendered');
        },
        (reason) => {
          console.error('Error rendering page: ', reason);
        }
      );
    },
    (reason) => {
      console.error('Error loading page: ', pageNumber, reason);
    }
  );
}
 
// 使用示例
loadPDF('path/to/your/pdf/file.pdf');

这段代码提供了一个简单的示例，展示了如何使用PDF.js来加载和渲染PDF文件的一页。代码中包含了基本的错误处理，以确保在遇到问题时有合适的反馈。在实际应用中，你可能需要根据自己的需求对这个示例进行扩展，比如添加页码导航、处理PDF文档的缩放和搜索功能等。

- 阅读更多 -