nodejs：express + js-mdict 网页查询英汉词典，能播放声音
向 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）来改进用户界面。
-
缓存: 在后端添加缓存机制，提高查询速度。
-
多词典支持: 支持加载多个词典文件，并提供切换词典的功能。
希望这些步骤能帮助你实现一个简单的在线英语单词查询应用！
相关文章：
nodejs：express + js-mdict 网页查询英汉词典，能播放声音
向 DeepSeek R1 提问： 我想写一个Web 前端网页，后台用 nodejs js-mdict, 实现在线查询英语单词 1. 项目结构 首先，创建一个项目目录，结构如下： mydict-app/ ├── public/ │ ├── index.html │ ├── st…...
无人机PX4飞控 | PX4源码添加自定义uORB消息并保存到日志
PX4源码添加自定义uORB消息并保存到日志 0 前言 PX4的内部通信机制主要依赖于uORB（Micro Object Request Broker），这是一种跨进程的通信机制，一种轻量级的中间件，用于在PX4飞控系统的各个模块之间进行高效的数据交换…...
【IocDI】_存储Bean的五大类注解及getBean的使用
目录 1. Bean的存储 1.1 类注解 1.1.1 Controller：控制器存储 1.1.2 Service：服务存储 1.1.3 Repository：仓库存储 1.1.4 Component：组件存储 1.1.5 Configuration：配置存储 1.2 五大类注解之间的关系 2. get…...
VLAN 基础 | 不同 VLAN 间通信实验
注：本文为 “ Vlan 间通信” 相关文章合辑。 英文引文，机翻未校。 图片清晰度限于原文图源状态。 未整理去重。 How to Establish Communications between VLANs? 如何在 VLAN 之间建立通信？ Posted on November 20, 2015 by RouterSwi…...
GRE阅读双线阅读 --青山学堂GRE全程班 包括 阅读、数学、写作、填空、背单词
新版GRE考试整体结构 section题量时间写作1篇issue30min语文S112道题(7道填空5道阅读)18min数学S112道题21min语文S215道题(7道填空8道阅读)23min数学S215道题26min Tips: 写作结束后，语文和数学的顺序不固定，2中可能： issue -> V ->…...
算法总结-二分查找
文章目录 1.搜索插入位置1.答案2.思路 2.搜索二维矩阵1.答案2.思路 3.寻找峰值1.答案2.思路 4.搜索旋转排序数组1.答案2.思路 5.在排序数组中查找元素的第一个和最后一个位置1.答案2.思路 6.寻找旋转排序数组中的最小值1.答案2.思路 1.搜索插入位置 1.答案 package com.sunxi…...
litemall，又一个小商场系统
litemall Spring Boot后端 Vue管理员前端 微信小程序用户前端 Vue用户移动端 代码地址：litemall: 又一个小商城。 litemall Spring Boot后端 Vue管理员前端 微信小程序用户前端 Vue用户移动端...
5.5.1 面向对象的基本概念
文章目录 基本概念面向对象的5个原则 基本概念 面向对象的方法，特点时其分析与设计无明显界限。虽然在软件开发过程中，用户的需求会经常变化，但客观世界对象间的关系是相对稳定的。对象是基本的运行实体，由数据、操作、对象名组成…...
Java_类加载器
小程一言类加载器的基础双亲委派模型核心思想优势 各类加载器的职责 类加载器的工作流程举例：如何在Java中使用类加载器启动类加载器、扩展类加载器与系统类加载器输出解释自定义类加载器 类加载器与类冲突总结 小程一言 本专栏是对Java知识点的总结。在学习Java的过…...
开源音乐管理软件Melody
本文软件由网友 heqiusheng 推荐。不过好像已经是一年前了 😂 简介 什么是 Melody ？ Melody 是你的音乐精灵，旨在帮助你更好地管理音乐。目前的主要能力是帮助你将喜欢的歌曲或者音频上传到音乐平台的云盘。 主要功能包括： 歌曲…...
一、TensorFlow的建模流程
1. 数据准备与预处理： 加载数据：使用内置数据集或自定义数据。 预处理：归一化、调整维度、数据增强。 划分数据集：训练集、验证集、测试集。 转换为Dataset对象：利用tf.data优化数据流水线。 import tensorflow a…...
Vue.js组件开发-实现左侧浮动菜单跟随页面滚动
使用 Vue 实现左侧浮动菜单跟随页面滚动 实现步骤 创建 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。设计 HTML 结构：包含一个左侧浮动菜单和一个主要内容区域。编写 CSS 样式：设置菜单的初始样式和滚动时的样式。使用 Vue 的生命周期钩…...
分析哲学：从 语言解剖到 思想澄清的哲学探险
分析哲学：从 语言解剖 到 思想澄清 的哲学探险 第一节：分析哲学的基本概念与公式解释 【通俗讲解，打比方来讲解！】 分析哲学，就像一位 “语言侦探”，专注于 “解剖语言”，揭示我们日常使用的语…...
MySQL 插入数据指南
MySQL 插入数据指南 引言 MySQL 是一款广泛使用的开源关系数据库管理系统，被广泛应用于各种规模的组织中。在数据库管理中，数据的插入是基础操作之一。本文将详细介绍如何在 MySQL 中插入数据，包括插入单条记录和多条记录，以及一…...
寒假刷题Day20
一、80. 删除有序数组中的重复项 II class Solution { public:int removeDuplicates(vector<int>& nums) {int n nums.size();int stackSize 2;for(int i 2; i < n; i){if(nums[i] ! nums[stackSize - 2]){nums[stackSize] nums[i];}}return min(stackSize, …...
鸿蒙物流项目之基础结构
目录： 1、项目结构2、三种包的区别和使用场景3、静态资源的导入4、颜色样式设置5、修改项目名称和图标6、静态包基础目录7、组件的抽离8、在功能模块包里面引用静态资源包的组件 1、项目结构 2、三种包的区别和使用场景 3、静态资源的导入 放在har包中，那…...
[漏洞篇]SQL注入漏洞详解
[漏洞篇]SQL注入漏洞详解 介绍 把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。通过构造恶意的输入，使数据库执行恶意命令，造成数据泄露或者修改内容等，以达到攻击的目的。…...
【最后203篇系列】006 -使用ollama运行deepseek-r1前后端搭建
说明 这块已经不算新内容了，年前搭完了后端（ollama)，本来想早点分享的，但是当时的openwebui有点不给力，有些地方不适配，然后配置项找不到。所以前端没搭好，也就不完整：只能通过命令…...
CSS Module 常用笔记
Date: January 30, 2025 CSS 先介绍下普通 CSS，再简明介绍下 css module 的使用 普通 CSS 内联 style 定义： 内联 style 是通过在元素的 style 属性中直接设置 CSS 样式。这种方式允许我们直接在 JSX 中为组件或元素添加样式。 写法： &…...
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）
文章目录 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 信号其他相关…...
C++ 字面量深度解析：从基础到实战进阶
在 C 开发中，字面量（Literal）不仅是基础语法的一部分，更是提升代码可读性、安全性和性能的关键工具。本文将深入探讨 C 字面量的高级特性、最新标准支持（C11/14/17/20）以及实际开发中的应用技巧，…...
股票入门知识
股票入门（更适合中国宝宝体制） 股市基础知识 本文介绍了股票的基础知识，股票的分类，各板块发行上市条件，股票代码，交易时间，交易规则，炒股术语，影响股价的因素…...
用Python实现K均值聚类算法
在数据挖掘和机器学习领域，聚类是一种常见的无监督学习方法，用于将数据点划分为不同的组或簇。K均值聚类算法是其中一种简单而有效的聚类算法。今天，我将通过一个具体的Python代码示例，向大家展示如何实现K均值聚类算法࿰…...
Flask代码审计实战
文章目录 Flask代码审计SQL注入命令/代码执行反序列化文件操作XXESSRFXSS其他 审计实战后记reference Flask代码审计 SQL注入 1、正确的使用直白一点就是：使用”逗号”，而不是”百分号” stmt "SELECT * FROM table WHERE id?" connectio…...
Unity 2D实战小游戏开发跳跳鸟 - 跳跳鸟碰撞障碍物逻辑
在有了之前创建的可移动障碍物之后，就可以开始进行跳跳鸟碰撞到障碍物后死亡的逻辑，死亡后会产生一个对应的效果。 跳跳鸟碰撞逻辑 创建Obstacle Tag 首先跳跳鸟在碰撞到障碍物时，我们需要判定碰撞到的是障碍物，可以给障碍物的Prefab预制体添加一个Tag为Obstacle，添加步…...
【玩转 Postman 接口测试与开发2_015】第12章：模拟服务器（Mock servers）在 Postman 中的创建与用法（含完整实测效果图）
《API Testing and Development with Postman》最新第二版封面 文章目录 第十二章 模拟服务器（Mock servers）在 Postman 中的创建与用法1 模拟服务器的概念2 模拟服务器的创建2.1 开启侧边栏2.2 模拟服务器的两种创建方式2.3 私有模拟器的 API 秘钥的用法…...
mysql操作语句与事务
数据库设计范式 数据库设计的三大范式 第一范式（1NF）：要求数据库表的每一列都是不可分割的原子数据项，即列中的每个值都应该是单一的、不可分割的实体。例如，如果一个表中的“地址”列包含了省、市、区等多个信息…...
android Camera 的进化
引言 Android 的camera 发展经历了3个阶段 ： camera1 -》camera2 -》cameraX。 正文 Camera1 Camera1 的开发中，打开相机，设置参数的过程是同步的，就跟用户实际使用camera的操作步骤一样。但是如果有耗时情况发生时，会…...
ASP.NET Core Filter
目录 什么是Filter？ Exception Filter 实现 注意 ActionFilter 注意 案例：自动启用事务的筛选器 事务的使用 TransactionScopeFilter的使用 什么是Filter？ 切面编程机制，在ASP.NET Core特定的位置执行我们自定义的代码。…...