1、核準通過，歸檔資料。未經允許，請勿外傳！9JWKffwvG#tYM*Jg&6a*CZ7H$dq8KqqfHVZFedswSyXTy#&QA9wkxFyeQ!djs#XuyUP2kNXpRWXmA&UE9aQGn8xp$R#WWW的描述語言。用它可以設計出一個標準的網頁。HTML是Internet上用于設計網頁的主要語言，無論網頁包括動畫、多媒體圖形等各種復雜的元素，基礎框架都是HTML語言。HTML文件的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。 基本HTML頁面以標簽開始，以結束。在它們之間，整個頁面有兩部分：標題和正文

2、。標題夾在和標簽之間。正文則夾在-之間，即所有頁面的內容所在，頁面上顯示的任何東西都包含在這兩個標簽之中。 設計HTML語言的目的是為了能把存放在一臺HYPERLINK :/ baike /wiki/電腦電腦中的HYPERLINK :/ baike /wiki/文本文本或HYPERLINK :/ baike /wiki/圖形圖形與另一臺電腦中的文本或圖形方便地聯系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網絡的其它電腦上。我們只需使用HYPERLINK :/ baike /wiki/鼠標鼠標在某一文檔中點取一個圖標，Internet就會馬上轉到與此圖標相關的內容上去，而這

3、些信息可能存放在網絡的另一臺電腦中。2.5.2 CSS CSS就是Cascading Style Sheets，譯為“層疊樣式表”，簡稱樣式表，“樣式”就是指網頁中文字大小、顏色、圖片位置等格式，“層疊”的意思是當在HTML中引用了數個樣式文件（CSS文件）時，當樣式文件中的樣式發生沖突時，瀏覽器依據層疊樣式處理。CSS是目前唯一的網頁頁面排版樣式標準，它能使任何瀏覽器都聽從其指令，知道該以何種布局、格式顯示各種元素及其內容，CSS彌補了HTML對網頁格式化方面的不足，起到排版定位的作用。2.5.3 JavaScriptHTML和CSS配合使用，提供給用戶的只是一種靜態的信息，缺少交互性。出于

4、這種需求JavaScript出現了，JavaScript是一種基于對象的腳本語言，在開發Internet客戶端的應用程序時，它可以結合HTML、CSS來實現一個Web頁面中與Web客戶交互的功能22。第3章 系統需求分析3.1 用戶需求分析自國家公共衛生基本服務規范關于0-6歲兒童健康管理服務規范的內容頒布以來，建立一個完善的城鄉兒童健康檔案體系勢在必行。既然要建立這個檔案體系，那么就要先考慮如何進行這些規模宏大的檔案的管理。在以往的紙質檔案管理中，我們不難發現這樣兩個問題：檔案異遺失而且不易于查詢。對于兒童來說，一個兒童的成長只有一次，每個時期的健康檔案也只能建立一次，如果檔案遺失了，我們是

5、沒有辦法重新來補一份的，特別是也許這份檔案會在以后發揮至關重要的作用，這將是一種無法挽回的損失。而電子檔案就不同，它可以有效的解決紙質檔案存在的這兩個問題，所以建立一個電子檔案23來合理、高效的管理兒童健康檔案是非常迫切的需求。對于兒童健康檔案管理人員來說，一個好的兒童健康管理檔案，必須能夠隨時隨地快速、高效的編輯、修改檔案內容24，并且在龐大的檔案記錄中要能以不同的方式快速的查詢出想要查詢的記錄，檔案內容應該簡潔明了易于填寫，并且對于需要自己保留檔案的家屬，檔案管理人員能快速下載或打印檔案內容給兒童家屬。本系統是兒童健康檔案管理系統，主要有以下幾方面的功能需求，分別是：（1）新增記錄：能夠簡

6、單、方便的增加不同時期的兒童的健康記錄，實現對各種信息的快速填寫、編輯以及記錄的保存。（2）查詢：對特定日期或者是特定的兒童的健康信息進行快速獲取或者是能以多種多樣的方式進行記錄查詢，不需要像紙質檔案的人工管理一樣必須進行人力查詢，耗費大量的時間，只需要選擇查詢條件，便可以快速的獲取想要查詢的記錄以及具體內容。（3）刪除：對一些不需要的或過期的記錄可以進行選擇性或者大批量的快速刪除。（4）修改：對錄入錯誤或不準確的信息可以實現快速的修改和保存,由于本系統是用作檔案管理的，而且管理的檔案屬于永久型，所以一般是不允許刪除的，大多數情況下發現資料出錯用到的也是修改功能。（5）打印3.3.1 靜態數據

7、根據國家公共衛生基本服務規范（2011年版）中關于0-6歲兒童健康管理服務規范的內容的描述以及實現一個系統的基本功能25,26的需求，該兒童健康檔案管理系統一共需要五張表靜態的表，它們分別是：用戶注冊信息表、新生兒家庭訪視記錄表、1歲以內兒童健康檢查記錄表、1-2歲兒童健康檢查記錄表以及3-6歲兒童健康檢查記錄表（以下每張表中的靜態數據只是列出了一部分）。表1.用戶注冊信息表（his_user）名稱字段名稱（映射）數據類型主鍵非空 賬號userNameintYesYes密碼userPassVarchar（50）NoYes確認密碼userPass1Varchar（50）NoYes真實姓名user

8、SelnameVarchar（50）NoYes性別userSexVarchar（50）NoYes出生日期userBorndatetimeNoYes所屬部門userDeptVarchar（50）NoYes職位userPositionVarchar（50）NoYes學歷userDegreeVarchar（50）NoYes userTellVarchar（50）NoYes電子郵件userEmailVarchar（50）NoYes表2.新生兒家庭訪視記錄表（xinshengerjiating）名稱字段名稱（映射）數據類型主鍵非空姓名namvarcharNoYes編號 numintYesYes性別 se

9、xVarcharNoYes出生日期birthdatetimeNoYes家庭住址 addressVarchar（50）NoYes出生孕周 birthPeriintNoYes助產機構 birthOrgVarchar（50）NoYes出生情況birthCondVarchar（50）NoYes畸形情況 abnormVarchar（50）NoYes聽力篩查hearingVarchar（50）NoYes疾病篩查 diseaseVarchar（50）NoYes出生體重birthWeightVarchar（50）NoYes黃疸部位hdanVarchar（50）NoYes隨訪醫生birthDocVarchar（

10、50）NoYes父親姓名fatherNameVarchar（50）NoYes父親職業 fatherJobVarchar（50）NoYes父親聯系 fatherPhoVarchar（50）NoYes表3.1歲以內兒童健康檢查記錄表（lessoneyears）名稱字段名稱（映射）數據類型主鍵非空編號 numintYesYes體重oneWeightVarchar（50）NoYes可疑佝僂病體征oneGlbtVarchar（50）NoYes可疑佝僂病癥狀oneGlbzzVarchar（50）NoYes肛門/外生殖器oneSzhqVarchar（50）NoYes血紅蛋白值oneRedeggVarchar

11、（50）NoYes聽力oneHearingVarchar（50）NoYes戶外活動oneOutactVarchar（50）NoYes服用維生素 oneVitaminVarchar（50）NoYes發育評估oneEvaluVarchar（50）NoYes兩次隨訪患病情況oneDiseaseVarchar（50）NoYes備注oneOthersTextNoYes隨訪醫生 oneDocVarchar（50）NoYes隨訪日期oneDateDatetimeNoYes表4.1-2歲兒童健康檢查記錄表（onetotwoyears）名稱字段名稱（映射）數據類型主鍵非空姓名namVarcharYesYes編號

12、numintNoYes出牙/齲齒數twoTeethVarchar（50）NoYes隨訪日期twoDateVarchar（50）NoYes可疑佝僂病體征twoGlbtVarchar（50）NoYes血紅蛋白值 twoRedeggVarchar（50）NoYes戶外活動 twoOutactVarchar（50）NoYes服用維生素twoVitaminVarchar（50）NoYes發育評估twoEvaluVarchar（50）NoYes兩次隨訪見患病情況twoDiseaseVarchar（50）NoYes隨訪日期twoDateVarchar（50）NoYes隨訪醫生twoDocVarchar（50

13、）NoYes 表5.3-6歲兒童健康檢查記錄表（threetosixyears）：名稱字段名稱（映射）數據類型主鍵非空 姓名namVarchar（50）YesYes編號 numintNoYes隨訪日期 thrDatedatetimeNoYes體格發育評估 thrEvaluVarchar（50）NoYes牙數/齲齒數 thrTeethVarchar（50）NoYes血紅蛋白值thrRedeggVarchar（50）NoYes下次隨訪日期 thrnexDatedatetimeNoYes隨訪醫生thrDocVarchar（50）NoYes 備注thrOthersTextNoYes3.3.2 動態數據

14、本系統中的動態數據主要是指系統在運行時各個不同的模塊中錄入和被刪除、修改的各種數據，具體是數據庫的各個表的各個不同的元組與屬性值。根據對使用的人群的分析，本系統主要是供醫療衛生管理人員使用，每個人員根據自己不同的用戶名和密碼登陸，除此之外，還設置了部門權限，只有特定部門的人才能使用該系統。 HYPERLINK l _Toc13812 第4章 兒童健康檔案管理系統設計 4.1 數據庫設計本系統采用SQL Server 2008 數據庫，系統數據庫名為ertong，數據庫ertong中包括5個數據表。(1)用戶注冊表，主要用來存儲用戶的相關信息，由于表中的Id字段在實現時不需要用戶定義，而是由系統

15、通過自增的方法自動生成，所以要在表設計器中將此字段的標示符增量設為自增，表結構如圖4.1.1： （2）新生兒家庭訪視記錄表（dbo.xinshengerjiating），主要是用來記錄新生兒出院后周內，醫務人員到新生兒家中進行的產后訪視信息。了解出生時情況、預防接種情況，在開展新生兒疾病篩查的地區了解新生兒疾病篩查情況，觀察家居環境，重點詢問和觀察喂養、睡眠、大小便、黃疸、臍部情況、口腔發育等。為新生兒測量體溫、記錄出生時體重、身長，進行體格檢查，根據新生兒的具體情況，有針對性地對家長進行母乳喂養、護理和常見疾病預防指導。由于新生兒健康訪視的查詢是以num字段進行的，所以要將num字段設為主鍵

16、，同時要將標示符增量設為自增，表結構如圖4.1.2： 新生兒家庭訪視記錄表（dbo.xinshengerjiating）一歲以內兒童健康檢查記錄表（dbo.lessoneyears），主要是用來記錄新生兒滿月后、1歲以前的健康檢查信息。信息內容包括詢問上次隨訪到本次隨訪之間的嬰幼兒喂養、患病等情況，進行體格檢查，做生長發育和心理行為發育評估，進行母乳喂養、輔食添加、心理行為發育、意外傷害預防、口腔保健、中醫保健、常見疾病防治等健康指導等。在表設計時，將num字段設為主鍵，并且標示符增量設為自增，表結構如圖4.1.3： 一歲以內兒童健康檢查記錄表（dbo.lessoneyears）1-2歲兒童健

17、康檢查記錄表（dbo.onetotwoyears），主要用來記錄1-2歲兒童健康檢查情況的信息，對每一條記錄進行刪除和查詢時，都是以編號進行，而編號設置為系統自動生成，所以將num字段設為主鍵且設為自增，表結構如圖4.1.4： ）（5）3-6歲兒童健康檢查記錄表（dbo.threetosixyears），主要用來記錄3-6歲兒童的健康情況，表結構如圖4.1.5： 3-6歲兒童健康檢查記錄表（dbo.threetosixyears） HYPERLINK l _Toc6436 4.2 系統總體設計4.2.1 總體設計方法 總體設計原理圖如圖4.2.1所示，在本設計中主要采用了三個大框架：Strut

18、s、Hibernate和Spring。 其中，Struts屬于表現層，主要負責管理界面，除此之外，它能夠獲取表單的內容，對之組織生成參數對象，并且能夠將業務層接口返回的結果包裝起來發給指定的視圖，并由視圖完成處理結果的展示。它依據web.xml、struts.xml的配置來形成對整個流程的控制并且最終實現頁面的跳轉。Spring整合了Hibernate與Struts，實現了代碼的完全解耦，使三大框架完美結合，降低了組件與組件之間的關聯、改善程序結構，便于系統的維護與擴展。Spring就像一個管家，Hibernate與Struts框架需要什么就向它找什么。它的配置文件是applicationCo

19、ntex.xml，它管理著所有的配置。如果用更簡單的理解，把構建整個系統的過程比喻為一個人的形成，那么Struts就是人的骨架，它負責架出一個基本的模型，讓你知道你要做的東西是個“人”，也就是說Struts框架只是個半成品。而Hibernate是一個用于持久層的框架，它決定了這個人可以做什么，能夠做什么。而Spring的責任就是負責將它們整合到一起，也就是說，Spring決定了這個人長什么樣，有什么能力。在圖4.2.1的整個流程中，首先由瀏覽器客戶端提出一個請求，該請求首先到達一個Web.xml配置的過濾器和攔截器，之后被分為兩種方式處理（過濾器和攔截器中設置了很多條件，只要進入的條件不符合，

20、就會被濾除，如它會驗證訪問的地址、IP地址是否被加入黑名單，除此之外，他還要驗證訪問權限），紅色箭頭所示是當條件不符合的時候，它就直接返回調用一個錯誤的界面返回給客戶端。當條件符合時，它就到Action里面找到對應的文件，并且到達中間層，即業務邏輯層，然后調用一個Dao并達到數據庫，對數據庫操作完畢之后返回一個結果，通過Action在瀏覽器界面上被用戶獲取。 在圖中，前臺主要是獲取一些數據并且進行數據驗證，驗證通過以后傳給Servise業務邏輯層，然后由業務邏輯層來進行判斷是傳到了后臺的哪個地方，調用了哪張表。Dao是持久層，Dao文件主要負責crud,即對數據庫的所有操作，包括增刪查改。Se

21、rvise和Dao都需要提供一個接口和一個實例，Servise不關心它處理的東西是哪個類，只關心這個接口，這個接口是干什么的，即它不看重過程，只關心結果。4.2.2 總體功能結構框圖 系統總體結構框圖如圖4.2.2： SKIPIF 1 0 系統總體結構框圖該系統的功能模塊主要分為四大模塊，即：新生兒家庭訪視管理、1歲以內兒童健康管理，1-2歲兒童健康管理和3-6歲兒童健康管理。通過這四大模塊，可以及時掌握不同時期、不同年齡的兒童的健康情況并對相應的健康記錄進行增、刪、查、改等管理。 HYPERLINK l _Toc22127 4.3 登錄界面模塊設計4.3.1 登錄界面結構該部分主要包括用戶賬

22、號注冊、重置、登錄等模塊，是系統用戶進入該系統的接口部分，其結構框圖如圖4.3.1所示。 登陸界面結構框圖4.3.2 登錄界面設計登陸界面的設計主要采用column列布局方式，將整個面板先分為兩列,左邊用來存放一個logo圖片，再用form布局方式將右邊部分分為四行，最上邊一行放置用戶名文本框，在最后一行中又分為兩列，左邊安放文本框，右邊安放驗證碼圖片。在布局的最后，安放了“注冊”、“登錄”、“重置”三個按鈕，部分代碼如下所示。var loginForm = new Ext.FormPanel(labelAlign : top,frame : true,/為了把FormPanel嵌套在Wind

23、ows中，設置嵌套FormPanel 的frame屬性為true。monitorValid : true,/ 把有formBind:true的按鈕和驗證綁定； id : login,bodyStyle : padding:5px 5px 0,/設置邊界寬度width : 400 items : / 定義表單元素 layout : table, / 把整個空間劃分成兩列buttons : text : 注冊, handler : function() window_reg.show(); , text : 登陸,formBind : true,type : submit,handler : fu

24、nction() ,/ 定義表單提交事件 text : 重置,handler : function() loginForm.form.reset();/ 重置表單 ); HYPERLINK l _Toc17647 4.4 系統首頁設計4.4.1 首頁總體設計系統的首頁設計主要采用border邊框布局方式，該布局包含多個子面板，是一個UI風格的布局，它將整個容器分為五個部分，分別是east（東）、south（南）、west（西）、north(北)、center（中）。在本設計中我們沒有使用east部分，所以該部分的region部分不需要指定，代碼也不設計。在后面的設計中中，主要以首頁設計中的ce

25、nter面板和west面板為載體，所以為了有利于代碼的編寫和解讀，這兩部分的面板設計我們把它單獨放在兩個JS文件中，采用調用的方式來編寫，這樣在主界面的設計中就就只需調用這兩部分。部分核心代碼如下：(function() ( title: Layout Window, id:viewportMain, cls:x-plain, renderTo: zhujiemian, monitorResize:true,/為true時，它自動監控window的resize layout: border, /ext-border布局 items: /下邊(也就是底部設計)id:panelSouth,regi

26、on:south,html:版權所有：云南省昆明市昆明理工大學,split:false,/如果為true，在與相鄰的區域之間顯示一個 Ext.SplitBar ， height:22,margins:0 0 0 0 ,/*上邊（頂部）設計：包括頂部及頂部工具欄* id:panelNorth, region: north,/指定子面板所在區域為northhtml : 兒童健康檔案管理系統,split:false,margins:0 0 0 0,bbar:new Ext.Toolbar() ); ); 4.4.2 West面板設計West面板主要是用來放置該系統的四大功能模塊和系統的管理模塊，四大

27、模塊即：“新生兒家庭訪視管理”、“1歲以內兒童健康管理”、“1-2歲兒童健康管理”、“3-6歲兒童健康管理”，在這四個模塊中，前三個模塊的設計風格完全相同，只是包含的內容不同，第四個模塊采用了另外的設計風格，與前三個模塊相比，界面更加簡潔、美觀。在west面板中，首先先新建了一個菜單導航面板，設置了面板的相應屬性，之后又創建了一個shebeishenggou面板，用來在west（菜單導航）下進行兒童健康檔案管理系統的四個子模塊的具體設計，這部分面板的屬性定義為可伸縮型，最后把shebeishenggou面板加載到菜單導航面板上。系統管理模塊主要是用來提供該系統的一些信息和使用該系統的一些幫助文

28、件，進行一些數據的維護。這些功能中，主要包括四個子模塊，分別是：系統幫助、系統設置和系統注銷，其中一些模塊的下面又分別設置了對應的子模塊，來使整個系統功能更加完善,West面板的結構框圖如圖4.4.1所示。圖4.4.1 West面板的結構框圖 4.4.3 Center面板設計Center面板采用卡片式的布局方式顯示，它主要用來作為四個子模塊的載體，在四個子模塊的具體設計中都要調用Center面板，使得具體設計的內容顯示在中部。所以這里只用定義一下center面板的相關屬性，不需要設計具體的元素。centerTabPanel = n(id:centerTabPanel,autoShow:true

29、,autoDestroy: false,deferredRender:false,使用腳本操作選項卡時，謹記將該配置項設置為false。items:(baseCls:x-plain,title:首頁,/是否延遲加載deferredRender:false, layout:column, defaults: frame:true, items: );centerPanel = new Ext.Panel(id:panelCenterPanel,baseCls:x-plain,deferredRender:false,region:center,layout:card,/卡片式布局hideMode

30、:offsets,plugins: new Ext.ux.TabCloseMenu(),items:centerTabPanel);4.4.4 North面板設計North面板的設計主要是涉及到頂端工具欄和頂部“兒童健康檔案管理系統”文字的顯示，界面設計如圖4.4.2所示。 North面板界面設計圖當用戶登陸系統以后，頂部工具欄會出現“尊敬的+用戶名+您好！”字樣，并且根據電腦系統的時間動態的更新當前網頁上的時間。頂部工具欄設有“天氣預報”、“中國醫網”、“系統掛起”、“實時通訊”、“個人設置”等按鈕，使該系統的內容更加的豐富多彩，滿足不同的用戶的使用需求和個人愛好，使系統更加的人性化。 HY

31、PERLINK l _Toc13688 4.5 新生兒家庭訪視模塊界面設計新生兒家庭訪視界面的設計主要是分兩大塊來進行的，一塊是列表面板，用來顯示添加的記錄，顯示的字段包括五個，分別是姓名、編號、隨訪日期、出生日期和助產機構，每個字段又添加了升序、降序、列顯示/隱藏、表格分組和使用當前字段進行分組五個功能，使得用戶可以根據不同的需求選擇不同的顯示方式和字段來進行記錄顯示。在表格中又添加了復選框，使每條記錄都可以選擇性的被選中。列表面板又設有頂部和底部工具欄，頂部工具欄主要包括全部、今日、查找等按鈕，查找又可以根據不同的字段名稱來進行，比如可以按照姓名、出生日期、編號、隨訪日期進行查找。底部工具

32、欄采用了Ext.PagingToolbar分頁工具條對象，主要用來統計記錄的條數以及每頁顯示多少條記錄。另一塊是表單面板，根據用戶的使用習慣，在表單面板的最下邊，設置的也是一些功能按鈕。其余部分主要用來存放新生兒家庭訪視的具體內容，這些內容一方面是新生兒的健康信息，另一方面是父母的一些信息，所以在設計時我們選用兩個分組框來存放這些信息。這些信息的操作在最開始的時候都是被禁止的，只有當點擊“新增”按鈕以后，才可以在相應的文本框中錄入信息。當在左邊的表格中選中一條記錄時，表格面板就會獲取這條記錄的所有信息，并且把這些信息顯示在各個對應的控件中。新生兒家庭訪視管理模塊的結構框圖如圖4.5.1所示。

33、新生兒家庭訪視管理模塊的結構框圖 4.5.1 列表面板的設計列表面板的部分主要代碼如下：var sm = new Ext.grid.CheckboxSelectionModel();/整個表格的列模型創建var cm = new Ext.grid.ColumnModel(/sm=Ext.grid.CheckboxSelectionModel()在表格中添加復選框功能，會在每行數據前添加一個復選框 sm, new Ext.grid.RowNumberer(),header: 姓名, align:center, width:70,sortable:true, dataIndex: nam,head

34、er: 編號, flex:1, align:center, sortable:true,dataIndex: num,header: 隨訪日期, flex:1, align:center,sortable:true,dataIndex: birth_doc,header: 出生日期, width:100, align:center,sortable:true,dataIndex: birth,header: 助產機構, flex:1, align:center,sortable:true,dataIndex: birth_org, );4.5.2 表單面板的設計首先在表單面板中建立了兩個分組框

35、，在兩個分組框中分別采用了Ext.layout.container.Column面板布局，這是一種多列風格的布局樣式，每一列的寬度都可以根據百分比或固定值來進行設置，并且高度也允許根據內容來自動進行調整。它支持一個特殊的屬性columnWidth，每一個加到容器中的子面板都可以通過columnWidth配置項指定百分比或使用width配置項指定固定值。在該面板中，我們在每個分組框中都設置為顯示三列，所以每一列的columnWidth值都設置為.33(即33%)。為了使該系統操作起來更加的方便簡單且靈活，面板中的所有元素類型除了按鈕之外我們還涉及到了其它四種，第一種是文本框（textfield）

36、，所填入的內容需要用戶自己輸入；第二種是下拉列表（combo），用戶可以方便的從列表項目中選擇所需的內容；第三種是日期選擇框（datefield），它屬于Ext.form.filed.Date組件，是帶下拉日期拾取器的日期輸入組件，并且提供了自動的日期驗證功能，用戶不必自己輸入日期，只需點擊日期選擇框，就可以在其中根據自己的需求添加相應的日期；最后一種是限制文本域（textarea），運用該類型可以在其生成的空白文本框中輸入大量的內容，在新生兒家庭訪視管理模塊中，輸入內容較長的項目是第一個分組框中的最后兩個元素：“家庭住址”和“備注”，所以這兩項用該類型來創建。由于“新生兒家庭訪視”、“1歲以

37、內兒童健康管理”、“1-2歲兒童健康管理”這三個模塊的表單面板的設計方法基本一致，所以這里先不例舉代碼，這一部分的代碼可以參考“1歲以內兒童健康管理”和“1-2歲兒童健康管理”模塊表單面板的代碼。4.6 1歲以內兒童健康管理模塊界面設計1歲以內兒童健康管理的界面設計和新生兒家庭訪視界面的設計一樣，也是將整個頁面的center面板分為了兩大塊，一塊用作列表面板，另一塊用作表單面板。對于列表面板來說，我們主要將它分為了三個部分，分別是：頂部工具欄、底部工具欄和顯示用的表格。頂部工具欄包括三個功能：全部、今日、查找，當點擊“全部”和“今日”時，表格會分別顯示1歲以內兒童健康檔案的所有記錄和今日新增的

38、記錄。點擊其中一條記錄，該記錄的所有信息都會在表單面板上各個相應的控件中顯示出來。查詢又分為按姓名、編號、隨訪日期、月齡，隨訪醫生姓名五種不同的查詢方式，這樣用戶可以根據自己的需求，選擇其中一種方式或幾種方式配合來高效快速的查詢想要的記錄。底部工具欄是利用分頁工具條對象來創建的，通過頂部工具條，我們可以看到記錄的條數，當表格中沒有記錄時，則顯示“當前記錄0條”。表單面板主要用來存放1歲以內兒童健康檢查的一些項目，這些所有的項目在開始的時候都是被禁止的，不能對其進行任何操作。只有當點擊“新增”或“編輯”按鈕時，所有的項目控件才會被激活，才可以在里面填入或修改相應的內容。1歲以內兒童健康管理模塊的

39、結構框圖如圖4.6.1所示。 1歲以內兒童健康管理模塊的結構框圖 4.6.1 列表面板的設計列表面板的部分代碼如下所示： cm: new Ext.grid.ColumnModel( sm, id:num,header: 編號,align:center, width: 100,showSelect:no, sortable: true, dataIndex: num, header: 姓名, align:center,width: 80, sortable: true, dataIndex: nam, header: 隨訪日期,align:center,width:100, sortable:

40、true,dataIndex:one_data, header: 月齡,align:center, width: 60, sortable: true, dataIndex: mon_age,header: 隨訪醫生,align:center,width:80, sortable: true,dataIndex:one_doc,),4.6.2 表單面板的設計這部分的設計與新生兒家庭訪視模塊的表單面板設計方法一樣，首先建立了健康檢查記錄表分組框，然后在該分組框中采用了Ext.layout.container.Column面板布局并且設置了三個列。除此之外，除了新生兒家庭訪視模塊表單面板設計中提到

41、的四種元素設計類型外，在該面板中我們還可以使用一種新的容器:checkboxgroup，checkboxgroup是一個復選框組件容器，它內置了特定的布局按列放置復選框，并且提供了成組操縱復選框的方法，用戶可以選擇復選框中的一項或幾項內容。表單面板的主要代碼如下：Ext.apply(this, items: xtype: fieldset/分組框,autoHeight:true,labelWidth: 60,collapsible: true,title:新生兒家庭訪視記錄表,items: layout:column/column列布局方式,items: /第一列前三個元素 columnWid

42、th:.33/設置列的寬度 ,layout:form ,labelWidth: 60 ,border:false ,items: xtype:textfield,/文本框 name: num, id: nuum + this.id, allowBlank:false, xtype:datefield,format:Y-m-d,emptyText:請選擇日期,/readOnly:true,renderer:timeFormat,fieldLabel: 隨訪日期, name: oneDate, id: one_ddate + this.id, allowBlank: false, blankTex

43、t:必須選擇日期, anchor:95% fieldLabel: 頭圍, xtype:textfield, name: oneHeadsize,id:one_hheadsize + this.id, allowBlank: true, anchor:95%, 4.7 1-2歲兒童健康管理模塊界面設計 1-2歲兒童健康管理模塊的設計與前兩個模塊相同，都是分為列表面板的設計和表單面板的設計。1-2歲兒童健康管理模塊的結構框圖如圖4.7.1所示。 1-2歲兒童健康管理模塊的結構框圖4.7.1 列表面板的設計 該部分的列表面板設計與前兩個模塊的相比，在列表頂部工具欄上多設置了三個功能按鈕，即：導入、導

44、出、刪除。列表面板的部分代碼如下： cm: new Ext.grid.ColumnModel(sm,id:name,header: 編號,align:center, width:120,showSelect:no, sortable: true, dataIndex: num,header: 姓名, align:center,width: 100, sortable: true, dataIndex: nam,header: 訪視醫生,align:center, width: 100, sortable: true, dataIndex: two_doc,header: 訪視日期,align:

45、center,width:120, sortable: true,dataIndex:two_date,), 4.7.2 表單面板的設計該部分的設計和前兩個模塊的表單的設計方法相同，都是采用了column布局，不同的只是前兩個模塊用column布局分為了三列，而這個地方只分為了兩列并且每一列的columnWidth的值都被設置為了.40(即40%)。除此之外被設置為限制文本域（textarea）類型的字段是column布局之后的最后兩行元素“醫生指導”和“備注。創建表單面板界面的部分代碼如下：Ext.apply(this, items: xtype: fieldset/分組框,autoHeig

46、ht:true,labelWidth: 60,collapsible: true,title:新生兒家庭訪視記錄表,items: layout:column/column列布局方式,items: columnWidth:.33/設置列的寬度 ,layout:form ,labelWidth: 60 ,border:false ,items: /第一列第一個元素 fieldLabel: 編號, xtype:textfield, name: num, id: nuum + this.id, anchor:95% ,/第二列第一個元素 fieldLabel: 月齡 ,xtype:textfield,

47、name: twoAge ,anchor:95% ,displayField:twoAge ,mode:local,editable:false,triggerAction: all(fields:twoAge,data:12月齡,18月齡,24月齡,30月齡) , ,4.8 3-6歲兒童健康檢查模塊界面設計 3-6歲兒童健康檢查模塊的界面設計與其他三個模塊不同，因為這部分的健康檢查項目比較少，如果設計為前三個模塊那樣的風格的話，界面顯得既不合理也不美觀，所以這部分記錄的增加和修改我們設計為彈出式窗口，彈出式窗口通過單擊頂部工具欄中的“新增”和“編輯”按鈕來實現，“新增”按鈕連接了一個clic

48、k事件（通過click事件連接到另一個面板），當“新增”按鈕被點擊的時候，界面中便會彈出“增加記錄”窗口，“增加記錄”窗口排列了健康檢查的具體信息。然后把整個主界面設計為一個列表面板，該列表面板可以顯示健康檢查項目的所有內容，當新增一條記錄并保存后，該列表會一一顯示出錄入的字段信息。3-6兒童健康管理模塊的結構框圖如圖4.8.1所示。 SKIPIF 1 OpenPerspective-MyEclipse DatabaseExplorer，然后再點擊DB Browser，在MyEclipse界面上顯示一個DB Browser窗口，默認有一個MyEclipse Derby，在此處右擊會出現菜單，選

49、擇new，在彈出的窗口中配置參數，如URL,drive name等，在drive name隨便起個名字，Connection URL填上數據庫的地址（最后的那個test是你要連接的數據庫），在Username，Password依次填上用戶名，密碼，點擊DriverJARs右面的AddJARs選擇你的數據庫驅動，然后點擊Finish。這時我們在左面會看到新建的數據庫，右鍵點擊新建的數據庫選擇Openconnection，出現一個新窗口我們輸入剛才的用戶名，密碼，點擊OK，這時我們能看到在數據庫中建的表，說明已經連接成功。 HYPERLINK l _Toc20438 5.2 登錄模塊實現系統用戶的

50、所有信息保存在ertong數據庫的表his_user中，注冊時由setvalue()函數對注冊表單上的每個元素設值，getvalue（）函數取得每個元素的值，然后調用set方法把值保存進his_user表中；調用get方法取出表中每個元素的值。當在登錄界面中輸入相應的個人信息和驗證碼后，激活“登錄”按鈕，登錄按鈕變為可用的。單擊“登錄”按鈕，系統首先從SQL server數據庫的his_user表中取得該用戶的信息，并且驗證用戶名、密碼、所屬部門的值是否匹配，然后判斷驗證碼的值是否正確，所有值都匹配后，系統進行自動跳轉，開始加載登錄效果，彈出身份確認窗口，當用戶確認信息后，系統退去加載效果并且

51、自動跳轉到系統首頁。登陸界面和注冊界面分別如圖5.2.1和5.2.2所示。 登陸界面 用戶注冊界面當所有的信息匹配后，系統開始自動加載登錄效果并且彈出身份認證窗口，如果不點擊“確認”，那么系統會一直加載該效果，永遠不會進入系統首頁。效果加載界面如圖5.2.3所示。單擊“確認”后，退去加載效果，開始進入系統，如圖5.2.4所示。 圖5.2.3 身份認證窗口 效果加載界面 HYPERLINK l _Toc13683 5.3 系統主界面實現5.3.1 頂部工具條實現系統主界面的實現主要涉及到頂部工具欄和系統管理模塊的所有功能的實現。在頂部工具欄中，除了“中國醫網和“天氣預報”按鈕的實現是通過鏈接網址

52、，其他的所有的按鈕的功能都是通過調用具體的函數實現的，例如：對于動態更新的時間來說，首先先定義好獲取動態時間的函數clock，在頂部工具欄定義時再調用這個函數。實現頂部工具欄所有功能的部分代碼如下：動態更新的時間： var clock = new Ext.Toolbar.TextItem(new Date().format(yyyy-MM-dd EEE hh:mm:ss); Ext.TaskMgr.start( run:function()Ext.fly(clock.getEl().update(new Date().format(yyyy-MM-dd EEE hh:mm:ss); , int

53、erval: 1000); 系統掛起:id:hangup,text:系統掛起,icon:imgs/lock.png,iconCls: icon-plugin,tooltip:鎖住系統,enableToggle:false,pressed:false,handler:function()var north = win.findById(panelNorth);var south = win.findById(panelSouth);var west = win.findById(panelAccordion);var center = win.findById(panelCenterPanel)

54、;var northState = !north.collapsed;/折疊north面板var westState = !west.collapsed;/折疊west面板系統主界面如圖5.3.1所示： 系統主界面在連接網絡的狀態下，點擊“天氣預報”按鈕，彈出的天氣預報窗口就能自動獲取當前地點的天氣狀況，這里默認獲取天氣的地點是昆明。點擊天氣預報中顯示的地點，系統就能自動連接到中國天氣預報網的首頁，這樣就可以選擇查看不同地區的天氣情況。 天氣預報窗口點擊“中國醫網”按鈕，系統自動連接到中國醫網首頁。 中國醫網首頁單擊“系統掛起”按鈕，系統中所有的（包括center、west、north、sou

55、th）面板全部被掛起，出現激活碼輸入窗口，如圖5.3.4，只有輸入正確的激活碼，才能跳回到系統首頁，如果三次激活碼輸入都錯誤，那么就會出現提示信息：“您輸入的激活碼有問題，為了系統安全，請輸入退出系統”，用戶就會被強制退出系統。這個功能的設置主要是為了保證系統的安全性和資料的安全性，當用戶不想退出系統，但又想保證資料的安全時，可以選用該按鈕。 圖5. 系統掛起單擊個人設置按鈕，進入該按鈕下的資料維護模塊，在彈出的的資料維護窗口中，可以對用戶本人的詳細信息進行修改，如圖5.3.5，進入密碼修改模塊，在彈出的密碼修改窗口中可以修改用戶的密碼,如圖5.3.6。 圖5.3.5 用戶資料維護 用戶修改密

56、碼窗口單擊“皮膚選擇”按鈕，在下拉菜單中選擇“粉色”，整個界面的顏色就會變成粉色，連登陸界面顏色也會隨之改變，如 圖5.3.7所示。 系統主界面（粉色）單擊“實時通訊”按鈕，彈出模擬QQ界面，并且顯示當前在線的用戶。在院內郵箱的設計中，寫郵件界面和收件箱界面是根據QQ郵箱的界面來設計的，單擊“寫郵件”按鈕，彈出如圖5.3.9所示的界面，在該界面中，發件人被自動獲取為當前用戶的user_name值，收件人可在該系統的所有的用戶中進行選擇，還可以在發件箱中添加附件。 發件箱系統管理主要包括系統幫助、系統設置、關于系統和注銷系統四部分，其中系統設置又包括系統用戶維護和數據庫的維護。這些模塊的實現大部

57、分是調用了fuction（）函數，如：“系統幫助”按鈕的fuction（）函數體中定義的是一個網址為的網頁窗口，所以單擊該按鈕時，系統就會自動連接到該網頁；而“關于系統”按鈕的fuction（）函數體中先定義了一窗口，然后在這個窗口中使用HTML定義了一串字符串，單擊該按鈕時，這些字符串就會在該窗口中顯示出來。“注銷系統”的實現首先在fuction（）函數體中使用了一個If語句，使得在按鈕單擊動作為yes的時候，就會執行該語句，使得所有的面板的內容都被注銷，同時系統跳轉到登錄界面。單擊“關于系統”按鈕，系統會自動彈出一個窗口，窗口中描述了一些關于本系統使用和開發的信息。 打開系統設置，選擇系統

58、用戶維護，打開如圖圖5.3.11所示的界面。 系統用戶維護窗口 HYPERLINK l _Toc21104 5.4 HYPERLINK l _Toc13688 新生兒家庭訪視模塊實現新生兒家庭訪視模塊的實現和界面設計一樣，分為列表面板的實現和表單面板的實現。列表面板中的記錄顯示首先要從數據庫獲得數據，而數據庫中的數據來源于表單面板中數據的保存。但是不管怎么說，我們都先要對數據表進行映射，然后用setValue：public void findbyopminno() throws Exception JSONArray jsonItems=new JSONArray();int start=In

59、teger.parseInt(ServletActionContext.getRequest().getParameter(start);int pageSize=Integer.parseInt(ServletActionContext.getRequest().getParameter(limit);int currentPage=start/pageSize+1;String num=req.getParameter(num);opminlist =xinshengerjiatingservice.findPageOpmin(num, currentPage, pageSize);int

60、 count=xinshengerjiatingservice.getOpminCount(num);Iterator i=opminlist.iterator();Xinshengerjiating xinshengerjiating=new Xinshengerjiating();while(i.hasNext()xinshengerjiating=(Xinshengerjiating)i.next(); StringnowDate= String.valueOf(xinshengerjiating.getNowDate();Stringbirth = String.valueOf(xin