zhou
在開始之前，我們需要知道一些基礎概念和 JavaWeb 的基本結構。JavaWeb 是一個基於 JAVA 語言的網頁應用程式開發框架，它允許開發者使用 JAVA 編寫伺服器端代碼並與瀏覽器進行交互。Java Web 通常由三個部分組成：前端（用戶界面）、後端（業務邏輯處理）和資料庫（存儲數據的地方）。
一. 前端技術
前端主要包括 HTML, CSS 和 JavaScript 等技術。HTML 是用來定義網頁內容的標記語言；CSS 是用來控制網頁樣式的層次樣式表；JavaScript 是一種腳本語言，可以用來為網頁添加動態效果和交互性。以下是如何使用這些技術的基本示例：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的第一個 JavaWeb 應用</title>
<style type="text/css">
body {
background: #f5f5f5;
}
h1 {
color: red;
font-size: 36px;
}
</style>
</head>
<body>
<h1>你好，世界！</h1>
<script type="text/javascript">
document.write("這是一個簡單的 JavaWeb 應用");
</script>
</body>
</html>
這個例子中，我們使用了基本的 HTML 語法來構建一個最簡潔的網頁。我們還使用了一些內聯風格屬性來改變文本的外觀。此外，我們還嵌入了一小段 JavaScript 代碼來向網頁輸出一段文字。
二. 後端技術
後端通常使用 Servlet 或 Spring Boot 等框架來實現。Servlet 是 Java EE 中的一個核心組件，它可以接收 HTTP 請求並生成相應的響應。Spring Boot 則是更流行的微服務架構之一，它提供了開箱即用的功能並且更容易配置和管理。以下是使用 Servlet 實作簡單 Hello World 範例：
首先，我們需要在 `web.xml` 文件中註冊我們的 servlet：
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4"
metadata-complete="true">
<servlet>
<servlet-name>HelloWorldServlet</servlet-name>
<servlet-class>com.example.servlets.HelloWorldServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloWorldServlet</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
接下來，我們創建一個名為 `com.example.servlets` 的包，並在其中創建一個新的類別 `HelloWorldServlet`：
package com.example.servlets;
import javax.servlet.*;
import java.io.IOException;
public class HelloWorldServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/plain"); //設置回應的 MIME 類型
PrintWriter out = response.getWriter(); //獲取 PrintWriter 物件以輸出到客戶端
out.println("Hello World from a Java Servlet!"); //輸出訊息到網頁上
out.close(); //關閉 PrintWriter
}
}
當用戶訪問 `http://localhost:8080/yourAppName/hello` （其中 `yourAppName` 是你的應用程序的名稱）時，將看到 “Hello World from a Java Servlet!” 字樣。
三. 資料庫操作
資料庫通常是任何 web 應用程式的關鍵部分，因為它們負責管理應用程式的數據。Java Web 應用程序可以連接到各種不同的資料庫系統，例如 MySQL、PostgreSQL 或 Oracle。以下是如何使用 JDBC (Java Database Connectivity) API 連接到 MySQL 資料庫並執行查詢的示例：
首先，你需要在你的 pom.xml（如果使用的是 Maven）或者 build.gradle（如果使用的是 Gradle）中包含對適當的依賴項的支持：
<!-- For Maven -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>最新版本</version>
</dependency>
或者對於 Gradle：
// For Gradle
dependencies {
implementation group: 'mysql', name: 'mysql-connector-java', version: '最新版本'
}
然後，你可以這樣寫代碼來連接到資料庫：
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
public class DBConnect {
private static final String URL = "jdbc:mysql://你的資料庫IP地址或域名:端口號/資料庫名稱";
private static final String USERNAME = "你的資料庫使用者帳戶";
private static final String PASSWORD = "<PASSWORD>";
public Connection getConnection() {
try {
Class.forName("com.mysql.cj.jdbc.Driver"); //載入驅動程式
return DriverManager.getConnection(URL, USERNAME, PASSWORD); //建立連線
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
public boolean executeQuery(String query) {
boolean result = false;
try (Connection conn = getConnection(); Statement stmt = conn.createStatement()) {
stmt.executeUpdate(query); //執行更新查詢
result = true;
} catch (SQLException ex) {
ex.printStackTrace();
}
return result;
}
}
在上面的代碼中，你需要替換 `你的資料庫IP地址或域名`，`端口號`，`資料庫名稱`，`你的資料庫使用者帳戶` 和 `你的資料庫密碼` 為實際的值。
四. 整合前端和後端
最後一步是把所有東西放在一起。你可以使用 JSP（JavaServer Pages）來結合前端和後端的元素。JSP 不僅支持 HTML，而且可以在頁面中嵌入 Java 代碼片段。以下是如何使用 JSP 在同一網頁上顯示從資料庫提取的資料：
首先，創建一個新的 JSP 文件，例如 `index.jsp`:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>My First JSP Page with Data from DB</title>
</head>
<body>
<h2>Welcome to My First JSP Page</h2>
<table>
<tr>
<td>ID</td>
<td>Name</td>
</tr>
<%
DBConnect dbconn = new DBConnect();
Connection con = dbconn.getConnection();
if (con == null) {
out.print("Could not connect to database.");
} else {
try {
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM yourTableNameHere"); //這裡填入你的資料表名稱
while (rs.next()) {
out.print("<tr>");
out.print("<td>" + rs.getString("idColumn") + "</td>"); //這裡填入 id 欄位的名稱
out.print("<td>" + rs.getString("nameColumn") + "</td>"); //這裡填入 name 欄位的名稱
out.print("</tr>");
}
} catch (SQLException se) {
se.printStackTrace();
} finally {
dbconn.closeResources(); //這是一個幫助函數，用於關閉資源（連接、聲明和結果集）
}
}
%>
</table>
</body>
</html>
在這個示例中，`yourTableNameHere` 應該被替換為實際的資料表名稱，`idColumn` 和 `nameColumn` 應該分別被替換為資料表中的 ID 和 Name 欄位的實際名稱。
總結一下，JavaWeb 開發涉及前端、後端和資料庫的三大部分。前端包括 HTML, CSS 和 JavaScript，後端通常使用 Servlet 或 Spring Boot，而資料庫則通過 JDBC API 進行連接和操作。一旦你掌握了這些基礎知識，就可以進一步探索其他高級主題，如 AJAX、會話跟蹤、安全性、MVC 模式等等。祝你在學習 JavaWeb 的旅程中一切順利！
