使用 MySQL 数据库创建简单的 Web 应用程序

本文档描述了如何创建用于连接 MySQL 数据库服务器的简单 Web 应用程序。还讲述了 Web 开发中的一些基本概念和技术,例如 JavaServer Pages (JSP)、JavaServer Pages 标准标记库 (JavaServer Pages Standard Tag Library, JSTL)、Java 数据库连接 (Java Database Connectivity, JDBC) API 和两层的客户端-服务器体系结构。本教程是为对 Web 开发有基本了解并且期望使用 MySQL 数据库来应用其知识的初学者设计的。

MySQL 是一种常见的开源数据库管理系统,由于其速度、灵活性和可靠性而常用于 Web 应用程序中。MySQL 使用 SQL(即 Structured Query Language,结构化查询语言)访问和处理数据库中包含的数据。

本教程是连接 MySQL 数据库教程的续篇,而且假定您已创建了名为 MyNewDatabase 的 MySQL 数据库,并已在 NetBeans IDE 中为其注册了连接。该教程中使用的表数据包含在 ifpwafcad.sql 中,本教程也需要使用此数据。此 SQL 文件创建了两个表(Subject 和 Counselor),然后将样例数据填入这两个表中。如果需要,将此文件保存至您的计算机中,然后在 NetBeans IDE 中将其打开并在名为 MyNewDatabase 的 MySQL 数据库中运行该文件。

目录

本页上的内容适用于 NetBeans IDE 6.8 和 6.9

要学习本教程,您需要具备以下软件和资源。

软件或资源要求的版本
NetBeans IDE,Java 包6.8 或 6.9
Java Development Kit (JDK)6
MySQL 数据库服务器5.1
MySQL Connector/J JDBC 驱动程序版本 5.x
GlassFish 服务器3

注意:

  • 使用 NetBeans IDE 的 Java 下载包,可以安装 GlassFish 服务器。您需要 GlassFish 服务器才能学完本教程。
  • Java 平台与 MySQL 数据库协议之间的通信所需的 MySQL Connector/J JDBC 驱动程序包含在 NetBeans IDE 中。
  • 如果需要将项目与工作解决方案进行比较,可以下载样例应用程序

 

规划结构

简单的 Web 应用程序可以使用两层体系结构进行设计,其中客户端可以直接与服务器通信。在本教程中,Java Web 应用程序使用 Java 数据库连接 API 直接与 MySQL 数据库通信。实际上,正是 MySQL Connector/J JDBC 驱动程序实现了应用服务器(GlassFish 服务器)识别的 Java 代码与任何 SQL(数据库服务器 (MySQL) 识别的语言)内容之间的通信。

您在本教程中构建的应用程序需要创建两个 JSP 页。在每个页面中,您将使用 HTML 和 CSS 来实现简单接口,并应用 JSTL 技术来执行直接查询数据库以及将检索到的数据插入这两个页面的逻辑。两个数据库表(Subject 和 Counselor)包含在 MySQL 数据库 MyNewDatabase(该数据库是通过学完连接 MySQL 数据库教程创建的)中。以下面的两层方案为例。

描述两层 Web 应用程序结构的图例

欢迎页面 (index.jsp) 向用户展示了简单的 HTML 表单。当浏览器请求 index.jsp 时,该页面内的 JSTL 代码会启动对 MyNewDatabase 的查询。它会从 Subject 数据库表中检索数据,然后先将该数据插入到页面中,再将页面发送至浏览器。当用户在欢迎页面的 HTML 表单中提交其选择时,该提交会启动对响应页 (response.jsp) 的请求。同样,该页面内的 JSTL 代码会启动对 MyNewDatabase 的查询。这次,它会同时从 Subject 和 Counselor 表中检索数据,并将该数据插入到页面中,以便允许用户在页面返回到浏览器时查看基于其选择的数据。

为了实现上述方案,您将为一个假想的组织 IFPWAFCAD(即 International Former Professional Wrestlers' Association for Counseling and Development,国际前职业摔跤咨询与发展协会)开发一个简单的应用程序。

index.jsp
显示在浏览器中的 index.jsp 

response.jsp
显示在浏览器中的 response.jsp

 

创建新项目

首先,在 IDE 中创建一个新的 Java Web 项目:

  1. 从主菜单中,选择“文件”>“新建项目”(Ctrl-Shift-N 组合键;在 Mac 上为 &#8984-Shift-N 组合键)。选择 "Java Web" 类别,然后选择“Web 应用程序”。 
    “新建项目”向导 
    使用“新建项目”向导,可以在标准 IDE 项目中创建空的 Web 应用程序。标准项目使用 IDE 生成的 Ant 生成脚本来编译、部署和运行应用程序。
  2. 单击“下一步”。
  3. 在“项目名称”中,输入 IFPWAFCAD。同时,指定项目在计算机上的位置。(缺省情况下,IDE 会将项目置于 home 目录下的 NetBeansProjects 文件夹中。)
  4. 单击“下一步”。
  5. 在步骤 3“服务器和设置”中,指定 GlassFish 服务器作为用于运行应用程序的服务器。 

    注意:如果您安装了 NetBeans IDE 的 Java 版本,则 GlassFish 服务器会显示在“服务器”下拉字段中。由于 GlassFish 服务器包含在下载中,因此会在 IDE 中自动进行注册。如果要对此项目使用其他服务器,请单击位于“服务器”下拉字段旁边的“添加”按钮,然后在 IDE 中注册其他服务器。但是,使用 GlassFish 服务器之外的服务器不在本教程的讲述范围之内。
  6. 在“Java EE 版本”字段中,选择 "Java EE 5"。 
    “新建 Web 应用程序”向导 -“服务器和设置” 
    Java EE 6 Web 项目不需要使用 web.xml 部署描述符,且 NetBeans 项目模板不在 Java EE 6 项目中包含 web.xml 文件。但是,本教程介绍了如何在部署描述符中声明数据源,此操作不依赖于任何特定于 Java EE 6 的功能,因此可以将项目版本设置为 Java EE 5。 

    注意:您同样可以将项目版本设置为 Java EE 6,然后创建 web.xml 部署描述符。(从“新建文件”向导中选择 "Web" 类别,然后选择“标准部署描述符”。)
  7. 单击“完成”。IDE 将为整个应用程序创建一个项目模板,并在编辑器中打开一个空的 JSP 页 (index.jsp)。index.jsp 充当应用程序的欢迎页面。新项目是根据 SunJava BluePrints 准则构建的。

 

准备 Web 界面

首先,准备欢迎页 (index.jsp) 和响应页 (response.jsp)。欢迎页实现用于捕获用户数据的 HTML 表单。这两个页面都实现 HTML 表,从而以结构化的方式显示数据。在此部分,您也可以创建样式表,以便增强两个页面的外观。

设置欢迎页

确保 index.jsp 在编辑器中处于打开状态。如果该页面尚未打开,请从“项目”窗口的 "IFPWAFCAD" >“Web 页”双击 index.jsp

  1. 在编辑器中,将 <title> 标记之间的文本更改为:IFPWAFCAD Homepage
  2. 将 <h1> 标记之间的文本更改为:"Welcome to IFPWAFCAD, the International Former Professional Wrestlers' Association for Counseling and Development!"。
  3. 通过从主菜单中选择“窗口”>“组件面板”(Ctrl-Shift-8 组合键;在 Mac 上为 &#8984-Shift-8 组合键)打开 IDE 的组件面板。将指针悬停在 "HTML" 类别中的“表”图标上,并注意为该项显示的缺省代码片段。 
    当鼠标悬停在某项上时组件面板显示代码片段 
    您可以根据自己的喜好配置“组件面板”- 在“组件面板”中单击鼠标右键并选择“显示大图标”和“隐藏项名称”可使其显示上图所示的内容。
  4. 将光标指针放在紧靠 <h1> 标记后面的位置。(该位置即是您要实现新的 HTML 表的位置。)然后,在“组件面板”中双击“表”图标。
  5. 在显示的“插入表”对话框中,指定以下值,然后单击“确定”。 

    • 行数:2
    • 列数:1
    • 边框大小:0
    此时会生成 HTML 表代码并已添加到您的页面中。
  6. 将以下内容添加到表标题和第一个表行的单元格中(新内容以粗体显示):
    <table border="0">
        <thead>
            <tr>
                <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>To view the contact details of an IFPWAFCAD certified former                 professional wrestler in your area, select a subject below:
                </td>
            </tr>
  7. 在底部的表行中,插入一个 HTML 表单。为此,请将光标放在第二对 <td> 标记之间,然后双击“组件面板”中的 HTML 表单 (HTML 表单图标) 图标。在“插入表单”对话框的“操作”文本字段中,键入 response.jsp,然后单击“确定”。 
    “插入表单”对话框
  8. 在 <form> 标记之间键入以下内容(新内容以粗体显示):
    <tr>
        <td>
            <form action="response.jsp">
                <strong>Select a subject:</strong>
            </form>
        </td>
    </tr>
    使用 IDE 的代码完成支持同样可以访问“组件面板”中列出的所有项。要在编辑器中工作时使用代码完成,可以按 Ctrl-空格键。下面的两个步骤演示了如何使用代码完成添加下拉列表和提交按钮。
  9. 在编辑器中,按 Enter 键在刚添加的内容后面添加一个空行,然后按 Ctrl-空格键以调用 IDE 的代码完成支持。 
    代码完成弹出式窗口 
    选择“下拉列表”。
  10. 在所显示的“插入下拉列表”对话框的“名称”文本字段中键入 subject_id,然后单击“确定”。请注意,下拉列表的代码片段会添加到表单中。 

    下拉列表的选项数目当前并不重要。稍后,我们将在本教程中添加动态生成选项(基于从 Subject 数据库表收集的数据)的 JSTL 标记。
  11. 将提交按钮项 (提交按钮图标) 添加到紧靠刚添加的下拉列表后面的位置。可以使用“组件面板”执行此操作,也可以调用编辑器的代码完成(如上一步中所述)。在“插入按钮”对话框的“标签”和“名称”字段中均输入 submit,然后单击“确定”。
  12. 要设置代码的格式,请在编辑器中单击鼠标右键,然后选择“格式化”(Alt-Shift-F 组合键;在 Mac 上为 Ctrl-Shift-F 组合键)。系统会为您的代码自动设置格式,并且类似于以下内容:
    <body>
        <h2>Welcome to <strong>IFPWAFCAD</strong>, the International Former
            Professional Wrestlers' Association for Counseling and Development!
        </h2>
    
        <table border="0">
            <thead>
                <tr>
                    <th>IFPWAFCAD offers expert counseling in a wide range of fields.</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>To view the contact details of an IFPWAFCAD certified former
                        professional wrestler in your area, select a subject below:
                    </td>
                </tr>
                <tr>
                    <td>
                        <form action="response.jsp">
                            <strong>Select a subject:</strong>
                            <select name="subject_id">
                                <option></option>
                            </select>
                            <input type="submit" value="submit" name="submit" />
                        </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    要在浏览器中查看此页面,请在编辑器中单击鼠标右键,然后选择“运行文件”(Shift-F6 组合键;在 Mac 上为 Fn-Shift-F6 组合键)。在您执行此操作时,JSP 页面会自动进行编译并部署到您的服务器中。IDE 会打开缺省浏览器以便从页面的部署位置显示该页面。 
    显示在浏览器中的 index.jsp

创建响应页

为了准备 response.jsp 的界面,您必须首先在项目中创建文件。请注意,此页面中显示的大部分内容都是使用 JSP 技术自动生成的。因此,在以下步骤中添加占位符,稍后将替换为 JSP 代码。

  1. 在“项目”窗口中右键单击 IFPWAFCAD 项目节点,然后选择“新建”>“JSP”。“新建 JSP 文件”对话框打开。
  2. 在 JSP“文件名”字段中,输入 response。请注意,当前为“位置”字段选择了“Web 页”,这表示将在项目的 web 目录中创建该文件。此目录同样是 index.jsp 欢迎页驻留的位置。
  3. 接受任何其他缺省设置,然后单击“完成”。新的 response.jsp 页面模板生成,并在编辑器中打开。新的 JSP 节点还会在“项目”窗口的“Web 页”下显示。 
    response.jsp 节点在“项目”窗口中显示
  4. 在编辑器中,将标题更改为:IFPWAFCAD - {placeholder}
  5. 删除 <body> 标记之间的 <h1>Hello World!</h1> 一行,然后复制下面的 HTML 表并将其粘贴到页面主体中:
    <table border="0">
        <thead>
            <tr>
                <th colspan="2">{placeholder}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Description: </strong></td>
                <td><span style="font-size:smaller; font-style:italic;">{placeholder}</span></td>
            </tr>
            <tr>
                <td><strong>Counselor: </strong></td>
                <td>{placeholder}
                    <br>
                    <span style="font-size:smaller; font-style:italic;">
                    member since: {placeholder}</span>
                </td>
            </tr>
            <tr>
                <td><strong>Contact Details: </strong></td>
                <td><strong>email: </strong>
                    <a href="mailto:{placeholder}">{placeholder}</a>
                    <br><strong>phone: </strong>{placeholder}
                </td>
            </tr>
        </tbody>
    </table>
    要在浏览器中查看此页面,请在编辑器中单击鼠标右键,然后选择“运行文件”(Shift-F6 组合键;在 Mac 上为 Fn-Shift-F6 组合键)。此时编译该页面,将其部署到 GlassFish 服务器,并在缺省浏览器中将其打开。 
    显示在浏览器中的 response.jsp

创建样式表

创建简单的样式表,以便增强 Web 界面的显示。本教程假定您了解样式规则的作用方式,以及它们影响 index.jsp 和 response.jsp 中相应 HTML 元素的方式。

  1. 通过在 IDE 的主工具栏中按“新建文件”(“新建文件”按钮) 按钮,打开“新建文件”向导。选择 "Web" 类别,然后选择“层叠样式表”并单击“下一步”。
  2. 键入 style 作为 CSS 文件名,并单击“完成”。IDE 会创建一个空 CSS 文件,并将其放置在 index.jsp 和 response.jsp 所在的同一个项目位置。请注意,style.css 的节点现在显示在“项目”窗口的项目中,并且该文件在编辑器中打开。
  3. 在编辑器中,将以下内容添加到 style.css 文件中:
    body {
        font-family: Verdana, Arial, sans-serif;
        font-size: smaller;
        padding: 50px;
        color: #555;
    }
    
    h1 {
        text-align: left;
        letter-spacing: 6px;
        font-size: 1.4em;
        color: #be7429;
        font-weight: normal;
        width: 450px;
    }
    
    table {
        width: 580px;
        padding: 10px;
        background-color: #c5e7e0;
    }
    
    th {
        text-align: left;
        border-bottom: 1px solid;
    }
    
    td {
        padding: 10px;
    }
    
    a:link {
       color: #be7429;
       font-weight: normal;
       text-decoration: none;
    }
    
    a:link:hover {
       color: #be7429;
       font-weight: normal;
       text-decoration: underline;
    }
  4. 将样式表链接到 index.jsp 和 response.jsp。在这两个页面中,将以下行添加到 <head> 标记之间:
    <link rel="stylesheet" type="text/css" href="style.css">
    要在编辑器中打开的文件之间快速导航,请按 Ctrl-Tab 组合键,然后选择所需的文件。

 

准备应用程序和数据库之间的通信

在服务器与数据库之间实现通信的最有效方式是设置数据库连接池。为每个客户端请求创建新连接会非常耗时,对于连续接收大量请求的应用程序尤其如此。为了改变这种情况,会在连接池中创建和维护大量的连接。任何需要访问应用程序数据层的传入请求将使用池中已创建的连接。同样,当请求完成时,连接不会关闭,但是会返回到连接池。

为服务器准备数据源和连接池后,您需要指示应用程序使用数据源。这通常通过在应用程序的 web.xml 部署描述符中创建一个条目来完成。最后,您需要确保服务器可以访问数据库驱动程序(MySQL Connector/J JDBC 驱动程序)。

 

  1. 设置 JDBC 数据源和连接池
  2. 从应用程序引用数据源
  3. 将数据库驱动程序的 JAR 文件添加到服务器

设置 JDBC 数据源和连接池

GlassFish Server Open Source Edition 包含数据库连接池 (Database Connection Pooling, DBCP) 库,该库为作为开发者的您提供了透明的连接池功能。要利用该功能,需要为应用程序可以用于连接池的服务器配置 JDBC(Java Database Connectivity,Java 数据库连接)数据源。

有关 JDBC 技术的详细信息,请参见 Java 教程:JDBC 基础知识

您可以直接在 GlassFish 服务器管理控制台中配置数据源,也可以按照下面所述,在 sun-resources.xml 文件中声明应用程序所需的资源。部署应用程序时,服务器在资源声明中读取内容,然后创建所需的资源。

下面的步骤介绍了如何声明连接池以及依赖于连接池的数据源。使用 NetBeans“JDBC 资源”向导,可以执行这两个操作。

  1. 通过在 IDE 的主工具栏中按“新建文件”(“新建文件”按钮) 按钮,打开“新建文件”向导。选择 "GlassFish" 服务器类别,然后选择“JDBC 资源”并单击“下一步”。
  2. 在步骤 2“常规属性”中,选择“创建新的 JDBC 连接池”选项,然后在“JNDI 名称”文本字段中键入 jdbc/IFPWAFCAD。 
    “JDBC 资源”向导的步骤 2:“常规属性” 
    JDBC 数据源依赖于 JNDI(Java Naming and Directory Interface,Java 命名和目录接口)。JNDI API 为应用程序查找和访问数据源提供了统一的方式。有关详细信息,请参见 JNDI 教程
  3. (可选)为数据源添加描述。例如,键入:Accesses the database that provides data for the IFPWAFCAD application
  4. 单击“下一步”,然后再次单击“下一步”以跳过步骤 3“附加属性”。
  5. 在步骤 4 中,键入 IfpwafcadPool 作为 JDBC 连接池名称。确保“从现有连接中提取”选项已选中,然后从下拉列表中选择jdbc:mysql://localhost:3306/MyNewDatabase。 
    “JDBC 资源”向导的步骤 4:“选择数据库连接” 

    注意:该向导会检测已在 IDE 中设置的任何数据库连接。所以,此时您必须已创建 MyNewDatabase 数据库的连接。可通过打开“服务”窗口(Ctrl-5 组合键;在 Mac 上为 &#8984-5 组合键),并在“数据库”类别下查找连接节点(数据库连接节点图标)验证已创建的连接。
  6. 单击“下一步”。在步骤 5 中,请注意 IDE 将从上一步中指定的数据库连接中提取信息,并为新连接池设置名称-值属性。 
    “JDBC 资源”向导的步骤 5:“添加连接池属性”
  7. 单击“完成”。该向导生成 sun-resources.xml 文件,其中包含数据源和所指定的连接池的相应条目。

在“项目”窗口的“服务器资源”中,可以打开新创建的 sun-resources.xml 文件,请注意,在 <resources> 标记中已声明数据源和连接池包含您以前指定的值。

要确认确实在 GlassFish 服务器中注册了新数据源和连接池,可以将项目部署到服务器中,然后在 IDE 的“服务”窗口中查找这些资源:

  1. 在“项目”窗口中,右键单击 "IFPWAFCAD" 项目节点,然后选择“部署”。如果尚未运行服务器,则会启动服务器;同时,会编译项目并将其部署到服务器。
  2. 打开“服务”窗口(Ctrl-5 组合键;在 Mac 上为 &#8984-5 组合键),然后展开“服务器”> GlassFish 服务器 >“资源”> "JDBC" >“JDBC 资源”和“连接池”节点。请注意,新数据源和连接池现在都已显示: 
    在“服务”窗口中显示的新数据源和连接池

从应用程序引用数据源

您需要从 Web 应用程序引用刚配置的 JDBC 资源。为此,可以在应用程序的 web.xml 部署描述符中创建一个条目。

部署描述符是基于 XML 的文本文件,它包含了描述应用程序如何部署到特定环境的信息。例如,它们通常用于指定应用程序上下文参数和行为模式、安全设置以及 Servlet、过滤器和侦听程序的映射。

请执行以下操作,在应用程序的部署描述符中引用数据源。

  1. 在“项目”窗口中,展开“配置文件”文件夹,然后双击 "web.xml"。IDE 的主窗口中将显示该文件的图形界面。
  2. 单击编辑器顶部的“引用”标签。展开“资源引用”标题,然后单击“添加”。“添加资源引用”对话框打开。
  3. 对于“资源名称”,输入您在上面部分为服务器配置数据源时提供的资源名称 (jdbc/IFPWAFCAD)。“描述”字段是可选的,但是您可以输入用户可读的资源描述,例如Database for IFPWAFCAD application。 
    “添加资源引用”对话框
  4. 单击“确定”。新资源被添加在“资源引用”标题下面。 
    在部署描述符中列出的新 JDBC 资源 
    要验证该资源现在是否已添加到 web.xml 文件中,请单击编辑器顶部的 "XML" 标签。请注意,现在包含了以下 <resource-ref> 标记:
    <resource-ref>
        <description>Database for IFPWAFCAD application</description>
        <res-ref-name>jdbc/IFPWAFCAD</res-ref-name>
        <res-type>javax.sql.dataSource</res-type>
        <res-auth>Container</res-auth>
        <res-sharing-scope>Shareable</res-sharing-scope>
    </resource-ref>

将数据库驱动程序的 JAR 文件添加到服务器

添加数据库驱动程序的 JAR 文件是使服务器能够与您的数据库通信的另一个非常重要的步骤。通常,需要找到数据库驱动程序的安装目录,并将 mysql-connector-java-5.1.6-bin.jar 文件从驱动程序的根目录复制到您所使用的服务器的库文件夹中。幸运的是,IDE 的服务器管理能够在部署时检测是否已添加了 JAR 文件,如果未添加,它会自动添加。

要演示此过程,请打开“服务器”窗口(选择“工具”>“服务器”)。IDE 提供了一个 JDBC 驱动程序部署选项。如果启用该选项,该选项会启动检查以确定服务器的部署应用程序是否需要任何驱动程序。在 MySQL 中,如果需要驱动程序但又缺少该驱动程序,IDE 的捆绑驱动程序会部署到服务器的适当位置中。

  1. 选择“工具”>“服务器”以打开“服务器”窗口。在左窗格中选择 GlassFish 服务器。
  2. 在主窗格中,选择“启用 JDBC 驱动程序部署”选项。 
    “服务器”窗口 - GlassFish Server 3.0.1
  3. 在关闭该窗口之前,请记下“域文件夹”文本字段中指示的路径。在连接 IDE 中的 GlassFish 服务器时,实际上是连接到应用服务器的实例。每个实例均会在唯一的域中运行应用程序,“域名”字段指示了服务器所使用的域名。如上图所示,驱动程序 JAR 文件应该位于 domain1 中,它是安装 GlassFish 服务器时创建的缺省域。
  4. 单击“关闭”退出“服务器”窗口。
  5. 在计算机上,导航至 GlassFish 服务器安装目录,并向下浏览到 domains > domain1 > lib 子文件夹。您应该已将 IFPWAFCAD 项目部署到服务器,因此应会看到 mysql-connector-java-5.1.6-bin.jar 文件。如果没有看到驱动程序 JAR 文件,请执行下列步骤。
  6. 将您的项目部署到服务器。在 IDE 的“项目”窗口中,从项目节点的右键单击菜单中选择“部署”。在 IDE 的“输出”窗口中可以查看进度(Ctrl-4 组合键;在 Mac 上为 &#8984-4 组合键)。输出会提示 MySQL 驱动程序已部署到 GlassFish 服务器中的某个位置。 
    “输出”窗口指示已部署 MySQL 驱动程序 
    现在,如果返回到计算机上的 domain1/lib 子文件夹,则会看到已自动添加了 mysql-connector-java-5.1.6-bin.jar 文件。