编程自学指南：java程序设计开发，简单了解动态 WEB 基础，动态 WEB 的基本概念和特点，动态 WEB 开发的基本架构，静态网页、动态网页对比

最新推荐文章于 2025-04-28 22:04:09 发布

zl515035644

最新推荐文章于 2025-04-28 22:04:09 发布

阅读量792

点赞数 30

CC 4.0 BY-SA版权

分类专栏： # JavaWEB开发 java自学指南文章标签：前端 java 学习笔记开发语言

本文链接：https://blog.youkuaiyun.com/beijing_oracle/article/details/146483872

java自学指南同时被 2 个专栏收录

180 篇文章

订阅专栏

JavaWEB开发

35 篇文章

订阅专栏

编程自学指南：java程序设计开发，简单了解动态 WEB 基础

一、课程信息

学习目标

理解动态 WEB 的基本概念和特点。
掌握动态 WEB 开发的基本架构和相关技术。
学会搭建简单的动态 WEB 开发环境。
能够编写简单的动态 WEB 页面。

二、课程导入

生活实例引入

想象你在网上购物，当你搜索商品时，页面会根据你的搜索关键词实时显示相关的商品信息。或者你登录社交媒体平台，看到的是根据你和好友的动态实时更新的内容。这些能够根据用户的操作或数据实时变化的网页就是动态 WEB 的应用。
提问学生在日常生活中还遇到过哪些动态 WEB 的场景，引导他们思考动态 WEB 与静态网页的区别。

三、动态 WEB 基本概念

静态网页 vs 动态网页

静态网页

内容固定，每次访问看到的都是相同的页面。
由 HTML、CSS 和 JavaScript 等静态文件组成。
示例：个人博客的关于页面，无论何时访问，内容都不会改变。

动态网页

内容可以根据用户的请求、时间、数据库数据等动态生成。
需要服务器端程序处理请求并生成相应的页面。
示例：新闻网站的首页，会根据最新的新闻动态实时更新。

动态 WEB 的特点

交互性强：用户可以与网页进行交互，如提交表单、登录、评论等。
实时更新：页面内容可以实时更新，反映最新的数据和信息。
个性化：可以根据用户的偏好和行为提供个性化的内容。

四、动态 WEB 开发架构

客户端 - 服务器架构（Client - Server Architecture）

客户端

通常是用户的浏览器，负责向服务器发送请求并显示服务器返回的页面。
处理用户的输入和操作，如点击按钮、输入表单数据等。

服务器

接收客户端的请求，处理请求并生成相应的响应。
可以与数据库进行交互，获取或存储数据。
将处理结果返回给客户端。

三层架构

表示层（Presentation Layer）

负责与用户进行交互，显示页面和接收用户的输入。
通常由 HTML、CSS 和 JavaScript 等前端技术实现。

业务逻辑层（Business Logic Layer）

处理业务逻辑，如用户登录验证、数据计算等。
调用数据访问层的方法来获取或存储数据。

数据访问层（Data Access Layer）

负责与数据库进行交互，执行数据的增删改查操作。

五、动态 WEB 开发相关技术

前端技术

HTML（Hypertext Markup Language）

用于构建网页的结构，定义页面的元素和内容。

<!DOCTYPE html>
<html>
<head>
    <title>简单的 HTML 页面</title>
</head>
<body>
    <h1>欢迎来到动态 WEB 世界</h1>
    <p>这是一个简单的 HTML 页面。</p>
</body>
</html>

CSS（Cascading Style Sheets）

用于美化网页的外观，设置元素的样式，如颜色、字体、布局等。

h1 {
    color: blue;
    font-size: 36px;
}

p {
    color: gray;
    font-size: 18px;
}

JavaScript

用于实现网页的交互效果，如表单验证、动态效果等。

function validateForm() {
    var name = document.getElementById("name").value;
    if (name == "") {
        alert("请输入姓名");
        return false;
    }
    return true;
}

后端技术（以 Java 为例）

Servlet

Servlet 是 Java 编写的服务器端程序，用于处理客户端的请求并生成响应。

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<html><body>");
        out.println("<h1>Hello, Dynamic Web!</h1>");
        out.println("</body></html>");
    }
}

JSP（JavaServer Pages）

JSP（全称Java Server Pages）是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页，然后返回给请求者。JSP技术以Java语言作为脚本语言，为用户的HTTP请求提供服务，并能与服务器上的其它Java程序共同处理复杂的业务需求。

JSP将Java代码和特定变动内容嵌入到静态的页面中，实现以静态页面为模板，动态生成其中的部分内容。JSP引入了被称为“JSP动作”的XML标签，用来调用内建功能。另外，可以创建JSP标签库，然后像使用标准HTML或XML标签一样使用它们。标签库能增强功能和服务器性能，而且不受跨平台问题的限制。JSP文件在运行时会被其编译器转换成更原始的Servlet代码。JSP编译器可以把JSP文件编译成用Java代码写的Servlet，然后再由Java编译器来编译成能快速执行的二进制机器码，也可以直接编译成二进制码。

JSP 是一种动态网页技术，允许在 HTML 页面中嵌入 Java 代码，方便生成动态内容。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>简单的 JSP 页面</title>
</head>
<body>
    <h1>当前时间：<%= new java.util.Date() %></h1>
</body>
</html>

数据库（以 MySQL 为例）

用于存储和管理数据，如用户信息、商品信息等。

-- 创建一个简单的用户表
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(50) NOT NULL
);

-- 插入一条用户记录
INSERT INTO users (username, password) VALUES ('testuser', '123456');

-- 查询所有用户记录
SELECT * FROM users;

六、搭建动态 WEB 开发环境

安装 JDK（Java Development Kit）

下载并安装适合你操作系统的 JDK 版本（Java Downloads | Oracle 中国）。
配置环境变量 JAVA_HOME、PATH 和 CLASSPATH。

安装 Tomcat 服务器

下载并解压 Tomcat 服务器（Apache Tomcat® - Apache Tomcat 11 Software Downloads）。
启动 Tomcat 服务器，访问 http://localhost:8080 验证是否安装成功。

安装 MySQL 数据库

下载并安装 MySQL 数据库（https://dev.mysql.com/downloads/mysql/）。
启动 MySQL 服务，创建一个数据库和用户。

配置开发工具（以 IntelliJ IDEA 为例）

创建一个新的 Dynamic Web Project。（后续课程讲解）
配置 Tomcat 服务器和 MySQL 数据库连接。（后续课程讲解）

七、编写简单的动态 WEB 页面

示例：用户登录页面

前端页面（login.html）

<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
</head>
<body>
    <h1>用户登录</h1>
    <form action="login" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required><br><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

后端 Servlet（LoginServlet.java）

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        if ("testuser".equals(username) && "123456".equals(password)) {
            out.println("<html><body>");
            out.println("<h1>登录成功！</h1>");
            out.println("</body></html>");
        } else {
            out.println("<html><body>");
            out.println("<h1>用户名或密码错误！</h1>");
            out.println("</body></html>");
        }
    }
}