ASP与JSP网页设计应用教程

第一部分：总览与对比

在开始具体学习之前，我们首先要理解ASP和JSP是什么,它们之间有什么异同。

ASP及JSP网页设计应用教程
（图片来源网络，侵删）

什么是ASP和JSP？

  • ASP (Active Server Pages)：由微软公司开发的服务器端脚本环境，它允许在HTML页面中嵌入服务器端脚本（通常是VBScript或JScript），当服务器收到请求时，会执行这些脚本,然后将动态生成的HTML发送给客户端浏览器。

    • 特点：简单易学，与Windows和IIS（Internet Information Services）服务器紧密集成,非常适合快速开发中小型Web应用。
    • 主要版本：
      • ASP (Classic / 经典ASP)：早期的版本，脚本解释执行,性能和扩展性有限。
      • ASP.NET：微软推出的全新框架，它不是对ASP的简单升级，而是一个功能强大的、面向对象的Web开发平台，可以使用C#或VB.NET等强类型语言进行开发，性能和可维护性远超经典ASP。（注意：现在我们通常说的ASP开发，指的就是ASP.NET）

  • JSP (JavaServer Pages)：由Sun Microsystems（现属Oracle公司）开发，是基于Java技术的服务器端网页技术，它允许在HTML或XML页面中嵌入Java代码片段和JSP特有的标签（如JSTL）。

    • 特点：跨平台（任何支持Java的操作系统和服务器都可以运行）、可扩展性强、安全性高，与Java的强大生态系统（如Spring框架）无缝集成，适合开发大型、企业级的Web应用。
    • 运行环境：需要一个支持Servlet规范的Web服务器（如Apache Tomcat, JBoss, WebLogic）和Java运行环境。

核心对比

特性 ASP (ASP.NET) JSP (Java EE)
开发语言 C#, VB.NET Java
运行平台 主要为Windows Server + IIS 跨平台 (Windows, Linux, macOS)
核心思想 事件驱动，控件模型 基于Servlet，请求-响应模型
性能 编译为中间语言，性能优异 编译为Servlet，性能稳定且强大
学习曲线 C#相对易学，.NET框架庞大 Java语法严谨，生态系统复杂
应用场景 企业级Web应用、Web API、微服务 大型企业级应用、金融系统、电子商务
开源程度 .NET Core及后续版本已完全开源 完全开源

第二部分：ASP.NET (以C#为例) 教程

我们将使用现代的 ASP.NET MVC 或 ASP.NET Core 框架进行讲解,因为它们是当前的主流和推荐做法。

第1章：环境搭建

  1. 安装IDE：强烈推荐使用 Visual Studio（社区版免费），它集成了开发、调试、发布等所有功能。
  2. 安装SDK：安装 .NET SDK，包含了运行和开发.NET应用所需的一切。
  3. 创建第一个项目：
    • 打开 Visual Studio。
    • 选择 "创建新项目"。
    • 搜索并选择 "ASP.NET Core Web 应用"。
    • 给项目命名，HelloAspNet。
    • 在下一个界面，选择 "Web 应用程序"（MVC模板）,然后点击创建。

第2章：核心概念

一个ASP.NET Core应用通常由以下几部分构成：

ASP及JSP网页设计应用教程
（图片来源网络，侵删）

  1. 控制器：处理来自浏览器的HTTP请求，调用业务逻辑，并返回响应（通常是视图）。

    • 位于 Controllers 文件夹下。
    • HomeController.cs

  2. 视图：负责生成HTML并返回给浏览器，它使用Razor语法（符号）来嵌入C#代码。

    • 位于 Views 文件夹下,并按控制器名称组织子文件夹。
    • Views/Home/Index.cshtml

  3. 模型：代表应用程序的数据和业务逻辑。

    • 可以是简单的C#类（POCO - Plain Old CLR Object）。
    • 位于 Models 文件夹下。
    • Product.cs

  4. 路由：定义URL如何映射到控制器和动作方法，默认路由规则是 {controller=Home}/{action=Index}/{id?}。

    ASP及JSP网页设计应用教程
    （图片来源网络，侵删）

第3章：动手实践 - 创建一个简单的留言板

步骤1：创建模型

在 Models 文件夹下，创建一个 Message.cs 文件：

// Models/Message.cs
using System.ComponentModel.DataAnnotations;
namespace HelloAspNet.Models
{
    public class Message
    {
        public int Id { get; set; }
        [Required]
        public string Author { get; set; }
        [Required]
        public string Content { get; set; }
        public DateTime PostTime { get; set; } = DateTime.Now;
    }
}

步骤2：创建控制器

在 Controllers 文件夹下，右键 -> 添加 -> 控制器，选择 "MVC控制器 - 空"，命名为 MessageController。

// Controllers/MessageController.cs
using HelloAspNet.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace HelloAspNet.Controllers
{
    public class MessageController : Controller
    {
        // 模拟一个数据源
        private static List<Message> _messages = new List<Message>();
        // GET: /Message
        public IActionResult Index()
        {
            return View(_messages);
        }
        // GET: /Message/Create
        public IActionResult Create()
        {
            return View();
        }
        // POST: /Message/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Create(Message message)
        {
            if (ModelState.IsValid)
            {
                _messages.Add(message);
                return RedirectToAction(nameof(Index));
            }
            return View(message);
        }
    }
}

步骤3：创建视图

  1. 创建Index视图：在 MessageController 上右键，选择 "添加视图"，选择 "List"，模型选择 Message，数据上下类留空。 这会自动生成 Views/Message/Index.cshtml如下：

    @* Views/Message/Index.cshtml *@
@model IEnumerable<HelloAspNet.Models.Message>
@{
    ViewData["Title"] = "留言列表";
}
<h2>@ViewData["Title"]</h2>
<a asp-action="Create">发布新留言</a>
<hr />
@foreach (var item in Model)
{
    <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
        <h4>@item.Author</h4>
        <p>@item.Content</p>
        <small>@item.PostTime.ToString("yyyy-MM-dd HH:mm")</small>
    </div>
}

  2. Create视图：同样，在 Create Action方法上右键，添加视图，选择 "Create"，模型选择 Message。 这会生成 Views/Message/Create.cshtml如下：

    @* Views/Message/Create.cshtml *@
@model HelloAspNet.Models.Message
@{
    ViewData["Title"] = "发布留言";
}
<h2>@ViewData["Title"]</h2>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Author" class="control-label"></label>
                <input asp-for="Author" class="form-control" />
                <span asp-validation-for="Author" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Content" class="control-label"></label>
                <textarea asp-for="Content" class="form-control"></textarea>
                <span asp-validation-for="Content" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="发布" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

步骤4：运行项目

按 F5 或点击 "开始调试" 按钮，浏览器会打开 https://localhost:xxxx/，它会自动路由到 Home/Index，在地址栏输入 /Message 即可访问你的留言板。

第三部分：JSP 教程

我们将使用经典的 JSP + Servlet + JDBC 架构进行讲解,这是理解JSP工作原理的基础。

第1章：环境搭建

  1. 安装JDK：下载并安装Java Development Kit (JDK)，如JDK 8或更高版本。
  2. 安装Web服务器：下载并安装 Apache Tomcat,这是一个轻量级且广泛使用的开源Web服务器和Servlet容器。
  3. 安装IDE：推荐使用 Eclipse IDE for Java EE Developers 或 IntelliJ IDEA（社区版免费）。
  4. 配置Eclipse：
    • 在Eclipse中，Window -> Preferences -> Server -> Runtime Environments。
    • 添加你安装的Tomcat服务器,并指定其安装路径。

第2章：核心概念

  1. JSP (JavaServer Page)：以.jsp为扩展名的文件，它本质上是Servlet的简化写法，第一次访问时,Tomcat会将其编译成一个Servlet类。

    • 脚本片段：<% ... %>：包含有效的Java代码。
    • 表达式：<%= ... %>：输出一个表达式的值。
    • 声明：<%! ... %>：在JSP页面中定义变量或方法（不常用）。
    • 指令：<%@ ... %>：如page（设置页面属性）、include（包含其他文件）、taglib（引入标签库）。

  2. Servlet：一个Java类，运行在服务器端，用于处理HTTP请求并生成响应,JSP最终会被编译成Servlet。

  3. JDBC (Java Database Connectivity)：Java连接数据库的API。

  4. MVC模式：在JSP中,通常这样实现：

    • Model (模型)：JavaBean（简单的Java类）或业务逻辑类。
    • View (视图)：JSP页面,负责显示数据。
    • Controller (控制器)：Servlet，接收请求，调用Model处理,然后选择合适的View进行响应。

第3章：动手实践 - 创建一个简单的留言板

步骤1：创建Web项目

在Eclipse中，File -> New -> Dynamic Web Project，输入项目名，如 HelloJSP,并将目标运行时设置为你的Tomcat服务器。

步骤2：创建数据库表

假设你安装了MySQL,创建一个数据库和表：

CREATE DATABASE jsp_demo;
USE jsp_demo;
CREATE TABLE messages (
    id INT PRIMARY KEY AUTO_INCREMENT,
    author VARCHAR(100) NOT NULL,
    content TEXT NOT NULL,
    post_time DATETIME NOT NULL
);

步骤3：创建Model (JavaBean)

在 src 下创建 com.example.model 包，创建 Message.java：

// src/com/example/model/Message.java
package com.example.model;
import java.util.Date;
public class Message {
    private int id;
    private String author;
    private String content;
    private Date postTime;
    // Getters and Setters
    public int getId() { return id; }
    public void setId(int id) { this.id = id; }
    public String getAuthor() { return author; }
    public void setAuthor(String author) { this.author = author; }
    public String getContent() { return content; }
    public void setContent(String content) { this.content = content; }
    public Date getPostTime() { return postTime; }
    public void setPostTime(Date postTime) { this.postTime = postTime; }
}

步骤4：创建数据库连接工具类

在 src 下创建 com.example.util 包，创建 DBUtil.java：

// src/com/example/util/DBUtil.java
package com.example.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBUtil {
    private static final String URL = "jdbc:mysql://localhost:3306/jsp_demo?useSSL=false&serverTimezone=UTC";
    private static final String USER = "root"; // 你的数据库用户名
    private static final String PASSWORD = "your_password"; // 你的数据库密码
    static {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(URL, USER, PASSWORD);
    }
}

步骤5：创建控制器Servlet

在 src 下创建 com.example.controller 包，创建 MessageServlet.java：

// src/com/example/controller/MessageServlet.java
package com.example.controller;
import com.example.model.Message;
import com.example.util.DBUtil;
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.sql.*;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/message")
public class MessageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Message> messages = new ArrayList<>();
        String sql = "SELECT * FROM messages ORDER BY post_time DESC";
        try (Connection conn = DBUtil.getConnection();
             Statement stmt = conn.createStatement();
             ResultSet rs = stmt.executeQuery(sql)) {
            while (rs.next()) {
                Message msg = new Message();
                msg.setId(rs.getInt("id"));
                msg.setAuthor(rs.getString("author"));
                msg.setContent(rs.getString("content"));
                msg.setPostTime(rs.getTimestamp("post_time"));
                messages.add(msg);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        req.setAttribute("messages", messages);
        req.getRequestDispatcher("message_list.jsp").forward(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String author = req.getParameter("author");
        String content = req.getParameter("content");
        String sql = "INSERT INTO messages (author, content, post_time) VALUES (?, ?, NOW())";
        try (Connection conn = DBUtil.getConnection();
             PreparedStatement pstmt = conn.prepareStatement(sql)) {
            pstmt.setString(1, author);
            pstmt.setString(2, content);
            pstmt.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        // 重定向到GET请求，防止刷新页面重复提交
        resp.sendRedirect("message");
    }
}

步骤6：创建视图

在 WebContent (或 webapp) 文件夹下创建 message_list.jsp：

<%-- WebContent/message_list.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.example.model.Message" %>
<%@ page import="java.util.List" %>
<%
    List<Message> messages = (List<Message>) request.getAttribute("messages");
%>
<html>
<head>留言列表</title>
    <style>
        .message-box { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
        .message-box h4 { margin: 0 0 5px 0; }
        .message-box small { color: #888; }
    </style>
</head>
<body>
    <h2>留言列表</h2>
    <a href="post_message.jsp">发布新留言</a>
    <hr />
    <% for (Message msg : messages) { %>
        <div class="message-box">
            <h4><%= msg.getAuthor() %></h4>
            <p><%= msg.getContent() %></p>
            <small><%= msg.getPostTime() %></small>
        </div>
    <% } %>
</body>
</html>

再创建一个 post_message.jsp 用于提交表单：

<%-- WebContent/post_message.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>发布留言</title>
</head>
<body>
    <h2>发布留言</h2>
    <form action="message" method="post">
        <div>
            <label>昵称:</label>
            <input type="text" name="author" required>
        </div>
        <div>
            <label>内容:</label>
            <textarea name="content" rows="5" cols="30" required></textarea>
        </div>
        <div>
            <input type="submit" value="发布">
        </div>
    </form>
</body>
</html>

步骤7：部署和运行

  1. 将MySQL的JDBC驱动JAR文件（如 mysql-connector-java-x.x.x.jar）复制到项目的 WebContent/WEB-INF/lib 目录下，如果该目录不存在,请手动创建。
  2. 在Eclipse中，右键项目 -> Run As -> Run on Server，选择Tomcat服务器,然后启动。

访问 http://localhost:8080/HelloJSP/message_list.jsp，然后通过链接跳转到发布页面,即可完成留言板的交互。

第四部分：总结与进阶

如何选择？

  • 选择ASP.NET (C#)：

    • 如果你的团队熟悉C#或.NET生态。
    • 项目主要部署在Windows Server上。
    • 追求快速开发和微软生态的深度集成（如Azure云服务、Office 365等）。
    • 使用Visual Studio可以获得顶级的开发体验。

  • 选择JSP (Java)：

    • 如果你的团队熟悉Java,或者项目对跨平台有严格要求。
    • 开发大型、高并发、复杂业务逻辑的企业级应用。
    • 需要利用Java庞大的开源框架生态系统（如Spring, Hibernate, MyBatis）。
    • 项目需要长期维护,Java的稳定性和成熟度是优势。

进阶学习路径

  • ASP.NET 进阶：

    • ASP.NET Core Web API：构建RESTful服务。
    • Entity Framework Core：强大的ORM框架,简化数据库操作。
    • 身份验证与授权：实现用户登录、角色管理。
    • 前端框架集成：学习使用Razor Class Libraries与Angular, React, Vue等前端框架结合。
    • 容器化：学习使用Docker部署ASP.NET Core应用。

  • JSP 进阶：

    • 框架化开发：放弃Servlet，直接学习 Spring MVC，Spring是目前Java Web开发的事实标准,它能极大地简化开发。
    • ORM框架：学习 MyBatis 或 Hibernate,替代JDBC进行数据库操作。
    • 构建工具：学习 Maven 或 Gradle,用于项目依赖管理和构建。
    • 前端分离：学习使用 Vue.js 或 React 构建前端页面，后端JSP/Spring只提供JSON数据接口。
    • 设计模式：深入学习MVC、单例、工厂等设计模式,写出更优雅的代码。

希望这份详尽的教程能帮助你顺利入门ASP和JSP的开发世界！