【文章內容簡介】 務器（使用 HTML 表單）。在 web 服務器把數據處理完畢之后，會向用戶返回一張完整的新網頁。 由于每當用戶提交輸入，服務器就會返回新網頁，傳統(tǒng)的 web 應用程序往往運行緩慢，且越來越不友好。通過 Ajax， web 應用程序無需重載網頁，就可以發(fā)送并取回數據。完成這項工作，需要通過向服務器發(fā)送 HTTP 請求（在幕后），并通過當服務器返回數 據時使用 JavaScript 僅僅修改網頁的某部分。 通過在幕后與 web 服務器交換數據，而不是每當用戶 做出 改變時重載整個 web 頁面， Ajax 技術可以使網頁更迅速地響應。 本系統(tǒng)中涉及到的 Ajax 的應用主要體現在頁面信息驗證、下屬城市的動態(tài)獲取，通過該技術，系統(tǒng)在不發(fā)生頁面跳轉的情況下完成前后臺的數據交互。 CSS 介紹 CSS 是英語 Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現 HTML 或 XML等文件樣式的計算機語言。 CSS 目前最新版本為 CSS3，是能 夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統(tǒng) HTML 的表現而言， CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優(yōu)秀的表現設計語言。 CSS 能夠根據不同使用者的理解能力，簡化或者優(yōu)化寫法，針對各類人群，有較強的易讀性。 CSS本身主要功能是完成對頁面的布局與美化工作，在本系統(tǒng)的實現中， CSS江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 8 主要完成頁面整體框架布局、 div層的嵌套布局、頁面元素的屬性設定。 開發(fā)和運行環(huán)境 本系統(tǒng)采用的是 B/S 架構，開發(fā)工具為 Eclipse，開發(fā)語言為 Java，由于 Java的跨平臺性，理論上該系統(tǒng)可以在任何操作系統(tǒng)上運行，以下為具體開發(fā)環(huán)境： 操作系統(tǒng)： Microsoft Windows XP 開發(fā)語言： Java+JavaScript 開發(fā)工具： 數據庫系統(tǒng)： Microsoft SQL Server 2021 應用服務器軟件： Tomcat 圖形編輯軟件：美圖秀秀 系統(tǒng)開發(fā)流程 本次畢業(yè)設計主要按照以下流程進行實現：需求分析、系統(tǒng)功 能分析、系統(tǒng)整體架構設計、系統(tǒng)細節(jié)設計與實現，如下圖 所示： 圖 系統(tǒng)開發(fā)流程圖 ，該階段的內容主要是分析目前二手市場存在的不足，了解用戶期望目標。 ，該階段的主要內容是根據收集到的用戶需求信息，分析該系統(tǒng)需要實現的功能。 ，該階段的主要內容是根據系統(tǒng)各個功能的關聯(lián)，設計系統(tǒng)架構，在此階段對系統(tǒng)具體功能模塊的設計不做考慮。 ，該階段是根據系統(tǒng)總 體架構，對各個模塊進行需求分 析 系統(tǒng)功能分析 系統(tǒng)整體架構設計 系統(tǒng)細節(jié)設計與實現 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 9 逐個分析并制定解決方案，參照方案完成該模塊。 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 10第三章 需求分析 系統(tǒng)預期用戶 本系統(tǒng)作為一個信息發(fā)布系統(tǒng)，所有用戶都具有搜索信息的權限。具體劃分，用戶主要涉及商品信息發(fā)布者與商品信息接收者兩種角色，對兩種角色現做以下詳細介紹： ，商品信息發(fā)布者主要功能是發(fā)布自己的商品轉讓信息，因為涉及到個人信息的集中存放與辨識問題，商品信息發(fā)布者還擁有用戶登錄、用戶個人信息修改、發(fā)布歷史管理等功能，如下圖 所示： 圖 商品信息發(fā)布者功能圖 ，對于該用戶，由于沒有登錄系統(tǒng)，因此僅提供信息索引、用戶注冊、用戶登錄（已注冊用戶）功能，如下圖 所示： 用戶登錄 用戶個人信息管理 用戶發(fā)布歷史管理 信息索引 信息發(fā)布 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 11 圖 商品信息接收者功能圖 系統(tǒng)可行性分析 本次設計的主要影響因素為技術的運用。從技術本身來說，由于本系統(tǒng)的功能比較少，技術上主要涉及 SSH2框架、 JSP、 Ajax 和 CSS技術，皆是當前的主流技術，因此有關查詢資料比較豐富，可參 考文件較多，為實現本系統(tǒng)提供了有力的保障；其次，本系統(tǒng)的設計中不涉及硬件及其他配套設備，基本上不需要投入其他資金，因此不存在經濟上的困難；第三，本系統(tǒng)功能比較小，所有設計與制作均出自一人之手，后期維護也由同一人承擔，不涉及相關技術不了解的情況，不存在管理上的難度。 系統(tǒng)功能性需求 針對目前二手商品信息匯集困難的特點，特設計本系統(tǒng)，因此，系統(tǒng)在功能上要做到以下幾點： 1)用戶方面 用戶分為已注冊用戶與未注冊用戶，其兩者的主要區(qū)別僅在于已注冊用戶擁有自己的賬號，個人資料信息，商品發(fā)布功能，未注冊用戶 僅享受系統(tǒng)提供的信息查詢功能。 2)登陸方面 系統(tǒng)首頁自動判定該用戶是否已經登陸，對于已登陸用戶，系統(tǒng)為其保存用戶信息，用戶可以通過右上角的快速鏈接查看個人信息，對于尚未登陸用戶，系統(tǒng)右上角僅提供注冊與登陸鏈接。 3)信息查詢 用戶登錄 用戶注冊 信息索引 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 12 系統(tǒng)頁面上方提供一個大的搜索框供用戶直接搜索商品關鍵字，在首頁提供常見商品的快速鏈接，同時，系統(tǒng)在查詢結果頁面提供信息的更多約束條件的查詢，方便用戶縮小查詢范圍。另外，系統(tǒng)提供分類查詢功能，方便用戶按種類細化查詢條件。 4)信息發(fā)布 系統(tǒng)為已登陸用戶提供信息發(fā)布功能，用戶 在頁面提交自己的信息表單，填寫必要選項，選取商品種類，用戶發(fā)布成功后即可在頁面查看到該條記錄。 5)個人信息 用戶個人信息是查詢已登陸用戶的個人相關信息，包括用戶信息、發(fā)布信息等內容，在該頁面可以完成用戶個人信息的修改，以及已發(fā)布信息的修改和刪除操作。 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 13第四章 系統(tǒng)設計 設計目標 根據當前主流 Web 系統(tǒng)的設計模式，并參考其他類似服務類網上系統(tǒng)的特點，結合本系統(tǒng)自身的實際應用需求，在本系統(tǒng)的設計完成時將要實現以下的目標： 1)基本功能實現。系統(tǒng)本身的出發(fā)點就是完成一項功能，所以，本條目標的實現代表著 系統(tǒng)完成程度的關鍵評判因素。系統(tǒng)應該逐一實現功能需求中所述的各項功能。 2)系統(tǒng)配置靈活。系統(tǒng)應該充分尊重用戶的個性，允許用戶對涉及自身的某些信息的選擇性輸出，對一些系統(tǒng)本身運行時不做強烈要求的內容，給予用戶充分的自由做選擇性填寫。 3)友好的操作界面。系統(tǒng)的基本功能完善的同時，盡量實現一個友好的操作界面，在不影響系統(tǒng)正常服務的情況下，還應做到為用戶提供最方便的操作。 4)易于日后維護。這主要是考慮到系統(tǒng)在建成之后可能涉及用戶體驗不佳、系統(tǒng) Bug 逐漸顯現、系統(tǒng)性能不穩(wěn)定的情況下，方便系統(tǒng)維護人員能夠對系統(tǒng)及時做出正確調整。 5)易于升級。一個優(yōu)秀的系統(tǒng)，一個具有活力的系統(tǒng)必然在一開始就考慮到隨著系統(tǒng)的廣泛應用，系統(tǒng)在很多地方需要增加或刪減模塊，這就要求本系統(tǒng)在開發(fā)時有著清晰的功能層次劃分，能滿足系統(tǒng)在需要升級或擴充時能夠方便的做出調整。 6)良好的糾錯能力。糾錯能力主要體現在對于用戶的一些非法操作能夠及時給出提示信息，方便用戶改進。例如在登陸系統(tǒng)時用戶名及密碼錯誤、密碼為空等常見用戶誤操作行為。 系統(tǒng)目錄結構設計 系統(tǒng)在設計伊始就選擇了使用 MVC分層模型和 SSH2 框架，系統(tǒng)目錄結構大致如圖 所示。 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 14 圖 系統(tǒng)架構圖 系統(tǒng)為 Eclipse 建立的 Web Project， src目錄下存放 action、 dao、 util、service、 entity、 test 六個主文件夾，其中 test 文件夾僅用作部分代碼測試使用。 action 文件夾存放控制層類、 dao文件夾中存放系統(tǒng)與數據庫之間的操作接口，另外， dao 文件夾中還有 impl 文件夾，用于存放接口的實現類；、 service文件夾存放服務層接口， service 文件夾中還存在 impl 文件夾，其中存放 service層接口的實現類、 util 提供系統(tǒng)組件的一些類的存放 、 entity 主要存放實體類信息，包括表格的映射文件配置信息。 系統(tǒng) Web Content 目錄下存放自定義文件夾 imgs、 css、 js、 pages、 util 和 頁面，其中 imgs 文件夾主要是提供所需圖片的調用， css 文件中存放頁面布局信息，供頁面元素調用， js 文件夾中為 JavaScript 信息，頁面中的控件通過 JavaScript 腳本實現部分功能， pages 存放多數頁面，在本系統(tǒng)中其優(yōu)勢不明顯，在大型系統(tǒng)中，分類的頁面存儲為日后的升級、維護提供了極大的方便，util 文件夾主要存放一些組件頁面 ，例如本系統(tǒng)中首頁由 、 、 頁面組成，頁面組合的應用增強了代碼的復用性，降低了資源浪費； 頁面是系統(tǒng)的入口，它提供首頁的跳江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 15轉操作，解決系統(tǒng)首頁直接加載時因為 css 文件名稱的沖突而帶來的頁面非正常顯示現象。 系統(tǒng)體系結構設計 基于用戶使用的便利性以及現今主流實現方式的考慮，二手市場系統(tǒng)采用現下比較流行的 B/S 體系架構。所謂 B/S 架構，就是瀏覽器 /服務器模式，用戶通過瀏覽器訪問系統(tǒng)，通過對瀏覽器實現與后臺服 務的數據交互工作。相對于傳統(tǒng)的 C/S架構（客戶端 /服務器）架構， B/S 架構機構的優(yōu)勢體現在以下幾個方面： 1) 極大地降低了客戶端計算機的運行負荷，減少了用戶機器的資源消耗。 2) 有利于對系統(tǒng)的更改和維護，由于系統(tǒng)本身運行在服務器端，因此對服務器方的更改即可影響到所有客戶端的訪問數據。 3) 客戶通過瀏覽器訪問服務器系統(tǒng)，不涉及用戶個人機器配置及操作環(huán)境的因素，極大地方便了系統(tǒng)開發(fā)人員的工作量。 4) 開發(fā)及設計時無需考慮跨平臺的實現問題。 系統(tǒng)功能結構設計 通過對系統(tǒng)的深入分析與研究，總結出系統(tǒng)功能的幾個主要功能模塊， 如圖 所示。 以下是對各個模塊的具體說明： 1）用戶登陸與注冊模塊，該模塊負責用戶賬戶的注冊、登陸和修改功能，基于 MVC 系統(tǒng)的二手市場 用戶個人中心模塊 用戶登陸與注冊模塊 用戶信息索引模塊 用戶信息發(fā)布模塊 數據庫操作模塊 圖 系統(tǒng)功能模塊圖 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 16同時提供對已登陸用戶名的保存功能，使用戶在一次連接中不用再次登陸。 2）用戶個人中心模塊，該模塊的顯示建立在用戶具有賬戶和已登錄情況下，對于已注冊用戶，個人賬戶信息保存在服務器中，只有在用戶登陸的情況下，才會出現個人中心的連接，用戶進入個人中心可以查看自己的相關信息，包括個人信息和已發(fā)布信息的修改。 3）用戶信息索引模塊，該模塊是本設計的 主要體現模塊，系統(tǒng)的主要服務主要都體現在該模塊，用戶能夠通過系統(tǒng)提供的搜索框、城市選項框、時間選擇、類型選擇功能篩選自己需要的信息。為方便用戶操作，系統(tǒng)首頁面提供常用物品的分類鏈接，方便用戶快速查詢。 4）用戶信息發(fā)布模塊，用戶信息發(fā)布模塊建立在用戶具有用戶賬號和已登錄的情況下，需要發(fā)布信息的用戶必須擁有自己的賬號來標示自己的信息，該功能模塊下，用戶可以選擇自己要發(fā)布的商品信息的所屬類別、設定商品的期望出售價格、填寫自己的聯(lián)系方式等。發(fā)布信息時用戶要指定自己發(fā)布信息的所屬類別，系統(tǒng)不提供物品類別的自動判定功 能。 5）數據庫操作模塊，該模塊事實上對用戶是透明的，但是涉及到整個系統(tǒng)數據的存儲問題，關系到系統(tǒng)運行的操作性及順暢性，因而不容忽視。數據庫模塊主要考慮數據表的設計，包括表間的關聯(lián)問題，同時結合系統(tǒng)設計特點，設計表格使其最高效率的服務于系統(tǒng)。 數據庫結構設計 數據庫用于存儲系統(tǒng)中涉及到的數據，實現主要數據的持久化功能，另外，有些數據還用于頁面的現實條用，例如城市表中的下屬城市信息還用于頁面的動態(tài)獲取展示，這些信息在需要使用的時候從數據庫查詢調用，減少頁面的加載負荷，保證了系統(tǒng)運行的順暢。另外，選擇用數 據庫存儲數據能夠方便的直觀地看到系統(tǒng)的數據的格式化存儲。 本次設計采用的數據庫軟件為 Microsoft SQLServer 2021，本次設計中主要有四個基表和一個視圖，分表為 user_tb（用戶表）、 type_tb（類型表）、 city_tb（城市表）、 info_tb（信息表）、 info_view（用戶視圖），如下圖 ，為數據庫中表之間的關聯(lián)關系： 江蘇海事職業(yè)技術學院畢業(yè)設計（論文） 17 圖 系統(tǒng)表關聯(lián) 以下給出本次設計涉及的幾個主要表格及其相關說明： 1）用戶表（ user_tb） 負責用戶信息的存儲，表結構如圖 所示。 圖 用戶表結構 user_id：用戶唯一標識字段