分类 javascript 下的文章

2024-08-07

Speech JS 是一个基于 Web Speech API 的 JavaScript 库，它提供了语音识别和语音合成的功能。以下是如何使用 Speech JS 进行语音识别和合成的简单示例代码：

语音识别 (Speech Recognition):




// 引入 Speech JS 库
const speech = require('speech-js');
 
// 语音识别开始
speech.startRecognition((error, result) => {
    if (error) {
        console.error(error);
    } else {
        console.log('你说了：', result);
    }
});

语音合成 (Speech Synthesis):




// 引入 Speech JS 库
const speech = require('speech-js');
 
// 语音合成
speech.say('你好，世界！', error => {
    if (error) {
        console.error(error);
    } else {
        console.log('已经说话了。');
    }
});

请注意，以上代码假定 Speech JS 已经通过 npm 或其他方式安装到了项目中。实际使用时，可能需要在浏览器环境中使用，并确保用户允许使用麦克风和扬声器。此外，Web Speech API 的兼容性和权限设置可能会影响这些功能的使用。

System

2024-08-07

所有,javascript

使用Mammoth.js将后端获取的文件流转换为HTML非常简单。以下是一个使用Node.js的示例代码：




const mammoth = require("mammoth");
 
// 假设buffer是从后端获取的文件流数据
const buffer = getFileStreamFromBackend();
 
mammoth.convertToHtml({arrayBuffer: buffer.buffer})
    .then(function(result){
        const html = result.value; // 转换生成的HTML
        // 可以选择将html写入文件或直接使用
        console.log(html);
    })
    .catch(function(err){
        // 处理错误
        console.log(err);
    });

在这个例子中，getFileStreamFromBackend() 是一个占位符，代表你从后端获取文件流的逻辑。你需要替换为实际获取文件流的代码。mammoth.convertToHtml() 方法接受一个对象，其中包含arrayBuffer属性，该属性应该是文件的ArrayBuffer形式。

确保你已经通过npm安装了mammoth.js依赖：




npm install mammoth

这段代码将.docx文件转换为HTML字符串，并在控制台中打印出来。你可以根据需要进一步处理这个HTML字符串，例如将其写入文件或者作为响应发送给客户端。

- 阅读更多 -

Nuxt.js服务器端渲染（SSR)

System

2024-08-07

所有,javascript

在Nuxt.js中，可以通过在页面组件中使用asyncData方法来实现服务器端渲染。asyncData在服务器端和客户端都会被调用，但它在服务器端渲染时会将数据预填充进组件中。

以下是一个简单的例子：




<template>
  <div>
    <h1>服务器端渲染的数据: {{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  async asyncData({ params, error }) {
    try {
      const message = await fetch('https://api.example.com/data').then(res => res.json());
      return { message };
    } catch (e) {
      error({ statusCode: 500, message: '服务器错误' });
    }
  }
};
</script>

在这个例子中，当访问这个页面时，Nuxt.js会在服务器端调用asyncData方法，并将获取到的数据message预渲染到页面中。这样，用户在加载页面时会首先看到服务器送达的HTML，提升了应用的加载性能和SEO友好性。

- 阅读更多 -

Sortable.js板块拖拽示例

System

2024-08-07

所有,javascript




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sortable.js 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
</head>
<body>
 
<ul id="items">
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
</ul>
 
<script>
    // 获取列表元素
    var el = document.getElementById('items');
    // 创建 Sortable 对象
    var sortable = new Sortable(el, {
        animation: 150, // 动画持续时间
        ghostClass: 'blue-background-class' // 设置幻影元素的类
    });
</script>
 
<style>
    .blue-background-class {
        background: lightblue;
    }
</style>
 
</body>
</html>

这段代码演示了如何使用Sortable.js创建一个可拖拽排序的列表。在HTML中，我们定义了一个ID为items的无序列表，并通过JavaScript引入了Sortable.js库，并初始化了一个Sortable实例，可以对列表中的项进行拖拽排序。通过animation属性设置了动画效果，并通过ghostClass属性定制了拖拽项的样式。

System

2024-08-07

所有,javascript




import React, { useState } from 'react';
import CronBuilder from 'qnn-react-cron';
 
const CronExpressionGenerator = () => {
  const [cronExpression, setCronExpression] = useState('');
 
  const handleCronExpressionChange = (expression) => {
    setCronExpression(expression);
  };
 
  return (
    <div>
      <CronBuilder
        value={cronExpression}
        onChange={handleCronExpressionChange}
      />
      <p>生成的Cron表达式：{cronExpression}</p>
    </div>
  );
};
 
export default CronExpressionGenerator;

这段代码展示了如何在React应用中使用qnn-react-cron插件来创建一个Cron表达式生成器。它使用了React的函数组件和Hooks API (useState) 来管理状态，并在用户更改Cron表达式时更新状态。

System

2024-08-07

所有,javascript

以下是一个简化的代码示例，展示了如何在Spring Boot应用程序中使用Sa-Token作为认证框架，以及如何使用QRCode.js生成和扫描用户二维码以实现快速登录。

1. 引入Sa-Token依赖

在pom.xml中添加Sa-Token的依赖：




<dependency>
    <groupId>cn.saas</groupId>
    <artifactId>sa-token-spring-boot-starter</artifactId>
    <version>最新版本</version>
</dependency>

2. 配置Sa-Token

在application.properties或application.yml中配置Sa-Token：




# 配置sa-token
sa-token.token-name=satoken
sa-token.token-value-prefix=satoken:login:
sa-token.timeout=2592000  # 超时时间，单位秒

3. 使用Sa-Token

在你的登录接口中使用Sa-Token进行用户登录验证：




@RestController
public class LoginController {
 
    @Autowired
    private StpLogic stpLogic;
 
    @PostMapping("/login")
    public Object login(@RequestParam("username") String username, @RequestParam("password") String password) {
        // 登录验证逻辑
        if ("admin".equals(username) && "123456".equals(password)) {
            stpLogic.login(1);  // 登录成功，返回token
            return SaResult.ok("登录成功", stpLogic.getTokenInfo());
        } else {
            return SaResult.error("登录失败，用户名或密码错误");
        }
    }
}

4. 生成二维码

在前端页面使用QRCode.js生成用户专属二维码：




<script src="https://cdn.jsdelivr.net/npm/qrcode@1.4.4"></script>
<div id="qrcode"></div>
<script>
    new QRCode(document.getElementById("qrcode"), {
        text: "http://yourserver.com/login?token=" + localStorage.getItem("satoken"),
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
</script>

5. 扫描二维码

使用移动设备扫描二维码，获取二维码中的登录URL，并发送到服务器。服务器接收到请求后，通过Sa-Token完成用户登录。

6. 扫描二维码登录




@RestController
public class QrcodeController {
 
    @GetMapping("/login")
    public Object qrcodeLogin(@RequestParam("token") String token) {
        // 扫描二维码，完成登录
        stpLogic.login(token);
        return SaResult.ok("登录成功");
    }
}

以上代码提供了一个简单的示例，展示了如何在Spring Boot应用中集成Sa-Token进行用户认证，并使用QRCode.js生成用于手机端快速登录的二维码。实际应用中，你需要加入更多的安全措施，比如对二维码中的token进行加密和时效性校验，确保安全。

- 阅读更多 -

js移除子元素

System

2024-08-07

所有,javascript

以下是几种不同的实现方法来移除js中的子元素：

方法一：使用removeChild()方法




var parent = document.getElementById("parent-element");
while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
}

方法二：使用innerHTML属性




var parent = document.getElementById("parent-element");
parent.innerHTML = "";

方法三：将父元素的子元素集合转换为数组并使用forEach()方法删除子元素




var parent = document.getElementById("parent-element");
Array.from(parent.children).forEach(function(child) {
    parent.removeChild(child);
});

方法四：创建一个临时的空元素，将父元素的子元素添加到临时元素中，然后将临时元素替换父元素




var parent = document.getElementById("parent-element");
var tempElement = document.createElement("div");
Array.from(parent.children).forEach(function(child) {
    tempElement.appendChild(child);
});
parent.parentNode.replaceChild(tempElement, parent);

以上是几种常见的方法来移除js中的子元素，可以根据具体需求选择适用的方法。

- 阅读更多 -

Vue3——html-doc-js(html导出为word的js库)

System

2024-08-07

所有,javascript

html-doc-js 是一个可以将 HTML 内容导出为 Word 文档的 JavaScript 库。在 Vue 3 中使用时，你需要先安装这个库，然后在你的 Vue 组件中引入并使用它。

首先，通过 npm 安装 html-doc-js 库：




npm install html-doc-js

然后，在你的 Vue 组件中使用：




<template>
  <div>
    <button @click="exportToWord">导出为 Word</button>
  </div>
</template>
 
<script>
import { saveAs } from 'file-saver';
import html2docx from 'html-docx-js/dist/html2docx';
 
export default {
  methods: {
    exportToWord() {
      const contentHTML = document.querySelector('#content').innerHTML; // 获取需要导出的 HTML 内容
      const converted = html2docx(contentHTML); // 将 HTML 转换为 docx 格式的字符串
      const blob = new Blob([converted], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
      saveAs(blob, 'exported-document.docx'); // 使用 file-saver 保存文件
    },
  },
};
</script>

在上面的代码中，我们首先从 file-saver 导入 saveAs 函数，用于保存生成的 Word 文档。然后从 html-doc-js 导入 html2docx 函数，它将 HTML 内容转换为 docx 格式的字符串。通过按钮点击事件触发 exportToWord 方法，将指定 HTML 内容转换并保存为 Word 文档。

确保你的 HTML 元素（例如一个带有 id="content" 的 div）包含了你想要导出的内容。这个例子假设你有一个元素 <div id="content">...</div> 包含着你想要转换的 HTML 内容。

- 阅读更多 -

JS中break、continue、return跳出循环的用法和区别

System

2024-08-07

所有,javascript

在JavaScript中，break语句用于立即退出当前循环体，continue语句用于跳过循环中的当前迭代，而return语句用于从函数中返回值，并且可以选择同时退出函数。

break语句：




for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // 当i等于5时，退出循环
    }
    console.log(i); // 输出0到4
}

continue语句：




for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue; // 当i等于5时，跳过当前迭代，继续下一次迭代
    }
    console.log(i); // 输出0到4，然后跳过5，继续输出6到9
}

return语句：




function printNumbers() {
    for (let i = 0; i < 10; i++) {
        if (i === 5) {
            return; // 当i等于5时，返回函数调用位置，并退出函数
        }
        console.log(i); // 输出0到4，然后函数返回并停止执行
    }
}
printNumbers();

break和continue主要用于控制循环，而return可以用于从函数中提前返回。break会完全停止循环，而continue只停止当前迭代，并继续执行后续迭代。return会停止函数中的进一步执行并返回一个值。

System

2024-08-07

所有,javascript




<template>
  <div>
    <input type="text" v-model="newItem" @keyup.enter="addItem">
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" v-model="item.isCompleted">
        <span :class="{ completed: item.isCompleted }">{{ item.text }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
import { Dexie } from 'dexie';
 
const db = new Dexie('todoAppDatabase');
db.version(1).stores({
  items: '++id, text, isCompleted'
});
 
export default {
  data() {
    return {
      newItem: '',
      items: []
    };
  },
  methods: {
    addItem() {
      if (this.newItem.trim() === '') return;
      db.items.add({ text: this.newItem, isCompleted: false });
      this.newItem = '';
      this.refreshItems();
    },
    refreshItems() {
      db.items.toArray().then(items => {
        this.items = items;
      });
    }
  },
  created() {
    this.refreshItems();
  }
};
</script>
 
<style>
.completed {
  text-decoration: line-through;
}
</style>

这个简单的Vue组件使用Dexie.js来存储TODO项目。它包含了创建数据库、定义存储结构、添加新项目、获取所有项目和标记项目为已完成的基本操作。这个例子展示了如何在前端应用中使用IndexedDB的简单方法，并且可以作为学习和使用Dexie.js的起点。

- 阅读更多 -