嘿，同学们好呀！我是你们的IT课老师。今天咱们不聊那些枯燥的理论，我要带你们做一个真正能“用”的东西——一个网页版点名系统。
我知道你们可能听过Java、听过HTML，甚至听说过JSP，但具体是干嘛的？是不是感觉特别高深？其实没那么可怕。今天我就把这一套“魔法”拆开了、揉碎了，讲给你们听。当你们看着屏幕上自己写的代码真的能把全班同学的名字列出来，还能一键随机点选时，那种成就感，绝对比打游戏通关还爽！
第一步：咱们先搞懂“它是谁”
在动手写代码之前，我得先问你们一个问题：如果我要让你们去食堂排队打饭，你需要哪些东西？
你们可能会说：要有队伍（数据）、要有窗口（界面）、要有阿姨（处理逻辑）。
网页点名系统也是一样的道理。咱们要做的这个系统，背后有三个小助手在干活：
- HTML（界面小姐）：她是负责“面子”的。她决定这个页面长什么样，有没有输入框，有没有按钮，字体是什么颜色。
- JSP/Java（逻辑先生）：他是负责“脑子”的。他藏在后面，负责从数据库里把名字拿出来，或者随机抽出一个幸运儿。
- MySQL（记忆大叔）：他是负责“记性”的。全班50个同学的名字存在哪？存在他脑子里的表里。
咱们今天要用的，就是这一套经典的Java Web三剑客。别被名字吓到，对于咱们这个简单的点名系统，逻辑先生不需要太复杂，记忆大叔也不需要太庞大。
第二步：让“记忆大叔”做好准备（数据库搭建）
首先，我们需要一个地方来存名字。咱们假设班里就三个同学吧，为了演示方便：张三、李四、王五。
我会带着你们打开MySQL，创建一个小房间。你们可以想象这是一个文件夹，里面放着一张表。
-- 1. 创建一个叫“点名系统”的数据库
CREATE DATABASE IF NOT EXISTS rollcall_system;
-- 2. 切换到这个数据库
USE rollcall_system;
-- 3. 创建一张叫“students”的表，专门用来存学生信息
CREATE TABLE students (
id INT PRIMARY KEY AUTO_INCREMENT, -- 学号，自动递增，比如1, 2, 3...
name VARCHAR(50) NOT NULL, -- 姓名，最多50个字，不能为空
createTime TIMESTAMP DEFAULT CURRENT_TIMESTAMP -- 创建时间，不用管它，系统自动填
);
-- 4. 往里面塞几个初始数据
INSERT INTO students (name) VALUES ('张三');
INSERT INTO students (name) VALUES ('李四');
INSERT INTO students (name) VALUES ('王五');
看，就这么简单！现在我们的“记忆大叔”手里就有三个学生名字了。接下来，我们要让逻辑先生学会怎么问他拿名字。
第三步：逻辑先生的“翻译官”（JDBC连接）
Java程序是不能直接跟MySQL说话的，它们语言不通。所以我们需要一个“翻译官”，在Java世界里，这个翻译官叫JDBC。
咱们先写一个最基础的工具类，就像给系统装一根电话线，打通Java和数据库的联系。
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBUtil {
// 定义一些连接参数，就像邮政编码一样
private static final String URL = "jdbc:mysql://localhost:3306/rollcall_system?useSSL=false&serverTimezone=UTC";
private static final String USER = "root"; // 你的数据库用户名
private static final String PASSWORD = "123456"; // 你的数据库密码，你们要改成自己的哦
// 加载驱动，这一步就像把电话机插好
static {
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
System.out.println("驱动加载失败，请检查是否引入了mysql-connector-java包");
}
}
// 获取连接的方法
public static Connection getConnection() throws SQLException {
return DriverManager.getConnection(URL, USER, PASSWORD);
}
}
注意哦，这里有个小细节。很多同学第一次写代码会在这里报错，通常是因为忘了把MySQL的驱动包（jar包）放到项目的“LIB”文件夹里。这就像你想打电话，但没插电话线一样。记得在咱们用的IDE（比如Eclipse或者IntelliJ）里把那个蓝色的jar包导进去。
第四步：把名字“拿”出来（DAO层设计）
现在电话打通了，逻辑先生需要干具体的活了。咱们设计一个专门的“学生服务类”，让他去数据库里把所有人的名字查出来。
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class StudentService {
// 方法：获取所有学生名单
public List<String> getAllStudents() {
List<String> names = new ArrayList<>();
String sql = "SELECT name FROM students";
try (Connection conn = DBUtil.getConnection();
PreparedStatement pstmt = conn.prepareStatement(sql);
ResultSet rs = pstmt.executeQuery()) {
// 像查字典一样，一行一行把名字读出来
while (rs.next()) {
String name = rs.getString("name");
names.add(name);
}
} catch (SQLException e) {
e.printStackTrace();
System.out.println("查询学生名单失败：" + e.getMessage());
}
return names;
}
// 方法：随机抽取一名学生
public String getRandomStudent() {
List<String> allNames = getAllStudents();
if (allNames.isEmpty()) {
return "暂无学生数据，请先添加学生！";
}
// Math.random() 会生成一个0到1之间的小数，乘以总人数，就是随机下标啦
int randomIndex = (int) (Math.random() * allNames.size());
return allNames.get(randomIndex);
}
}
这段代码看起来有点长，但其实逻辑非常清晰。想象一下，你就是一个图书管理员（StudentService），有人让你去书架（数据库）把书（名字）拿出来。while(rs.next()) 这句话的意思就是：“只要还有下一本书，就把它拿出来放进篮子里”。
第五步：界面小姐登场（JSP页面制作）
好了，逻辑先生已经准备好了，现在轮到界面小姐了。我们要用JSP来写页面。JSP说白了就是“HTML里嵌Java代码”，它能让页面“活”起来，不仅显示静态文字，还能显示动态数据。
咱们新建一个 index.jsp 文件：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%--
注意：在实际项目中，我们通常会把逻辑代码抽离到Java类里，
但为了教学方便，我们在JSP里简单演示一下如何接收数据并显示。
实际上，我们会配合Servlet来使用，这里先做一个最简单的展示版。
--%>
<%
// 模拟从数据库获取数据（实际开发中会通过Servlet传值过来）
// 这里为了演示效果，我们直接实例化服务类
StudentService service = new StudentService();
List<String> students = service.getAllStudents();
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>神奇点名器</title>
<style>
body {
font-family: '微软雅黑', sans-serif;
background-color: #f0f8ff;
text-align: center;
padding-top: 50px;
}
h1 {
color: #333;
}
#result {
font-size: 48px;
color: #e74c3c;
margin: 30px 0;
font-weight: bold;
height: 60px;
}
button {
padding: 15px 40px;
font-size: 24px;
cursor: pointer;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
button:hover {
background-color: #27ae60;
}
.list-box {
margin-top: 30px;
border: 1px solid #ccc;
padding: 20px;
display: inline-block;
background: white;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>🎓 班级幸运点名器</h1>
<!-- 显示点名结果的大字区域 -->
<div id="result">点击按钮开始</div>
<!-- 开始点名按钮 -->
<button onclick="rollCall()">开始点名</button>
<!-- 显示所有学生名单 -->
<div class="list-box">
<h3>全班同学名单：</h3>
<ul>
<%-- 这里用JSP的循环标签，把数据库里的名字一个个列出来 --%>
<%
for (String name : students) {
%>
<li><%= name %></li>
<%
}
%>
</ul>
</div>
<script>
// 前端JavaScript：实现点名的动画效果
let timer = null;
let isRunning = false;
function rollCall() {
const resultDiv = document.getElementById('result');
if (isRunning) return; // 防止重复点击
isRunning = true;
// 如果已经有点名服务，直接调用后端
// 为了简化演示，这里我们用纯前端模拟随机效果
// 实际项目中，这里会发送AJAX请求给服务器获取真正的随机结果
const names = <%= students.toString().replace("[", "").replace("]", "") %>; // 把Java列表转成JS数组
let count = 0;
// 制造滚动效果
timer = setInterval(() => {
const randomIndex = Math.floor(Math.random() * names.length);
resultDiv.innerText = names[randomIndex];
count++;
// 跑够10次就停下
if (count > 10) {
clearInterval(timer);
// 最终确定一个结果（这里简化处理，真实场景应请求后端）
resultDiv.innerText = names[Math.floor(Math.random() * names.length)];
isRunning = false;
}
}, 100);
}
</script>
</body>
</html>
同学们，看到那个 <% %> 和 <%= %> 了吗？这就是JSP的“魔法咒语”。
<% ... %>里面可以写Java代码，比如循环、判断。<%= ... %>里面写表达式，它会自动把结果打印到HTML页面上。
是不是发现，网页其实就是穿着HTML外衣的Java程序？
第六步：运行起来，见证奇迹
好了，代码都写完了。现在，我们要把这个项目部署到服务器上。对于初学者，最简单的方法是使用Tomcat服务器。
- 打开你们的IDE（比如Eclipse或IntelliJ）。
- 确保你的项目结构正确，
WEB-INF文件夹下的lib文件夹里放着mysql-connector-java.jar。 - 右键项目，选择“Run on Server”，选择Tomcat。
- 浏览器会自动弹出
http://localhost:8080/your-project/index.jsp。
哇！当你看到页面上列出了“张三、李四、王五”，然后点击按钮，名字开始疯狂跳动，最后停在一个名字上时，那就是你们亲手写的代码在运行！
给小朋友们的特别提示：避坑指南
在实际教学中，我发现90%的同学都会在这几个地方卡住，老师帮你们提前排雷：
中文乱码问题： 如果页面上显示的名字是“???”或者乱码，记得在JSP第一行加上
pageEncoding="UTF-8"，并且确保你的MySQL数据库字符集也是UTF-8。可以在连接URL里加上?characterEncoding=utf8。找不到驱动报错： 如果控制台报
ClassNotFoundException: com.mysql.cj.jdbc.Driver，千万别慌。这不是代码写错了，而是你忘记把那个蓝色的MySQL驱动jar包拷贝到WEB-INF/lib目录下了。去Maven仓库或者官网下载一个mysql-connector-java，复制进去，重新构建项目就好。数据库连不上： 检查你的MySQL服务有没有启动？用户名密码对不对？有时候我们电脑重启了，MySQL服务没自动开，那就需要在“服务”里把它启动起来。
为什么我们要学这个？
有的同学可能会问：“老师，现在都有APP点名了，为什么还要学这么古老的JSP？”
这个问题问得好。
第一，知其然，更要知其所以然。当你亲手打通了HTML、Java和数据库这三者的联系，你才能理解微信、淘宝这些大APP背后是怎么工作的。所有的复杂系统，都是由这些基础模块搭建起来的。
第二，编程思维的培养。在这个项目里，你学会了如何“分层”——界面归界面，逻辑归逻辑，数据归数据。这种思维方式，比写出一段代码更重要。它让你以后面对任何大工程时，都知道怎么拆解问题。
第三，成就感。看着自己敲的一行行代码，变成了屏幕上会动的按钮、会跳动的名字，这种“创造”的快乐，是任何其他事情都替代不了的。
课后小挑战
今天的课到这里就结束啦，但我给喜欢挑战的同学留了几个小任务：
- 增加功能：能不能给这个点名系统加一个“导入Excel”的功能？这样就不用一个个手动加名字了。（提示：可以用Apache POI库，下次课老师教你们）
- 美化界面：现在的界面是不是有点简陋？试着用CSS加点颜色，或者换张背景图，让你的点名器变得更漂亮。
- 记录历史：能不能让系统把每一次点名的结果（谁被抽中了，几点钟被抽中的）保存到数据库里，下次还能查看历史记录？
别急着去搜答案，先自己动手试试。遇到报错不要怕，把错误信息复制下来，仔细读一读，很多时候错误信息已经告诉你哪里出错了。如果实在解决不了，欢迎来问老师，我们一起看。
记住，编程就像学骑自行车，看一百遍教程，不如摔几次、骑几圈来得实在。从今天开始，打开你的IDE，让我们一起开启这段神奇的代码之旅吧！