【文章內(nèi)容簡(jiǎn)介】 均可用瀏覽器完成而無需請(qǐng)求 Web 服務(wù)器，同時(shí)也無需重新裝載網(wǎng)頁(yè)。這是因?yàn)橐磺泄δ芏及?HTML 文件中，隨著對(duì)網(wǎng)頁(yè)的請(qǐng)求而一次性下載到瀏覽器端 。 B/S 架構(gòu) B/S 架構(gòu)與 C/S 架構(gòu)的對(duì)比 傳統(tǒng)的 C/S 結(jié)構(gòu)軟件（即客戶機(jī) /服務(wù)器模式）分為客戶機(jī)和服務(wù)器兩層，客戶機(jī)不是毫無運(yùn)算能力 的輸入、輸出設(shè)備，而是具有了一定的數(shù)據(jù)處理和數(shù)據(jù)存儲(chǔ)能力，通過把應(yīng)用軟件的計(jì)算和數(shù)據(jù)合理地分配在客戶機(jī)和服務(wù)器兩端，可以有效地降低網(wǎng)絡(luò)通信量和服務(wù)器運(yùn)算量。由于服務(wù)器連接個(gè)數(shù)和數(shù)據(jù)通信量的限制，這種結(jié)構(gòu)的軟件適于在用戶數(shù)目不多的局域網(wǎng)內(nèi)使用。 它有 以下 優(yōu)點(diǎn)： 1. 由于客戶端實(shí)現(xiàn)與服務(wù)器的直接相連，沒有中間環(huán)節(jié)，因此響應(yīng)速度快。 2. 操作界面漂亮、形式多樣，可以充分滿足客戶自身的個(gè)性化要求。 3. C/S 結(jié)構(gòu)的管理信息系統(tǒng)具有較強(qiáng)的事務(wù)處理能力，能實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)流程。 同時(shí)又有 以 下缺點(diǎn)： 1. 需要專門的客戶端安裝程序，分 布功能弱，針對(duì)點(diǎn)多面廣且不具備網(wǎng)絡(luò)條件的用戶群體，不能夠?qū)崿F(xiàn)快速部署安裝和配置。 2. 兼容性差，對(duì)于不同的開發(fā)工具，具有較大的局限性。若采用不同工具，需要重新改寫程序。 3. 開發(fā)成本較高，需要具有一定專業(yè)水準(zhǔn)的技術(shù)人員才能完成。 B/S(瀏覽器 /服務(wù)器模式 )是隨著 Inter 技術(shù)的興起，對(duì) C/S 結(jié)構(gòu)的一種改進(jìn)。在這種結(jié)構(gòu)下，軟件應(yīng)用的業(yè)務(wù)邏輯完全在應(yīng)用服務(wù)器端實(shí)現(xiàn)，用戶表現(xiàn)完全在 Web 服務(wù)器實(shí)現(xiàn)，客戶端只需要瀏覽器即可進(jìn)行業(yè)務(wù)處理，是一種全新的軟件系統(tǒng)構(gòu)造技術(shù)。 它的優(yōu)點(diǎn)是： 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 8 1. 具有分布性特點(diǎn)，可以隨時(shí)隨地進(jìn) 行查詢、瀏覽等業(yè)務(wù)處理。 2. 業(yè)務(wù)擴(kuò)展簡(jiǎn)單方便，通過增加網(wǎng)頁(yè)即可增加服務(wù)器功能。 3. 維護(hù)簡(jiǎn)單方便，只需要改變網(wǎng)頁(yè)，即可實(shí)現(xiàn)所有用戶的同步更新。 4. 開發(fā)簡(jiǎn)單，共享性強(qiáng) 存在 以下 缺點(diǎn)： 1. 個(gè)性化特點(diǎn)明顯降低，無法實(shí)現(xiàn)具有個(gè)性化的功能要求。 2. 操作是以鼠標(biāo)為最基本的操作方式，無法滿足快速操作的要求。 3. 頁(yè)面動(dòng)態(tài)刷新，響應(yīng)速度明顯降低。 4. 功能弱化，難以實(shí)現(xiàn)傳統(tǒng)模式下的特殊功能要求。 使用 B/S 架構(gòu)的原因 B/S 結(jié)構(gòu)最大的優(yōu)點(diǎn)就是可以在任何地方進(jìn)行操作而不用安裝任何專門的軟件。只要有一臺(tái)能上網(wǎng)的電腦就能使用，客戶端零 維護(hù)。系統(tǒng)的擴(kuò)展容易，只要 連接網(wǎng)絡(luò) ，再由系統(tǒng)管理員分配一個(gè)用戶名和密碼，就可以使用 。甚至可以在線申請(qǐng)，通過公司內(nèi)部的安全認(rèn)證（如ＣＡ證 書）后，不需要人的參與，系統(tǒng)可以自動(dòng)分配給用戶一個(gè)賬號(hào)進(jìn)入系統(tǒng) 。 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 9 2 家庭理財(cái)系統(tǒng) 的系統(tǒng) 設(shè)計(jì) 系統(tǒng)的功能需求 本系統(tǒng)的功能需求有： 1. 用戶注冊(cè)、登錄及權(quán)限驗(yàn)證 。 系統(tǒng)包含一個(gè)初始的管理員用戶， 具體的管理員操作見下面的獨(dú)立介紹。提供用戶注冊(cè) 的頁(yè)面 ， 可由網(wǎng)絡(luò)用戶自行進(jìn)行注冊(cè)成為該系統(tǒng)的合法使用者。為保證系統(tǒng)的安全性，提供 用戶登錄 頁(yè)面 ， 沒有正常登陸的用戶無法進(jìn)入其他界面。 用戶登錄 后在數(shù)據(jù)庫(kù)中 取得其權(quán)限并 分配到不同的操作頁(yè)面。 2. 普通用戶可進(jìn)行的操作如下： 1) 收入操作 ① 可選擇查詢條件查看收入記錄 ② 可選定一條記錄進(jìn)行修改 ③ 可添加一條新記錄 ④ 可刪除一條記錄或是全部記錄 2) 支出操作 ① 可選擇查詢條件查看支出記錄 ② 可選定一條記錄進(jìn)行修改 ③ 可添加一條新記錄 ④ 可刪除一條記錄或是全部記錄 3) 提醒操作 ① 可查看所有提醒 ② 可選定一條提醒進(jìn)行修改 ③ 可添加一條新提醒 ④ 可刪除一條提醒或是全部提醒 4) 個(gè)人信息修改 5) 家庭成員的添加，刪除和信息的修改 3. 管理員登陸后可以進(jìn)行的操作如下： 1) 根據(jù)查詢條件查看某個(gè)用戶或所有用戶的信息 2) 修改用戶的信息 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 10 3) 添加新用戶 4) 刪除用戶 5) 修改管理員密碼 系統(tǒng)運(yùn)行環(huán)境與開發(fā)工具 1. 開發(fā)環(huán)境 HTMLPAD 文本 編輯器 +WINDOWS XP 操作系統(tǒng) 2. 運(yùn)行環(huán)境 WINDOWS XP， AWS(Asp Web Server)， 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 11 系統(tǒng) 設(shè)計(jì) 數(shù)據(jù)庫(kù)設(shè)計(jì) 根據(jù)系統(tǒng)需求，本系統(tǒng)采用 ACCESS 進(jìn)行數(shù)據(jù)庫(kù)的設(shè)計(jì)， ACCESS 具有應(yīng)用廣泛，操作方便的特性，而且對(duì)于家庭理財(cái)系統(tǒng)來說， ACCESS 完全能夠滿足數(shù)據(jù)量的需求。根據(jù)系統(tǒng)功能設(shè)計(jì)要求及功能模塊劃分，創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)文件 。 在數(shù)據(jù)庫(kù)中建立數(shù)個(gè)數(shù)據(jù)表 ，以下是各個(gè)數(shù)據(jù)表的數(shù)據(jù)項(xiàng)和數(shù)據(jù)結(jié)構(gòu)。 1. 用戶基本信息表（ USERINFO） ： 存放管理員及注冊(cè)用戶的基本信息，包括用戶 ID，用戶名，密碼，用戶性別，余額，登陸次數(shù)，上次登錄時(shí)間，用戶標(biāo)識(shí)。 圖 userinfo 表結(jié)構(gòu) 2. 收入表 （ INCOME） ： 記錄用戶的收入 情況，包括： 圖 INCOME 表結(jié)構(gòu) 3. 支出表（ CONSUME） 記錄用戶的支出情況， 該表的結(jié)構(gòu)如下 ： 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 12 圖 CONSUME 表結(jié)構(gòu) 4. 提醒表（ PROMPT） 該表記錄了用戶設(shè)置的繳費(fèi)提醒信息，包括繳費(fèi)提醒編號(hào)，繳費(fèi)提醒名稱，繳費(fèi)提醒的日期，用戶編號(hào)。 圖 PROMPT 表結(jié)構(gòu) 5. 家庭成員表（ FAMILY） 家庭成員表主要保存用戶家庭成員的基本信息，包括：姓名，關(guān)系， 工作。 圖 FAMILY 表結(jié)構(gòu) 綜上所述， 數(shù)據(jù)表之間的關(guān)系 圖如下 (圖 )： 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 13 圖 數(shù)據(jù)表 關(guān)系 圖 系統(tǒng)的功能結(jié)構(gòu) 家庭管理系統(tǒng)分為以下幾個(gè)功能模塊： (圖 ) 1. 登陸 注冊(cè)模塊 由于系統(tǒng)中涉及了用戶的私人信息，因此系統(tǒng)只對(duì)已注冊(cè)的有效用戶開放。沒有注冊(cè)的用戶可在注冊(cè)頁(yè)面進(jìn)行注冊(cè)，注冊(cè)成功后在數(shù)據(jù)庫(kù)中就存在了該用戶的基本信息，包括：用戶 name，用戶權(quán)限標(biāo)志位（ 0普通用戶， 1管理員），性別，余額，登陸次數(shù)，上次登錄時(shí)間，昵稱，密碼，年齡。 當(dāng)用戶登錄時(shí)，輸入用戶姓名和密碼，并與數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行比對(duì)，進(jìn)行驗(yàn)證，對(duì)于通過用戶名及密碼的用戶允許進(jìn)入本系統(tǒng)。用戶登錄后將寫入session 對(duì)象，用戶退出時(shí)將 清除 session。 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 14 圖 家庭管理系統(tǒng)功能模塊示意圖 2. 普通 用戶操作模塊 當(dāng)驗(yàn)證用戶的權(quán)限標(biāo)志位為普通用戶時(shí)，進(jìn)入普通用戶管理頁(yè)面，可進(jìn)行收支管理，數(shù)據(jù)查詢，信息修改。 收支管理部分，用戶將收入和支出的進(jìn)行操作，并修改對(duì)應(yīng)的 ine 表和consume 表，記錄收入或支出項(xiàng)目名稱，操作時(shí)間，操作金額，操作人，描述信息，修改 userinfo 表中的余額值。數(shù)據(jù)查詢部分，普通用戶可以根據(jù)收入項(xiàng)名稱，收入金額，收入時(shí)間進(jìn)行收入查詢，并提供升序個(gè)降序兩種結(jié)果顯示方式?？商砑有碌氖杖胗涗洠瑒h除，修改收入記錄； 普通用戶可以根據(jù)支出項(xiàng)名稱，支出金額，支出時(shí)間進(jìn)行支出查詢，并提供升序個(gè)降序兩種結(jié)果顯示方式，可添加新的支出記錄，刪除，修改支出記錄。 繳費(fèi)提醒部分，用戶可進(jìn)行繳費(fèi)提醒的查詢，添加，修改，刪除操作。 家庭成員管理部分，用戶可進(jìn)行家庭成員的查詢，添加，修改，刪除操作。 3. 管理員操作模塊 驗(yàn)證登陸用戶為管理員時(shí)，進(jìn)入管理員相關(guān)頁(yè)面，可進(jìn)行注冊(cè)用戶的查詢，西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 15 修改，添加，刪除操作。 還可以修改管理員密碼，防止他人濫用管理權(quán)限。 4. 數(shù)據(jù)庫(kù)和后臺(tái) 模塊 數(shù)據(jù)庫(kù)模塊包括對(duì)所有對(duì)數(shù)據(jù)庫(kù)進(jìn)行的操作，包括數(shù)據(jù)庫(kù)的打開，關(guān)閉，增加，刪除和 修改。 后臺(tái)處理模塊包括提供分頁(yè)顯示，驗(yàn)證碼，檢查數(shù)據(jù)輸入格式，使用數(shù)據(jù)庫(kù) ，完成特定功能等支持。西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 17 3 本系統(tǒng)采用分模塊實(shí)現(xiàn)的思想，以下章節(jié)逐一介紹各模塊的實(shí)現(xiàn)方法。 [5， 713] 登陸 注冊(cè)模塊 登陸 模塊 的實(shí)現(xiàn) 登陸界面的效果如下： 圖 登陸界面 該界面的實(shí)現(xiàn)是用 DIV+CSS 的方法，該方法提供了豐富多樣的頁(yè)面表現(xiàn)形式， 只要改變一下背景圖片就可以達(dá)到上面的效果。 普通用戶與管理員都需要在登陸界面登陸進(jìn)入系統(tǒng)。登陸界面主要有用戶需要輸入的用戶名和密碼的文本框，有登陸按鈕和注冊(cè)按鈕。 1. 點(diǎn)擊 “ 登陸 ” 按鈕時(shí)，通過表單將輸入的內(nèi)容傳遞給本頁(yè)面進(jìn)行輸入?yún)?shù)的判斷和處理，具體的代碼如下： username=((username)) password=trim((password)) 如果輸入?yún)?shù)的格式不符合格式，并給出相應(yīng)的提示，并可返回登陸界面： if username= then centerfont color=red 用戶名不能為空！/fontbr請(qǐng) a href=重新登陸 /a/center … if len(username)10 then … 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 18 2. 信息通過格式校驗(yàn)正確后，提交給服務(wù)器驗(yàn)證用戶名，數(shù)據(jù)庫(kù)中不存在該用戶時(shí)，轉(zhuǎn)入提示頁(yè)面，提示： “ 用戶不存在 ” ，點(diǎn)擊鏈接返回登陸界面。 sql=select * from userinfo where username=39。amp。usernameamp。39。 set rs=(sql) if or then … 3. 如果用于的用戶名和密碼都是正確的，則在 session 中寫入相應(yīng)的內(nèi)容 session(name)=username session(islogin)=1 session(isadmin)=rs(adminflag) 4. 每個(gè)頁(yè)面都包含了 頁(yè)面，如果用戶沒有通過登陸界面直接輸入U(xiǎn)RL 地址時(shí)，提示用戶沒有登陸，點(diǎn)擊鏈接轉(zhuǎn)到登陸頁(yè)面。 的代碼如下： %if session(name)= or session(islogin)1 then 你尚未登 錄或登錄超時(shí)，請(qǐng) a href=39。39。 target=_parent重新登錄 /a end if% 5. 用戶直接點(diǎn)擊 “ 注冊(cè) ” 按鈕時(shí)，轉(zhuǎn)至用戶注冊(cè)界面。 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 19 注冊(cè) 模塊 的實(shí)現(xiàn) 圖 注冊(cè)頁(yè)面 用戶注冊(cè)界面為沒有賬號(hào)的用戶提供注冊(cè)功能，界面元素包括輸入用戶名，密碼，重復(fù)密碼，昵稱，驗(yàn)證碼的文本框，性別選擇的下拉菜單，注冊(cè)用戶遵守條款的只讀文本框，確認(rèn)注冊(cè)的按鈕，返回主界面的鏈接。 1. 注冊(cè)信息的格式不正確，彈出相應(yīng)的信息，格式的正確與否主要是通過JAVASCRIPT 來判斷 首先在表單的提交事件中加入語(yǔ)句： onsubmit=return checkform(this) 然后在 head標(biāo)簽中寫 SCRIPT 代碼 function checkform(val) { if (==){ alert(請(qǐng)輸入用戶名？ ) ()。 return false。 } if( 10) … if (20) … if (==) 西北大學(xué)本科畢業(yè)論文 家庭理財(cái)系統(tǒng) 20 … if( 20) … if ( != ) … if (==39。39。) … return true} 值得 注意的是，在 script 包含的內(nèi)容加上 !—和 標(biāo)記，這樣的好處是為了兼容舊版本的瀏覽器，因?yàn)槟菢拥臑g覽器無法識(shí)別這些標(biāo)簽而把腳本的內(nèi)容直接打印出來。 2. 用戶輸入信息格式正確，提交到服務(wù)器進(jìn)行校驗(yàn)時(shí)，若用戶名在數(shù)據(jù)庫(kù)中已經(jīng)存在，不寫入數(shù)據(jù)庫(kù)，提示 “ 該用戶已經(jīng)存在，請(qǐng)重新輸入！ ” ，點(diǎn)擊鏈接返回到注冊(cè)界面。 sql=select * from userinfo where username=39。amp。usernameamp。39。 set rs=createobject() sql,conn,1,3 if not then script language=Javascriptalert(39。該用戶已經(jīng)存在，請(qǐng)重新輸入！ 39。)。 3. 用戶輸入信息格式正確，驗(yàn)證碼與提示不匹配，提示 “ 驗(yàn)證碼輸入錯(cuò)誤，請(qǐng)重新輸入！ ” ，點(diǎn)擊鏈接返回到注冊(cè)頁(yè)面。因?yàn)樽?cè)碼的實(shí)現(xiàn)在網(wǎng)上提供了很多種方法，我們選取了其中的一種，直接應(yīng)用到程序中： imgsrc=?k=%=codeKey%amp。onclick=+=parseIn