您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 程式設計入門

Spring + Hibernate + jQuery 實作電子相簿：完整原始碼架構與功能模組解析

編輯：Java 程式設計入門

專案技術棧

後端：Spring 2.5 + Hibernate 3（XML 映射）+ C3P0 連線池
前端：jQuery 1.2.6 + jQuery UI (dialog, draggable, resizable)
資料庫：MySQL，兩張表 user_table, photo_table
建構：Ant / Eclipse 專案結構

核心功能模組

模組	Servlet	主要職責
用戶註冊	ProRegistServlet	驗證用戶名唯一、持久化 User、建立 Session
用戶登入	ProLoginServlet	帳密比對、Session 綁定、觸發相片列表載入
用戶名檢查	ValidateNameServlet	AJAX 即時驗證用戶名可用性
相片列表	GetPhotoServlet	分頁查詢當前用戶相片，回傳 JS 動態渲染
相片顯示	ShowImgServlet	設定 Session 當前圖片，前端更新 img src
翻頁控制	TurnPageServlet	Session 記憶頁碼，邊界檢查後重新查詢
上傳相片	ProUploadServlet	Commons FileUpload 處理 multipart，類型驗證、儲存、持久化 Photo
頁面初始化	PageLoadServlet	檢查 Session 登入狀態，自動顯示面板與相片列表

關鍵程式碼片段

Spring 設定



    
    
    
    


    
    
        com/b510/album/model/User.hbm.xmlcom/b510/album/model/Photo.hbm.xml
    
    
        
            org.hibernate.dialect.MySQLInnoDBDialect
            true

Hibernate 映射

前端 jQuery 精華


$.post("proLogin", $('#user,#pass').serializeArray(), null, "script"); // 登入
$.getScript("getPhoto"); // 載入相片列表
setTimeout("onLoadHandler()", 1000); // 輪詢更新
$("#uploadDiv").dialog({modal:true, width:428, height:220}); // 上傳彈窗

資料庫腳本


CREATE DATABASE db_ajax;
USE db_ajax;
CREATE TABLE user_table (user_id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) UNIQUE, pass VARCHAR(255));
CREATE TABLE photo_table (photo_id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255), fileName VARCHAR(255), owner_id INT, FOREIGN KEY(owner_id) REFERENCES user_table(user_id));