nodejs：express+js-mdict网页查询英汉词典，能显示图片
- 开源代码
- 2025-09-09 18:48:02
向 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网页查询英汉词典，能显示图片由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“nodejs：express+js-mdict网页查询英汉词典，能显示图片”
