企业官网建设流程全解析

简介：这是一套基于JavaWeb技术栈开发的背单词网站及配套安卓APP的完整源码项目，面向Java初学者与Web开发练习者，解决词汇记忆类应用从零搭建、数据库集成到跨端发布的实践难题。资源包含542个文件，涵盖56个运行依赖jar包、37个核心java业务逻辑文件、22个jsp页面模板、11个js交互脚本、8个xml配置文件及6个css样式资源，另有sql建库脚本、数据库初始数据、HBuilder打包配置等，结构完整，开箱即用。目前已有839人学习下载。读者可直接部署运行网站，体验登录、单词发音、加入单词本、词库管理等全流程功能；获取恋念有词（2019版）结构化词库及对应数据库设计；复用WebAPP打包方案快速生成安卓安装包；同时参考清晰分层的MVC代码组织方式，深入理解JavaWeb前后端交互与会话管理机制。

1. 一个能真正用起来的 Java Web 单词网站：不是 Demo，是带数据库、发音、单词本、安卓打包的完整工程

你试过网上搜“Java 记单词软件”吗？十有八九点开是空壳项目——只有 LoginServlet.java 和 index.jsp，连个数据库表都没建；或者更糟，是 IDEA 新建 Web Application 后没动过的一堆默认文件。但这个资源不一样：它是一套真实跑通、用户可注册登录、能查词发音、能加单词本、能导出复习计划、还能用 HBuilder 打包成安卓 APK 的完整 Java Web 工程。核心不是炫技，而是解决「学英语时，记了忘、忘了记、没反馈、没路径」这个真实痛点。它用的是最稳的 Servlet + JSP + MySQL 组合（非 Spring Boot），所有 DAO 层 SQL 都手写、事务控制明确、密码加盐存储、发音用的是本地 mp3 文件路径映射（非调第三方 API），连前端 JS 都做了防重复提交和空值拦截。适合两类人：一是 Java 初学者想拿一个「有血有肉」的练手项目，从 login.jsp 跟到 UserDAO.java 再到 mysql.user 表，把 MVC 每一层怎么串起来看透；二是教学老师或自学规划者，直接部署就能当班级单词平台用——学生注册后，教师后台能看到每人背了多少、错在哪、高频词是什么。它不追求高并发，但每一步都经得起 debug 断点跟踪。

2. 从零部署：数据库建表、Tomcat 配置、静态资源路径三步落地

2.1 数据库初始化：不只是建库，还要填好初始词库和用户权限

项目自带word_db.sql（在压缩包根目录或/sql/文件夹下），但直接执行会失败——因为表结构里用了utf8mb4字符集，而很多本地 MySQL 默认是utf8（实际是 utf8mb3）。必须先确认你的 MySQL 版本 ≥ 5.5.3，并在创建数据库时显式指定：

CREATE DATABASE word_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE word_system; -- 然后 source word_db.sql

提示：word_db.sql中word表包含 5897 条「恋恋有词 2019 版」词汇，字段含id,english,chinese,phonetic,audio_path,level（1~5 级难度）。特别注意audio_path是相对路径，如audio/abandon.mp3，不是 URL；user表中password字段为 VARCHAR(64)，存的是 SHA-256 加盐哈希值（盐值固定为word_salt_2019），不是明文。

执行完 SQL 后，务必手动插入一条管理员账号（否则无法登录后台）：

INSERT INTO user (username, password, email, role, status) VALUES ('admin', 'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855', 'admin@word.com', 'ADMIN', 1); -- 密码明文是 "admin123"，加盐后哈希值已预计算好

2.2 Tomcat 部署关键：context.xml 与 web.xml 的三个硬性配置

项目不是标准 Maven 结构，而是传统 WebRoot 目录（含 WEB-INF/web.xml），所以不能直接丢进webapps/下就完事。必须做三件事：

1. 修改conf/context.xml，启用 JNDI 数据源（项目用的是 JNDI，不是硬编码 DB 连接）：

<!-- 在 <Context> 标签下添加 --> <Resource name="jdbc/wordDB" auth="Container" type="javax.sql.DataSource" factory="org.apache.tomcat.jdbc.pool.DataSourceFactory" driverClassName="com.mysql.cj.jdbc.Driver" url="jdbc:mysql://localhost:3306/word_system?useUnicode=true&amp;characterEncoding=utf8mb4&amp;serverTimezone=Asia/Shanghai" username="root" password="your_password" maxActive="20" minIdle="5" maxWait="10000"/>

2. 确认WEB-INF/web.xml中<resource-ref>已启用（搜索关键词jdbc/wordDB，确保有如下片段）：

<resource-ref> <description>Word System Database Connection</description> <res-ref-name>jdbc/wordDB</res-ref-name> <res-type>javax.sql.DataSource</res-type> <res-auth>Container</res-auth> </resource-ref>

3. 静态资源路径必须与代码严格一致：项目所有音频文件放在WebRoot/audio/下，图片在WebRoot/images/，JSP 页面引用路径如<audio src="audio/${word.audioPath}" controls></audio>。若你把项目名改成wordapp，则访问地址必须是http://localhost:8080/wordapp/login.jsp，且audio_path字段值不能带/开头（否则路径变成//audio/abandon.mp3，404）。

2.3 HBuilder 打包安卓 APK：不是「一键生成」，而是改三处才能安装成功

WebAPP 打包依赖manifest.json和unpackage目录结构。常见翻车点：

• manifest.json中"name"必须是英文（中文会导致签名失败），"versionName"建议设为"1.0.0"；
• unpackage/res/icon/下必须有 72×72、96×96、144×144 三套图标（缺一套，华为/小米应用市场拒收）；
• 最关键：index.html里<script src="js/main.js"></script>的main.js必须包含 Cordova 初始化逻辑（项目已内置），但需确认deviceready事件监听是否在document.addEventListener('deviceready', onDeviceReady, false);后正确触发——否则安卓端点击「加入单词本」无响应。

打包命令行（HBuilderX 内置终端）：

# 进入项目根目录（含 manifest.json） hbuilderx build --platform android --keystore ./keystore.jks --alias wordapp --password your_keystore_pass

注意：keystore.jks是你自己用keytool生成的签名证书，不能用项目自带的（已过期）。生成命令：

keytool -genkey -v -keystore wordapp.jks -alias wordapp -keyalg RSA -keysize 2048 -validity 10000

3. 功能链路拆解：从用户登录到单词本同步，每一层代码都在解决什么问题

3.1 登录认证：为什么不用 Filter 做全局拦截，而是在每个 Servlet 里手动 checkLogin()

项目没用LoginFilter，而是在WordServlet.java、AddToBookServlet.java等关键业务 Servlet 的doGet/doPost开头写：

HttpSession session = request.getSession(false); if (session == null || session.getAttribute("user") == null) { response.sendRedirect("login.jsp?msg=not_login"); return; }

这不是偷懒，而是刻意为之的可调试性设计。Filter 在链路外，debug 时看不到 session 是否被篡改、attribute 是否被意外清空；而手写检查，断点打在session.getAttribute("user")上，能立刻看到用户对象是否包含username、role、lastLoginTime三个关键字段——这对排查「为什么管理员能进后台，普通用户点收藏就 403」极其关键。另外，login.jsp提交时用 POST，LoginServlet.java中对密码做了两次校验：先查数据库是否存在该用户名，再比对加盐哈希值，避免暴力猜解时暴露「用户名存在与否」。

3.2 单词发音实现：不是调百度语音 API，而是用 HTML5<audio>+ 本地 MP3 文件映射

项目发音功能完全离线。word表中audio_path字段值如abandon.mp3，前端 JSP 渲染时拼接为：

<audio id="audioPlayer" src="audio/<%= word.getAudioPath() %>" preload="metadata"></audio> <button onclick="document.getElementById('audioPlayer').play()">🔊</button>

但这里有个隐藏逻辑：audio/目录下必须有对应文件，且文件名严格小写、无空格、无特殊字符（Abandon.mp3或abandon (1).mp3都会失败）。项目附带的音频包是用 Python 脚本批量下载并重命名的（脚本在/tools/audio_rename.py），原理是：读取word_db.sql中所有english字段，调用gTTS库生成 MP3，再用ffmpeg转码为 44.1kHz/128kbps 标准格式，最后按english.toLowerCase().replace(" ", "_").replace("'", "")规则重命名。如果你新增单词，必须运行此脚本，否则点击发音按钮只会报MediaError: MEDIA_ERR_SRC_NOT_SUPPORTED。

3.3 单词本同步机制：用user_wordbook关联表 + 时间戳，解决「多设备不同步」问题

单词本不是存在 Cookie 或 localStorage，而是持久化到数据库user_wordbook表：

关键点在于：每次用户点击「加入单词本」，后端不是简单 INSERT，而是先 SELECT 检查是否已存在(user_id, word_id)组合。如果存在，只更新last_review；如果不存在，才 INSERT 新记录。这样避免重复添加，也保证review_count可靠。前端wordbook.jsp用 AJAX 分页加载，每页 10 条，SQL 是：

SELECT w.*, uw.review_count, uw.last_review FROM user_wordbook uw JOIN word w ON uw.word_id = w.id WHERE uw.user_id = ? ORDER BY uw.add_time DESC LIMIT ?, 10

参数?是user_id，第二个?是offset（由 JS 计算：(currentPage-1)*10）。

4. 避坑 / 常见问题 / 排查：血泪经验总结的 4 个真实翻车现场

4.1 现象：登录成功后跳转到index.jsp，但页面显示「欢迎，null」

原因：LoginServlet.java中session.setAttribute("user", user)执行了，但user对象的username字段为 null。根源是UserDAO.java的findByUsername方法里，SQL 查询语句写成了SELECT * FROM user WHERE username = ?，而数据库user表中username字段实际是VARCHAR(50)，但插入测试数据时用了INSERT INTO user (username,...)语句，其中username值带前后空格（如' admin '），导致SELECT查不到。
解决：在UserDAO.java的findByUsername方法中，对参数username先 trim：username = username.trim();，并在 SQL 中用TRIM(username) = ?；同时在数据库插入时用INSERT INTO user (username, ...) VALUES (TRIM(?), ...)。

4.2 现象：安卓 APK 安装后打开白屏，控制台报Uncaught ReferenceError: cordova is not defined

原因：HBuilder 打包时未勾选「使用 Cordova 插件」，或manifest.json中"modules"下没声明"cordova"。项目依赖cordova-plugin-media播放音频，若未启用 Cordova，document.addEventListener('deviceready', ...)永远不会触发。
解决：在 HBuilderX 中右键项目 →「移动 APP 设置」→「模块配置」→ 勾选Cordova和Media；然后重新生成unpackage目录，再打包。

4.3 现象：点击「复习计划」生成 PDF 时，页面卡死，Tomcat 日志报java.lang.OutOfMemoryError: Java heap space

原因：PDF 生成用的是 iText 5.5.13.2，但项目代码中PlanServlet.java创建Document时未设置页面大小和边距，导致默认 A4 页面渲染 5000+ 单词时内存暴涨。
解决：在PlanServlet.java中修改 PDF 创建逻辑：

Document document = new Document(PageSize.A4, 36, 36, 54, 54); // 左右上下边距设为 36/54 pt PdfWriter.getInstance(document, response.getOutputStream()); document.open(); // 后续添加内容... document.close();

并增加 JVM 启动参数：-Xms512m -Xmx1024m（在 Tomcatbin/catalina.sh中JAVA_OPTS添加）。

4.4 现象：在 Chrome 浏览器中单词发音正常，但在 Firefox 中点击无反应

原因：Firefox 对<audio>的preload="metadata"支持不一致，某些版本会因未加载完整元数据而拒绝播放。项目 JS 中document.getElementById('audioPlayer').play()没加错误捕获。
解决：在word_detail.jsp的播放按钮 JS 中加 try-catch：

function playAudio() { const audio = document.getElementById('audioPlayer'); audio.play().catch(e => { console.warn('Audio play failed:', e.message); alert('发音功能暂不可用，请检查网络或刷新页面'); }); }

5. 进阶技巧：用「错词分析报表」反向优化单词库，让系统越用越懂你

5.1 错词数据埋点：不是靠用户主动点击「标记错误」，而是监听input事件自动采集

项目在word_test.jsp（单元测试页）中，对每个填空题的<input>元素绑定事件：

document.querySelectorAll('.word-input').forEach(input => { input.addEventListener('blur', function() { const wordId = this.dataset.wordId; const userAnswer = this.value.trim(); const correctAnswer = this.dataset.correct; if (userAnswer.toLowerCase() !== correctAnswer.toLowerCase()) { // 发送错词数据到后台，不阻塞 UI fetch('RecordWrongServlet', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: `word_id=${wordId}&user_answer=${encodeURIComponent(userAnswer)}` }); } }); });

RecordWrongServlet.java将数据存入user_wrong_log表，字段含user_id,word_id,wrong_answer,create_time,ip_address。注意：这里没存correct_answer（隐私考虑），只存用户错答内容，用于后续分析拼写习惯（如总把receive写成recieve）。

5.2 错词报表生成：用 JDBC 手写聚合查询，替代 MyBatis 的 XML 映射

报表页report.jsp调用ReportServlet.java，核心 SQL 不用 ORM，而是直连 JDBC 执行：

SELECT w.english, w.chinese, COUNT(*) as wrong_count, GROUP_CONCAT(DISTINCT uwl.wrong_answer SEPARATOR '; ') as common_mistakes, MAX(uwl.create_time) as last_wrong_time FROM user_wrong_log uwl JOIN word w ON uwl.word_id = w.id WHERE uwl.user_id = ? GROUP BY w.id ORDER BY wrong_count DESC LIMIT 20

结果渲染为 HTML 表格，每行带「高频错答」列（如recieve; recive; resieve），教师可一眼看出学生拼写规律。这个 SQL 的关键在于GROUP_CONCAT—— 它把同一单词的所有错答合并成字符串，比在 Java 层循环拼接更高效，且避免 N+1 查询。

5.3 单词库动态优化：根据错词率自动调整word.level，形成闭环

项目提供OptimizeWordLevelServlet.java，管理员可手动触发（/admin/optimize_level.jsp）：

// 查询错词率 > 30% 的单词（近 30 天） String sql = "SELECT word_id, COUNT(*)*100.0/(SELECT COUNT(*) FROM user_wrong_log WHERE create_time > DATE_SUB(NOW(), INTERVAL 30 DAY)) as rate " + "FROM user_wrong_log WHERE create_time > DATE_SUB(NOW(), INTERVAL 30 DAY) GROUP BY word_id HAVING rate > 30"; // 对这些单词，level +1（最高到 5） String updateSql = "UPDATE word SET level = LEAST(level + 1, 5) WHERE id = ?";

注意：LEAST(level + 1, 5)是 MySQL 函数，确保等级不超上限；DATE_SUB(NOW(), INTERVAL 30 DAY)是日期计算，比 Java 用Calendar构造更可靠。执行后，WordServlet.java的随机选词逻辑会优先返回level=5的单词（ORDER BY level DESC, RAND() LIMIT 10），让复习聚焦薄弱点。

从那以后我每次上线新单词库，都强制走一遍「错词报表 → 手动审核 → 批量调级」流程，哪怕只花 15 分钟。因为系统不会自己判断「abandon」和「abstinence」哪个更难，但学生的错答数据会说话。希望帮到你。

本文还有配套的精品资源，点击获取