Dreamweaver JSP 开发完整教程

本教程将分为以下几个部分：

dreamweaver jsp教程
（图片来源网络，侵删）
  1. 准备工作：安装和配置必要的软件。
  2. Dreamweaver 站点设置：创建和管理你的项目。
  3. 连接数据库：让你的 JSP 页面能够与数据库交互。
  4. 创建动态页面：使用 Dreamweaver 的可视化工具编写 JSP 代码。
  5. 显示数据：从数据库中查询数据并显示在页面上。
  6. 插入数据：创建表单，将用户输入的数据保存到数据库。
  7. 后续学习与最佳实践。

第一部分：准备工作

在开始之前,你需要安装以下软件：

  1. Adobe Dreamweaver：确保你安装了支持 JSP 的版本（如 Dreamweaver CC 或更高版本）。
  2. Java Development Kit (JDK)：JSP 是基于 Java 的，所以需要 JDK 来编译 JSP 文件，推荐安装 JDK 8 或更高版本。
  3. Web 服务器/应用服务器：用于运行 JSP 页面，最常用的是 Apache Tomcat，你可以从 Tomcat 官网 下载并安装。
  4. 数据库：用于存储数据，对于初学者，MySQL 或 MariaDB 是非常好的选择，你可以从 MySQL 官网 下载并安装。
  5. 数据库管理工具：用于管理数据库，推荐使用 Navicat for MySQL 或免费的 DBeaver 或 MySQL Workbench。

安装顺序建议：

  1. 安装 JDK。
  2. 安装 Tomcat。
  3. 安装 MySQL。
  4. 安装 Dreamweaver。

安装完 Tomcat 后，请务必设置好 CATALINA_HOME 环境变量，并确保 Tomcat 的 bin 目录在系统的 PATH 环境变量中，这样你才能方便地通过命令行启动和关闭 Tomcat。

第二部分：Dreamweaver 站点设置

这是至关重要的一步,它告诉 Dreamweaver 你的项目文件在哪里，以及如何连接到服务器。

dreamweaver jsp教程
（图片来源网络，侵删）

  1. 创建站点：

    • 打开 Dreamweaver，选择 站点 -> 新建站点。
    • 在弹出的窗口中,切换到 站点 选项卡。
    • 站点名称：给你的项目起一个名字，MyJSPProject。
    • 本地站点文件夹：选择一个本地文件夹来存放你的项目文件，D:\workspace\MyJSPProject。
    • 服务器：点击 号添加一个新服务器。

  2. 配置服务器：

    • 服务器名称：起一个名字，Local Tomcat Server。
    • 连接方法：选择 本地/网络。
    • 服务器文件夹：指定 Tomcat 中 webapps 目录的路径。D:\apache-tomcat-9.0.x\webapps。
    • Web URL：输入你的 Tomcat 访问地址，http://localhost:8080/。
    • 服务器模型：这是关键！选择 JSP。
    • 访问：选择 本地/网络。
    • 勾选 测试 旁边的复选框，然后点击 测试 按钮，如果配置正确，Dreamweaver 会提示“成功连接到服务器”。
    • 点击 保存。

  3. 高级设置：

    • 在站点设置窗口的左侧,选择 高级设置 -> 本地信息。
    • 默认图像文件夹：可以设置一个存放图片的默认路径。
    • 链接相对于：选择 文档。

你的 Dreamweaver 已经与本地 Tomcat 服务器成功连接。

dreamweaver jsp教程
（图片来源网络，侵删）

第三部分：连接数据库

为了连接数据库,我们需要一个数据库连接文件（通常是一个 .jws 或 .properties 文件），并配置 Tomcat 来支持数据库连接池。

  1. 创建数据库和表：

    • 打开你的 MySQL 管理工具（如 Navicat）。
    • 创建一个新数据库,testdb。
    • 在 testdb 中创建一个表 users：
      CREATE TABLE `users` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL,
  `email` VARCHAR(100) NOT NULL,
  `password` VARCHAR(50) NOT NULL,
  `reg_date` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

  2. 配置数据库连接：

    • 在 Dreamweaver 中，打开 数据库 面板（窗口 -> 数据库）。
    • 点击 号，选择 数据源名称 (DSN)。
    • 连接名称：起一个名字，conn_testdb。
    • 数据源名称 (DSN)：点击 建立 按钮。
    • 在弹出的窗口中,点击 添加 按钮。
    • 名称：给 DSN 起个名字，mysql_testdb。
    • 服务器：你的 MySQL 服务器地址，通常是 localhost。
    • 数据库：选择你刚刚创建的 testdb。
    • 用户：你的 MySQL 用户名（通常是 root）。
    • 密码：你的 MySQL 密码。
    • 点击 OK 保存所有设置。

  3. 测试连接：

    • 回到 Dreamweaver 的 DSN 设置窗口，确保你选择了刚刚创建的 mysql_testdb。
    • 点击 测试 按钮，如果成功，你会看到“成功连接到数据库”的提示，数据库 面板会显示出你的数据库表结构。

注意：DSN 方法在 Windows 上很常见，如果你在 macOS 或 Linux 上，或者不想使用 DSN，你需要手动创建一个连接文件（如 conn.jsp），并使用 JDBC 驱动，Dreamweaver 也可以帮助你生成这个文件。

第四部分：创建动态页面

现在我们来创建一个可以显示数据库中用户列表的 JSP 页面。

  1. 新建 JSP 文件：

    • 在 Dreamweaver 中，选择 文件 -> 新建。
    • 选择 动态页，然后在右侧的页面上选择 JSP。
    • 点击 创建，Dreamweaver 会生成一个基础的 JSP 模板。

  2. 绑定数据：

    • 打开 绑定 面板（窗口 -> 绑定）。
    • 点击 号，选择 记录集 (查询)。
    • 名称：给这个查询起个名字，rsUsers。
    • 连接：选择我们之前创建的 conn_testdb。
    • 表格：选择 users。
    • 列：选择 全部 (*）。
    • 排序：你可以选择一个字段进行排序，例如按 id 降序。
    • 点击 测试 按钮，你应该能看到一个包含 users 表数据的弹出窗口，这证明查询是正确的。
    • 点击 确定 和 确定 保存记录集。

  3. 可视化插入数据：

    • 绑定 面板中会出现 rsUsers 记录集，以及它包含的所有字段（如 id, username, email 等）。
    • 在设计视图中,输入一些标题，用户列表”。
    • 将光标放在标题下方,然后从 绑定 面板中拖动 username 字段到页面上，Dreamweaver 会自动插入 JSP 代码 <%=(rsUsers.Fields.Item("username").Value)%>。
    • 同样地,拖动 email 字段到 username 旁边或下方。
    • 为了让数据显示得更好,可以切换到 代码 视图，将这些代码放入一个表格中。

代码视图示例：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*, javax.sql.*, javax.naming.*" %>
<%
// 这里 Dreamweaver 会自动生成连接和查询代码
// 你不需要手动写这些，除非你需要更复杂的逻辑
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">用户列表</title>
</head>
<body>
    <h1>用户列表</h1>
    <table border="1" cellpadding="5">
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
        </tr>
        <%-- 循环输出记录集中的每一条数据 --%>
        <%
        while (rsUsers.next()) {
        %>
            <tr>
                <td><%= rsUsers.getInt("id") %></td>
                <td><%= rsUsers.getString("username") %></td>
                <td><%= rsUsers.getString("email") %></td>
            </tr>
        <%
        }
        %>
    </table>
</body>
</html>

注意：Dreamweaver 的可视化工具通常会生成 <cfoutput> 或类似标签，对于 JSP，它更倾向于在代码视图中直接使用脚本let，理解基本的 JSP 语法对调试和修改非常有帮助。

第五部分：显示数据（重复区域）

上面的代码只显示一条记录,要显示所有记录，我们需要使用“重复区域”。

  1. 在设计视图中,选中包含数据显示的表格行（<tr>...</tr>）。
  2. 打开 服务器行为 面板（窗口 -> 服务器行为）。
  3. 点击 号，选择 重复区域。
  4. 记录集：选择 rsUsers。
  5. 显示：选择 所有记录。
  6. 点击 确定。

Dreamweaver 会在你选中的 <tr> 标签周围添加 <cfloop> 或类似逻辑的代码，在代码视图中，你会看到一个 while 循环，这正是我们之前手动添加的。

第六部分：插入数据（表单提交）

现在我们来创建一个表单,让用户可以注册新用户。

  1. 创建表单页面：

    • 新建一个 JSP 文件，register.jsp。
    • 在设计视图中,插入一个表单（插入 -> 表单 -> 表单）。
    • 在表单内,插入三个文本字段，分别对应 username, email, password，并为每个字段添加标签。

  2. 设置表单属性：

    • 选中表单,在属性检查器中：
      • 表单 ID：frmRegister。
      • 动作：输入处理表单提交的页面，insert.jsp。
      • 方法：选择 POST。

  3. 创建插入页面：

    • 新建一个 JSP 文件，insert.jsp。
    • 打开 服务器行为 面板，点击 号，选择 插入记录。
    • 连接：conn_testdb。
    • 插入到表格：users。
    • 获取值自：frmRegister（这是你在 register.jsp 中设置的表单 ID）。
    • 在下面的列映射中,将表单字段（如 username）映射到数据库的列（users.username），ID 列可以留空，因为它通常是自增的。
    • 在插入后，转到：选择一个页面，list.jsp（即我们之前创建的显示用户列表的页面），这样用户注册后会自动跳转到列表页。

  4. 测试：

    • 在 Tomcat 的 webapps 目录下，创建一个与你项目名相同的文件夹（MyJSPProject），然后将你的所有 JSP 文件（list.jsp, register.jsp, insert.jsp）和数据库连接文件（如果有的话）复制进去。
    • 启动 Tomcat。
    • 在浏览器中访问 http://localhost:8080/MyJSPProject/register.jsp，填写表单并提交，你应该会被重定向到 list.jsp，并且能看到新添加的用户。

第七部分：后续学习与最佳实践

  • 学习基础：Dreamweaver 是一个强大的工具，但它不能替代编程知识，请务必学习基础的 HTML, CSS, JavaScript 和 Java/JSP 语法（如 request, response, session, JDBC）。
  • 理解代码：不要完全依赖 Dreamweaver 的可视化界面，经常切换到“代码”视图，看看它生成的代码是什么，理解其工作原理。
  • 安全性：永远不要直接将用户输入的 SQL 拼接到查询语句中，这会导致 SQL 注入攻击，Dreamweaver 的“插入记录”和“更新记录”行为通常使用预编译语句，这是安全的，但在手写代码时，请务必使用 PreparedStatement。
  • 版本控制：使用 Git 等版本控制工具来管理你的代码。
  • 现代框架：虽然这个教程使用了传统的 JSP + Servlet + JDBC 模式，但现代 Java Web 开发更多使用 Spring Boot 等框架，它们极大地简化了开发流程，但理解 JSP 的基本原理对于学习这些框架仍然非常有帮助。

希望这份详细的教程能帮助你顺利入门 Dreamweaver JSP 开发！祝你学习愉快！