69-记单词软件及网站开发（一）_写一个背单词网站

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

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

源码：https://download.csdn.net/download/qq_39451578/88839400

本人需求：

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_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()

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

2.开发网站：

（一）框架搭建：

网站从零开始开发，但是配置文件还是从以前的拷一个吧，也就是找个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%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";
	}

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

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

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

源码：https://download.csdn.net/download/qq_39451578/88839400