当前位置：首页 > news >正文

nodejs：express + js-mdict 网页查询英汉词典，能显示图片

news 2025/9/30 20:41:50

向 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" id="word" size="30" placeholder="请输入英文单词"><input type="submit" name="eng_han" value="英译汉"><input type="button" name="btn1" id="btn1" value="前缀查询"><input type="button" name="btn2" id="btn2" value="模糊查询"></form><p></p>
<div style="float:left; width:100%;"><div id="result" style="float:left; width:75%; height:500; border:2px;"><iframe name="iframe" id="iframe" width="100%" height="500"> </iframe></div><div id="alist" style="float:right; width:25%; height:500; border:2px;"></div>
</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 元素// 页面加载添加：监听iframe网页点击事件$(document).ready(function(){let listener = window.addEventListener('blur', function(){if (document.activeElement === document.getElementById('iframe')){$('iframe').contents().find('a').click(function(event){event.preventDefault();let a = $(this);if (a){let addr = a.attr('href');if (addr.indexOf('entry://')==0 && addr.indexOf('entry://#')!=0){               let word = encodeURIComponent(addr.substring(8));$.ajax({url: `/search?word=${word}`,method: 'GET',success: function (html) {// 将 HTML 内容加载到 iframe 中//$('#iframe').attr('srcdoc', html);let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;if (html){// 写入 HTML 内容iframeDoc.open();iframeDoc.write(html);iframeDoc.close();}},error: function (error) {console.error('entry:请求失败:', error);}});} else if (addr.indexOf('sound://')==0){let url = "/data/" + addr.substring(8);let mp3 = new Audio(url);mp3.addEventListener("canplaythrough", (event)=> {mp3.play();});mp3.addEventListener('error', (e) => {console.error('play error:', e);});} else {console.log('href='+addr);}}});}});});// 前缀查询
$(function(){$("#btn1").click(function(){$.getJSON("/prefix?word="+$("#word").val(), function(data){let items = [];$.each(data, function(i, item){if (i<=20){items[i] = '<a href="/search?word=' +item+ '" target="iframe">' +item+ "</a><br>";}});let a = items.join('\n');if (a) $('#alist').html(a);})})
});// 模糊查询
$(function(){$("#btn2").click(function(){$.getJSON("/fuzzy?word="+$("#word").val(), function(data){let items = [];$.each(data, function(i, item){if (i<=20){items[i] = '<a href="/search?word=' +item+ '" target="iframe">' +item+ "</a><br>";}});let a = items.join('\n');if (a) $('#alist').html(a);})})
});

4. 创建后端服务器

在 server/server2.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 = 8002;// 加载MDict词典文件
//const mdict = new Mdict('path/to/your/dictionary.mdx');
const mdx = new Mdict.MDX('/js/testdict/your英汉词典插图版.mdx');
const mdd = new Mdict.MDD('/js/testdict/your英汉词典插图版.mdd');
//console.log(mdd.locate('\\goods'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// 提供静态文件
app.use(express.static(path.join(__dirname, '../public')));const isWord = (txt) => {// 只允许字母、/、空格、-return /^[a-zA-Z \/\-]+$/.test(txt);
};// 处理查询请求
app.get('/search', (req, res) => {let word = req.query.word;if (word) {let data = mdx.lookup(word);console.log("cha: "+ word);if(data.definition){res.send(data.definition);} else {res.status(200).send('this word not found.');}} else {res.status(400).send('error: No word input');}
});// 处理前缀查询请求
app.get('/prefix', (req, res) => {let word = req.query.word;// 检查word是否合法if (word.length>50 || !isWord(word)) {return res.status(400).send('Invalid input.');}if (word) {let alist = mdx.prefix(word);console.log("pre: "+ word);if(alist.length >0){let wordls = [];alist.forEach(function(value){wordls.push(value.keyText);});  res.json(wordls);} else {res.status(400).send('this word not found');}} else {res.status(400).send('error: No word input');}
});// 处理模糊查询请求
app.get('/fuzzy', (req, res) => {let word = req.query.word;// 检查word是否合法if (word.length>50 || !isWord(word)) {return res.status(400).send('Invalid input.');}if (word) {let alist = mdx.fuzzy_search(word,3,1);console.log("fuzzy: "+ word);if(alist.length >0){let wordls = [];alist.forEach(function(value){wordls.push(value.keyText);});  res.json(wordls);} else {res.status(400).send('this word not found');}} else {res.status(400).send('error: No word input');}
});// 指定目录
const dir1 = "/";// 实现image文件下载，不带路径
app.get('/:fileName', (req, res, next) => {let path1 = '/'; let fileName = req.params.fileName; // 捕获文件名// 检查路径中是否包含非法字符（如 ..）if (fileName.includes('..')) {return res.status(400).send('Invalid path: Path traversal is not allowed.');}//console.log(fileName);let extname = path.extname(fileName);let ext = extname.substring(1).toLowerCase();if (['bmp','gif','jpg','png'].includes(ext)){let filePath = path.join(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': 'image','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 image');}
});// 实现image文件下载，*/是路径
app.get('/*/:fileName', (req, res, next) => {let path1 = req.params[0]; // 捕获 * 匹配的部分let fileName = req.params.fileName; // 捕获文件名// 检查路径中是否包含非法字符（如 ..）if (fileName.includes('..')) {return res.status(400).send('Invalid path: Path traversal is not allowed.');}//console.log(fileName);let extname = path.extname(fileName);let ext = extname.substring(1).toLowerCase();if (['bmp','gif','jpg','png'].includes(ext)){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': 'image','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 image');}
});app.listen(port, () => {console.log(`Server is running on http://localhost:${port}`);
});

5. 运行项目

在项目根目录下运行以下命令启动服务器：cd /js/mydict-app ;
node server/server2.js

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

6. 部署

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

7. 进一步优化

错误处理: 在前端和后端添加更多的错误处理逻辑。
UI 改进: 使用前端框架（如React、Vue.js）来改进用户界面。
缓存: 在后端添加缓存机制，提高查询速度。
多词典支持: 支持加载多个词典文件，并提供切换词典的功能。

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

nodejs：express + js-mdict 网页查询英汉词典，能显示图片

向 DeepSeek R1 提问： 我想写一个Web 前端网页，后台用 nodejs js-mdict , 实现在线查询英语单词，并能显示图片 1. 项目结构首先，创建一个项目目录，结构如下： mydict-app/ ├── public/ │ ├── …...

编程日记 2025/2/18 2:28:02

matlab汽车动力学半车垂向振动模型

1、内容简介 matlab141-半车垂向振动模型可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/2/18 2:27:00

2025.2.16

Web [GDOUCTF 2023]泄露的伪装： 点进去看就是装神弄鬼，那就直接扫描果然有东西第一个是php代码第二个是个文件访问发现是一样的分析一下：使用 file_get_contents($cxk) 函数读取 $cxk 变量中指定的 URL 或文件的内容。如果读取的内…...

编程日记 2025/2/18 2:25:56

图像生成GAN和风格迁移

文章目录摘要abstract1.生成对抗网络 GAN1.1 算法步骤 2.风格迁移2.1 损失函数2.2 论文阅读2.2.1 简介2.2.2 方法2.2.3 实验2.2.4 结论 3.总结摘要本周学习了生成对抗网络（GAN）与风格迁移技术在图像生成中的应用。首先介绍了GAN模型中生成器与判别器…...

编程日记 2025/2/18 2:18:43

【06】泛型

文章目录泛型函数中的泛型结构体中的泛型结构体中的方法枚举中的泛型泛型 RUST通过在编译时对泛型代码的单态化（monomorphization）来保证运行效率。即，在编译时对泛型填充具体数据类型转换为特定代码进行编译。由于RUST编译试图穷举所有…...

编程日记 2025/2/18 2:17:40

1-13 tortoiseGit忽略文件与文件夹

前言： 基于本人对小乌龟操作的学习和思考，仅供参考 1-1 忽略问价和文件夹有时候我们的一些文件是不想要提交，那么我们可以使用stash的方式给这个文件添加忽略，那么我们现在来给这个实际操作创建一个操作的环境。右键选中添加到忽…...

编程日记 2025/2/18 2:15:36

ASR强力模型「Whisper」：解密Whisper：AI驱动的语音识别新时代 -

解密Whisper：AI驱动的语音识别新时代原创 AI小信别慌G个PT 2024年10月18日 17:54 北京 ❝ 前两天分享了两个TTS模型，今天分享个ASR强力模型「Whisper」。Whisper是OpenAI开发的一个「ASR」(AutomatedSpeechRecognition,自动语音识别)开源模型&#xf…...

编程日记 2025/2/18 2:14:31

【机器学习】向量化使得简单线性回归性能提升

向量化使得简单线性回归性能提升一、摘要二、向量化运算概述三、向量化运算在简单线性回归中的应用四、性能测试与结果分析一、摘要本文主要讲述了向量化运算在简单线性回归算法中的应用。通过回顾传统for循环方式实现的简单线性回归算法，介绍了如何通过最小二乘…...

编程日记 2025/2/18 2:13:27

【kafka系列】消费者

目录获取消息 1. 消费者获取消息的流程逻辑分析阶段一：消费者初始化阶段二：分区分配与重平衡（Rebalance） 阶段三：消息拉取与处理阶段四：偏移量提交核心设计思想 2. 流程关键点总结常见参数…...

编程日记 2025/2/18 2:10:22

HackerRank C++面试，中等难度题目 - Attribute Parser

去除字符串首尾的空白字符（包括空格、制表符、换行符和回车符） void trim(string &s) {size_t start s.find_first_not_of(" \t\n\r");size_t end s.find_last_not_of(" \t\n\r");if (start string::npos) {s ""…...

编程日记 2025/2/18 2:06:16

【ARM】解决ArmDS Fast Models 中部分内核无法上电的问题

1、文档目标解决ArmDS Fast Models 中部分内核无法上电的问题。 2、问题场景在调用ArmDS的Fast Models中的Cortex-A55的模型，只有Core 0是上电状态，而Core 1处于掉电状态，如图2-1所示： 图2-1 3、软硬件环境 1）…...

编程日记 2025/2/18 2:05:10

节目选择器安卓软件编写(针对老年人)

文章目录需求来源软件界面演示效果源码获取对爬虫、逆向感兴趣的同学可以查看文章，一对一小班教学：https://blog.csdn.net/weixin_35770067/article/details/142514698 需求来源由于现在的视频软件过于复杂，某客户想开发一个针对老年人、…...

编程日记 2025/2/18 2:03:03

蓝桥杯之图

图： 对于图来说，重点在于之后的最短路径算法，这边简单做一下了解即可代码： #include<iostream> #include<string> #include<vector> #include<list> #include<queue> using namespace std; clas…...

编程日记 2025/2/18 2:02:02

中兴光猫修改SN，MAC，修改地区，异地注册，改桥接，路由拨号

前言请先阅读上一篇博客获取到光猫超级密码电信光猫获取超级密码电信光猫天翼网关4.0获取超级密码教程四川电信光猫中兴 F1855V2 ZXHN F1855V2 telent权限实战实测_天翼4.0光猫超级密码-CSDN博客修改SN-修改地区，光猫异地注册，设置桥接模式&#…...

编程日记 2025/2/18 2:00:59

【kafka系列】Kafka如何保证消息不丢失？

目录 1. 生产者端：确保消息成功发送到Broker 核心机制： 关键步骤： 2. Broker端：持久化与副本同步核心机制： 关键源码逻辑： 3. 消费者端：可靠消费与Offset提交核心机制： 关…...

编程日记 2025/2/18 1:57:54

AtCoder Beginner Contest 393 —— E - GCD of Subset 补题 + 题解 python

AtCoder Beginner Contest 393 E - GCD of Subset Problem Statement You are given a sequence A ( A 1 , A 2 , … , A N ) A (A_1, A_2, \dots, A_N) A(A1,A2,…,AN) of length N N N and a positive integer K K K (at most N N N). For each i 1 , 2 , … …...

编程日记 2025/2/18 1:55:50

vue3响应式丢失解决办法（三）

vue3的响应式的理解，与普通对象的区别（一） vue3 分析总结响应式丢失问题原因（二） 经过前面2篇文章，知道了响应式为什么丢失了，但是还是碰到了丢失情况，并且通过之前的内容还不能解…...

编程日记 2025/2/18 1:50:02

BY组态：构建灵活、可扩展的自动化系统

引言在现代工业自动化领域，BY组态（Build Your Own Configuration）作为一种灵活、可扩展的解决方案，正逐渐成为工程师和系统集成商的首选。BY组态允许用户根据具体需求自定义系统配置，从而优化生产效率、降低成本并提…...

编程日记 2025/2/18 1:46:54

2025 (ISC)²CCSP 回忆录

2025.1.20 广州，周一，我一次性通过了CCSP的考试。为什么要考证？ 个人成长所需职业热情：做一行爱一行，既然我投入了美好的青春年华到网络安全行业当中，那么对于这个行业最有权威的认证，是肯定…...

编程日记 2025/2/18 1:44:50

强化学习笔记7——DDPG到TD3

前提：基于TD 的方法多少都会有高估问题，即Q值偏大。原因两个：一、TD目标是真实动作的高估。二：自举法高估。 DDPG 属于AC方法：异策略，适合连续动作空间，因为他的策略网络直接输出的动作&#…...

编程日记 2025/2/18 1:37:33

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2025/9/29 3:24:33

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2025/9/29 7:23:43

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/30 19:07:32

VTK如何让部分单位不可见

最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...

编程新知 2025/9/22 18:49:24

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/9/29 19:03:00

智能AI电话机器人系统的识别能力现状与发展水平

一、引言随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路减少 JOIN 数量数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...

编程新知 2025/7/6 1:12:52

AWS vs 阿里云：功能、服务与性能对比指南

在云计算领域，Amazon Web Services (AWS) 和阿里云 (Alibaba Cloud) 是全球领先的提供商，各自在功能范围、服务生态系统、性能表现和适用场景上具有独特优势。基于提供的引用[1]-[5]，我将从功能、服务和性能三个方面进行结构化对比分析&#…...

编程新知 2025/9/28 1:33:29

无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命：电力载波技术赋能楼宇自控系统在楼宇自动化领域，传统控制系统依赖复杂的专用通信线路，不仅施工成本高昂，后期维护和扩展也极为不便。电力载波技术（PLC）的突破性应用，彻底改变了…...

编程新知 2025/7/6 5:46:43

Modbus转Ethernet IP深度解析：磨粉设备效率跃升的底层技术密码

在建材矿粉磨系统中，开疆智能Modbus转Ethernet IP网关KJ-EIP-101的应用案例是一个重要的技术革新。这个转换过程涉及到两种主要的通信协议：Modbus和Ethernet IP。Modbus是一种串行通信协议，广泛应用于工业控制系统中。它简单、易于部署和维护…...

编程新知 2025/9/28 1:12:16