MVC模式、AJax与Oracle数据库：程序猿的利器

2023-12-04 09:37:49

JavaWeb 快速入门：MVC 模式、AJAX、综合案例（商品管理）

数据库准备

在踏入 JavaWeb 世界之前，我们需要搭建一个坚实的数据基础。在本文中，我们将使用 Oracle 数据库来存储商品信息。以下步骤将指导您创建必要的数据库表和数据：

创建表

CREATE TABLE tb_product (
  id NUMBER(10) PRIMARY KEY,
  name VARCHAR2(50) NOT NULL,
  price NUMBER(10,2) NOT NULL,
  stock NUMBER(10) NOT NULL
);

插入数据

INSERT INTO tb_product (id, name, price, stock) VALUES (1, '苹果', 10.00, 100);
INSERT INTO tb_product (id, name, price, stock) VALUES (2, '香蕉', 5.00, 200);
INSERT INTO tb_product (id, name, price, stock) VALUES (3, '橘子', 3.00, 300);

JSP（JavaServer Pages）

JSP 是一种动态网页技术，将 Java 代码和 HTML 代码融为一体。这种强大的组合使开发人员能够生成动态内容，响应用户交互并访问数据库。

新建 JSP 页面

让我们创建一个名为 product.jsp 的 JSP 页面，它将从数据库中获取并显示商品信息：

<%@ page language="java" import="java.sql.*" %>
<%
  // 连接到数据库
  Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "scott", "tiger");
  Statement stmt = conn.createStatement();
  ResultSet rs = stmt.executeQuery("SELECT * FROM tb_product");

  // 循环遍历商品信息
  while (rs.next()) {
    out.println("<p>" + rs.getInt("id") + " " + rs.getString("name") + " " + rs.getDouble("price") + " " + rs.getInt("stock") + "</p>");
  }

  // 释放数据库资源
  rs.close();
  stmt.close();
  conn.close();
%>

Servlet（Java Servlet）

Servlet 是 Java Web 组件，用于处理 HTTP 请求和响应。它们负责生成动态内容并与数据库交互。

新建 Servlet

我们创建一个 ProductServlet 来处理商品相关的请求：

import javax.servlet.*;
import javax.servlet.http.*;

public class ProductServlet extends HttpServlet {

  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    // 连接到数据库
    Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "scott", "tiger");
    Statement stmt = conn.createStatement();
    ResultSet rs = stmt.executeQuery("SELECT * FROM tb_product");

    // 输出商品信息
    resp.setContentType("text/html;charset=UTF-8");
    PrintWriter out = resp.getWriter();
    out.println("<html><body>");
    out.println("<table border=\"1\">");
    out.println("<tr><th>编号</th><th>名称</th><th>价格</th><th>库存</th></tr>");
    while (rs.next()) {
      out.println("<tr><td>" + rs.getInt("id") + "</td><td>" + rs.getString("name") + "</td><td>" + rs.getDouble("price") + "</td><td>" + rs.getInt("stock") + "</td></tr>");
    }
    out.println("</table>");
    out.println("</body></html>");

    // 释放数据库资源
    rs.close();
    stmt.close();
    conn.close();
  }
}

MVC（Model-View-Controller）模式

MVC 模式是一种设计模式，将应用程序分为三个部分：模型（数据）、视图（表示）和控制器（处理）。这种分离使应用程序更易于维护和扩展。

应用 MVC 模式

在我们的商品管理系统中，我们使用 MVC 模式如下：

模型（Model）： Product 类负责表示商品对象并包含其属性（id、名称、价格和库存）。
视图（View）： product.jsp 负责显示商品信息，提供用户界面。
控制器（Controller）： ProductServlet 负责处理 HTTP 请求，与数据库交互并转发请求到适当的视图。

AJAX（Asynchronous JavaScript and XML）

AJAX 是一种技术，允许在不刷新整个页面的情况下，向服务器发送和接收数据。它用于创建交互式和响应迅速的 Web 应用程序。

实现 AJAX

我们使用 jQuery（一个流行的 JavaScript 库）来实现 AJAX 功能，例如更新商品库存：

$.ajax({
  url: "updateStock", // Servlet URL
  type: "POST",
  data: { id: id, stock: stock }, // 商品 ID 和更新后的库存
  success: function(response) {
    // 更新 UI，显示更新后的库存
  }
});