前端动态展示信息的JSP实现与美化

小泥人Hyper

已于 2024-10-29 20:25:46 修改

阅读量454

点赞数 6

文章标签： javascript

于 2024-10-29 20:21:17 首次发布

本文链接：https://blog.csdn.net/neadsc/article/details/143348589

版权

在数字化时代，网站不仅仅是信息的展示平台，更是与用户互动的窗口。个性化和实时互动成为了提升用户体验的关键。本文将详细介绍如何使用JSP（Java Server Pages）技术来创建一个动态欢迎信息的网页，并使用CSS进行美化，以增强视觉效果和用户体验。

技术背景

JSP是一种基于Java的服务器端技术，它允许开发者将Java代码嵌入HTML页面中，从而在服务器端动态生成网页内容。这种技术特别适合于创建动态网站，因为它可以响应用户的请求，并根据请求生成个性化的页面。

JSP动态欢迎信息代码详解

SP文件添加一个<link>标签来引用外部的CSS文件，以下是修改后的JSP代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态欢迎信息</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script>
        function updateTime() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();
            const timeString = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);

            // 输出欢迎信息
            document.getElementById("welcomeMessage").innerText = "Hello, welcome at " + timeString;
            document.getElementById("currentTime").innerText = timeString;
        }

        function pad(number) {
            return number < 10 ? '0' + number : number;
        }

        setInterval(updateTime, 1000); // 每秒更新一次时间
    </script>
</head>
<body onload="updateTime()">
<h1 id="welcomeMessage"></h1>
<h2>当前时间: <span id="currentTime"></span></h2>
</body>
</html>

创建CSS文件

首先，创建一个名为styles.css的CSS文件，并将之前内联的CSS样式代码放入其中：

在下面代码中，我们添加了一段CSS样式来美化页面。以下是样式的详细说明：

body：设置页面的字体、背景颜色、文本颜色、文本对齐方式和顶部填充。
h1：设置主标题的颜色和字体大小，使其更加突出。
h2：设置副标题的颜色和字体大小。
#currentTime：设置当前时间的字体大小和颜色，使其更加醒目。

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
    padding-top: 50px;
}
h1 {
    color: #5cb85c;
    font-size: 2.5em;
}
h2 {
    color: #333;
    font-size: 2em;
}
#currentTime {
    font-size: 1.5em;
    color: #337ab7;
}

实现效果

当用户访问这个JSP页面时，他们会看到一个简洁而美观的页面。页面顶部的主标题会显示个性化的问候语，例如“Hello, welcome at 14:30:45”，其中时间会随着用户的访问时间而变化。页面中部会显示当前的时间，并且这个时间会每秒更新一次，保持与服务器时间同步。

一个简单的待办事项列表

以下是一个简单的JSP样例代码，它实现了一个基本的待办事项列表，用户可以添加新的待办事项，并从列表中删除已完成的事项。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script>
        function addTask() {
            var taskInput = document.getElementById("taskInput");
            var taskList = document.getElementById("taskList");
            if(taskInput.value.trim() !== "") {
                var newTask = document.createElement("li");
                newTask.innerHTML = taskInput.value + ' <button onclick="deleteTask(this)">删除</button>';
                taskList.appendChild(newTask);
                taskInput.value = "";
            }
        }

        function deleteTask(button) {
            button.parentNode.remove();
        }
    </script>
</head>
<body>
    <h1>我的待办事项列表</h1>
    <input type="text" id="taskInput" placeholder="添加新事项...">
    <button onclick="addTask()">添加</button>
    <ul id="taskList">
        <!-- 待办事项将在这里显示 -->
    </ul>
</body>
</html>

待办事项列表应用的实现

在上述的JSP样例代码中，我们创建了一个简单的待办事项列表应用。这个应用允许用户输入新的待办事项，并将其添加到列表中。同时，用户也可以通过点击每个事项旁边的“删除”按钮来移除已完成的事项。

这个应用的前端部分使用了HTML和JavaScript。HTML提供了页面的结构，JavaScript则负责处理用户的输入和列表的动态更新。后端部分则由JSP页面处理，它负责生成初始的HTML页面，并在服务器端执行Java代码。

CSS样式与美化

为了提升用户体验，我们可以通过CSS来美化页面。在上述代码中，我们通过<link>标签引入了一个外部CSS文件styles.css。这个文件包含了页面的样式定义，如字体、颜色、布局等。通过分离CSS代码，我们可以更容易地管理和更新页面的样式，而不需要修改HTML和JavaScript代码。

动态内容的生成

JSP页面的核心功能是动态内容的生成。在待办事项列表应用中，动态内容主要体现在两个方面：待办事项的添加和删除。当用户输入一个新的待办事项并点击“添加”按钮时，JavaScript函数addTask会被触发。这个函数会创建一个新的列表项，并将其添加到页面的<ul>元素中。这个过程完全在客户端进行，不需要服务器的参与，因此可以提供快速的响应。

同样，当用户点击“删除”按钮时，JavaScript函数deleteTask会被触发，它负责从列表中移除对应的事项。这些操作都是即时的，用户不需要刷新页面就能看到更新后的内容。

数据存储与管理

虽然上述的待办事项列表应用是动态的，但它并没有实现数据的持久化存储。在实际的应用中，我们可能需要将待办事项存储在数据库中，以便在不同的会话和用户之间共享。这就需要在JSP页面中集成数据库操作代码，如使用JDBC连接数据库，执行SQL语句等。

JSP提供了多种方式来管理数据，包括使用JavaBean、Servlets和JSP标签库等。这些技术可以帮助我们更有效地处理数据，并将其集成到动态网页中。

安全性考虑

在创建动态网页应用时，安全性是一个重要的考虑因素。JSP页面需要处理用户输入，这就可能导致安全漏洞，如SQL注入、跨站脚本攻击（XSS）等。为了保护应用的安全，我们需要对用户输入进行验证和清理，避免执行恶意的代码。

JSP提供了多种安全机制，包括请求封装、安全过滤器和自定义标签等。通过这些机制，我们可以确保应用的安全性，防止潜在的攻击。

结论

通过结合JSP和JavaScript，我们可以创建一个既动态又个性化的网页，提升用户体验。通过添加CSS样式，我们不仅能够实现动态内容的展示，还能够提升页面的视觉效果，使其更加吸引用户。这种技术的应用不仅限于显示时间，还可以扩展到其他需要动态内容的场景，如新闻更新、股票价格显示等。随着技术的不断发展，我们可以预见，动态网页将在未来的网站设计中扮演越来越重要的角色。通过个性化和实时互动，我们可以为用户提供更加丰富和有趣的在线体验。