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

mkdir data ; 把英汉字典文件（.mdx , .mdd) copy to data/

2. 安装依赖

在项目根目录下运行以下命令，初始化项目并安装所需的依赖：
cd mydict-app
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 中编写前端逻辑：

  // 页面加载添加：监听iframe网页点击事件$(document).ready(function(){var listener = window.addEventListener('blur', function(){if (document.activeElement === document.getElementById('iframe')){$('iframe').contents().find('a.fayin').click(function(event){event.preventDefault();var a = $(this);if (a){var addr = a.attr('href');if (addr.indexOf('sound://')==0){var url = "/data" + addr.substring(7);var mp3 = new Audio(url);mp3.addEventListener("canplaythrough", (event)=> {mp3.play();});} else {alert('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('./data/oale8.mdx');
//const mdd = new Mdict.MDD('./data/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 = "../testdict/data";
const isValidPath = (path1) => {// 只允许字母、数字、下划线、点return /^[a-zA-Z0-9_\.]+$/.test(path1);
};
// 实现文件下载，*/是路径
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 (!isValidPath(path1) || !isValidPath(fileName)) {return res.status(400).send('Invalid path.');}    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}`);
});