标签 Javascript 下的文章

2024-08-19

要使用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文档的缩放和搜索功能等。

- 阅读更多 -

Next.js静态导出与动态路由优化

System

2024-08-19

所有,javascript




// next.config.js
const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withStaticExport = require('next-static-export');
 
module.exports = withPlugins([
  [withOptimizedImages, {
    // 图片优化配置
  }],
  [withStaticExport, {
    // 静态导出配置
    htmlExportPage: ({ path: pagePath }) => {
      // 自定义页面是否被静态导出的逻辑
      // 例如，排除 /_error 页面和以 /api 开头的页面
      return !pagePath.startsWith('/_error') && !pagePath.startsWith('/api');
    }
  }]
], {
  webpack(config, options) {
    return config;
  },
  // 其他Next.js配置
});

这个配置文件展示了如何在Next.js应用中使用next-compose-plugins来组合多个插件，包括next-optimized-images用于优化图片和next-static-export用于静态导出页面。同时，演示了如何自定义哪些页面应该被静态导出。

- 阅读更多 -

记使用pdf.js过程遇到的坑

System

2024-08-19

所有,javascript

由于您提供的信息不足以确定具体的错误或问题，我无法给出一个精确的解决方案。pdf.js是一个用于在网页上显示PDF文件的JavaScript库。常见的问题可能包括PDF文件加载失败、文字显示不正确、页面跳转问题等。

为了解决pdf.js的使用问题，您可以尝试以下通用的解决方法：

确保您的网页中正确引入了pdf.js和pdf.worker.js文件。
确保您的PDF文件没有损坏，并且是可读的。
检查是否有跨域问题，如果是从其他域加载PDF文件，确保服务器支持CORS。
查看控制台是否有JavaScript错误，根据错误信息进行调试。
如果使用了viewer.js，确保它与pdf.js版本兼容。

如果您能提供具体的错误信息或行为描述，我可以给出更精确的解决方案。

System

2024-08-19

所有,javascript

在JavaScript中，可以使用new Date()构造函数来获取当前日期和时间，或者创建特定日期和时间的对象。以下是获取时间戳的几种方法：

使用new Date()获取当前时间的时间戳：




let timestamp = new Date().getTime(); // 或者使用 Date.now()

使用new Date()设置特定日期的时间戳：




let timestamp = new Date('2023-01-01T00:00:00Z').getTime();

使用Date.now()获取当前时间的时间戳，这是最简单的方法：




let timestamp = Date.now();

使用new Date()配合valueOf()获取时间戳：




let timestamp = new Date().valueOf();

使用performance.now()获取高精度的时间戳，这对于性能分析很有用：




let timestamp = performance.now();

注意：performance.now() 返回的是精确到微秒的DOM高精度时间戳，但它在不支持 performance.now() 的浏览器中将不可用。

- 阅读更多 -