【導(dǎo)讀】網(wǎng)絡(luò)的信息技術(shù)的發(fā)展，越來越多的人們開始利用網(wǎng)絡(luò)散播、獲取知識(shí)。它為企業(yè)的重要信息提供了一個(gè)可管理的、靈活集成的界面。可以通過互聯(lián)網(wǎng)方便快捷的訪問企業(yè)發(fā)布的服務(wù)和信息。這將會(huì)給企業(yè)帶來意想。析、總體設(shè)計(jì)、詳細(xì)設(shè)計(jì)。詳細(xì)設(shè)計(jì)主要包括利用Jsp技術(shù)、JQuery技術(shù)以及。實(shí)現(xiàn)對(duì)組件的控制、Hibernate實(shí)現(xiàn)對(duì)數(shù)據(jù)的持久化。完成代碼的編寫之后選用。了路徑測(cè)試、代碼走查、功能測(cè)試、界面測(cè)試等一系列系統(tǒng)測(cè)試方法來測(cè)試網(wǎng)站，結(jié)果表明網(wǎng)站可正常運(yùn)行，已經(jīng)達(dá)到網(wǎng)站的設(shè)計(jì)目標(biāo)。本文的最后，對(duì)工作進(jìn)行總結(jié)和未來工作的展望。

　　

【正文】 lterclass initparam paramnameencoding/paramname paramvalueutf8/paramvalue /initparam /filter ?? 文件 文件整合了 Hibernate 的配置文件，在文件開始聲明了可用注解的方式進(jìn)行編程，然后是對(duì)數(shù)據(jù)庫配置文件的引用，最后是對(duì) Spring 的功能進(jìn)行配置以及一些諸如日志之類功能的配置，相關(guān)代碼詳見附錄 1。 這里 采用注解方式，注入實(shí)體組件，它會(huì)去 ，哪里有 @ponent,它就會(huì)把它 當(dāng)成組件 給注入 。 context:annotationconfig / context:ponentscan basepackage=/context:ponentscan Hibernate 實(shí)體類與數(shù)據(jù)庫映射 ， packagesToScan 告訴它是到這些包下去找，看到有 @Entity 就把它當(dāng)成一個(gè)映射實(shí)體 ： property name=dataSource ref=dataSource/property property name=packagesToScan list value. /value /list/property/bean 連接數(shù)據(jù)庫的一些配置： bean class= 28 rer property name=locations valueclasspath:/value /property /bean bean id=dataSource destroymethod=close class= property name=driverClassName value=${}/property property name=url value=${}/property property name=username value=${}/property property name=password value=${}/property /bean 文件 符集設(shè)定為 utf8，并且設(shè)置最大接收上傳文件大小，相關(guān)代碼如下： constant name= value=utf8/constant constant name= value=80971520/constant 為前臺(tái)頁面建立的 front 包響應(yīng)前臺(tái)的 action 請(qǐng)求，并采用通配符（ *_*）的方式進(jìn)行匹配傳遞?！?{1}”代表 Action 類名“ {2}”代表 Action 類下的方法，則如果響應(yīng)LoginAction 類下的 login()方法， action 應(yīng)為“ Login_login” 。 為后臺(tái)頁面建立的 admin 包響應(yīng)前臺(tái)的 action 請(qǐng)求，并為其指定一個(gè)命名空間“ /admin”，這樣就不會(huì)照成訪問混亂，相關(guān)代碼如下： package name=admin extends=strutsdefault namespace=/admin /package 同時(shí)此處也定義了對(duì)上傳的圖片的格式的限制。相關(guān)代碼如下： param name=allowTypes image/png,image/gif,image/jpeg,image/bmp,image/xpng,image/jpeg,image/jpg /param 實(shí)體類 實(shí)體類是對(duì)實(shí)體對(duì)象的完整描述，實(shí)體類的建立是為系統(tǒng)架構(gòu)提供最原始的對(duì)象。本系統(tǒng)對(duì)實(shí)體類的建立采用注解的方式進(jìn)行對(duì)應(yīng)數(shù)據(jù)庫的映射，如下為建立一個(gè)客戶留言實(shí)體類的相關(guān)代碼： @Entity//用注解的方式來建立實(shí)體類 public class ClientMessage implements Serializable{ private int id。 @Id//指定 id 為主鍵 @GeneratedValue//指定為自增長(zhǎng)值 public int getId() { 29 return id。 } public void setId(int id) { = id。 } ?? @OneToOne//指定 客戶留言 實(shí)體類與商家 回復(fù) 實(shí)體類為 一 對(duì)一的關(guān)系 @JoinColumn(name=serviceId) public ServiceMessage getServiceMessage() { return serviceMessage。 } public void setServiceMessage(ServiceMessage serviceMessage) { = serviceMessage。 } ?? 前臺(tái)模塊詳細(xì)設(shè)計(jì) 與實(shí)現(xiàn) 前臺(tái)首頁面設(shè)計(jì) 首頁面采用傳統(tǒng)的網(wǎng)站布局，頂部為網(wǎng)站 LOGO， LOGO 采用了通意成財(cái)務(wù)代理有限公司的標(biāo)志，在加上一定的修飾組成。其中，在其右上方是收藏、設(shè)為主頁和后臺(tái)登陸界面的鏈接，是為了方便用戶收藏查看該網(wǎng)站和方便管理員進(jìn)入后臺(tái)維護(hù)系統(tǒng)而設(shè)置的；在其右下方是系統(tǒng)的主菜單，用 JQuery 設(shè)置滑動(dòng)效果的主菜單，讓效果更加絢麗。在主體部分，左上邊利用 jQuery 的動(dòng)畫函數(shù)效果設(shè)計(jì)了一個(gè)可自動(dòng)切換圖片的功能，增加網(wǎng)站的界面友好度并提高公司的宣傳力度，以及中間的一些傳統(tǒng)布局的業(yè)務(wù)模塊和友情鏈接等信息。首頁的底部為網(wǎng)站的 LOGO 和和公司的名稱、電話和版權(quán)的信息。 如圖 53前臺(tái)首頁面設(shè)計(jì)（ 1）、 54 前臺(tái)首頁面設(shè)計(jì)（ 2）所示為前臺(tái)首頁面設(shè)計(jì)完成效果圖。 30 圖 53 前臺(tái)首頁面設(shè)計(jì)（ 1） 圖 54 前臺(tái)首頁面設(shè)計(jì)（ 2） 31 一個(gè)網(wǎng)站最主要的就是吸引用戶的瀏覽，那添加一些特色的功能就很好 的提高用戶的親賴度。本站首頁面設(shè)計(jì)中添加了 在線客服功能。能提供瀏覽者或者潛在的客戶與網(wǎng)站負(fù)責(zé)人一個(gè)交流的通道。如圖 55 所示。 圖 55 在線客服設(shè)計(jì) 地理位置頁面設(shè)計(jì) 在設(shè)計(jì)地理位置頁面時(shí)，為了能更清楚明白的向?yàn)g覽者展現(xiàn)出通意成財(cái)務(wù)代理有限公司的位置和聯(lián)系方式，頁面中不但需要有文字的描述、圖片的展示，還需要添加百度地圖 。 百度地圖具有放大、拖拽、切換衛(wèi)星圖等功能。為了讓用戶使用方便，還特地添加了一個(gè)搜索功能。用戶可輸入想要查詢地點(diǎn)的地址，點(diǎn)擊搜索即可。當(dāng)然，這個(gè)只是為了增加一點(diǎn) 趣味性以便能夠和用戶進(jìn)行友好的交流。 如圖 56地理位置頁面設(shè)計(jì)（ 1）、 57地理位置頁面設(shè)計(jì)（ 2）所示為地理位置頁面設(shè)計(jì)完成的效果圖。 32 圖 56地理位置頁面設(shè)計(jì)（ 1） 圖 57地理位置頁面設(shè)計(jì)（ 2） 33 商標(biāo)注冊(cè)頁面設(shè)計(jì) 在設(shè)計(jì)業(yè)務(wù)介紹頁面時(shí)，我們可以以商標(biāo)注冊(cè)頁面的設(shè)計(jì)來舉例。首先頁面擯棄了傳統(tǒng)的一個(gè)連接一篇文章一個(gè)頁面的設(shè)計(jì)，而是采用了多篇文章共同在一個(gè)頁面的設(shè)計(jì)：在頁面只顯示文章的標(biāo)題。當(dāng)點(diǎn)擊文章的標(biāo)題的時(shí)候， JQuery 會(huì)讓其內(nèi)容在標(biāo)題的下方向下滑動(dòng)出現(xiàn)；當(dāng)你單擊其他標(biāo)題的時(shí)候 ，上次打開的內(nèi)容會(huì)關(guān)閉，剛剛單擊的會(huì)打開，意思是頁面只會(huì)打開一篇內(nèi)容。當(dāng)然你也可以一個(gè)都不打開，你只要單擊已打開的內(nèi)容的標(biāo)題，打開的內(nèi)容就會(huì)自動(dòng)上滑關(guān)閉。在開發(fā)該頁面的時(shí)候，這樣不但節(jié)省了頁面，也節(jié)省了空間和時(shí)間。這樣做是為了增加一些趣味性，能夠吸引網(wǎng)頁瀏覽者的注意，大大的提高了網(wǎng)頁瀏覽者的關(guān)注度。 如圖 58商標(biāo)注冊(cè)頁面設(shè)計(jì)（ 1）、 59商標(biāo)注冊(cè)頁面設(shè)計(jì)（ 2）所示為商標(biāo)注冊(cè)頁面設(shè)計(jì)完成的效果圖。 圖 58商標(biāo)注冊(cè)頁面設(shè)計(jì)（ 1） 34 圖 59商標(biāo)注冊(cè)頁面設(shè)計(jì)（ 2） 公司新聞頁面設(shè)計(jì) 公司 新聞頁面的設(shè)計(jì)和財(cái)經(jīng)法規(guī)、行業(yè)動(dòng)態(tài)等頁面類似，這里就以公司新聞頁面的設(shè)計(jì)為例。公司頁面左邊是菜單欄，右邊是由公司新聞的標(biāo)題和發(fā)布的日期組成。每一個(gè)標(biāo)題就是一個(gè)鏈接，其對(duì)應(yīng)著一篇文章。每個(gè)頁面顯示 12 條記錄，超過的就分頁顯示。 如圖 510公司新聞 頁面設(shè)計(jì)、 511 訪問過后的頁面設(shè)計(jì)所示為 公司新聞 頁面設(shè)計(jì)完成的效果圖。 35 圖 510 公司新聞 頁面設(shè)計(jì) 圖 511 訪問過后的頁面設(shè)計(jì) 36 圖片新聞頁面設(shè)計(jì) 圖片新聞的頁面設(shè)計(jì)是每頁顯示 9 張圖片，不夠的顯示暫無圖片，多的則分頁顯示。圖片在頁面上顯 示是固定大小的。如果想清楚的瀏覽圖片，可以單擊圖片進(jìn)行查看。頁面為每一張圖片都添加了特效。特效的效果為頁面變?yōu)榘胪该鞯幕疑?，然后以圖片的原大小居中顯示，并且還帶有圖片的描述內(nèi)容。 如圖 512圖片 新聞 頁面設(shè)計(jì)、 513 單擊圖片后的頁面設(shè)計(jì)所示為 公司新聞 頁面設(shè)計(jì)完成的效果圖。 圖 512 圖片 新聞 頁面設(shè)計(jì) 37 圖 513 單擊圖片后的頁面設(shè)計(jì) 客戶留言頁面設(shè)計(jì) 留言功能設(shè)計(jì)引用韓國(guó)網(wǎng)站的模板，上部分的韓文是為了裝飾，文字是為了感謝和鼓勵(lì)瀏覽者或者客戶給我們留言，下面部分是留言的信息和商家的 回復(fù)。沒有回復(fù)的顯示暫無回復(fù)。留言采用類似于表格的形式，隔行換色的效果方便網(wǎng)站瀏覽者進(jìn)行清晰的瀏覽。 如圖 514客戶留言頁面設(shè)計(jì)（ 1）、 515 客戶留言頁面設(shè)計(jì)（ 2）所示為客戶留言頁面設(shè)計(jì)完成的效果圖。 38 圖 514 客戶留言頁面設(shè)計(jì)（ 1） 圖 515 客戶留言頁面設(shè)計(jì)（ 2） 前臺(tái)頁面相關(guān)實(shí)現(xiàn)流程 當(dāng)一個(gè)用戶通過 在 瀏覽器 輸入網(wǎng)址訪問本站網(wǎng)址時(shí) ， 會(huì)去調(diào)用 Action 視圖層的IndexAction 類下的默認(rèn)調(diào)用的 execute 方法，在 execute 方法中獲取所需要的資源后，反回一個(gè) ” center” 字符串， Struts 接收到返回的字符串值后通過檢查匹配應(yīng)該把獲取的資源轉(zhuǎn)向 頁面， 頁面接收到資源，并把它顯示在頁面上。用戶通過不同的點(diǎn)擊鏈接來響應(yīng)各種不同的請(qǐng)求，調(diào)用不同的 action 來實(shí)現(xiàn)資源的獲取并顯示出來。 由于瀏覽器的種類多種多樣，不同的用戶都有可能使用不同的瀏覽器來訪問網(wǎng)站，所以為了能使系統(tǒng)與瀏覽器更好的兼容，本系統(tǒng)采 JQuery 技術(shù)來做前臺(tái)頁面的開發(fā)，包括一些輸入的控制，圖片的瀏覽特效等。 地理位置的地圖主要是通過調(diào)用百度地圖的 API 來實(shí)現(xiàn)的，在地圖 頁面添加 就可以告訴瀏覽器這里調(diào)用了百度地圖 API，然后建立一個(gè)地圖容器，一般都是在頁面的 body 標(biāo)簽里建立一個(gè) div,然后給它設(shè)置好相應(yīng)的寬跟高，然后通過(“ 這里放入 div 的 id” )設(shè)置地圖顯示容器。最后利用 函數(shù) 進(jìn) 行 搜 索 。 再 把 搜 索 得 到 的 結(jié) 果 放 置 到 容 器 中 并 移 到 中 心 顯 示 出 來(“ 這里寫入得到的地圖 ” )。然后提供給瀏覽者一個(gè)輸入框，可以用來輸入想查詢的地址的位置。 后臺(tái)模塊詳細(xì)設(shè)計(jì) 與實(shí)現(xiàn) 后臺(tái)登錄頁面 登錄頁面 設(shè)計(jì)為淺藍(lán)色到深藍(lán)色的漸變，上方是該公司的名稱，在中間設(shè)置一個(gè)登錄的窗口，繼承了網(wǎng)站的后臺(tái)管理系統(tǒng)設(shè)計(jì)風(fēng)格。在此頁面提供了管理員登錄到后臺(tái)系統(tǒng)的通道， 管理 員只有輸入正確的用戶名、密碼以及驗(yàn)證碼方可登錄到網(wǎng)站后臺(tái)系統(tǒng)，如圖 516所示。 圖 516 后臺(tái) 登錄 頁面 管理員進(jìn)入到登錄頁面后，先填寫用戶名、密碼以及 驗(yàn)證碼，之后點(diǎn)擊提交；系統(tǒng)就會(huì)調(diào)用數(shù)據(jù)庫中的 userMessage 表里的數(shù)據(jù)核對(duì)是否有此用戶，并對(duì)輸入的用戶名及密碼進(jìn)行驗(yàn)證。如果此用戶合法，則登錄成功并跳轉(zhuǎn)到后臺(tái)系統(tǒng)。如果不合法。就會(huì)返回登錄頁面，提示用戶名或者密碼錯(cuò)誤。用戶需重新輸入，并繼續(xù)驗(yàn)證。 40 后臺(tái)主頁面 后臺(tái)主界面和傳統(tǒng)的后臺(tái)系統(tǒng)類似：上方為公司的名稱和一些相關(guān)的操作；下方的左邊為后臺(tái)系統(tǒng)的功能菜單，囊括了系統(tǒng)的所有的功能目錄，單擊可進(jìn)行滑動(dòng)；右邊是后臺(tái)主頁面的內(nèi)容，右邊不但顯示用戶名，還顯示了不斷更新的時(shí)間和該天的天氣預(yù)報(bào)。想了解更 多的天氣預(yù)報(bào)，可以點(diǎn)擊未來七天預(yù)報(bào)連接進(jìn)行查看。后臺(tái)主頁面的效果圖，如圖 517所示。 圖 517后臺(tái)主頁面 用戶管理頁面 用戶管理頁面把對(duì)用戶的增、刪、改、查齊聚于一個(gè)頁面，上面兩個(gè)框分別為：添加用戶和修改用戶，下方為用戶的信息列表。其中，下方的每一條信息尾部都可以對(duì)信息進(jìn)行修改和刪除的操作，其充分的利用了頁面的空間。為了方便用戶的查看，當(dāng)鼠標(biāo)滑到哪行信息，哪行的背景顏色就變?yōu)辄S色。當(dāng)用戶點(diǎn)擊修改的時(shí)候，用戶的信息會(huì)自動(dòng)的放到修改信息框內(nèi)，方便用戶的操作。用戶管理頁面的效果圖，如圖 518 所示。 41 圖 518 用戶管理頁面 統(tǒng)計(jì)分析頁面 統(tǒng)計(jì)分析頁面分為兩種 3D 圖形的統(tǒng)計(jì)分析：一種是 3D 餅圖，另外一種是 3D 柱狀圖。這兩種圖形都是由 Amcharts 這個(gè)插件生成的。大致操作時(shí)把要統(tǒng)計(jì)分析的標(biāo)題和數(shù)量傳入 Amcharts 的函數(shù)