nodejs:express + js-mdict 网页查询英汉词典,能播放.spx 声音

向 DeepSeek R1 提问:
我想写一个Web 前端网页,后台用 nodejs + js-mdict , 实现在线查询英语单词,并能播放.spx 声音文件

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/index1.htm 中创建一个简单的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>查询英汉词典 spx</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="bitstring.min.js"></script> 
<script src="pcmdata.min.js"></script> 
<script src="speex.min.js"></script> 
<script src="script3.js"></script>
</body>
</html>

 在 public 中添加一些英汉字典的样式:uk_pron.png, us_pron.png, bitstring.min.js 和 pcmdata.min.js, speex.min.js
copy jquery-3.2.1.min.js pulibc\jquery.js
speex.js 下载网址:speex.js 是Web前端网页播放.spx声音文件所需的解码器

在 public/script1.js

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值