这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
- 功能描述：
- web端采用PHP作为后端支持，web端需要实现的功能包括单词列表的显示，单词上下文详细信息的显示，单词翻译的显示和单词发音的展示和播放。
- 实现方法：
- 使用PHP连接mysql服务器，访问单词本的相关数据库。包括单词的上下文语境、单词的翻译等信息
- 首先使用PHP连接mysql，然后使用查询语句查出 words 数据表中，review_date 为当前日期的单词，获取一个单词列表
- 单词列表去重，得到不重复的当天要学习的单词集合
- 对照每一个单词，去 words 表中查询该单词所在的所有记录，每一条记录对应一个上下文语境信息，即一个例句、一篇文章
- 然后根据单词从translations表中查询该单词的翻译
- 从translations表中查询到的单词翻译相关信息存储在一个json格式的字符串中，需要使用json的解析工具将其解析为字典，从而从json字符串还原成原始的单词翻译、音标、例句、读音路径等信息
- 单词发音的实现
- 单词发音的实现采用的是html5的一个 audio 标签
- 需要满足的功能是点击页面的特定位置，会发出单词的读音
- 只需要audio标签的音乐播放功能，不需要其他的一些复杂控制机制，比如快进，暂停等
- 声音播放的标签代码如下
<span>
<img src="../includes/imgs/audio.png" width="50px" id="btn">
<audio src="audio.wav" id="myaudio" controls="controls" preload="auto" hidden="true">
</audio>
</span>
- 同理，标签的播放控制通过前段的js代码实现
- javaScripts可以捕获页面上的元素 audio 和 btn（扬声器图片，id为btn，用于控制声音的播放），然后将 audio 控件的play行为封装进一个函数，接着将该函数绑定 btn 的 onclick 方法，JavaScripts的具体实现代码如下
<script type="text/javascript">
var btn=document.getElementById('btn');
var audio=document.getElementById('myaudio');
var tag = true;
btn.onclick = function(){
audio.play();
}
</script>
- 至此，单词本的web端设计已完成，下面是效果展示
- 单词本的单词列表页
- 单词本的单词详情页
