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页面,包含一个输入框和一个按钮用于查询单词:

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 中编写前端逻辑:

javascript 复制代码
  // 页面加载添加:监听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服务器代码,使用 expressjs-mdict 来处理查询请求:

javascript 复制代码
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}`);
});

5. 运行项目

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

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

6. 部署

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

7. 进一步优化

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

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

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

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

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

相关推荐
还是鼠鼠8 小时前
Node.js 路由 - 初识 Express 中的路由
前端·vscode·前端框架·npm·node.js·express
gqkmiss2 天前
Electron 开发:获取当前客户端 IP
tcp/ip·electron·nodejs·os
还是鼠鼠4 天前
认识 Express.js:Node.js 最流行的 Web 框架
开发语言·前端·javascript·vscode·node.js·json·express
akko_10 天前
cool-admin-midway 使用腾讯云cos上传图片
云计算·nodejs·腾讯云·koa·后台管理·midway·cool-admin
GDAL11 天前
使用 `better-sqlite3` 与 `Express.js` 的最佳实践:是否需要关闭数据库连接?
数据库·sqlite·express
蜗牛快跑12313 天前
使用Turbopack、Biome、Next.js、Express、Tailwind CSS和ShadCN构建全栈Monorepo项目
前端·express·next.js
一袋米扛几楼9813 天前
【概念】Node.js,Express.js MongoDB Mongoose Express-Validator Async Handler
javascript·node.js·express
丶Darling.13 天前
利用hexo+github部署属于自己的个人博客网站(2025年3月所写)
git·github·nodejs·hexo·个人博客
twins352014 天前
使用Node.js和Express搭建图片缓存服务或应用服务器
node.js·express
GuokLiu14 天前
250316-Open-WebUI源码部署+离线迁移
nodejs·open-webui