69-记单词软件及网站开发（一）

本人曾今英语渣渣，现在依然是！！！但是也想学好英语，学好英语得记单词呀。于是引出了记单词的需求，市场上这么多单词软件还不够你用吗？非得作死自己搞一个，用室友的话说：这是对技术的追求！狗屁，哪那么闲啊，主要是别人的软件用着总会感觉有不合适的地方，所以如果按照自己的需求设计一款记单词软件和网站，你就别找借口不想记单词是因为别人的软件要收钱或者不好用！！！

需求很明确了，就是设计一款按自己需求的软件记单词。

本人需求：

1.包含记单词功能；

2.单词库初步包含恋念有词（2019版），其实与2020差别好像不大；

3.具备发音、加入单词本功能（这里就必须要登入了）。

4.成品：网站、webAPP(就是将网站用HBuilder打包为安卓应用)，所以其实做网页版就够了。

如果大家有什么好的建议，请在下方评论！

开发设计：

1.技术：前端使用webApp模板，后端使用 ssm 框架；

2.数据库：mysql;

3.先构建网页版，后面用将网站利用hbuilder打包为安卓app 即可。

数据库设计（目前，后面根据需求完善）：

1.用户表；

2.单词表；

3.生词表；

4.每本单词书的各个单元数量统计视图；

5.生词和单词视图视图；

源码附上：

/*用户表*/
DROP TABLE IF EXISTS `user`;
CREATE TABLE user(id int(11) auto_increment primary key,username varchar(20) not null unique comment "登录名",password varchar(20) not null comment "密码",phone varchar(15) comment "联系电话",level int(2)  comment  "用户权限： 0 普通用户； 1 VIP用户",motto varchar(255) comment "座右铭",create_time timestamp default current_timestamp
)engine=InnoDB auto_increment=1 default charset=utf8;/* 生词本 */
DROP TABLE IF EXISTS `wordbook`;
CREATE TABLE wordbook(id int(11) auto_increment primary key,wid int(11)  comment  "单词id",uid int(11)  comment  "用户id",remember int(3)  default 5 comment  "用户记忆等级",create_time timestamp default current_timestamp
)engine=InnoDB auto_increment=1 default charset=utf8;/* 单词 */
--DROP TABLE IF EXISTS `word`;
CREATE TABLE word (id int(11) NOT NULL AUTO_INCREMENT,name varchar(50) NOT NULL comment "单词",mean varchar(250) NOT NULL comment "含义",  voice_en varchar(100) comment "英式发音",voice_am varchar(100) comment "美式发音",unit int(11) NOT NULL comment "所属单元",bookname varchar(50) NOT NULL comment "所属单词书",PRIMARY KEY (id)
) ENGINE=InnoDB auto_increment=1 default charset=utf8;/* 每本单词书的各个单元数量统计 */
create view v_unitword_num
select bookname, unit, count(id) as num
from word word
group by bookname, unit; /* 生词和单词视图 */
create view v_wordbook_word as
SELECT a.id,wid,uid,remember,create_time,name,mean,voice_en,voice_am,unit,bookname
FROM `wordbook` a
left JOIN word b on a.wid = b.id;

代码实现：（分小块简单介绍实现的思路，后面会将源码附上给大家参考！）

1.单词从何而来：

我主要目的只获取恋念有词的单词库，我从github找到了资源，地址。

可以从上面下载下来，然后存入数据库，怎么存？首先获取的只有单词英文，没有中文意思，所以该怎么办。我是先从取其它网站逐个查询其意思，然后就获得了词库了，但是我只记录了中文意思，没有记录例句啥的！！！当然不可能手动取查询，不然两千多个单词还不要累死呀，我是利用python写了个脚本去做的。得到词库要存入数据库，先构建好数据库的表格，然后我是用python代码自动插入的。

python处理代码如下：

1.main.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time    : 2019/7/24 14:58
# @Author  : ystraw
# @Site    :
# @File    : main.py
# @Software: PyCharm Community Edition
# @function: 组织所有逻辑import requests
import random
from bs4 import BeautifulSoup
import time
import random
import re
from urllib import parse
import database_toolsdef write(name, context):with open(name, 'w', encoding='utf-8') as f:f.write(context)print('已写入!')#查询单词，无需登入
def search(word):# word = 'shared'#查询连接：wd = parse.quote(word) #转码：url = 'http://dict.kekenet.com/en/' + word# print(url)response = requests.get(url).textbs = BeautifulSoup(response, 'lxml')trans = bs.findAll('div', attrs={'id': 'wordm'} )moduel = re.compile('<.*?>')# print(trans[0])info = ''try:st = str(trans[0])info = re.sub(moduel, '\n', st)except Exception:# print(trans)# print(Exception)pass# print(info)return info# 从文本获取每单元单词
def getWords(unit):# 获取单词print('./words/恋恋有词生词本/unit (' + str(unit) + ').txt')with open('./words/恋恋有词生词本/unit (' + str(unit) + ').txt', 'rb+') as f:string = f.read().decode("utf8","ignore")# print(string)words = string.split('\n')# print(words)return wordsif __name__ == '__main__':# 获取单词for unit in range(15, 31):# print(unit)words = getWords(unit)# print(words)words_name = []words_mean = []tt = 0for word in words:if word != None and word != '' and tt != 0:words_name.append(word)word_mean = search(word)   # 查询单词含义words_mean.append(word_mean)database_tools.myInsert(word, word_mean, unit) # 插入数据库# time.sleep(1)# breaktt = 1print("单词name: ", words_name)print("单词mean: ", words_mean)print(len(words_name))print(len(words_mean))

2.database_tools.py

#!/usr/bin/python3import pymysql# 1. 查询：
# 使用 execute()  方法执行 SQL 查询
# cursor.execute("select * from user_inf")
# 使用 fetchone() 方法获取单条数据.
# data = cursor.fetchall()
# print(data)# 2. 插入：
def myInsert(word_name, word_mean, unit):# 打开数据库连接db = pymysql.connect("localhost", "root", "root", "mywords")# 使用 cursor() 方法创建一个游标对象 cursorcursor = db.cursor()try:#插入：# sql = "insert into word(word, chinese) values('test', '测试')"sql = "INSERT INTO `mywords`.`word`(`name`, `mean`, `voice_en`, `voice_am`,`unit`,`bookname`) VALUES ('" + word_name + "' , '"+word_mean+"', NULL, NULL, "+ str(unit) +", '恋恋有词');"# print(sql)cursor.execute(sql)# 提交到数据库执行db.commit()# print("finishe!")except BaseException:# 如果发生错误则回滚print('------faile!', word_name)db.rollback()# 关闭数据库连接db.close()

不出意外应该搞好单词库了吧，要想要例句啥的自己修改代码，获取即可。

2.开发网站：

（一）框架搭建：

网站从零开始开发，但是配置文件还是从以前的拷一个吧，也就是找个ssm框架的模板，其配置文件完善的即可，我是用我以前的一个地址。

简单说下，如果是使用的我的模板的换，建议新建一个javaweb工程，将除了filter文件外的其余文件请考到新建文件的对应位置，然后修改您的配置文件中部分内容：

1.spring-mvc.xml：中的base-package配置，

修改为本项目对应即可，也就是你的controller在什么包下就用什么。

<context:component-scan
base-package="com.ctgu.wd.controller" />

2.applicationContext.xml：

base-package包改为您当前的包，例如我的为：

<context:component-scan base-package="com.ctgu" />

3.jdbc.properties：

修改：url中的数据库地址，端口号，需要链接的数据库名称（即本项目建立的数库）；

修改：username修改登入名称；

修改：password修改登入密码；

4.web.xml：

最好用我的web.xml覆盖新建项目的web.xml，但是需要注释调：权限过滤器（UserFilter，AdminFilter）的配置，最后提醒目前开发先不用过滤器，到最后项目完成了在打开，并重新配置下即可。

框架搭好了先跑下，能跑通就简单了，后面就是加写实现逻辑了。

（二）代码实现：

1.单词展示与发音：

先实现小的demo吧，即先能实现放一个单词到页面，然后能发音即可，刚开始要求不要太高。

怎么实现？

读音从何而来，两种思路，一种利用单词意思来源相同的思路，去某个网站全部爬下来，然后从本地调用；另一种，比较简单就是直接给个链接取别人那里获取读音，自己玩的话，完全可以，但是如果要真正做自己的软件就不太好，本人追求不高玩玩而已，直接使用了第二中方法。

http://dict.youdao.com/dictvoice?type=1&audio=forklift （英音）

http://dict.youdao.com/dictvoice?type=2&audio=forklift （美音）

http://dict.youdao.com/dictvoice?audio=road%2Broller （词组%2B是链接符号

找到了写了个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>video::-webkit-media-controls-enclosure {overflow: hidden;}video::-internal-media-controls-overflow-button {display: none !important;}video::-webkit-media-controls-mute-button {display: none !important;}</style><script src="jquery-3.4.1.min.js"></script>
</head><body><!-- <video controls="" autoplay="" name="media" > --><div>forklift<img class="pronounce" src="sound.png" style="background-color: black; cursor: pointer" alt="voice" onclick="play(this)"><audio src="http://dict.youdao.com/dictvoice?type=2&amp;audio=forklift"></audio></div><script>function play(obj) {$(obj).parent().find("audio").trigger('play');}</script>
</body></html>

2.界面设计

能实现demo了，后面就是找个好看的webapp模板了，改下界面，把自己的单词弄进去。模板网上很多，有各种模板网站，直接百度一个自己喜欢的，我找的是以前写项目用过的模板，如果需要可以去下载, 地址，界面如下：

所以，找一款自己喜欢的前端模板吧，然后就是改改，当然如果要求比较高，并且是前端大佬，那可以自己设计一款。

3.首先实现一个首页的搜索功能吧。

csdn没有代码折叠吗？？？放上代码好占位置呀！！！

放上我的前端页面，因为很多页面都是共用一个head.jsp和foot.jsp,所以我把他切出来了，代码一并送上：

appHead.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>SX</title>
<!-- For-Mobile-Apps-and-Meta-Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //For-Mobile-Apps-and-Meta-Tags -->
<!-- Custom Theme files -->
<link href="${pwd }/static/app/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="${pwd }/static/app/css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="${pwd }/static/app/css/ken-burns.css" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- js -->
<script src="${pwd }/static/app/js/jquery-2.2.3.min.js"></script><!-- //js -->
<!-- pop-up-box -->
<script src="${pwd }/static/app/js/jquery.magnific-popup.js" type="text/javascript"></script><script>$(document).ready(function() {$('.popup-top-anim').magnificPopup({type: 'inline',fixedContentPos: false,fixedBgPos: true,overflowY: 'auto',closeBtnInside: true,preloader: false,midClick: true,removalDelay: 300,mainClass: 'my-mfp-zoom-in'});                                                                                           });
</script><script>function play(obj) {$(obj).parent().find("audio").trigger('play');}
</script><!--//pop-up-box -->
<!-- web-fonts -->
<link href='http://fonts.useso.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- //web-fonts -->
</head>
<body class="bg"><div class="agile-main"> <div class="menu-wrap" id="style-1"> <nav class="top-nav"><ul class="icon-list"><c:if test="${user == null }"><li class="menu-title"><a herf = "${pwd}/user/login" style = "font-size:20px;">未登入</a></li></c:if><c:if test="${user != null }"><li class="menu-title" style="text-align:center;">${user.username } </li></c:if><li><a class="active" href="${pwd }/index"><i class="glyphicon glyphicon-home"></i> 主页 </a></li><li><a href="${pwd }/word/wordbook"><i class="glyphicon glyphicon-info-sign"></i> 单词书 </a></li><li><a href="${pwd }/word/newword"><i class="glyphicon glyphicon-briefcase"></i> 生词本 </a></li><li><a href="${pwd }/user/personInfo"><i class="glyphicon glyphicon-eye-open"></i> 个人信息 </a></li><li><a href="${pwd }/about"><i class="glyphicon glyphicon-picture"></i> 关于 </a></li><ul class="nav-sub"><li><a href="#small-dialog" class="sign-in popup-top-anim"><i class="glyphicon glyphicon-user"></i> login</a></li>                                             <li><a href="#small-dialog1" class="sign-in popup-top-anim"><i class="glyphicon glyphicon-edit"></i> Sign Up</a></li>                                                                                              <li><a href="codes.html"><i class="glyphicon glyphicon-list-alt"></i> Short Codes</a></li> </ul><div class="clearfix"> </div><script>$( "li a.menu" ).click(function() {$( "ul.nav-sub" ).slideToggle( 300, function() {// Animation complete.});});</script> </li></ul></nav><button class="close-button" id="close-button">C</button></div> <div class="content-wrap"><div class="header"> <div class="menu-icon">   <button class="menu-button" id="open-button">O</button></div><div class="logo"><h2><a href="${pwd}/index">SX</a></h2></div><div class="login"><c:if test="${user == null }"><a href="#small-dialog" class="sign-in popup-top-anim"><span class="glyphicon glyphicon-user"></span></a></c:if><c:if test="${user != null }"><a href = "${pwd}/user/logout" style = "font-size:20px; color:#fff;">退出</a><%-- <li class="menu-title" style="text-align:center;">${user.username } </li> --%></c:if><!-- modal --><div id="small-dialog" class="mfp-hide"><div class="login-modal">     <div class="booking-info"><h3><a href="main.html">用户登陆</a></h3></div><!--  用户登入  --><div class="login-form"><form action="${pwd}/user/login" method="post"><div class="styled-input"><input type="text" name="username" required=""/><label>用户名</label><span></span></div><div class="styled-input"><input type="password" name="password" required=""> <label>密码</label><span></span></div> <div class="wthree-text"> <ul> <li><input type="checkbox" id="brand" value=""><label for="brand"><span></span>记住我?</label>  </li><li> <a href="#">忘记密码?</a> </li></ul><div class="clear"> </div></div> <input type="submit" value="登陆" >       </form><p>没有账号？<a href="#small-dialog1" class="sign-in popup-top-anim">注册</a></p></div> </div></div><!-- //modal --> <!-- modal-two --><!---------------------- 注册 ---------------------><div id="small-dialog1" class="mfp-hide"><div class="login-modal">  <div class="booking-info"><h3><a href="main.html">注册</a></h3></div><div class="login-form signup-form"><form action="${pwd}/user/registerInfo" method="post"><div class="styled-input"><input type="text" name="username" required=""/><label>用户名</label><span></span></div><div class="styled-input"><input type="password" name="password" required=""> <label>密码</label><span></span></div>  <div class="styled-input"><input type="text" name="phone" required=""/><label>电话</label><span></span></div><div class="styled-input"><input type="text" name="motto" required=""/><label>座右铭</label><span></span></div><div class="wthree-text"> <input type="checkbox" id="brand1" value="" checked="true"><label for="brand1"><span></span>我接受使用条款</label> </div><input type="submit" value="Sign Up">        </form> </div> </div></div><!-- //modal-two --> </div> <div class="clearfix"> </div></div>

appFoot.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!-- //brands --><!-- footer --><div class="w3agile footer"> <div class="social-icons"><ul><li><a href="#"> </a></li><li><a href="#" class="fb"> </a></li><li><a href="#" class="gp"> </a></li><li><a href="#" class="drb"> </a></li></ul><div class="clearfix"> </div></div><div class="footer-nav"><ul>  <li><a href="#"> Home </a></li><li><a href="#"> About </a> </li><li><a href="#"> Properties </a></li><li><a href="#"> Gallery</a></li><li><a href="#"> Contact </a></li></ul> <div class="clearfix"> </div></div> <div class="footer-text"><p>Copyright &copy; 2019.YSTRAW.</p></div></div> </div></div></div> <!-- menu-js --><script src="${pwd }/static/app/js/classie.js"></script><script src="${pwd }/static/app/js/main.js"></script><!-- //menu-js --><!-- nice scroll-js --><script src="${pwd }/static/app/js/jquery.nicescroll.min.js"></script> <script>$(document).ready(function() {var nice = $("html").niceScroll();  // The document page (body)$("#div1").html($("#div1").html()+' '+nice.version);$("#boxscroll").niceScroll({cursorborder:"",cursorcolor:"#00F",boxzoom:true}); // First scrollable DIV});</script><!-- //nice scroll-js --><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="${pwd }/static/app/js/bootstrap.js"></script>

searchReasult.jsp

<%@ include file="../baseFrame/appHead.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><script type="text/javascript">function addword(id) {      var params = {id: id};url = '${pwd}/word/addword';$.post(url,params,function(data){//   alert(data);//这个data就是返回的数据if (data == "1") {alert("添加成功！");}else if(data == "3"){alert("您已经添加过，无需再次添加！");}else{alert("您尚未登入!"     );}});return false;}
</script><!----------------主页内容--------------------  --><div class="content"><div class="container"><div class="row" style="padding: 5px 10px;"><table class="table table-striped text-center"><caption  style="text-align:center">查找结果</caption><tbody><c:if test="${flag == 1}"><tr><td>恋念有词中暂无此单词,<a href="https://www.baidu.com/s?wd=${word}">百度一下</a></td></tr></c:if><c:if test="${flag == 0}"><tr><td style="text-align:left"><div>${word.name }   &nbsp;<img class="pronounce" src="${pwd }/static/images/sound.gif" style="background-color: black; cursor: pointer;" alt="voice" onclick="play(this)"><audio src="http://dict.youdao.com/dictvoice?type=2&amp;audio=${word.name }"></audio>&nbsp;<img class="pronounce" src="${pwd }/static/images/addword.gif" style="cursor:pointer" alt="addword" onclick="addword('test')"></div></td></tr><tr><td style="text-align:left">${word.mean }</td></tr></c:if></tbody></table></div></div><!-- foot -->         <%@ include file="../baseFrame/appFoot.jsp"%>
</body>
</html>

我建立一个WordController.java 用来控制单词相关的逻辑：

搜索相关的代码如下：

 /*** 查找单词* * @param model* @return*/@RequestMapping("/search")public String Search( Model model, @RequestParam("word") String wd) {// 查词Word word = wordService.findByName(wd);if(word == null) {model.addAttribute("flag", 1);model.addAttribute("word", wd);}else {word.setMean(word.getMean().replace("\n", "<br>"));model.addAttribute("word", word);model.addAttribute("flag", 0);}return "app/searchReasult";}

需要注意的是，我是从数库中查找前端页面传过来得单词，从我的恋念有词库，所以问题来了：

1.可能没有该单词，所以我就将其返回值的flag标记为1，在前端提示词库暂时没有，并给以百度该词的链接。

2.查询的词词库不止一条，所以写sql语句时要注意，只返回一条即可，即用 limit 1 限制一下。

// 根据name查询和删除
@Select("select * from "+ "word" +" where name = #{name} limit 1")
Word findByName(String name);

结果如下：

4.搜索功能写完了，写个单词书页面把。

wordbook.jsp

<%@ include file="../baseFrame/appHead.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!----------------单词书--------------------  --><div class="content"><div class="container"><div class="row" style="padding: 5px 10px;"><table class="table table-striped text-center"><caption style="text-align:center; font-size:25px; color:#0f0;">${unitword_num[0].bookname }</caption><thead><tr><th class="text-center">单元</th><th class="text-center">单词数量</th></tr></thead><tbody><c:forEach items="${unitword_num }" var="uwn"><tr> <td><P><a href = "${pwd }/word/wordList?unit=${uwn.unit }">${uwn.bookname } &nbsp; unit${uwn.unit } &nbsp;&nbsp;</td><td>单词数量：${uwn.num } </a></P></td></tr>      </c:forEach></tbody></table></div></div><!-- foot -->           <%@ include file="../baseFrame/appFoot.jsp"%></body>
</html>

WordController.jsp：

 /*** * 返回对应单词书的指定单元的单词* * @param model* @param unit* @return*/@RequestMapping("/wordList")public String WordList( Model model, @RequestParam("unit") Integer unit) {
//      // 查询数据库单词
//      List<Word> words = wordService.findAllWord();
//      System.out.println("数据库单词：" + words);//       // 查询指定单元的指定书籍单词String bookname = "恋恋有词";Word word = new Word();word.setUnit(unit);word.setBookname(bookname);List<Word> words = wordService.findWordBySome(word);
//      System.out.println("数据库单词：" + words);model.addAttribute("words", words);model.addAttribute("unit", unit);return "app/wordList";}

结果图，如下所以：

5.显示每个单元的单词：

wordList.jsp

<%@ include file="../baseFrame/appHead.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%-- <script src="${pwd }/static/bs/jquery-3.4.1.min.js"></script>   --%>
<script type="text/javascript">function addword(id) {      var params = {id: id};url = '${pwd}/word/addword';$.post(url,params,function(data){//   alert(data);//这个data就是返回的数据if (data == "1") {alert("添加成功！");}else if(data == "3"){alert("您已经添加过，无需再次添加！");}else{alert("您尚未登入!"   );}});return false;}
</script> <!----------------单词列表--------------------  --><div class="content"><div class="container"><div class="row" style="padding: 5px 10px;"><table class="table table-striped text-center"><caption style="text-align:center"><a href="${pwd }/word/wordbook">unit${unit }单词</a></caption><!-----单词列表--- --><tbody><c:forEach items="${words }" var="word"> <tr><td  width="40%"><div>${word.name }<img class="pronounce" src="${pwd }/static/images/sound.gif" style="background-color: black; cursor: pointer;" alt="voice" onclick="play(this)"><audio src="http://dict.youdao.com/dictvoice?type=2&amp;audio=${word.name }"></audio>&nbsp; <img class="pronounce" src="${pwd }/static/images/addword.gif" style="cursor:pointer" alt="addword" onclick="addword(${word.id})"></div></td><%-- <td>${word.mean }</td> --%><td><label id = "1" onclick="ishow(this);" data-text = "${word.mean }" >点击查看</label></td></tr></c:forEach></tbody></table></div></div><script>function ishow(obj){
//                          alert(obj.innerHTML);           // 获取当前标签值
//                          alert($(obj).data("text"));    // 获取标签存放的值//                          var test = obj.getAttribute("data-text");alert(obj.innerHTML + ";" + test);
//                          obj.setAttribute("data-text", obj.innerHTML);
//                          obj.innerHTML = test;var t = obj.innerHTML;obj.innerHTML = $(obj).data("text");$(obj).data("text", t);}</script><!-- foot -->            <%@ include file="../baseFrame/appFoot.jsp"%></body>
</html>

WordController.java:

下面包括展示单词，和接受收藏单词的代码

 /*** * 返回对应单词书的指定单元的单词* * @param model* @param unit* @return*/@RequestMapping("/wordList")public String WordList( Model model, @RequestParam("unit") Integer unit) {
//      // 查询数据库单词
//      List<Word> words = wordService.findAllWord();
//      System.out.println("数据库单词：" + words);//       // 查询指定单元的指定书籍单词String bookname = "恋恋有词";Word word = new Word();word.setUnit(unit);word.setBookname(bookname);List<Word> words = wordService.findWordBySome(word);
//      System.out.println("数据库单词：" + words);model.addAttribute("words", words);model.addAttribute("unit", unit);return "app/wordList";}

/*** * 添加单词到单词本* * @param model* @param word* @return*/@ResponseBody@RequestMapping("/addword")public String Addword( Model model, @RequestParam("id") Integer id) {User user = (User) session.getAttribute("user");if(user == null) {return "2";
//          return "您尚未登入";}
//      System.out.println("用户：" + user.toString());Wordbook wb = new Wordbook();wb.setRemember(5); // 默认的单词等级wb.setUid(user.getId());wb.setWid(id);List<Wordbook> wb2 = wordbookService.findWordbookBySome(wb);if(wb2.size() > 0) {return "3";
//          return "您已经添加过，无需再次添加！";}wordbookService.addWordbook(wb);return "1";}

注意：这里前端设计的中设计到一个功能，就是点击可以隐藏单词含义，并且再次点击又可以显示单词含义，这里我的写的js是利用了标签的data- 属性来实现的，也就是刚开始分别将单词含义和点击查看分别存在标签的data-text和标签的html中，点击时，将被点击的标签对象传入函数，然后就是交换两者之间的内容了，很简单的。

结果页面如下所示：

6.显示收藏的单词：

前端页面和后端处理代码如下：

newWordList.jsp

<%@ include file="../baseFrame/appHead.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><script src="${pwd }/static/bs/jquery-3.4.1.min.js"></script>
<script type="text/javascript">function delword(id, obj) { var params = {id: id};url = '${pwd}/word/delword';$.post(url,params,function(data){//   alert(data);//这个data就是返回的数据if (data == "1") {alert("删除成功！");var index=obj.parentNode.rowIndex;var table = document.getElementById("table");table.deleteRow(index);}else if(data == "2"){alert("您尚未登入");}else{alert("您未添加该单词！");}});return false;}</script>    <!----------------收藏的生单词列表--------------------  --><div class="content"><div class="container"><div class="row" style="padding: 5px 10px;"><table  id="table" class="table table-striped text-center"><caption style="text-align:center"><a href="#">收藏单词列表</a></caption><!-----单词列表--- --><tbody id = "tbody"><c:forEach items="${newwordlist }" var="word" varStatus="status"> <tr><td width="40%"> <div>${word.name }<img class="pronounce" src="${pwd }/static/images/sound.gif" style="background-color: black; cursor: pointer;" alt="voice" onclick="play(this)"><audio src="http://dict.youdao.com/dictvoice?type=2&amp;audio=${word.name }"></audio>&nbsp;<img class="pronounce" src="${pwd }/static/images/delword.gif" style="cursor:pointer" alt="addword" onclick="delword(${word.id}, this)"></div></td><%-- <td>${word.mean }</td> --%><td><label id = "1" onclick="ishow(this);" data-text = "${word.mean }" >点击查看</label></td></tr></c:forEach></tbody></table></div></div><script>function ishow(obj){
//                          alert(obj.innerHTML);           // 获取当前标签值
//                          alert($(obj).data("text"));    // 获取标签存放的值//                          var test = obj.getAttribute("data-text");alert(obj.innerHTML + ";" + test);
//                          obj.setAttribute("data-text", obj.innerHTML);
//                          obj.innerHTML = test;var t = obj.innerHTML;obj.innerHTML = $(obj).data("text");$(obj).data("text", t);}</script><!-- foot -->            <%@ include file="../baseFrame/appFoot.jsp"%></body>
</html>

WordController.java:

 /*** * 删除单词本中的指定单词* * @param model* @param word* @return*/@ResponseBody@RequestMapping("/delword")public String Delword( Model model, @RequestParam("id") Integer id) {User user = (User) session.getAttribute("user");if( user == null) {return "2";
//          return "您尚未登入";}try {wordbookService.deleteById(id);} catch (Exception e) {return "3";
//          return "您没有添加改单词！";}return "1";}/*** * 返回收藏的单词* * @param model* @param unit* @return*/@RequestMapping("/newword")public String Wewword( Model model) {User user = (User) session.getAttribute("user");if( user == null) {return "2";
//          return "您尚未登入";}// 查询本用户生词V_wordbook_word v_wordbook_word = new V_wordbook_word();v_wordbook_word.setUid(user.getId());List<V_wordbook_word> newwordlist = v_wordbook_wordService.findV_wordbook_wordBySome(v_wordbook_word);model.addAttribute("newwordlist", newwordlist);return "app/newWordList";}

返回收藏的单词，我从视图中查找的数据，并封装了一个对应的对象，这样直接传到前端比较好处理。

至此，我目前的开发过程和内容已经说完了，并已经放到了服务器上，大家有兴趣可以玩玩吧（趁它还没到期），地址。

功能目前就上面这么多（用户的登入注册有，那个就懒得写了），对本软件有什么想法的可以留言！

源码