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