nodejs：express + js-mdict 网页查询英汉词典，能播放声音

news2025/2/4 8:54:14

向 DeepSeek R1 提问：
我想写一个Web 前端网页，后台用 nodejs + js-mdict, 实现在线查询英语单词

1. 项目结构

首先，创建一个项目目录，结构如下：

mydict-app/
├── public/
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── server/
│   └── server.js
├── package.json
└── README.md

英汉词典文件（*.mdx , *.mdd)  已经放在 /js/testdict/ 

2. 安装依赖

在项目根目录下运行以下命令，初始化项目并安装所需的依赖：
cd mydict-app
npm init -y
npm install express
added 69 packages in 6s

npm install js-mdict
added 3 packages in 2s

3. 创建前端页面

在 public/index.html 中创建一个简单的HTML页面，包含一个输入框和一个按钮用于查询单词：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询英汉词典</title>
    <script src="jquery.js"></script>
    <style>
/* portrait 判断为竖屏 */
@media only screen and (orientation: portrait){
     #lab1 {display:none;}
} 
/* landscape 判断为横屏 */ 
@media only screen and (orientation: landscape){
     #lab1 {display: ;}
}    
    </style>
</head>
<body>
  <form name="form" id="form" action="search" method="GET" target="iframe">
    <label id="lab1">请输入：</label>
    <input type="text" name="word" size="30" placeholder="请输入英文单词">
    <input type="submit" name="eng_han" value="英译汉">
  </form>
  <p></p>
<div id="result">
  <iframe name="iframe" id="iframe" width="90%" height="450">     
  </iframe>
</div>
<script src="script.js"></script>
</body>
</html>

 在 public 中添加一些英汉字典的样式：oalecd8e.css , oalecd8e.js , uk_pron.png, us_pron.png,
copy jquery-3.2.1.min.js pulibc\jquery.js

在 public/script.js 中编写前端逻辑：

  const iframe = $('#iframe')[0]; // 获取 iframe DOM 元素
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

  // 页面加载添加：监听iframe网页点击事件
  $(document).ready(function(){
    var listener = window.addEventListener('blur', function(){
      if (document.activeElement === document.getElementById('iframe')){
        $('iframe').contents().find('a').click(function(event){
          event.preventDefault();
          var a = $(this);
         if (a){
           var addr = a.attr('href');
           if (addr.indexOf('entry://')==0 && addr.indexOf('entry://#')!=0){               
                var word = encodeURIComponent(addr.substring(8));
             $.ajax({
                url: `/search?word=${word}`,
                method: 'GET',
                success: function (html) {
                  // 将 HTML 内容加载到 iframe 中
                  //$('#iframe').attr('srcdoc', html);
                  if (html){
                    // 写入 HTML 内容
                    iframeDoc.open();
                    iframeDoc.write(html);
                    iframeDoc.close();
                  }
                },
                error: function (error) {
                    console.error('entry:请求失败:', error);
                }
             });
           } else if (addr.indexOf('sound://')==0){
             var url = "/data/" + addr.substring(8);
             var mp3 = new Audio(url);
             mp3.addEventListener("canplaythrough", (event)=> {
                 mp3.play();
             });
             mp3.addEventListener('error', (e) => {
                 console.error('play error:', e);
             });

           } else {
             console.log('href='+addr);
           }
         }
        });
 
      }
    });
  });

4. 创建后端服务器

在 server/server.js 中编写Node.js服务器代码，使用 express 和 js-mdict 来处理查询请求：

const express = require('express');
const fs = require('fs');
const path = require('path');
const Mdict = require('js-mdict');
//console.log(Mdict);
const app = express();
const port = 8000;

// 加载MDict词典文件
//const mdict = new Mdict('path/to/your/dictionary.mdx');
const mdict = new Mdict.MDX('/js/testdict/oale8.mdx');
//const mdd = new Mdict.MDD('/js/testdict/oale8.mdd');

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// 提供静态文件
app.use(express.static(path.join(__dirname, '../public')));

// 处理查询请求
app.get('/search', (req, res) => {
    let word = req.query.word;
    if (word) {
        let data = mdict.lookup(word);
        console.log("cha: "+ word);
        if(data){
            res.send(data.definition);
        } else {
            res.status(400).send('error: word not found');
        }
    } else {
        res.status(400).send('error: No word input');
    }
});

// 指定目录
const dir1 = "/js/testdict/data";

// 实现文件下载，*/是路径
app.get('/data/*/:fileName', (req, res, next) => {
    let path1 = req.params[0]; // 捕获 * 匹配的部分
    let fileName = req.params.fileName; // 捕获文件名
    // 检查路径中是否包含非法字符（如 ..）
    if (path1.includes('..') || fileName.includes('..')) {
        return res.status(400).send('Invalid path: Path traversal is not allowed.');
    }
  
    let filePath = path.join(dir1,path1, fileName);
    console.log(filePath);
    let stats = fs.statSync(filePath);
    if(stats.isFile()){
      if (path.extname(fileName) === '.mp3'){
        res.set({
         'Content-Type': 'application/octet-stream',
         'Content-Disposition': 'attachment;',
         'Content-Length': stats.size
        });
        //'Content-Disposition': 'attachment; filename='+encodeURI(fileName),
        res.download(filePath);
      } else {
         res.status(400).send('filename.ext is not .mp3');
      }
    } else {
      res.end('404');
    }
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

如何直接读取.MDD文件中的音频数据，编写了升级版 server2.js 如下

const http = require('http');
const express = require('express');
const fs = require('fs');
const path = require('path');
const Mdict = require('js-mdict');
//console.log(Mdict);
const app = express();
const port = 8002;

// 加载MDict词典文件
//const mdict = new Mdict('path/to/your/dictionary.mdx');
const mdx = new Mdict.MDX('/js/testdict/oale8.mdx');
const mdd = new Mdict.MDD('/js/testdict/oale8.mdd');
//console.log(mdd.locate('\\us\\salute__us_1.mp3'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// 提供静态文件
app.use(express.static(path.join(__dirname, '../public')));

// 处理查询请求
app.get('/search', (req, res) => {
    let word = req.query.word;
    if (word) {
        let data = mdx.lookup(word);
        console.log("cha: "+ word);
        if(data){
            res.send(data.definition);
        } else {
            res.status(400).send('error: word not found');
        }
    } else {
        res.status(400).send('error: No word input');
    }
});

// 指定目录
const dir1 = "\\";

// 实现文件下载，*/是路径
app.get('/data/*/:fileName', (req, res, next) => {
    let path1 = req.params[0]; // 捕获 * 匹配的部分
    let fileName = req.params.fileName; // 捕获文件名
    // 检查路径中是否包含非法字符（如 ..）
    if (path1.includes('..') || fileName.includes('..')) {
        return res.status(400).send('Invalid path: Path traversal is not allowed.');
    }
    if (path.extname(fileName) === '.mp3'){
      let filePath = path.join(dir1,path1, fileName);
      //console.log(filePath);
      let data = mdd.locate(filePath);
      if (data){
        console.log('key: '+ data.keyText);
        //console.log(Buffer.isBuffer(data.definition));
        
        if (data.definition){
          let binaryData = Buffer.from(data.definition, 'base64');
        //res.setHeader('Content-Type', 'application/octet-stream');
          res.set({
           'Content-Type': 'audio/mpeg',
           'Content-Disposition': 'attachment;',
           'Content-Length': Buffer.byteLength(binaryData)
          });
        //console.log('bytes: '+ Buffer.byteLength(binaryData));
          res.end(binaryData);
        } else {
          res.status(400).send('error: data.definition is null');
        }
      } else {
        res.status(400).send('error: data is null');
      }
    } else {
        res.status(400).send('filename.ext is not .mp3');
    }
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

5. 运行项目

在项目根目录下运行以下命令启动服务器：node server/server.js
或者 node server/server2.js

然后打开浏览器，访问 http://localhost:8000，你应该可以看到一个简单的词典查询页面。输入单词并点击查询按钮，页面会显示该单词的释义。

6. 部署

你可以将这个应用部署到任何支持 Node.js 的服务器上。

7. 进一步优化

  • 错误处理: 在前端和后端添加更多的错误处理逻辑。

  • UI 改进: 使用前端框架（如React、Vue.js）来改进用户界面。

  • 缓存: 在后端添加缓存机制，提高查询速度。

  • 多词典支持: 支持加载多个词典文件，并提供切换词典的功能。

希望这些步骤能帮助你实现一个简单的在线英语单词查询应用！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2291707.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

无人机PX4飞控 | PX4源码添加自定义uORB消息并保存到日志

无人机PX4飞控 | PX4源码添加自定义uORB消息并保存到日志

PX4源码添加自定义uORB消息并保存到日志 0 前言 PX4的内部通信机制主要依赖于uORB&#xff08;Micro Object Request Broker&#xff09;&#xff0c;这是一种跨进程的通信机制&#xff0c;一种轻量级的中间件&#xff0c;用于在PX4飞控系统的各个模块之间进行高效的数据交换…
阅读更多...
【IocDI】_存储Bean的五大类注解及getBean的使用

【IocDI】_存储Bean的五大类注解及getBean的使用

目录 1. Bean的存储 1.1 类注解 1.1.1 Controller&#xff1a;控制器存储 1.1.2 Service&#xff1a;服务存储 1.1.3 Repository&#xff1a;仓库存储 1.1.4 Component&#xff1a;组件存储 1.1.5 Configuration&#xff1a;配置存储 1.2 五大类注解之间的关系 2. get…
阅读更多...
VLAN 基础 | 不同 VLAN 间通信实验

VLAN 基础 | 不同 VLAN 间通信实验

注&#xff1a;本文为 “ Vlan 间通信” 相关文章合辑。 英文引文&#xff0c;机翻未校。 图片清晰度限于原文图源状态。 未整理去重。 How to Establish Communications between VLANs? 如何在 VLAN 之间建立通信&#xff1f; Posted on November 20, 2015 by RouterSwi…
阅读更多...
GRE阅读双线阅读 --青山学堂GRE全程班 包括 阅读、数学、写作、填空、背单词

GRE阅读双线阅读 --青山学堂GRE全程班 包括 阅读、数学、写作、填空、背单词

新版GRE考试整体结构 section题量时间写作1篇issue30min语文S112道题(7道填空5道阅读)18min数学S112道题21min语文S215道题(7道填空8道阅读)23min数学S215道题26min Tips: 写作结束后&#xff0c;语文和数学的顺序不固定&#xff0c;2中可能&#xff1a; issue -> V ->…
阅读更多...
5.5.1 面向对象的基本概念

5.5.1 面向对象的基本概念

文章目录 基本概念面向对象的5个原则 基本概念 面向对象的方法&#xff0c;特点时其分析与设计无明显界限。虽然在软件开发过程中&#xff0c;用户的需求会经常变化&#xff0c;但客观世界对象间的关系是相对稳定的。对象是基本的运行实体&#xff0c;由数据、操作、对象名组成…
阅读更多...
Java_类加载器

Java_类加载器

小程一言类加载器的基础双亲委派模型核心思想优势 各类加载器的职责 类加载器的工作流程举例&#xff1a;如何在Java中使用类加载器启动类加载器、扩展类加载器与系统类加载器输出解释自定义类加载器 类加载器与类冲突总结 小程一言 本专栏是对Java知识点的总结。在学习Java的过…
阅读更多...
开源音乐管理软件Melody

开源音乐管理软件Melody

本文软件由网友 heqiusheng 推荐。不过好像已经是一年前了 &#x1f602; 简介 什么是 Melody &#xff1f; Melody 是你的音乐精灵&#xff0c;旨在帮助你更好地管理音乐。目前的主要能力是帮助你将喜欢的歌曲或者音频上传到音乐平台的云盘。 主要功能包括&#xff1a; 歌曲…
阅读更多...
一、TensorFlow的建模流程

一、TensorFlow的建模流程

1. 数据准备与预处理&#xff1a; 加载数据&#xff1a;使用内置数据集或自定义数据。 预处理&#xff1a;归一化、调整维度、数据增强。 划分数据集&#xff1a;训练集、验证集、测试集。 转换为Dataset对象&#xff1a;利用tf.data优化数据流水线。 import tensorflow a…
阅读更多...
分析哲学：从 语言解剖到 思想澄清的哲学探险

分析哲学：从 语言解剖到 思想澄清的哲学探险

分析哲学&#xff1a;从 语言解剖 到 思想澄清 的哲学探险 第一节&#xff1a;分析哲学的基本概念与公式解释 【通俗讲解&#xff0c;打比方来讲解&#xff01;】 分析哲学&#xff0c;就像一位 “语言侦探”&#xff0c;专注于 “解剖语言”&#xff0c;揭示我们日常使用的语…
阅读更多...
鸿蒙物流项目之基础结构

鸿蒙物流项目之基础结构

目录&#xff1a; 1、项目结构2、三种包的区别和使用场景3、静态资源的导入4、颜色样式设置5、修改项目名称和图标6、静态包基础目录7、组件的抽离8、在功能模块包里面引用静态资源包的组件 1、项目结构 2、三种包的区别和使用场景 3、静态资源的导入 放在har包中&#xff0c;那…
阅读更多...
[漏洞篇]SQL注入漏洞详解

[漏洞篇]SQL注入漏洞详解

[漏洞篇]SQL注入漏洞详解 介绍 把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串&#xff0c;最终达到欺骗服务器执行恶意的SQL命令。通过构造恶意的输入&#xff0c;使数据库执行恶意命令&#xff0c;造成数据泄露或者修改内容等&#xff0c;以达到攻击的目的。…
阅读更多...
【最后203篇系列】006 -使用ollama运行deepseek-r1前后端搭建

【最后203篇系列】006 -使用ollama运行deepseek-r1前后端搭建

说明 这块已经不算新内容了&#xff0c;年前搭完了后端&#xff08;ollama)&#xff0c;本来想早点分享的&#xff0c;但是当时的openwebui有点不给力&#xff0c;有些地方不适配&#xff0c;然后配置项找不到。所以前端没搭好&#xff0c;也就不完整&#xff1a;只能通过命令…
阅读更多...
JDK-1.8.0_432安装（CentOS7）

JDK-1.8.0_432安装（CentOS7）

目录 1、卸载系统自带JDK 2、下载安装包并解压 3、赋予可执行权限 4、设置环境变量 5、刷新环境变量 6、查看JDK版本 1、卸载系统自带JDK # 查询出自带的jdk rpm -qa | grep jdk rpm -qa | grep java # 将上述命令列出的包依次删除 rpm -e --nodeps xxxxxxx 2、下载…
阅读更多...
【Linux】24.进程信号（1）

【Linux】24.进程信号（1）

文章目录 1. 信号入门1.1 进程与信号的相关知识1.2 技术应用角度的信号1.3 注意1.4 信号概念1.5 信号处理常见方式概览 2. 产生信号2.1 通过终端按键产生信号2.2 调用系统函数向进程发信号2.3 由软件条件产生信号2.4 硬件异常产生信号2.5 信号保存 3. 阻塞信号3.1 信号其他相关…
阅读更多...
股票入门知识

股票入门知识

股票入门&#xff08;更适合中国宝宝体制&#xff09; 股市基础知识 本文介绍了股票的基础知识&#xff0c;股票的分类&#xff0c;各板块发行上市条件&#xff0c;股票代码&#xff0c;交易时间&#xff0c;交易规则&#xff0c;炒股术语&#xff0c;影响股价的因素&#xf…
阅读更多...
用Python实现K均值聚类算法

用Python实现K均值聚类算法

在数据挖掘和机器学习领域&#xff0c;聚类是一种常见的无监督学习方法&#xff0c;用于将数据点划分为不同的组或簇。K均值聚类算法是其中一种简单而有效的聚类算法。今天&#xff0c;我将通过一个具体的Python代码示例&#xff0c;向大家展示如何实现K均值聚类算法&#xff0…
阅读更多...
Flask代码审计实战

Flask代码审计实战

文章目录 Flask代码审计SQL注入命令/代码执行反序列化文件操作XXESSRFXSS其他 审计实战后记reference Flask代码审计 SQL注入 1、正确的使用直白一点就是&#xff1a;使用”逗号”&#xff0c;而不是”百分号” stmt "SELECT * FROM table WHERE id?" connectio…
阅读更多...
Unity 2D实战小游戏开发跳跳鸟 - 跳跳鸟碰撞障碍物逻辑

Unity 2D实战小游戏开发跳跳鸟 - 跳跳鸟碰撞障碍物逻辑

在有了之前创建的可移动障碍物之后，就可以开始进行跳跳鸟碰撞到障碍物后死亡的逻辑，死亡后会产生一个对应的效果。 跳跳鸟碰撞逻辑 创建Obstacle Tag 首先跳跳鸟在碰撞到障碍物时，我们需要判定碰撞到的是障碍物，可以给障碍物的Prefab预制体添加一个Tag为Obstacle，添加步…
阅读更多...
【玩转 Postman 接口测试与开发2_015】第12章：模拟服务器（Mock servers）在 Postman 中的创建与用法（含完整实测效果图）

【玩转 Postman 接口测试与开发2_015】第12章：模拟服务器（Mock servers）在 Postman 中的创建与用法（含完整实测效果图）

《API Testing and Development with Postman》最新第二版封面 文章目录 第十二章 模拟服务器&#xff08;Mock servers&#xff09;在 Postman 中的创建与用法1 模拟服务器的概念2 模拟服务器的创建2.1 开启侧边栏2.2 模拟服务器的两种创建方式2.3 私有模拟器的 API 秘钥的用法…
阅读更多...
mysql操作语句与事务

mysql操作语句与事务

数据库设计范式 数据库设计的三大范式 ‌第一范式&#xff08;1NF&#xff09;‌&#xff1a;要求数据库表的每一列都是不可分割的原子数据项&#xff0c;即列中的每个值都应该是单一的、不可分割的实体。例如&#xff0c;如果一个表中的“地址”列包含了省、市、区等多个信息…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023