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