【Web编程技术实验九】基于SpringMVC的动态时钟设计（附完整代码）
一、实验背景
本次实验要设计一个动态时钟，在网页正中央显示当前时间，并且时间要每秒自动刷新。
技术栈： SpringMVC + JSP + JavaScript + Tomcat
二、实验效果
运行成功后，页面效果如下：
- 时间实时刷新（时:分:秒）
- 页面居中显示
- 美观的渐变背景
三、技术原理
3.1 SpringMVC 工作流程
用户访问 /clock
↓
DispatcherServlet 接收请求
↓
HandlerMapping 找到对应的 Controller
↓
Controller 处理业务逻辑（获取当前时间）
↓
Model 存储数据，传递给 View
↓
ViewResolver 解析视图路径
↓
返回 JSP 页面给用户
3.2 动态刷新原理
使用 JavaScript 的 setInterval() 函数，每隔1秒重新获取当前时间并更新页面显示。
四、项目结构
ClockDemo/
├── src/main/java/com/clock/controller/
│ └── ClockController.java
├── WebContent/
│ └── WEB-INF/
│ ├── web.xml
│ ├── spring-servlet.xml
│ ├── lib/
│ │ └── (Spring相关jar包)
│ └── views/
│ └── clock.jsp
五、核心代码
5.1 Controller 层（ClockController.java）
java
package com.clock.controller;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class ClockController {
@RequestMapping("/clock")
public String showClock(Model model) {
// 获取当前时间
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String currentTime = sdf.format(new Date());
// 存入Model，传递给JSP
model.addAttribute("time", currentTime);
return "clock";
}
}
代码解析：
@Controller：标记这是一个控制器类
@RequestMapping("/clock")：当访问 /clock 时执行此方法
Model：用于存储数据，传递给视图层
5.2 Spring 配置文件（spring-servlet.xml）
xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 扫描Controller包 -->
<context:component-scan base-package="com.clock.controller" />
<!-- 启用注解驱动 -->
<mvc:annotation-driven />
<!-- 配置视图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
关键配置：
component-scan：自动扫描 @Controller 注解
viewResolver：将 return "clock" 解析为 /WEB-INF/views/clock.jsp
5.3 Web.xml 配置
xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>spring</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
5.4 视图层（clock.jsp）
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时钟 - SpringMVC</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "微软雅黑", Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.clock-container {
text-align: center;
background: rgba(255, 255, 255, 0.9);
padding: 50px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.time {
font-size: 60px;
font-weight: bold;
color: #333;
letter-spacing: 5px;
font-family: "Courier New", monospace;
}
.date {
font-size: 24px;
color: #666;
margin-top: 20px;
}
.title {
font-size: 28px;
color: #667eea;
margin-bottom: 20px;
}
</style>
<script>
function updateTime() {
var now = new Date();
var year = now.getFullYear();
var month = String(now.getMonth() + 1).padStart(2, '0');
var day = String(now.getDate()).padStart(2, '0');
var hours = String(now.getHours()).padStart(2, '0');
var minutes = String(now.getMinutes()).padStart(2, '0');
var seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById("date").innerHTML = year + "-" + month + "-" + day;
document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
}
window.onload = function() {
updateTime();
setInterval(updateTime, 1000);
}
</script>
</head>
<body>
<div class="clock-container">
<div class="title">🕐 SpringMVC 动态时钟</div>
<div class="time" id="time">--:--:--</div>
<div class="date" id="date">----/--/--</div>
</div>
</body>
</html>
六、遇到的问题及解决
问题1：Tomcat启动失败
现象： 服务器启动时报错
原因： spring-servlet.xml 中包扫描路径写错（controler 少了一个 l）
解决： 修正为 com.clock.controller
问题2：页面显示404
现象： 访问 /clock 返回404
原因： 视图解析器的 prefix 和 suffix 配置错误
解决：
prefix 改为 /WEB-INF/views/
suffix 改为 .jsp
问题3：时间不刷新
现象： 页面显示静态时间
原因： 忘记添加 setInterval 定时器
解决： 添加 setInterval(updateTime, 1000)
七、部署到云服务器
7.1 导出WAR包
在Eclipse中右键项目 → Export → WAR file
7.2 上传到ECS
使用WinSCP或FTP将WAR包上传到Tomcat的 webapps 目录
7.3 配置安全组
开放8080端口，授权对象 0.0.0.0/0
7.4 公网访问地址
http://你的公网IP:8080/ClockDemo/clock
八、实验总结
许俊杰： 我负责项目架构搭建和Controller编写。通过本次实验，掌握了SpringMVC框架的基本配置，理解了@Controller、@RequestMapping注解的作用，以及视图解析器的配置方法。遇到的主要问题是Tomcat启动失败，原因是spring-servlet.xml中的包扫描路径写错，修正后解决。
叶海林： 我负责JSP页面设计和JavaScript动态刷新功能。通过setInterval函数实现每秒更新时间，并使用CSS Flexbox实现页面居中。理解了前端与后端的交互流程。
王兴安： 我负责Spring配置文件编写和jar包导入。学会了web.xml中配置DispatcherServlet，和spring-servlet.xml中配置组件扫描和视图解析器。
李想： 我负责测试和截图以及spring-servlet.xml中配置组件扫描和视图解析器。
,验证了时钟在不同浏览器下的显示效果，确认了动态刷新功能正常，并整理了实验报告。
浙公网安备 33010602011771号