12306用戶(hù)管理系統(tǒng)一、實(shí)踐目的1.簡(jiǎn)介本次實(shí)訓(xùn)主要學(xué)習(xí)如何和小組成員一起做一個(gè)完整的項(xiàng)目，一個(gè)完整的項(xiàng)目包括數(shù)據(jù)庫(kù)、前端頁(yè)面設(shè)計(jì)和后端邏輯接口與實(shí)現(xiàn)。一個(gè)人做一個(gè)完整的項(xiàng)目，項(xiàng)目的周期會(huì)很長(zhǎng)，而小組成員之間的分工合作可以使項(xiàng)目周期縮短。通過(guò)對(duì)Java的學(xué)習(xí)，學(xué)會(huì)使用HTML標(biāo)記語(yǔ)言，通過(guò)CSS對(duì)頁(yè)面的布局，通過(guò)jQuery框架和Mybatis框架構(gòu)造數(shù)據(jù)庫(kù)，通過(guò)Servlet技術(shù)對(duì)后端邏輯接口與實(shí)現(xiàn)，使三個(gè)部分連接起來(lái)形成一個(gè)整體，使其頁(yè)面顯示的各個(gè)功能逐一實(shí)現(xiàn)。2.目的（1）熟練掌握并練習(xí)java的基本語(yǔ)法（2）了解并掌握Web應(yīng)用基礎(chǔ)、HTML基礎(chǔ)、CSS應(yīng)用、jQuery框架、Mybatis框架和Servlet技術(shù)二、實(shí)踐內(nèi)容1.數(shù)據(jù)庫(kù)設(shè)計(jì)（1）JQuery框架jQuery是一套全新的Javascript腳本庫(kù)。jQuery給我們編寫(xiě)代碼提供了強(qiáng)大的功能函數(shù)，能夠幫助我們使各項(xiàng)功能的實(shí)現(xiàn)迅速完成，而且可以使我們編寫(xiě)的代碼更加簡(jiǎn)單；javascript腳本不能跟不同瀏覽器兼容，常常這個(gè)頁(yè)面能在瀏覽器下運(yùn)行沒(méi)問(wèn)題，但是在其他瀏覽器下就會(huì)出現(xiàn)各種各樣的毛病。所以為了解決能在不同瀏覽器下都能正常運(yùn)行，就創(chuàng)造了一套新的Javascript腳本庫(kù)——jQuery，自從有了這個(gè)新的Javascript腳本庫(kù)，我們能在jQuery中對(duì)Event事件中所運(yùn)用到的所有對(duì)象被所有瀏覽器都能通用，之前的Javascript腳本庫(kù)要從event獲取事件，然后在ie下是event.srcElements，但是ff等標(biāo)準(zhǔn)瀏覽器是用event.target，二者不統(tǒng)一帶來(lái)了使用不方便，從而影響了我們編寫(xiě)的代碼的普適性。而jQuery通過(guò)統(tǒng)一event對(duì)象，讓我們可以在所有瀏覽器中使用event.target獲取事件對(duì)象；jQuery還可以實(shí)現(xiàn)滑動(dòng)效果、淡入淡出等動(dòng)畫(huà)效果，讓我們能夠更好的提高使用效果。（2）Mybatis框架MyBatis應(yīng)用程序根據(jù)XML配置文件創(chuàng)建SqlSessionFactory，SqlSessionFactory在根據(jù)配置文件和Java代碼的注解，獲取一個(gè)SqlSession。SqlSession包括執(zhí)行sql所需要的所有方法，還可以通過(guò)SqlSession實(shí)例直接運(yùn)行相對(duì)應(yīng)的sql語(yǔ)句，實(shí)現(xiàn)對(duì)數(shù)據(jù)的增添刪改查找等功能。Mybatis不僅小而且操作簡(jiǎn)單易上手。不需要在安裝其他軟件，只需要下載兩個(gè)jar文件和幾個(gè)配置sql映射文件就可以運(yùn)用。Mybatis容易學(xué)習(xí)和操作，通過(guò)文件和其中的源代碼，就可以比較了解和掌握它的設(shè)計(jì)思路并且實(shí)現(xiàn)；mybatis不會(huì)對(duì)應(yīng)用程序或者數(shù)據(jù)庫(kù)的設(shè)計(jì)造成任何不好的影響。sql寫(xiě)在xml里，便于統(tǒng)一管理和優(yōu)化。我們通過(guò)sql基本上可以實(shí)現(xiàn)我們所需要的所有功能；并且通過(guò)提供DAL層，可以將業(yè)務(wù)邏輯和數(shù)據(jù)訪(fǎng)問(wèn)邏輯進(jìn)行分離，使系統(tǒng)的設(shè)計(jì)讓我們更加清楚明白，更加容易對(duì)系統(tǒng)進(jìn)行維護(hù)和測(cè)試。但是，用mybatis編寫(xiě)還是會(huì)有些缺點(diǎn)，比如當(dāng)字段多、關(guān)聯(lián)表復(fù)雜時(shí)，編寫(xiě)SQL語(yǔ)句相當(dāng)繁復(fù)，工作量大，而且SQL語(yǔ)句還很依賴(lài)數(shù)據(jù)庫(kù)，因?yàn)槊總€(gè)公司用的數(shù)據(jù)庫(kù)不同從而導(dǎo)致數(shù)據(jù)庫(kù)里的數(shù)據(jù)移動(dòng)不便，不能隨意更換數(shù)據(jù)庫(kù)，并且mybatis使用的框架也比較簡(jiǎn)陋，功能不全，雖然需要用代碼編寫(xiě)數(shù)據(jù)的工作量減少了，但是在做數(shù)據(jù)庫(kù)查詢(xún)所需要的代碼還是要自己編寫(xiě)，沒(méi)有快捷方式可以自動(dòng)查詢(xún)，導(dǎo)致實(shí)際的代碼編寫(xiě)工作還是很大，而且不太容易進(jìn)行數(shù)據(jù)庫(kù)修改。總體而言：mybatis的優(yōu)點(diǎn)同樣是mybatis的缺點(diǎn)，正因?yàn)閙ybatis使用簡(jiǎn)單，數(shù)據(jù)的可靠性、完整性的瓶頸便更多依賴(lài)于程序員對(duì)sql的使用水平上了。sql寫(xiě)在xml里，雖然方便了修改、優(yōu)化和統(tǒng)一瀏覽，但可讀性很低，調(diào)試也非常困難，也非常受限。2.前端頁(yè)面設(shè)計(jì)通過(guò)運(yùn)用Java語(yǔ)言，熟練的運(yùn)用Web應(yīng)用基礎(chǔ)、HTML基礎(chǔ)和CSS應(yīng)用開(kāi)發(fā)交互式動(dòng)態(tài)Web網(wǎng)頁(yè)，并且使網(wǎng)頁(yè)能夠動(dòng)態(tài)顯示，美觀(guān)大方。（1）HTML原理及基礎(chǔ)HTML文件可以被各種不同的網(wǎng)頁(yè)瀏覽器讀取形成網(wǎng)頁(yè)，然后借網(wǎng)頁(yè)這個(gè)平臺(tái)來(lái)展示各種各樣資訊的文件。所以總體而言，Internet（互聯(lián)網(wǎng)）是一個(gè)由一系列傳輸協(xié)議和各類(lèi)文檔所組成的集合，HTML文件只是其中一種。然而這些HTML文件可以存儲(chǔ)在世界各地的服務(wù)器硬盤(pán)上，通過(guò)傳輸協(xié)議遠(yuǎn)程獲取這些文件所傳達(dá)的資訊和信息。網(wǎng)絡(luò)瀏覽器，比如MicrosoftInternetexplorer可以用來(lái)解釋HTML文件并顯示在網(wǎng)頁(yè)上。當(dāng)你使用瀏覽器在互聯(lián)網(wǎng)上瀏覽網(wǎng)頁(yè)時(shí)，瀏覽器軟件就自動(dòng)完成HTML文件到網(wǎng)頁(yè)的轉(zhuǎn)換。學(xué)習(xí)HTML，要能清楚了解并運(yùn)用HTML的基礎(chǔ)標(biāo)記，例如html、body、head、mcta、title、br、font、物理字體、邏輯字體和注釋?zhuān)籋TML的標(biāo)記屬性，例如width、height、align、background等；利用form、text、password、button和checkbox生成HTML表單，利用image插入HTML圖片，利用table、tr、td、th、表格布局和添加背景圖片生成HTML表格。（2）CSSCSS，也稱(chēng)為層疊樣式表，它的主要功能是用于控制網(wǎng)頁(yè)樣式，并允許將樣式代碼與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言?？傮w而言，我們引入CSS的目的是為了使得HTML語(yǔ)言能夠運(yùn)用在頁(yè)面布局方面，使頁(yè)面布局更加精致美觀(guān)。CSS以HTML語(yǔ)言為基礎(chǔ)，增加了格式化功能，比如寬度、高度、文字大小、float浮動(dòng)等，并且網(wǎng)頁(yè)設(shè)計(jì)者可以根據(jù)不同的需求進(jìn)行個(gè)性化設(shè)計(jì)不同瀏覽器風(fēng)格，可以用于顯示器、打印機(jī)、平板電腦、手機(jī)等移動(dòng)設(shè)備。樣式是CSS最小語(yǔ)法單元，每個(gè)樣式包含選擇器和聲明（規(guī)則），選擇器是為了告訴瀏覽器這個(gè)樣式將要改變頁(yè)面中哪些對(duì)象，這些對(duì)象可以是某個(gè)標(biāo)簽、所有網(wǎng)頁(yè)對(duì)象、指定class或id值等。瀏覽器在解析這個(gè)樣式時(shí)，根據(jù)選擇器來(lái)渲染對(duì)象的顯示效果。聲明可以增加一個(gè)或者無(wú)數(shù)個(gè)，這些聲明告訴瀏覽器如何去渲染選擇器指定的對(duì)象。3.后端邏輯接口與實(shí)現(xiàn)類(lèi)（1）Servlet技術(shù)Servlet是一種獨(dú)立于平臺(tái)和協(xié)議的服務(wù)器端的Java技術(shù)，可以用來(lái)生成動(dòng)態(tài)的Web頁(yè)面，還可以使用JavaServlet應(yīng)用程序設(shè)計(jì)接口（API）及相關(guān)類(lèi)和方法的Java程序。它主要處理客戶(hù)端傳來(lái)的HTTP請(qǐng)求，并返回一個(gè)響應(yīng)。通常Servlet是指HttpServlet，用于處理HTTP請(qǐng)求。它能夠處理的請(qǐng)求有：getProtocal()、getMethod()、getRequestURI()等。在開(kāi)發(fā)Servlet時(shí)，可以直接繼承javax.servlet.http.HttpServlet。Servlet的框架是由兩個(gè)Java包組成：javax.servlet包：定義了所有的Servlet類(lèi)都必須實(shí)現(xiàn)或擴(kuò)展的通用接口和類(lèi)；javax.servlet.http包：定義了采用HTTP協(xié)議通信的HttpServlet類(lèi)。Servlet可以適用于不同平臺(tái)的使用，而且里面的數(shù)據(jù)能夠移動(dòng)到另一個(gè)平臺(tái)上使用。它可以使用java語(yǔ)言編寫(xiě)，而且它的ServletAPI標(biāo)準(zhǔn)完善，程序執(zhí)行效率高，使用簡(jiǎn)單方便，可輕輕松松處理所有的HTML表單數(shù)據(jù)，并且能夠讀取和設(shè)置HTTP頭，處理cookie,跟蹤會(huì)話(huà)。（2）MVC分層架構(gòu)本次項(xiàng)目我們采用MVC分層架構(gòu)的模式，M：Model層主要負(fù)責(zé)要處理的業(yè)務(wù)代碼和數(shù)據(jù)操作代碼；V：View向用戶(hù)展示數(shù)據(jù)，通常指用戶(hù)看到的界面，通常由Html+js+css組成；C：用于模型和視圖的協(xié)調(diào)，保證數(shù)據(jù)的同步，一旦模型發(fā)生改變視圖也會(huì)同步進(jìn)行改變。因?yàn)镸VC中V負(fù)責(zé)顯示數(shù)據(jù)，而顯示的數(shù)據(jù)若想要改變，只要變動(dòng)V中的代碼，C和M層中的代碼并不需要改變，所以采用MVC分層架構(gòu)要比較方便，有利于后期管理。（3）Cookie過(guò)濾器Cookie意為“甜餅”，是由W3C組織提出，最早由Netscape社區(qū)發(fā)展的一種機(jī)制。目前Cookie已經(jīng)成為標(biāo)準(zhǔn)，所有的主流瀏覽器如IE、Netscape、Firefox、Opera等都支持Cookie。由于HTTP是一種無(wú)狀態(tài)的協(xié)議，服務(wù)器從網(wǎng)絡(luò)連接上無(wú)法得知客戶(hù)身份。所以Cookie就是為了解決這一難題，它就利用身份證的原理，給客戶(hù)端一人發(fā)一個(gè)身份證吧，這樣無(wú)論誰(shuí)訪(fǎng)問(wèn)都攜帶自己的身份證，從而使服務(wù)器能夠確認(rèn)并通過(guò)客戶(hù)。Cookie本質(zhì)上是一小段文本信息?？蛻?hù)端請(qǐng)求服務(wù)器，那么服務(wù)器就記錄該用戶(hù)狀態(tài)，并使用response向客戶(hù)端瀏覽器頒發(fā)一個(gè)Cookie?？蛻?hù)端瀏覽器則把Cookie保存起來(lái)。當(dāng)瀏覽器再次請(qǐng)求這一網(wǎng)站時(shí)，瀏覽器就把請(qǐng)求的網(wǎng)址和該Cookie一同提交給服務(wù)器。服務(wù)器檢查該Cookie，用來(lái)辨認(rèn)用戶(hù)狀態(tài)。三、實(shí)踐過(guò)程1.需求分析根據(jù)市場(chǎng)調(diào)研分析用戶(hù)的需求，根據(jù)實(shí)際需求設(shè)計(jì)訂票系統(tǒng)的功能。實(shí)現(xiàn)網(wǎng)上訂票的方便性、快捷性、完善性，并劃分系統(tǒng)的邏輯功能模塊。這次我們?cè)O(shè)計(jì)的12306系統(tǒng)中火車(chē)票的購(gòu)買(mǎi)是通過(guò)網(wǎng)絡(luò)購(gòu)買(mǎi)。其中列車(chē)時(shí)刻表的設(shè)定比較復(fù)雜，它涉及到起始站、終點(diǎn)站、途經(jīng)站和到達(dá)各站的時(shí)間，因此管理員系統(tǒng)要滿(mǎn)足以下需求：（1）乘客輸入所在城市、將要去往的城市和出行時(shí)間，即可查詢(xún)當(dāng)天所有相應(yīng)的車(chē)次信息，從而根據(jù)自己的時(shí)間來(lái)選擇自己想要乘車(chē)的車(chē)次；（2）通過(guò)查詢(xún)來(lái)查看服務(wù)相關(guān)信息，管理員可以對(duì)用戶(hù)進(jìn)行設(shè)置以及添加與修改用戶(hù)信息；（3）對(duì)用戶(hù)訂票信息的辦理。網(wǎng)絡(luò)車(chē)票訂購(gòu)系統(tǒng)的目標(biāo)是為了讓客戶(hù)能簡(jiǎn)單高效的購(gòu)到一張自己各方面都會(huì)滿(mǎn)意的車(chē)票，其中車(chē)票的信息包括出發(fā)/到達(dá)時(shí)間、票額、座位、出發(fā)地/目的地等。因此，本設(shè)計(jì)要實(shí)現(xiàn)以下設(shè)計(jì)目標(biāo)：（1）所有旅客必須首先注冊(cè)會(huì)員，以便于系統(tǒng)管理；（2）提供會(huì)員注冊(cè)、登錄、修改注冊(cè)信息等功能；（3）建立車(chē)次信息查詢(xún)模塊，可以通過(guò)所在城市、將要去往的城市和出行時(shí)間查詢(xún)所需車(chē)次的詳細(xì)信息；（4）選擇出發(fā)日期與車(chē)次，當(dāng)日期與車(chē)次信息確定時(shí)，相關(guān)信息可自動(dòng)呈現(xiàn)給客戶(hù)以供選擇，避免不實(shí)信息對(duì)客戶(hù)的影響，并輸入訂購(gòu)票券的張數(shù)；生成取票號(hào)碼，系統(tǒng)為每-張訂單生成一一個(gè)唯一的交易代碼，用戶(hù)通過(guò)交易代碼到聯(lián)網(wǎng)票點(diǎn)取票；（5）交易尚未結(jié)束(未取票)的訂票記錄可以采取網(wǎng)上退訂等功能，取得實(shí)物車(chē)票的客戶(hù)可以持己購(gòu)票券車(chē)站退換。本系統(tǒng)分為面對(duì)客戶(hù)，面對(duì)管理員兩個(gè)子系統(tǒng)：面對(duì)客戶(hù)子系統(tǒng)主要是在Internet上接受來(lái)自客戶(hù)訪(fǎng)問(wèn)，進(jìn)行車(chē)票查詢(xún)與訂購(gòu)的前臺(tái)銷(xiāo)售系統(tǒng)：面對(duì)管理員子系統(tǒng)則是在Internet內(nèi)部用于網(wǎng)站的管理員管理客戶(hù)訂票信息：車(chē)票信息的后臺(tái)管理系統(tǒng)。2.建立數(shù)據(jù)庫(kù)（1）數(shù)據(jù)流圖SEQ圖\*ARABIC1車(chē)票圖SEQ圖\*ARABIC2車(chē)廂圖SEQ圖\*ARABIC3訂單圖SEQ圖\*ARABIC4列車(chē)圖SEQ圖\*ARABIC5票價(jià)圖SEQ圖\*ARABIC6剩余車(chē)票圖SEQ圖\*ARABIC7停車(chē)時(shí)間圖SEQ圖\*ARABIC8用戶(hù)信息圖SEQ圖\*ARABIC9座位信息（2）查詢(xún)與視圖圖SEQ圖\*ARABIC10設(shè)計(jì)訂單視圖圖SEQ圖\*ARABIC11查詢(xún)某輛列車(chē)途徑車(chē)站視圖圖SEQ圖\*ARABIC12查詢(xún)某輛列車(chē)未支付的用戶(hù)信息圖SEQ圖\*ARABIC13查詢(xún)一輛車(chē)的已訂的人數(shù)圖SEQ圖\*ARABIC14根據(jù)車(chē)次查詢(xún)車(chē)票圖SEQ圖\*ARABIC15出發(fā)站終點(diǎn)站乘車(chē)時(shí)間查詢(xún)剩余票數(shù)2.前端頁(yè)面設(shè)計(jì)（1）主頁(yè)面圖SEQ圖\*ARABIC16主頁(yè)面（2）登錄頁(yè)面圖SEQ圖\*ARABIC17登錄頁(yè)面（3）所有用戶(hù)管理圖SEQ圖\*ARABIC18所有用戶(hù)管理（4）新增用戶(hù)管理圖SEQ圖\*ARABIC19新增用戶(hù)管理3.后端邏輯接口與實(shí)現(xiàn)類(lèi)圖SEQ圖\*ARABIC20存儲(chǔ)省份城市信息圖SEQ圖\*ARABIC21獲取省份城市按鈕圖SEQ圖\*ARABIC22獲取注冊(cè)按鈕圖SEQ圖\*ARABIC23檢驗(yàn)身份證信息圖SEQ圖\*ARABIC24設(shè)置顏色四、實(shí)踐體會(huì)通過(guò)這次12306項(xiàng)目實(shí)踐活動(dòng)激發(fā)學(xué)習(xí)興趣，小組成員之間通力合作，根據(jù)個(gè)人的興趣安排不同的部分，充分調(diào)動(dòng)了我們學(xué)習(xí)的興趣，覺(jué)得編程也是很有趣的，所以大家就愿意去想、去動(dòng)手、去跟同組的小伙伴商量交流，并且運(yùn)用網(wǎng)絡(luò)資源尋找答案，或?qū)で罄蠋煹闹笇?dǎo)，然后大家一起完成了本次實(shí)踐內(nèi)容。經(jīng)過(guò)這次實(shí)踐活動(dòng)，我感受到了小組合作的好處，通過(guò)組內(nèi)分工，細(xì)化每個(gè)人負(fù)責(zé)的部分，只要干好各自分配的內(nèi)容，然后再把數(shù)據(jù)庫(kù)、前段頁(yè)面和后端邏輯接口與實(shí)現(xiàn)鏈接在一起，就可以完成本次項(xiàng)目。因?yàn)槊總€(gè)人只需要負(fù)責(zé)一小部分，不需要負(fù)責(zé)很多，使整個(gè)項(xiàng)目的效率大大提高，還能鍛煉團(tuán)隊(duì)協(xié)作能力。本次12306項(xiàng)目實(shí)踐，我負(fù)責(zé)的是前端頁(yè)面設(shè)計(jì)，在整個(gè)網(wǎng)頁(yè)制作的過(guò)程，我學(xué)會(huì)了很多知識(shí)。在設(shè)計(jì)網(wǎng)頁(yè)的這幾天里，我雖然也才接觸前端網(wǎng)頁(yè)設(shè)計(jì)不久，但是我利用這次做12306網(wǎng)頁(yè)設(shè)計(jì)的機(jī)會(huì)，再次好好復(fù)習(xí)了之前老師教過(guò)的基礎(chǔ)標(biāo)記，努力將這些知識(shí)能牢牢記住并掌握，不辜負(fù)這幾天老師辛辛苦苦的教學(xué)。做好12306的頁(yè)面不是一件容易的事，頁(yè)面內(nèi)容包括好幾個(gè)部分，每個(gè)部分都不是那么容易就能做好的，我們要找好12306網(wǎng)對(duì)應(yīng)的圖片并對(duì)圖片進(jìn)行處理，要對(duì)頁(yè)面每個(gè)部分的內(nèi)容進(jìn)行整理和排版處理，還要顧及背景和整套網(wǎng)頁(yè)的色調(diào)是否合適等，就頁(yè)面排版處理我就費(fèi)了好大的功夫，因?yàn)槲覍?duì)圖片的尺寸、位置的數(shù)據(jù)不是很敏感，我在進(jìn)行排版時(shí)是一邊設(shè)置數(shù)據(jù)，一