【正文】 系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，主要包括前端應(yīng)用程序的開發(fā)以及后臺(tái)數(shù)據(jù)庫(kù)的建立和維護(hù)兩個(gè)方面。本系統(tǒng)擬采用 PHP 和 MYSQLSERVER 分別作為前端和后端的開發(fā)工具。作為腳本語言來說，PHP 解析高效，同時(shí)具備面向?qū)ο裉攸c(diǎn)，作為開發(fā)語言就非常的適合了，相比于其它開發(fā)語言如 JAVA 來說，PHP 能夠很好的與服務(wù)器程序結(jié)合，而且應(yīng)用程序反應(yīng)十分快，這是為什么新浪網(wǎng)對(duì)大數(shù)量數(shù)據(jù)能夠很好的管理的原因，因?yàn)?PHP 同時(shí)兼?zhèn)渑c MYSQL 很好的接口函數(shù)。MYSQL 作為一個(gè)免費(fèi)開源的數(shù)據(jù)庫(kù)管理系統(tǒng)，相比于其他數(shù)據(jù)庫(kù)管理系統(tǒng)，MYSQL 是一個(gè)功能完備的數(shù)據(jù)庫(kù)管理系統(tǒng)。而像存儲(chǔ)過程、觸發(fā)器等特性，也是大型數(shù)據(jù)庫(kù)才擁有的。開發(fā)應(yīng)用程序的時(shí)候，使用瀏覽進(jìn)行管理是十分便捷的，比如進(jìn)行數(shù)據(jù)的增刪改、導(dǎo)入和導(dǎo)出等功能，就可以在網(wǎng)頁上很好的完成；同時(shí)，數(shù)據(jù)移植也是十分方便。對(duì)于上億級(jí)數(shù)據(jù)都能很好的進(jìn)行管理，正是如此，百度、新浪網(wǎng)等都在使用 MYSQL 數(shù)據(jù)庫(kù)作為他們的數(shù)據(jù)存儲(chǔ)的數(shù)據(jù)庫(kù)管理系統(tǒng)。因此，選擇 PHP 與 MYSQL 是十分有效的。因?yàn)樵撈脚_(tái)是作為畢業(yè)設(shè)計(jì)與商業(yè)無關(guān)，又因?yàn)槭亲灾鏖_發(fā)設(shè)計(jì)，因此不會(huì)構(gòu)成侵權(quán)，在法律上是可行的。其中每個(gè)功能模塊的功能描述如下列○ 7(1) 學(xué)生登錄功能模塊：本系統(tǒng)用戶在進(jìn)行測(cè)試或者考試前必須用分配好的用戶名和密碼登入系統(tǒng)。 (2) 用戶在線進(jìn)行在線打字測(cè)試功能模塊：系統(tǒng)用戶（學(xué)生）成功登錄后，要求用戶選擇測(cè)試中文測(cè)試或者英文測(cè)試，選擇測(cè)試練習(xí)后就可以進(jìn)入系統(tǒng)就行在線打字測(cè)試了。 (4) 后臺(tái)管理員管理功能模塊：包括修改管理員密碼、系統(tǒng)參數(shù)設(shè)置、組別管理設(shè)置、文章管理設(shè)置、友情鏈接設(shè)置。 (5) 組別管理模塊：管理員能夠?qū)υO(shè)的組別進(jìn)行管理，能夠進(jìn)行增、刪、改組的功能。 (6) 管理員進(jìn)行使用 EXCEL 進(jìn)行成績(jī)導(dǎo)入、導(dǎo)出功能模塊：對(duì)考生的成績(jī)能夠打開和保存 EXCEL 功能，直觀地查看所有考生的成績(jī)，導(dǎo)出 EXCEL 可以方便地打印所有考生成績(jī)。 (8) 友情鏈接管理模塊：可以對(duì)本系統(tǒng)的友情鏈接進(jìn)行很好的管理。 數(shù)據(jù)流如表 31 所示表 31 數(shù)據(jù)流數(shù)據(jù)存儲(chǔ)名稱：用戶信息數(shù)據(jù)來源：信息表數(shù)據(jù)去向：用戶登陸模塊數(shù)據(jù)組成：用戶名、學(xué)號(hào)、密碼描述：存儲(chǔ)了用戶的基本信息數(shù)據(jù)存儲(chǔ)名稱：成績(jī)信息數(shù)據(jù)來源：信息表數(shù)據(jù)去向：信息模塊數(shù)據(jù)組成：用戶信息，中文打字速度，中文正確率，英文打字速度，英文正確率，用戶IP 地址描述：存儲(chǔ)了打字成績(jī)的基本信息數(shù)據(jù)存儲(chǔ)名稱：中文、英文信息數(shù)據(jù)來源：系統(tǒng)中文、英文信息表數(shù)據(jù)去向：中文、英文信息模塊數(shù)據(jù)組成：中文標(biāo)題，中文內(nèi)容，英文標(biāo)題，英文內(nèi)容描述：存儲(chǔ)了中文、英文的基本信息數(shù)據(jù)存儲(chǔ)名稱：班級(jí)信息數(shù)據(jù)來源：班級(jí)信息表數(shù)據(jù)去向：班級(jí)信息模塊數(shù)據(jù)組成：信息名稱，班級(jí)名稱描述：存儲(chǔ)了班級(jí)信息數(shù)據(jù)處理如表 32 所示表 32 數(shù)據(jù)處理描述：考生登錄系統(tǒng)進(jìn)行打字測(cè)試或考試輸入：考生的學(xué)號(hào)、密碼過程：判斷是否為合法的考生輸出：系統(tǒng)主界面名稱: 在線打字練習(xí)或考試描述：進(jìn)行系統(tǒng)選擇練習(xí)或考試兩種方式華東交通大學(xué)畢業(yè)設(shè)計(jì)6輸入: 選擇一種方式過程：進(jìn)入主系統(tǒng)界面選擇一種方式，選擇英文或者中文輸出: 進(jìn)入系統(tǒng)進(jìn)行打字或者考試名字：管理員通過 EXCEL 錄入考生基本信息和組別管理描述：管理員進(jìn)入后臺(tái)后導(dǎo)入學(xué)生信息并進(jìn)行班級(jí)管理輸入: 導(dǎo)入各班級(jí)學(xué)生信息過程: 將需要添加錄入的學(xué)生信息加入數(shù)據(jù)庫(kù)中輸出: 系統(tǒng)新的信息表頁面輸出: 查詢得到的信息頁面描述：對(duì)系統(tǒng)中的英文和中文進(jìn)行錄入及管理 輸入: 導(dǎo)入中文和英文進(jìn)入系統(tǒng)，同時(shí)對(duì)文章進(jìn)行管理過程：文章錄入及修改 輸出: 系統(tǒng)新的信息表頁面輸出: 查詢得到的信息頁面數(shù)據(jù)存儲(chǔ)如表 33 所示表 33 數(shù)據(jù)存儲(chǔ)名字: 數(shù)據(jù)庫(kù)信息別名：無描述：存儲(chǔ)了數(shù)據(jù)庫(kù)的基本信息數(shù)據(jù)組成：數(shù)據(jù)庫(kù)信息=管理員信息+ 中文文章信息+ 英文文章信息+班級(jí)信息+主表信息位置：數(shù)據(jù)庫(kù)輸出: 查詢得到的信息頁面華東交通大學(xué)畢業(yè)設(shè)計(jì)吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)4 總體設(shè)計(jì) 開發(fā)環(huán)境介紹ZEND Studio 是一套完整的開發(fā)工具集，用于開發(fā)、生成 PHP 應(yīng)用程序、XML Web Services、桌面應(yīng)用程序和移動(dòng)應(yīng)用程序。Dream Weaver 提供了網(wǎng)頁設(shè)計(jì)器，其中包含了許多用于創(chuàng)建和編輯 PHP 靜態(tài)頁和HTML 頁的增強(qiáng)功能。Photo Shop 作為專業(yè)的設(shè)計(jì)工具，在頁面設(shè)計(jì)中使用的非常廣泛，頁面切片用到比較多，可以做到比較好的視覺效果，給用戶全新的用戶體驗(yàn)。Apache 服務(wù)器作為開源的開發(fā)工具，對(duì)使用者來說十分便捷。同時(shí)，數(shù)據(jù)庫(kù)使用 MYSQL，性能高、開源、穩(wěn)定、支持事務(wù)等，結(jié)合這些優(yōu)點(diǎn)，也是較好的選擇。通過上面對(duì)網(wǎng)站的整體需求分析，我們可以規(guī)劃一個(gè)簡(jiǎn)單的打字系統(tǒng)的總體設(shè)計(jì)方向?？傮w模塊圖如下圖 41 所示。共 8 個(gè)大頁面，同時(shí)包括班級(jí)、學(xué)生信息、成績(jī)導(dǎo)入、導(dǎo)出功能頁面。首頁主要包括以下幾個(gè)內(nèi)容：學(xué)生登錄窗口，學(xué)生選擇考試還是測(cè)試練習(xí)入口，考試說明和操作手冊(cè)展示點(diǎn)。(3) 考試：進(jìn)入考試頁面，考生選擇中文考試還是英文考試，然后進(jìn)入相對(duì)應(yīng)的頁面，考生選擇考試后進(jìn)入系統(tǒng)，根據(jù)系統(tǒng)提示進(jìn)行打字測(cè)速，完成后可以看到自己的成績(jī)信息，并向系統(tǒng)提交自己的本次的成績(jī)。 (5) 系統(tǒng)設(shè)置：進(jìn)行系統(tǒng)名稱的設(shè)置，考試時(shí)間設(shè)置，考試開關(guān)（打開后用戶才能進(jìn)入系統(tǒng)操作），防作弊開關(guān)（選中后一個(gè)考試只能用一臺(tái)機(jī)子），清空成績(jī)（選中后用戶可以清空自己的成績(jī)）。(7) 文章管理設(shè)置：選擇查詢中文和英文內(nèi)容，同時(shí)支持在線修改；添加新的文章和刪除舊的文章。圖 42 欄目劃分圖 數(shù)據(jù)庫(kù)設(shè)計(jì)在一個(gè)數(shù)據(jù)庫(kù)應(yīng)用系統(tǒng)的開發(fā)過程中，數(shù)據(jù)庫(kù)的設(shè)計(jì)是整個(gè)系統(tǒng)的基礎(chǔ)。 數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)在需求分析階段所得到的應(yīng)用需求應(yīng)該首先抽象為信息世界的結(jié)構(gòu)，才能更好的更在線打字系統(tǒng)欄目首頁 測(cè)試 考試 系統(tǒng)設(shè)置后臺(tái)首頁 組別設(shè)置 文章設(shè)置 友情鏈接華東交通大學(xué)畢業(yè)設(shè)計(jì)吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)準(zhǔn)確的用數(shù)據(jù)庫(kù)管理系統(tǒng)實(shí)現(xiàn)這些需求。如下圖中文文章實(shí)體如 43 圖所示中文文章編號(hào) 文章標(biāo)題 文章內(nèi)容圖 43 中文文章英文文章實(shí)體如 44 所示圖英文文章編號(hào) 文章標(biāo)題 文章內(nèi)容圖 44 英文文章成績(jī)實(shí)體如 44 圖所示成績(jī)信息編號(hào) 學(xué)號(hào) 文章內(nèi)容中文速度 英文速度 中文信息中文正確率 英文正確率英 文 信 息學(xué)生 I P圖 44 成績(jī)實(shí)體組別實(shí)體如 45 圖所示組別實(shí)體編號(hào) 班級(jí) I D 組別 I D圖 45 組別實(shí)體管理員信息實(shí)體如 46 圖所示管理員實(shí)體編號(hào) 姓名 密碼 初始班級(jí) 中文 I D 英文 I D圖 46 管理員實(shí)體華東交通大學(xué)畢業(yè)設(shè)計(jì)10實(shí)體聯(lián)系 ER 圖如 44 圖所示學(xué)生類型管理員類型考試 測(cè)試進(jìn)入進(jìn)入打字信息 測(cè)試信息提交成績(jī)成績(jī)信息E X C E L 成績(jī)文檔組別組別信息E X C E L 組別文檔班級(jí)班級(jí)信息E X C E L 班級(jí)文檔錄入文章組別組別信息E X C E L 組別文檔導(dǎo)出圖 410 實(shí)體聯(lián)系 ER 圖 數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)(1) admin(管理員 )表如 42 所示表 41 管理員表中文名稱 字段名 數(shù)據(jù)類型 大小編號(hào) Id INT 10管理員的姓名 Name VARCHAR 50管理員的密碼 Pass VARCHAR 50管理員班級(jí)初始 Table VARCHAR 50中文ID(cookie) Chid INT 5對(duì)應(yīng)英文ID Enid INT 5(2) chinese(中文文章)表如 42 所示華東交通大學(xué)畢業(yè)設(shè)計(jì)吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)表 42 中文文章表中文名稱 字段名 數(shù)據(jù)類型 大小編號(hào) Id INT 10文章標(biāo)題 Title VARCHAR 30文章內(nèi)容 Content VARCHAR 500(3) english(英文文章)表如 43 所示表 43 英文文章表中文名稱 字段名 數(shù)據(jù)類型 大小編號(hào) Id INT 10文章標(biāo)題 Title VARCHAR 30文章內(nèi)容 Content VARCHAR 500(4) class4(中間表 )表如 44 所示表 44 組別表中文名稱 字段名 數(shù)據(jù)類型 大小編號(hào) Id INT 10組別ID Ctable VARCHAR 10中間表名 Class VARCHAR 20(5) class4(成績(jī)信息 )表如 45 所示表 45 成績(jī)信息表中文名稱 字段名 數(shù)據(jù)類型 大小編號(hào) Id INT 10學(xué)號(hào) Sid VARCHAR 12學(xué)生姓名 Sname VARCHAR 10中文速度 Chspeed VARCHAR 4中文正確率 Chcrate VARCHAR 6中文信息 Chstr VARCHAR 1000英文速度 Enspeed VARCHAR 4英文正確率 Encrate VARCHAR 6英文信息 Enstr VARCHAR 2022考生IP Ip VARCHAR 205 詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 系統(tǒng)開發(fā)模型詳細(xì)設(shè)計(jì)(1) 打開 ZEND Studio,新建一個(gè)項(xiàng)目名稱為 dazi,單擊 FileNewPHP project，項(xiàng)目華東交通大學(xué)畢業(yè)設(shè)計(jì)12名稱為 dazi，然后選擇項(xiàng)目位置，點(diǎn)擊完成即可。如 52 所示華東交通大學(xué)畢業(yè)設(shè)計(jì)14圖 52 系統(tǒng)首頁結(jié)構(gòu)(1) 測(cè)試界面測(cè)試界面主要是學(xué)生進(jìn)入本界面后，就可以進(jìn)行常規(guī)的打字練習(xí)，無需提交本次操作的成績(jī)到系統(tǒng)，進(jìn)入測(cè)試前系統(tǒng)會(huì)判別用戶的身份信息，如果不是本系統(tǒng)用戶，則測(cè)試和考試都將進(jìn)不去，同時(shí)系統(tǒng)給以相應(yīng)的提示信息界面； 是本系統(tǒng)的用戶操作說明文件，進(jìn)入系統(tǒng)前用戶可以參考這個(gè)操作手冊(cè)；班級(jí)也需在填寫；成功進(jìn)入測(cè)試提示框如圖 53： 圖 53 進(jìn)入測(cè)試提示框圖進(jìn)入系統(tǒng)后進(jìn)入選擇類型界面如圖 54：華東交通大學(xué)畢業(yè)設(shè)計(jì)吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)圖 54 選擇類型界面(2) 中文測(cè)試界面進(jìn)入中文測(cè)試界面，用戶或者學(xué)生就可以進(jìn)行中文字的打字練習(xí)，一旦開始進(jìn)行打字后，系統(tǒng)開始進(jìn)行倒計(jì)時(shí)，時(shí)間為管理員設(shè)置的時(shí)間，一到時(shí)間，本次打字則完成，自動(dòng)提交成績(jī)，同時(shí)系統(tǒng)開始記錄打字速度、正確率等信息，中文輸入錯(cuò)誤，字體會(huì)顯示紅色，表明本字或詞輸入錯(cuò)誤，可以重新輸入，中文輸入正確，則顯示綠色，當(dāng)本篇文章全部輸入完成后，系統(tǒng)會(huì)提示本次的打字信息如正確率、打字速度等，并可以提交本次測(cè)試成績(jī)。middle = second t。 //把秒數(shù)放到隱藏中 t 是以過的時(shí)間，middle 是余下的時(shí)間var typelen = 。 //設(shè)置速度var ft = formatTime(middle)。time39。exu = setTimeout(timedCount(),1000)。stop()。 //獲得顯示文章總長(zhǎng)度 var middle。 //獲得文本框中的值 var typeLaterLen = 。amp。 //獲得文章總長(zhǎng)度 var everylen = 。 //獲得文本框中的值 var typeLaterLen = 0。 //over 為全部打完的標(biāo)志 $(d2).innerText = 100%。$(d).innerHTML =。var middle = 1。 $(d2).innerText = percent +%。 } var typetoall = slen*count + typeLaterLen。 alert(you are good)。 }str = arr[count]。$(d).innerHTML = str。carray = pareStr(str,typeLater,middle)。 //執(zhí)行 pareStr 函數(shù)if(carray[1] == 1)middle = 0。 //把考生已打字長(zhǎng)度寫入隱藏表單}3. 比較兩個(gè)字符串匹配情況代碼：function pareStr(str1,str2,middle){ //str1 為文章字符串 str2 為輸入的字符串 var array = new Array()。 //取得兩字符串中最短的長(zhǎng)度 var success = 0。//失敗字?jǐn)?shù)var i = 0。 var newstr1=。 var resultStr = 。 while(success+faillen){