本人曾今英语渣渣，现在依然是！！！但是也想学好英语，学好英语得记单词呀。于是引出了记单词的需求，市场上这么多单词软件还不够你用吗？非得作死自己搞一个，用室友的话说：这是对技术的追求！狗屁，哪那么闲啊，主要是别人的软件用着总会感觉有不合适的地方，所以如果按照自己的需求设计一款记单词软件和网站，你就别找借口不想记单词是因为别人的软件要收钱或者不好用！！！
需求很明确了，就是设计一款按自己需求的软件记单词。
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;我主要目的只获取恋念有词的单词库，我从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_tools def 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).text bs = 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 words if __name__ == '__main__': # 获取单词 for unit in range(15, 31): # print(unit) words = getWords(unit) # print(words) words_name = [] words_mean = [] tt = 0 for 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) # break tt = 1 print("单词name: ", words_name) print("单词mean: ", words_mean) print(len(words_name)) print(len(words_mean))2.database_tools.py
#!/usr/bin/python3 import 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() 方法创建一个游标对象 cursor cursor = 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()不出意外应该搞好单词库了吧，要想要例句啥的自己修改代码，获取即可。
（一）框架搭建：
网站从零开始开发，但是配置文件还是从以前的拷一个吧，也就是找个ssm框架的模板，其配置文件完善的即可，我是用我以前的一个地址。
简单说下，如果是使用的我的模板的换，建议新建一个javaweb工程，将除了filter文件外的其余文件请考到新建文件的对应位置，然后修改您的配置文件中部分内容：
1.spring-mvc.xml： 中的base-package配置，
修改为本项目对应即可，也就是你的controller在什么包下就用什么。
<!-- 1.开启springMVC注解模式 --> <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+roller （词组+是链接符号
找到了写了个例子：
<!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&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 © 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 } <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&audio=${word.name }"></audio> <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 } unit${uwn.unit } </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&audio=${word.name }"></audio> <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&audio=${word.name }"></audio> <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"; }返回收藏的单词，我从视图中查找的数据，并封装了一个对应的对象，这样直接传到前端比较好处理。
至此，我目前的开发过程和内容已经说完了，并已经放到了服务器上，大家有兴趣可以玩玩吧（趁它还没到期），地址。
功能目前就上面这么多（用户的登入注册有，那个就懒得写了），对本软件有什么想法的可以留言！
源码
