简介基于Java、JavaScript与HTML实现的水质检测系统是一套面向高校毕业设计、课程设计及项目开发的完整源码与数据库包覆盖后端逻辑、前端页面与数据存储。资源共297个文件主要包括37个Java类用于业务逻辑处理、16个JSP页面实现动态界面、50个JavaScript脚本负责前端交互以及34个CSS文件用于页面样式同时附有SQL数据库脚本和XML配置另有大量PNG、GIF图片作为界面素材压缩包仅3.91MB整体结构清晰便于按模块学习和复用。源码经过严格测试可放心参考或在现有基础上延申功能例如接入更多水质参数、优化图表展示或增加历史趋势分析数据库脚本和前端样式也已配套能帮助快速理解系统设计并拓展二次开发。目前已有50人学习浏览对于需要完成相似课题的开发者具有一定借鉴价值。1. 这套水质检测系统到底在做什么先看懂它的技术构成与使用边界如果你是毕业设计、课程设计或者想快速搭一个“能演示、能答辩”的项目那么“基于javajavaScripthtml实现的水质检测系统”这个标题基本等于给你划好了考试范围后端用Java处理业务逻辑前端用JavaScriptHTML做页面交互再加一个MySQL数据库存数据。它解决的痛点很实在——你不需要从零设计一套微服务架构也不需要写漂亮的前端框架而是用最传统的Java Web开发套路把一个“水质监测数据采集→存储→查询→超标判断→展示”的闭环跑通。这套系统适合谁适合三类人一是时间紧、需要尽快交出一个可运行项目的学生二是想复习Servlet、JDBC、JSP、原生JavaScript这些基础技能的开发者三是想给“智慧水务”“环境监测”这类领域做原型验证的从业者。它不追求生产级高并发也不涉及物联网硬件接入重点是把Web开发里最核心的“前端发请求→后端接参→操作数据库→回传结果→页面渲染”这个链路吃透。我一直认为毕设项目的价值不在于技术多新而在于每一行代码你都能讲清楚为什么这么写。这套系统恰好满足这一点——Java负责业务逻辑和数据库访问JavaScript负责异步请求和DOM操作HTML负责页面骨架三者边界清晰老师问起来你也答得上来。2. 水质检测系统的数据模型从监测指标到表结构设计2.1 水质检测系统的业务对象与核心流程在写代码之前先把业务逻辑理清楚。一个水质检测系统最核心的参与方是“检测点”和“检测记录”。检测点就是某个河流断面、水库、或者自来水厂的取水口每个检测点有位置信息、所属区域、责任人检测记录则是某次采样的结果包含采样时间、pH值、溶解氧、浊度、温度、COD化学需氧量、氨氮等指标。核心流程并不复杂管理员登录系统后台维护检测点信息检测人员录入某一次检测的各项指标数据系统根据设定好的国家标准或地方标准自动判断该次检测是“合格”“超标”还是“严重超标”并把超标项标红展示最后系统能按检测点、按时间段查询历史记录生成统计视图。整个流程就是一个典型的“增删改查业务规则判断”没有复杂的算法但对数据表的关系设计有要求。这里我给一个常见做法检测点表monitor_point和检测记录表water_quality_record是一对多关系一个检测点下面有多条检测记录。用户表sys_user单独建存放登录账号和角色。为了让系统显得完整还可以加一张“评价标准表”quality_standard用来配置不同指标的阈值范围这样阈值就不是写死在代码里而是可维护的。2.2 数据库表设计检测点、检测记录与用户表的关系表之间的关系设计得合理后面写代码会非常省事。我建议第一版只设计四张表少而精sys_user 用户表id、username、password、roleADMIN/USER、create_time。monitor_point 检测点表id、point_code点位编号唯一、point_name、location所在地、manager负责人、create_time。water_quality_record 检测记录表id、point_id外键关联检测点、detect_time采样时间、ph_value、dissolved_oxygen溶解氧 mg/L、turbidity浊度 NTU、temperature水温 ℃、cod化学需氧量 mg/L、ammonia_nitrogen氨氮 mg/L、overall_status1合格 2超标 3严重超标、create_time。quality_standard 评价标准表id、indicator_name指标名、min_value、max_value、level合格/超标/严重超标、description。外键关系上water_quality_record.point_id 指向 monitor_point.id。查询时通过 JOIN 就能拿到“某个检测点最近30天的全部记录”。检测记录表是核心表数据量增长最快所以我会给它建复合索引point_id detect_time后面做范围查询时会明显快一些。2.3 建库建表的完整SQL脚本与字段参数说明下面是完整的建表脚本我加了注释方便你直接复制到Navicat或者命令行里执行。数据库名我用 water_quality_db编码统一用 utf8mb4避免中文乱码。-- 创建数据库 CREATE DATABASE IF NOT EXISTS water_quality_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE water_quality_db; -- 用户表 CREATE TABLE sys_user ( id INT PRIMARY KEY AUTO_INCREMENT COMMENT 主键, username VARCHAR(50) NOT NULL UNIQUE COMMENT 登录名, password VARCHAR(64) NOT NULL COMMENT 密码建议MD5加密存储, role VARCHAR(20) DEFAULT USER COMMENT 角色ADMIN/USER, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间 ) ENGINEInnoDB COMMENT用户表; -- 检测点表 CREATE TABLE monitor_point ( id INT PRIMARY KEY AUTO_INCREMENT, point_code VARCHAR(32) NOT NULL UNIQUE COMMENT 检测点编号如PT001, point_name VARCHAR(100) NOT NULL COMMENT 检测点名称如一级水源保护区, location VARCHAR(200) COMMENT 所在地精确到河流/水库名称, manager VARCHAR(50) COMMENT 负责人, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB COMMENT检测点表; -- 水质检测记录表 CREATE TABLE water_quality_record ( id INT PRIMARY KEY AUTO_INCREMENT, point_id INT NOT NULL COMMENT 关联检测点ID, detect_time DATETIME NOT NULL COMMENT 采样时间, ph_value DECIMAL(4,2) COMMENT pH值范围0-14, dissolved_oxygen DECIMAL(5,2) COMMENT 溶解氧mg/L, turbidity DECIMAL(6,2) COMMENT 浊度NTU, temperature DECIMAL(4,1) COMMENT 水温摄氏度, cod DECIMAL(6,2) COMMENT 化学需氧量mg/L, ammonia_nitrogen DECIMAL(6,2) COMMENT 氨氮mg/L, overall_status TINYINT DEFAULT 1 COMMENT 整体状态1合格 2超标 3严重超标, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, CONSTRAINT fk_point FOREIGN KEY (point_id) REFERENCES monitor_point(id), INDEX idx_point_time (point_id, detect_time) COMMENT 查询优化索引 ) ENGINEInnoDB COMMENT水质检测记录表; -- 质量评价标准表 CREATE TABLE quality_standard ( id INT PRIMARY KEY AUTO_INCREMENT, indicator_name VARCHAR(50) NOT NULL COMMENT 指标名ph/dissolved_oxygen等, min_value DECIMAL(8,2) COMMENT 标准下限, max_value DECIMAL(8,2) COMMENT 标准上限, level TINYINT DEFAULT 1 COMMENT 1合格 2超标 3严重超标, description VARCHAR(255) COMMENT 标准依据如国家地表水标准GB3838-2002 ) ENGINEInnoDB COMMENT评价标准表; -- 初始数据 INSERT INTO sys_user (username, password, role) VALUES (admin, e10adc3949ba59abbe56e057f20f883e, ADMIN); INSERT INTO monitor_point (point_code, point_name, location, manager) VALUES (PT001, 中心水库监测点, 城东中心水库北岸, 张伟);字段类型上的几个关键参数解释一下。pH值用 DECIMAL(4,2)最宽能存 99.99但实际pH是0到14之间DECIMAL 比 FLOAT 更精确不会出现二进制浮点造成的 0.10.2 不等于 0.3 那种问题。detect_time 用 DATETIME 而不是 TIMESTAMP因为 DATETIME 范围更大且不受数据库时区影响对毕设系统来说更稳妥。密码字段我一直用 MD5 加密后的32位字符串去存虽然安全性一般但足够应付课程设计场景答辩时你也可以说“生产环境应换BCrypt”。3. 用Java写后端接口从Servlet到Spring Boot的两条路线3.1 后端要处理的核心逻辑接收参数、访问数据库、返回JSON水质检测系统里后端接口无外乎这么几组登录认证、检测点增删改查、检测记录新增与分页查询、状态统计接口。所有接口的输入输出我建议一律用 JSON 格式这样前端 JavaScript 用 fetch 或 jquery 的 ajax 都很容易对接不用去拼 HTML 片段。业务上最核心的一段逻辑是“水质量级判定”。也就是说后端在插入一条检测记录时要根据 quality_standard 表里配置的阈值逐项判断 pH、溶解氧、浊度、COD、氨氮是否在合格范围内任何一项落入“超标”范围整条记录的状态就要标记为“超标”如果多项超标或者某一项特别严重则标记为“严重超标”。有些人把判断逻辑写在 JavaScript 里我强烈不建议。前端判断用户肉眼能看到造假容易而且后端接口别人拿 Postman 直接调用就绕过了。判断逻辑必须放在 Java 后端这是此类系统的基本底线。3.2 基于ServletJDBC的最小实现代码与参数说明如果你毕设要求是“传统Java Web”那就用Servlet。下面是新增检测记录的核心代码片段包含了参数接收、JDBC操作、状态判定和JSON返回。WebServlet(/addRecord) public class AddRecordServlet extends HttpServlet { protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException { req.setCharacterEncoding(UTF-8); resp.setContentType(application/json;charsetUTF-8); // 1.收参 int pointId Integer.parseInt(req.getParameter(pointId)); String detectTime req.getParameter(detectTime); double ph Double.parseDouble(req.getParameter(phValue)); double doValue Double.parseDouble(req.getParameter(dissolvedOxygen)); double turbidity Double.parseDouble(req.getParameter(turbidity)); double cod Double.parseDouble(req.getParameter(cod)); double ammonia Double.parseDouble(req.getParameter(ammoniaNitrogen)); // 2.简单阈值判断实际可从quality_standard表读取 int status 1; // 默认合格 if (ph 6.5 || ph 8.5 || cod 30 || ammonia 1.5) { status 2; // 超标 } if (ph 5.5 || ph 9.0 || cod 50 || ammonia 3.0) { status 3; // 严重超标 } // 3.JDBC插入此处用Druid连接池获取连接 String sql INSERT INTO water_quality_record (point_id, detect_time, ph_value, dissolved_oxygen, turbidity, temperature, cod, ammonia_nitrogen, overall_status) VALUES (?,?,?,?,?,?,?,?,?); try (Connection conn DBUtil.getConnection(); PreparedStatement ps conn.prepareStatement(sql)) { ps.setInt(1, pointId); ps.setString(2, detectTime); ps.setDouble(3, ph); ps.setDouble(4, doValue); ps.setDouble(5, turbidity); ps.setDouble(6, 0); // temperature ps.setDouble(7, cod); ps.setDouble(8, ammonia); ps.setInt(9, status); ps.executeUpdate(); } catch (Exception e) { e.printStackTrace(); resp.getWriter().write({\code\:500,\msg\:\插入失败\}); return; } // 4.返回JSON resp.getWriter().write({\code\:200,\msg\:\添加成功\,\status\: status }); } }这段代码里三个参数细节值得说。第一doPost 开头必须设置 req.setCharacterEncoding(UTF-8)否则前端传过来的中文参数会乱码。第二PreparedStatement 的 setDouble 方法要求传 double如果前端传了空字符串Double.parseDouble 会抛 NumberFormatException所以前端表单要做前置校验后端接口收到异常后统一捕获并返回友好提示。第三状态判定那里我是临时写死的阈值多数毕设老师能接受但更规范的做法是从 quality_standard 表读取把阈值变成可配置数据。3.3 如果换成Spring BootMyBatis分层更清晰现在很多学校课题已经默认用Spring Boot了如果你是这套路结构可以分成 controller、service、mapper 三层。Controller 只管接收 HTTP 请求和返回 JSONService 写业务规则Mapper 写数据库 SQL。这里我贴一个 Service 层判断状态的典型写法Service public class WaterQualityService { Autowired private WaterQualityRecordMapper recordMapper; Autowired private QualityStandardMapper standardMapper; public int judgeStatus(WaterQualityRecord record) { // 从数据库加载该指标的标准阈值而不是写死 ListQualityStandard standards standardMapper.selectAll(); int maxLevel 1; // 逐项判定level数值越大越严重取最高等级作为总体状态 for (QualityStandard s : standards) { double value getIndicatorValue(record, s.getIndicatorName()); if (value s.getMinValue() || value s.getMaxValue()) { if (s.getLevel() maxLevel) { maxLevel s.getLevel(); } } } return maxLevel; } private double getIndicatorValue(WaterQualityRecord record, String indicatorName) { // 用switch把指标名字映射到记录对象的字段 switch (indicatorName) { case ph: return record.getPhValue(); case cod: return record.getCod(); case ammoniaNitrogen: return record.getAmmoniaNitrogen(); default: return 0; } } }为什么我建议从标准表读取阈值而不是写死答辩时这是很好的加分点。老师通常会问“如果国家标准更新了你的系统怎么改”你回答“改数据库里的 quality_standard 表就行代码不用动”这就体现出了系统设计上的可维护意识。3.4 登录认证Session方案比JWT更适合毕设登录这块我直接推荐用 Session 方案而不是 JWT。原因很简单毕设系统的用户量小不需要分布式会话Session 由 Tomcat 容器管理代码量最少理解门槛最低。你只需要在登录成功后执行 req.getSession().setAttribute(user, user)然后在一个 Filter 里拦截未登录请求即可。Session 方案唯一的坑是前端 JavaScript 通过 fetch 请求时默认不带 Cookie导致 Session 失效。解决办法是给 fetch 加上 credentials: include这个细节我在下一章前端部分会再提。4. 前端HTMLJavaScript把枯燥的检测数据变成会“说话”的页面4.1 页面架构登录页、数据录入页、历史记录页、统计页前端页面我建议做四个登录页 login.html、首页 index.html包含检测点列表和最近记录、数据录入页 record_add.html、历史数据页 record_list.html。统计页可以并入历史数据页用一行 Canvas 图表展示近七天的 pH 趋势工作量适中但视觉效果足。页面风格不用花哨Bootstrap 或者原生 CSS 都可以。但如果想省时间直接用 Bootstrap 4 的 CDN 引入表格、表单、按钮、模态框全都有了。注意这属于前端资源引用不需要下载到本地答辩演示时保证有网即可。页面的核心交互只有一个用户在录入页填写采样点、采样时间和各项指标点击提交JavaScript 把表单数据封装成 JSON通过 fetch 发送到后端的 /addRecord 接口然后根据返回的 JSON 里面的 code 字段判断是否成功最后把状态显示在页面上。这是整个前端最需要讲清楚的部分。4.2 用fetch发送数据并处理返回值带完整注释的代码下面这段是数据录入页的提交逻辑。我把它写在 record_add.html 的 script 标签里用的是原生 JavaScript不依赖任何框架这样任何老师问你都能解释清楚每一行。script document.getElementById(btnSubmit).addEventListener(click, function () { // 1.收集表单数据 var formData { pointId: document.getElementById(pointId).value, detectTime: document.getElementById(detectTime).value, phValue: document.getElementById(phValue).value, dissolvedOxygen: document.getElementById(dissolvedOxygen).value, turbidity: document.getElementById(turbidity).value, cod: document.getElementById(cod).value, ammoniaNitrogen: document.getElementById(ammoniaNitrogen).value }; // 2.前端非空校验少一步就少一次后端报错 for (var key in formData) { if (formData[key] || formData[key] null) { alert(请完整填写所有检测指标); return; } } // 3.通过fetch发送POST请求 fetch(http://localhost:8080/water_quality/addRecord, { method: POST, headers: { Content-Type: application/x-www-form-urlencoded;charsetUTF-8 }, credentials: include, // 关键携带Session Cookie否则登录状态丢失 body: new URLSearchParams(formData) // 这里的URLSearchParams会自动做URL编码 }) .then(function(resp) { return resp.json(); }) .then(function(data) { if (data.code 200) { alert(添加成功当前状态 (data.status 1 ? 合格 : data.status 2 ? 超标 : 严重超标)); // 清空表单便于连续录入 document.getElementById(recordForm).reset(); } else { alert(添加失败 data.msg); } }) .catch(function(err) { console.error(请求出错检查网络或后端是否启动, err); }); }); /script这里有一个非常容易踩的坑body 用 URLSearchParams 传参时Content-Type 一定要设置成 application/x-www-form-urlencoded后端 Servlet 的 getParameter 方法才能解析出来。如果你把 Content-Type 写成 application/jsonServlet 那边用 getParameter 读到的全是 null。反过来如果你后端用 RequestBody 接收 JSON前端就得发送 JSON.stringy 后的 body。这两个方案二选一别混用。4.3 状态可视化用不同的颜色和图标让用户一眼看到风险历史记录页是这套系统最容易出彩的地方。我建议在表格里加“状态”列用不同颜色的圆点和文字展示。合格用绿色“●”加文字“合格”超标用黄色“●”加“超标”严重超标用红色“●”加“严重超标”。JavaScript 里只需要一个简单的函数根据接口返回的 overall_status 字段动态拼接 class 名。function renderStatus(status) { var map { 1: { cls: text-success, text: 合格 }, 2: { cls: text-warning, text: 超标 }, 3: { cls: text-danger, text: 严重超标 } }; var item map[status] || { cls: text-secondary, text: 未知 }; return span class item.cls ● item.text /span; }如果你想展示趋势用 Canvas 画一条近几次检测的 pH 值折线图。原生 Canvas 代码大约五十行不复杂但视觉效果比纯表格好很多。具体实现思路是先通过后端 /getHistoryRecord?pointIdxxx 接口拿到该检测点的历史数据把 pH 值存进一个数组然后遍历数组在 Canvas 上依次画线。横轴是采样时间纵轴是 pH 值再画两条水平虚线表示合格上下限。这个折线图也是答辩时的杀手锏因为证明了你不只会写增删改查还会做简单的数据可视化。5. 部署与避坑从本机跑通到交作业的常见问题排查5.1 数据库连不上驱动、时区、端口三个老问题这是出现频率最高的一类问题现象就是后端启动时报错Access denied for user rootlocalhost 或者 Communications link failure。Access denied 的原因通常是密码错误或者 MySQL 的 root 账号只允许 localhost 登录而你用了远程IP连接。排错先确认三件事MySQL 服务有没有启动、端口是不是默认的 3306、用户名密码对不对。注意 MySQL 8.0 以上版本驱动需要加时区参数JDBC 连接串要写成 jdbc:mysql://localhost:3306/water_quality_db?serverTimezoneAsia/Shanghai否则会报 SSL 或时区错误。5.2 前端拿不到数据跨域、路径、编码问题如果前端页面用 file:// 协议直接双击打开然后 fetch 请求 http://localhost:8080 的接口浏览器会报跨域错误Access to fetch at http://localhost:8080/... has been blocked by CORS policy。解决方式有两种把前端页面放进 WebContent 或 static 目录随项目一起通过 Tomcat 访问这样同源不涉及跨域或者在后端配置 CorsFilter 允许跨域。我建议用第一种配合 IDEA 的部署功能一键启动后访问 http://localhost:8080/water_quality/login.html路径最短、坑最少。第二种路径问题的典型表现是404 报错。比如你部署上下文路径是 /water_quality页面里 fetch 写的是 /addRecord少了上下文路径就找不到。我一般习惯把所有接口路径写绝对路径从请求的 contextPath 动态拼例如 const base document.getElementById(basePath).value; 然后在表单里放一个隐藏域用 JSP 的 ${pageContext.request.contextPath} 输出。这样无论你怎么改部署名都不会因为路径不对而翻车。5.3 中文乱码Tomcat与MySQL两处编码设置这个坑几乎是毕设项目的老大难。现象就是页面上显示的中文全部是问号。原因通常是三处编码不一致第一请求接收编码需要在 doPost 里面设置 setCharacterEncoding(UTF-8)第二数据库连接串里面加 characterEncodingutf8第三MySQL 建表时使用 utf8mb4。三处都改了依然乱码用命令行检查一下表实际编码SHOW CREATE TABLE water_quality_record; 如果显示的是 latin1那就是建表时的默认字符集没生效重新执行第二章带 DEFAULT CHARSETutf8mb4 的建表语句即可。5.4 端口被占用与依赖冲突两个容易被忽略的小坑启 Tomcat 时最常见的报错是 Port 8080 was already in use。原因很简单上次启动没完全停止或者别的程序占用了端口。解决办法命令行 netstat -ano | findstr 8080找到 PID 后在任务管理器结束进程。这里提醒一句如果是你自己的 IDE 里重复启动导致的先点 Stop 按钮不要直接关窗口否则子进程会残留。另外一个坑是依赖冲突如果你用了 Maven 且引入了多个版本的 json 库fastjson、jackson、gson一些老项目会因 SLF4J 绑定冲突在启动时报红但系统其实还能跑。经验是毕设项目不要乱加依赖能用 JDK 自带的就用自带的减少出问题的面。6. 把这套系统做成能答辩的演示数据填充、验证清单与录制技巧系统功能做完了还要让答辩老师一眼看出“你做了东西”。我列一份验证清单你照着过一遍确认没有遗漏。第一登录功能用 admin 账号登录密码输错要有提示未登录直接访问 index.html 要被拦截跳回登录页。第二检测点管理新增、编辑、删除一个检测点删除时如果该检测点下已有检测记录数据库会因外键约束报错这正好可以在答辩时说明“我们用外键保证了数据完整性”。第三录入检测记录提交后列表页能看到刚刚录入的数据状态标记正确。第四历史查询按检测点筛选按日期范围查询分页是否正常。第五统计图表折线图的点与录入的数据对应得上。数据填充有一个技巧不要只录两三行就结束。我一般建议写一个简单的 Java 循环或者写一个 SQL 存过往 water_quality_record 表里插入 30 到 50 天的模拟数据每天 1 到 2 条指标值在合格与超标之间交替出现。这样做有两个好处折线图画出来有起伏看起来真实分页功能有数据可分页不会只有一页显得很空。模拟数据的 SQL 我在下行给一个示例你把它粘到 Navicat 的查询里执行几遍就能批量生成数据。-- 批量生成模拟数据的SQL示例执行三遍 INSERT INTO water_quality_record (point_id, detect_time, ph_value, dissolved_oxygen, turbidity, temperature, cod, ammonia_nitrogen, overall_status) SELECT 1, DATE_SUB(NOW(), INTERVAL RAND()*30 DAY), ROUND(6 RAND()*3, 2), -- pH在6-9之间浮动 ROUND(5 RAND()*3, 2), -- 溶解氧 ROUND(3 RAND()*20, 2), -- 浊度 ROUND(15 RAND()*10, 1), -- 水温 ROUND(10 RAND()*40, 2), -- COD ROUND(0.5 RAND()*3, 2), -- 氨氮 CASE WHEN RAND() 0.6 THEN 1 WHEN RAND() 0.9 THEN 2 ELSE 3 END FROM monitor_point WHERE point_code PT001;录制演示视频也有技巧不用录太长四分钟足够。第一段一分钟讲数据库表结构打开 Navicat 或者命令行展示四张表和字段注释强调外键关系。第二段两分钟跑项目重点演示“录入超标数据后状态自动变红”这个业务闭环。第三段一分钟打开折线图切几个检测点对比趋势。录完自己先看一遍音频中文乱码和 500 报错别录进去否则印象分会受影响。说一个我自己的教训以前我帮学生排查过很多这种毕设项目绝大多数问题都不是代码逻辑有多难而是基本功不过关——数据库连不上、路径写错、编码不统一这三件事占了大半。所以如果你时间有限一定先把“启动顺序”练熟先启动 MySQL再启动 Tomcat最后打开浏览器访问页面。这套系统的价值不在于技术栈多新而在于它用最朴素的 Java Web 技术把前后端协作和数据库设计的核心链路完整走了一遍你只要亲手敲过一遍代码、踩过一遍坑答辩的时候心里就是踏实的。希望这些内容和踩过的坑能帮到你。本文还有配套的精品资源点击获取