PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版） 課件全套 牟奇春 項(xiàng)目1-14 會(huì)員管理系統(tǒng) - Laravel中的表單驗(yàn)證、數(shù)據(jù)庫操作

牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）項(xiàng)目1會(huì)員管理系統(tǒng)任務(wù)1準(zhǔn)備開發(fā)環(huán)境和編程環(huán)境子任務(wù)1.1配置PHP開發(fā)環(huán)境【知識(shí)儲(chǔ)備】

PHP（PageHypertextPreprocessor）即“頁面超文本預(yù)處理器”，是在服務(wù)器端執(zhí)行的腳本語言，尤其適用于Web開發(fā)，并可嵌入超文本標(biāo)記語言（HypertextMarkupLanguage，HTML）中。PHP的語法是在學(xué)習(xí)了C語言、吸納了Java和Perl等多種語言特色的基礎(chǔ)之上發(fā)展而來的，并根據(jù)它們的長項(xiàng)，如Java的面向?qū)ο缶幊?，持續(xù)提升自己。當(dāng)初創(chuàng)建PHP語言的主要目標(biāo)是讓開發(fā)人員快速編寫出優(yōu)質(zhì)的網(wǎng)站。PHP同時(shí)支持面向?qū)ο蠛兔嫦蜻^程的開發(fā)，使用非常靈活。

PHP是一種在服務(wù)器端執(zhí)行的Web應(yīng)用程序腳本語言，其開發(fā)環(huán)境主要包括PHP解釋器、Web服務(wù)器、數(shù)據(jù)庫服務(wù)器及編輯器。PHP支持Windows和Linux等多種操作系統(tǒng)。PHP典型開發(fā)環(huán)境配置為Windows+Apache+MySQL+PHP（簡稱WAMP），而Linux系統(tǒng)下的配置為Linux+Apache+MySQL+PHP（簡稱LAMP）。

Apache（音譯為阿帕奇）可以運(yùn)行在幾乎所有廣泛使用的計(jì)算機(jī)平臺(tái)上，由于其具有支持跨平臺(tái)和安全性高的優(yōu)點(diǎn)而被廣泛使用，是最流行的Web服務(wù)器端軟件之一。它快速、可靠并且可通過簡單的應(yīng)用程序接口（ApplicationProgramInterface，API）擴(kuò)充，將Perl、Python等的解釋器編譯到服務(wù)器中。

MySQL是一個(gè)關(guān)系數(shù)據(jù)庫管理系統(tǒng)（RelationalDatabaseManagementSystem，RDBMS），由瑞典MySQLAB公司開發(fā)，屬于Oracle旗下產(chǎn)品。MySQL是最流行的關(guān)系數(shù)據(jù)庫管理系統(tǒng)之一，在Web應(yīng)用方面，MySQL是最好的關(guān)系數(shù)據(jù)庫管理系統(tǒng)應(yīng)用軟件之一。

采用PHP語言編寫完成的程序，其擴(kuò)展名是.php，這種文件是不能直接在瀏覽器中運(yùn)行的，需要通過配置服務(wù)器環(huán)境的方式來運(yùn)行。因此，在運(yùn)行PHP文件之前，必須配置PHP開發(fā)環(huán)境，以及服務(wù)器環(huán)境。

【任務(wù)實(shí)施】1.1.1安裝小皮面板

小皮面板是PhpStudy的簡稱，其官網(wǎng)提供了Linux和Windows兩種版本，進(jìn)入小皮面板的官網(wǎng)后，根據(jù)自己的環(huán)境選擇下載相應(yīng)的版本即可。

安裝完成后，打開安裝好的小皮面板，界面如圖1.1.1所示。圖1.1.1

安裝好小皮面板打開后的界面1.1.2配置小皮面板

進(jìn)入小皮面板后，默認(rèn)處于“首頁”，在右邊的“套件”欄中單擊“Apache2.4.39”后面的“啟動(dòng)”按鈕，以啟動(dòng)ApacheWeb服務(wù)，單擊“MySQL5.7.26”后面的“啟動(dòng)”按鈕，以啟動(dòng)MySQL數(shù)據(jù)庫環(huán)境。如果系統(tǒng)沒有沖突，則在正常情況下，這兩個(gè)軟件將會(huì)成功啟動(dòng)，如圖1.1.2所示。MySQL5.7.26是默認(rèn)的版本，如果需要使用MySQL8或其他版本，則只需要在左側(cè)單擊“軟件管理”，然后安裝其他版本的數(shù)據(jù)庫即可，如圖1.1.3所示。圖1.1.2

成功啟動(dòng)PHP運(yùn)行環(huán)境圖1.1.3

在軟件管理中安裝不同版本的數(shù)據(jù)庫

在窗口左側(cè)單擊“網(wǎng)站”，彈出一個(gè)對話框，可以在此配置網(wǎng)站，如圖1.1.4所示。在“域名”文本框中可輸入自定義的域名，如test。在“根目錄”下選擇PHP程序所在的文件夾，根據(jù)需要，可以切換PHP版本（安裝小皮面板以后，默認(rèn)使用PHP7，如果要使用其他版本的PHP，則切換至“軟件管理”），然后在PHP的相關(guān)版本選項(xiàng)中選擇所需版本進(jìn)行安裝，如圖1.1.5所示。

圖1.1.4

配置網(wǎng)站

圖1.1.5

安裝不同版本的PHP

網(wǎng)站配置成功后，即可在瀏覽器中輸入自定義的域名訪問網(wǎng)站。

如果要使用MySQL數(shù)據(jù)庫，則切換至“數(shù)據(jù)庫”面板，在其中可以創(chuàng)建新的數(shù)據(jù)庫。系統(tǒng)默認(rèn)的數(shù)據(jù)庫管理員用戶名是root，要修改此用戶對應(yīng)的密碼，可以單擊右邊的“操作”→“修改密碼”，如圖1.1.6所示。圖1.1.6

修改數(shù)據(jù)庫管理員的密碼子任務(wù)1.2使用PHP編程環(huán)境【知識(shí)儲(chǔ)備】

PhpStorm是JetBrains公司開發(fā)的一款商業(yè)化的PHP集成開發(fā)工具，其主要特色如下。（1）提供智能代碼輔助功能。PhpStorm是一個(gè)能夠真正“解析”所寫代碼的PHPIDE。它支持PHP5.3～PHP8.1，可以提供實(shí)時(shí)錯(cuò)誤預(yù)防、最佳自動(dòng)補(bǔ)全與代碼重構(gòu)、零配置調(diào)試等功能，以及擴(kuò)展的HTML、CSS和JavaScript編輯器。在處理大型項(xiàng)目時(shí)，PhpStorm可以顯著提高編碼效率，并節(jié)省時(shí)間。（2）提供調(diào)試、測試和性能分析功能。PhpStorm為調(diào)試、測試和分析應(yīng)用程序提供了強(qiáng)大的內(nèi)置工具。PhpStorm提供多個(gè)選項(xiàng)，可以利用可視化調(diào)試器調(diào)試PHP代碼。（3）PhpStorm包含WebStorm以及與HTML、串聯(lián)樣式表（CascadingStyleSheets，CSS）和JavaScript有關(guān)的所有功能。它支持所有尖端的Web開發(fā)技術(shù)，包括HTML5、CSS、Sass、Scss、Less、CoffeeScript、ECMAScriptHarmony和Jade模板等。（4）PhpStorm建立在開源的IntelliJIDEA平臺(tái)之上，產(chǎn)品自發(fā)布以來，JetBrains公司一直在不斷發(fā)展和完善這個(gè)平臺(tái)?！救蝿?wù)實(shí)施】1.2.1PhpStorm的安裝和啟動(dòng)

單擊“Open”按鈕，打開PHP文件進(jìn)行編輯。單擊“CreateNewProject”按鈕可以開始創(chuàng)建新的項(xiàng)目。需要注意的是，一般情況下都需要按照項(xiàng)目的形式來編輯文件，而不要單獨(dú)打開一個(gè)文件來進(jìn)行編輯。也就是說，應(yīng)該在PhpStorm中打開（Open）項(xiàng)目所在的根目錄，然后在PhpStorm中編輯某個(gè)文件，而不要直接打開一個(gè)具體的文件來進(jìn)行編輯。圖1.2.1

PhpStorm軟件啟動(dòng)界面1.2.2在小皮面板中配置網(wǎng)站

圖1.2.2

創(chuàng)建網(wǎng)站

圖1.2.3

打開剛創(chuàng)建的網(wǎng)站1.2.3在PhpStorm中編輯文件和配置服務(wù)器環(huán)境（1）在PhpStorm中打開E:\test目錄，如圖1.2.4所示。此時(shí)，左邊的“Project”自動(dòng)顯示test，這就是當(dāng)前項(xiàng)目的根目錄。選中test再單擊鼠標(biāo)右鍵，選擇“New”→“PHPFile”命令，如圖1.2.5所示，可以創(chuàng)建一個(gè)新的PHP文件，將文件命名為index.php。

圖1.2.4

在PhpStorm中打開E:\test目錄

圖1.2.5在E:\test目錄中創(chuàng)建index.php文件

創(chuàng)建好PHP文件后，系統(tǒng)自動(dòng)打開此文件。在右邊的編輯窗口中輸入圖1.2.6所示的內(nèi)容。圖1.2.6

在index.php中輸入內(nèi)容（2）接下來配置服務(wù)器環(huán)境。選擇“File”→“Settings”→

“Build,Execution,Deployment”→“Deployment”命令，在右邊面板中單擊“+”，再單擊“Inplace”，就創(chuàng)建了一個(gè)新的服務(wù)器，如圖1.2.7所示。在彈出的對話框的“Newservername”文本框中給新建的服務(wù)器取一個(gè)名字，如test，然后在右邊的“WebserverURL”文本框中輸入“http://test”即可，如圖1.2.8所示。圖1.2.7

創(chuàng)建新的服務(wù)器

圖1.2.8設(shè)置服務(wù)器URL根路徑（3）配置好服務(wù)器后，要運(yùn)行文件查看效果時(shí)，只需將鼠標(biāo)指針移至編輯窗口右邊的瀏覽器圖標(biāo)并單擊即可，如圖1.2.9所示。單擊Chrome瀏覽器圖標(biāo)后，系統(tǒng)打開Chrome瀏覽器，并自動(dòng)打開index.php文件進(jìn)行顯示，如圖1.2.10所示。圖1.2.9

運(yùn)行程序圖1.2.10

程序運(yùn)行結(jié)果【素養(yǎng)小貼士】

我國對知識(shí)產(chǎn)權(quán)保護(hù)的立場是非常堅(jiān)定的。知識(shí)產(chǎn)權(quán)保護(hù)的相關(guān)法律規(guī)定有很多，已經(jīng)形成了比較完整的體系，包括《中華人民共和國商標(biāo)法》《中華人民共和國專利法》《中華人民共和國著作權(quán)法》《中華人民共和國反不正當(dāng)競爭法》及一些條例解釋等。

一旦侵犯知識(shí)產(chǎn)權(quán)，根據(jù)具體的情況，可能需要承擔(dān)一定的民事、刑事責(zé)任，或會(huì)受到行政處罰。因此，我們應(yīng)該積極抵制盜版軟件，維護(hù)知識(shí)產(chǎn)權(quán)，堅(jiān)持購買和使用正版書刊、音像制品、電腦軟件，并主動(dòng)勸親友不購買、不使用盜版制品，不閱讀、不傳播盜版讀物。如果發(fā)現(xiàn)有制作、販賣盜版制品和其他侵犯商標(biāo)權(quán)、著作權(quán)的行為，應(yīng)該積極舉報(bào)?！救蝿?wù)小結(jié)】

在任務(wù)1中，我們主要學(xué)習(xí)了PHP開發(fā)環(huán)境的配置和PHP編程環(huán)境的使用。

我們以小皮面板為例，學(xué)習(xí)了如何配置PHP開發(fā)環(huán)境。小皮面板簡單易用，使用靈活，幾乎可以滿足我們在程序開發(fā)中的所有要求。在生產(chǎn)環(huán)境中也可以使用小皮面板來部署環(huán)境。因此，掌握小皮面板的使用方法非常重要。學(xué)會(huì)使用小皮面板，再使用其他常用的PHP開發(fā)環(huán)境，也是一件比較簡單的事情。

PhpStorm是一個(gè)非常優(yōu)秀的PHPIDE，其優(yōu)勢非常明顯，但軟件本身的使用配置略顯復(fù)雜，大家可以通過網(wǎng)絡(luò)查詢其使用技巧。另外，軟件本身是英文版的，如果同學(xué)們使用起來覺得不太方便，則可以選擇“File”→“Settings”→“Plugins”命令，在其中安裝中文語言包，這樣，整個(gè)軟件就變成中文版了。牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）任務(wù)2項(xiàng)目前端開發(fā)子任務(wù)2.1項(xiàng)目開發(fā)前的準(zhǔn)備工作【任務(wù)提出】

要制作項(xiàng)目，首先需要進(jìn)行需求分析。小王同學(xué)計(jì)劃制作的第一個(gè)項(xiàng)目是“會(huì)員管理系統(tǒng)”。會(huì)員管理系統(tǒng)是大多數(shù)項(xiàng)目的必備模塊，完成這個(gè)項(xiàng)目對其他項(xiàng)目的完成將有極大的幫助?！救蝿?wù)實(shí)施】2.1.1項(xiàng)目需求設(shè)定

圖2.1.1～圖2.1.4所示為小王同學(xué)設(shè)計(jì)的會(huì)員管理系統(tǒng)的運(yùn)行頁面。圖2.1.1

會(huì)員注冊頁面圖2.1.2

會(huì)員登錄頁面圖2.1.3

管理員頁面圖2.1.4

會(huì)員資料修改頁面2.1.2PHP的發(fā)展歷史

PHP繼承自一個(gè)名叫PHP/FI的工程。PHP/FI最早于1994年由拉斯姆斯·勒多夫（RasmusLerdorf）創(chuàng)建，最初只是一套簡單的Perl腳本，用來跟蹤訪問他主頁的人們的信息。到1996年發(fā)展為PHP/FI2.0，也就是它用C語言實(shí)現(xiàn)的第二版，在全世界已經(jīng)有幾千個(gè)用戶（估計(jì)）和大約50,000個(gè)域名安裝，大約是Internet所有域名的1%。

PHP/FI2.0在經(jīng)歷數(shù)個(gè)Beta版本的發(fā)布后，于1997年11月發(fā)布了官方正式版本。隨著PHP3.0的第一個(gè)Alpha版本的發(fā)布，PHP逐漸走向了成功。

1998年的冬天，PHP3.0官方正式版本發(fā)布不久，安迪·古特曼斯（AndiGutmans）和澤弗·蘇拉斯凱（ZeevSuraski）開始重新編寫PHP代碼。。新的引擎被稱為“ZendEngine”（這是Zeev和Andi的縮寫），成功地實(shí)現(xiàn)了這些設(shè)計(jì)目標(biāo)，并在1999年中期首次引入PHP?；谠撘娌⒔Y(jié)合了更多新功能的PHP4.0，在PHP3.0發(fā)布一年多后，于2000年5月發(fā)布了官方正式版本。

PHP5.0在長時(shí)間的開發(fā)及發(fā)布了多個(gè)預(yù)發(fā)布版本后，于2004年7月發(fā)布官方正式版本。它的核心是ZendEngine2代，引入了新的對象模型和大量新功能。

2015年12月3日，PHP7.0問世了，這是PHP的一次飛躍。PHP7.0修復(fù)了大量的bug，新增了大量功能和語法糖。這些改動(dòng)涉及核心包、GD庫、PDO、ZIP、ZLIB等人們熟悉和不熟悉的核心功能與擴(kuò)展包。

PHP7.0移除了已經(jīng)被廢棄的函數(shù)，如“MySQL_”系列函數(shù)。PHP7.0的性能高于HHVM[HipHopVirtualMachine，全稱為HipHop虛擬機(jī)，會(huì)將PHP代碼轉(zhuǎn)換成高級別的字節(jié)碼，通常稱為中間語言。在運(yùn)行時(shí)，HHVM通過即時(shí)編譯器將字節(jié)碼轉(zhuǎn)換為x64的機(jī)器碼。在這些方面，HHVM十分類似于C#的公共語言運(yùn)行時(shí)（CommonLanguageRuntime，CLR）和Java的Java虛擬機(jī)（JavaVirtualMachine，JVM）]，并且是PHP5.6性能的兩倍。

2020年11月26日，PHP官方發(fā)布了PHP8.0的官方正式版本。子任務(wù)2.2創(chuàng)建首頁【任務(wù)實(shí)施】2.2.1創(chuàng)建項(xiàng)目

各項(xiàng)準(zhǔn)備工作就緒，小王同學(xué)要正式開始第一個(gè)項(xiàng)目的制作了。（1）在磁盤中創(chuàng)建一個(gè)目錄，名為member，如E:\member。（2）在小皮面板中配置一個(gè)網(wǎng)站，域名為“member”，如圖2.2.1所示。（3）打開PhpStorm，在啟動(dòng)界面中選擇“Open”，打開E:\member目錄，如圖2.2.2所示。（4）選中項(xiàng)目根目錄member并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“New”→“PHPFile”命令，創(chuàng)建index.php文件。成功創(chuàng)建文件后，系統(tǒng)會(huì)自動(dòng)打開此文件。在打開的文件中刪除文件中默認(rèn)的代碼，然后在文件中輸入“html:5”，再按“Tab”鍵，系統(tǒng)會(huì)自動(dòng)創(chuàng)建HTML5格式文檔基礎(chǔ)標(biāo)簽代碼（這是PhpStorm中的鍵盤快捷方式，類似的操作還有很多，可以通過網(wǎng)絡(luò)查詢，了解更多快捷方式）。圖2.2.1

配置網(wǎng)站域名圖2.2.2

使用PhpStorm打開項(xiàng)目（5）將title修改為“會(huì)員管理系統(tǒng)”，然后在頁面中創(chuàng)建1個(gè)標(biāo)題和5個(gè)導(dǎo)航菜單項(xiàng)，并添加相應(yīng)的CSS樣式。圖2.2.3

預(yù)覽項(xiàng)目首頁效果2.2.2部署項(xiàng)目

在PhpStorm中選擇“File”→“Settings”→“Build,

Execution,Deployment”→“Deployment”命令，如圖2.2.4所示。圖2.2.4

在PhpStorm中部署項(xiàng)目

在右邊單擊“+”，選擇“Inplace”命令，然后在彈出的對話框的“Newservername”文本框中輸入服務(wù)器的名字，這個(gè)名字可以自定義，小王同學(xué)就直接輸入member，如圖2.2.5所示。圖2.2.5

創(chuàng)建服務(wù)器

創(chuàng)建好服務(wù)器后，在右側(cè)的“WebserverURL”文本框中輸入在小皮面板中創(chuàng)建好的域名即可，如圖2.2.6所示。圖2.2.6

設(shè)置服務(wù)器URL根路徑子任務(wù)2.3制作注冊頁面前端部分【任務(wù)實(shí)施】2.3.1創(chuàng)建文件

在創(chuàng)建注冊頁面時(shí)，可以參考首頁文件中的部分內(nèi)容，特別是導(dǎo)航欄部分。（1）選中index.php文件并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Copy”→“Copy”命令。（2）選中member目錄并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Paste”命令。（3）在彈出的對話框中輸入新的文件名“signup.php”。（4）單擊“Refactor”按鈕，即可生成signup.php文件，如圖2.3.1所示。圖2.3.1

復(fù)制文件（5）將首頁中的導(dǎo)航欄代碼復(fù)制到signup.php文件中。由于在首頁中創(chuàng)建的導(dǎo)航鏈接在注冊頁面中也需要，相當(dāng)于其是一個(gè)公共部分，因此，這里采用了復(fù)制的方式來創(chuàng)建注冊頁面。復(fù)制代碼后，需要修改導(dǎo)航欄中當(dāng)前欄目的代碼，將“首頁”鏈接上的current樣式刪除，然后在“會(huì)員注冊”鏈接上添加current樣式。2.3.2制作注冊頁面表單

需要注意的是，在制作表單時(shí)，需要在“<form>”標(biāo)簽中設(shè)置“action”屬性，表示單擊“提交”按鈕后，將各項(xiàng)數(shù)據(jù)發(fā)送至對應(yīng)的網(wǎng)頁文件進(jìn)行處理。小王同學(xué)在這里設(shè)置的action屬性值是postReg.php，表示單擊“提交”按鈕后，會(huì)將用戶填寫的各項(xiàng)數(shù)據(jù)發(fā)送至此文件進(jìn)行下一步處理?！癿ethod”屬性指定了提交文件的方式，可以設(shè)置為“GET”和“POST”兩種方式。

2.3.3設(shè)置表單控件name屬性

對于表單中的控件而言，每一個(gè)控件都需要設(shè)置一個(gè)“name”屬性，這個(gè)屬性用于后端文件讀取其數(shù)據(jù)。其中每一組單選按鈕和每一組復(fù)選框的“name”屬性應(yīng)該保持一致。對于單選按鈕、復(fù)選框、下拉列表框等不能由用戶手動(dòng)輸入結(jié)果的控件，還需要設(shè)置“value”屬性，這個(gè)屬性的值就是后端文件最終讀取到的值。特別注意，由于復(fù)選框可以選多個(gè)值，因此，其“name”屬性要在正常的名字后面添加一對方括號，表示其類型是一個(gè)數(shù)組，這樣才能讀取到多個(gè)選項(xiàng)的值?！局R(shí)儲(chǔ)備】

小王同學(xué)在學(xué)習(xí)靜態(tài)網(wǎng)站開發(fā)課程時(shí)，沒有注意過表單提交的方式。現(xiàn)在使用PhpStorm創(chuàng)建了表單，在添加“method”屬性時(shí)，看到了有兩種不同的表單提交方式，分別是“GET”和“POST”。那么這兩種提交方式到底有什么區(qū)別呢？通過查詢相關(guān)資料，他了解了這兩種方式的區(qū)別。（1）GET提交的數(shù)據(jù)會(huì)放在URL之后，以“？”分隔URL和傳輸數(shù)據(jù)，參數(shù)之間用“&”相連，如

EditPosts.php?name=boKeYuan&id=123456；POST提交的數(shù)據(jù)會(huì)放在HTTP包的Body中。（2）GET提交的數(shù)據(jù)長度有限制（注意：HTTPGET方法提交的數(shù)據(jù)長度并沒有限制，HTTP規(guī)范沒有對URL長度進(jìn)行限制，這個(gè)限制是指特定的瀏覽器及服務(wù)器對它的限制）；POST提交的數(shù)據(jù)長度沒有限制。（3）對參數(shù)的數(shù)據(jù)類型要求不同，GET只接收美國信息交換標(biāo)準(zhǔn)代碼（AmericanStandardCodeforInformationInterchange，ASCII）；而POST沒有限制。（4）GET請求參數(shù)會(huì)被完整保留在瀏覽器歷史記錄里；而POST請求參數(shù)不會(huì)保留。（5）POST比GET更安全，因?yàn)閰?shù)直接暴露在URL上，所以不能用來傳遞敏感信息?！救蝿?wù)小結(jié)】

在任務(wù)2中，小王同學(xué)主要完成了首頁和注冊頁面前端的制作。這些內(nèi)容沒有難度，主要是鞏固了上學(xué)期靜態(tài)網(wǎng)站開發(fā)課程的相關(guān)知識(shí)，同時(shí)，結(jié)合本項(xiàng)目的需求進(jìn)行程序編寫。這里的重點(diǎn)是理解表單的兩種不同提交方式的區(qū)別，以及表單屬性的設(shè)置，特別是“name”屬性和“value”屬性的設(shè)置。牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）任務(wù)3會(huì)員管理系統(tǒng)用戶注冊子任務(wù)3.1獲取表單數(shù)據(jù)【任務(wù)實(shí)施】3.1.1從后端獲取前端表單數(shù)據(jù)

如果前端使用“GET”方式提交數(shù)據(jù)，則使用“$_GET”；如果前端使用“POST”方式提交數(shù)據(jù)，則使用“$_POST”。當(dāng)然，也可以使用“$_REQUEST”全局?jǐn)?shù)組來讀取前端表單提交的數(shù)據(jù)，這種方式就不區(qū)分GET和POST了，均可以讀取前端表單提交的數(shù)據(jù)。圖3.1.1

后端文件讀取前端表單數(shù)據(jù)3.1.2書寫PHP代碼

PHP代碼必須放在一對特殊的標(biāo)簽中，即以“<?php”開始，以“?>”結(jié)束。PHP代碼可以和HTML代碼混合書寫。若文件中包含PHP代碼，則文件名必須用“.php”作為擴(kuò)展名。因?yàn)镻HP文件可以輸出HTML內(nèi)容，而HTML文件卻不能包含PHP的相關(guān)內(nèi)容。其根源在于，HTML文件是瀏覽器可以直接解析的，而PHP文件是后端Apache等服務(wù)器調(diào)用PHP解釋器輸出的HTML內(nèi)容，瀏覽器并不能直接解析PHP文件及其內(nèi)容。3.1.3輸出數(shù)據(jù)子任務(wù)3.2創(chuàng)建數(shù)據(jù)庫和數(shù)據(jù)表【任務(wù)實(shí)施】3.2.1開啟數(shù)據(jù)庫服務(wù)

要使用數(shù)據(jù)庫必須先開啟數(shù)據(jù)庫服務(wù)，或者說必須先啟動(dòng)數(shù)據(jù)庫。小皮面板安裝好以后，即可支持創(chuàng)建MySQL數(shù)據(jù)庫。在小皮面板左側(cè)單擊“數(shù)據(jù)庫”，在其右側(cè)可以查看數(shù)據(jù)庫管理員的用戶名和密碼，如圖3.2.1所示。

單擊“+創(chuàng)建數(shù)據(jù)庫”按鈕，可以創(chuàng)建新的數(shù)據(jù)庫，并設(shè)置訪問的用戶名和密碼。管理員用戶名默認(rèn)是“root”，密碼也是“root”，此賬號可以訪問和管理當(dāng)前服務(wù)器中的所有數(shù)據(jù)庫，是最高權(quán)限的用戶。圖3.2.1

小皮面板數(shù)據(jù)庫管理3.2.2安裝可視化數(shù)據(jù)庫管理工具

小王同學(xué)在查詢資料時(shí)從網(wǎng)絡(luò)上看到，MySQL數(shù)據(jù)庫可以使用命令行方式來進(jìn)行相關(guān)操作。但這種方式對初學(xué)者極不友好，難度太大。

與命令行方式相對應(yīng)，還有一種可視化的操作方式，這種方式就好理解多了。在小皮面板中就可以安裝和使用可視化數(shù)據(jù)庫管理工具。

進(jìn)入“軟件管理”面板，單擊上方的“工具”→“數(shù)據(jù)庫工具(客戶端)”按鈕，可以安裝第三方工具軟件來管理MySQL數(shù)據(jù)庫，如圖3.2.2所示。圖3.2.2

數(shù)據(jù)庫工具(客戶端)

除了使用工具軟件來管理MySQL數(shù)據(jù)庫，更常見的是使用Web工具來管理數(shù)據(jù)庫，這樣更簡便。在上方工具欄中單擊“網(wǎng)站程序”→

“數(shù)據(jù)庫工具(web)”按鈕，可以看到有一個(gè)名為“phpMyAdmin4.8.5”的工具，如圖3.2.3所示，這是純網(wǎng)頁版的MySQL數(shù)據(jù)庫管理工具，單擊即可安裝。在安裝時(shí)，需要選擇安裝的位置，一般選擇安裝在默認(rèn)的localhost網(wǎng)站中。圖3.2.3

在軟件管理中安裝phpMyAdmin

安裝好phpMyAdmin以后，單擊“管理”按鈕，即可在網(wǎng)頁中打開phpMyAdmin，如圖3.2.4所示。圖3.2.4

在phpMyAdmin中管理數(shù)據(jù)庫3.2.3創(chuàng)建數(shù)據(jù)庫和數(shù)據(jù)表

圖3.2.4左側(cè)區(qū)域顯示的是系統(tǒng)中已經(jīng)有的數(shù)據(jù)庫。接下來，單擊左側(cè)的“新建”，然后在右側(cè)輸入數(shù)據(jù)庫的名稱“member”，并單擊“創(chuàng)建”按鈕，即可創(chuàng)建數(shù)據(jù)庫member。創(chuàng)建好的數(shù)據(jù)庫member如圖3.2.5所示。圖3.2.5

創(chuàng)建好的數(shù)據(jù)庫member

有了數(shù)據(jù)庫以后，接下來就要?jiǎng)?chuàng)建數(shù)據(jù)表“info”（會(huì)員信息表），并在“info”中創(chuàng)建7個(gè)數(shù)據(jù)字段，分別是“id”（id字段，用于唯一標(biāo)識(shí)一行數(shù)據(jù)）、“username”（用戶名）、“pw”（密碼）、“email”（郵箱）、“sex”（性別）、“fav”（愛好）、“createTime”（創(chuàng)建時(shí)間），如圖3.2.6所示。圖3.2.6

創(chuàng)建info數(shù)據(jù)表3.2.4數(shù)據(jù)表字段類型說明（1）id：在創(chuàng)建數(shù)據(jù)表字段時(shí)，每一張表都要求有一個(gè)id字段，這是表的主鍵，用于唯一標(biāo)識(shí)一行數(shù)據(jù)。其類型為INT，并勾選后面的“A_I”標(biāo)識(shí)列，將其設(shè)置成自增（AUTO_INCREMENT）字段。這個(gè)字段在以后使用的過程中，創(chuàng)建記錄時(shí)不需要提供值，系統(tǒng)會(huì)自動(dòng)按照順序從1開始，依次提供值。（2）username：VARCHAR類型，長度為50。這里要注意單位。在MySQL4.0及以下的版本中，這里的單位是字節(jié)。（3）pw：CHAR類型，長度為32。在數(shù)據(jù)庫中保存密碼時(shí)，不能直接保存明文，需要加密后保存為密文。一般可使用MD5方式進(jìn)行數(shù)據(jù)加密，常用的MD5加密數(shù)據(jù)是32字節(jié)的固定長度，因此，密碼字段選擇CHAR類型，長度固定為32字節(jié)。（4）email：VARCHAR類型，長度為256。（5）sex：TINYINT類型，長度為1。TINYINT也是INT的一種，TINYINT占用1字節(jié)。（6）fav：VARCHAR類型，長度為300。（7）createTime：INT類型，長度為10。創(chuàng)建時(shí)間，可以選擇DATETIME類型，也可以選擇INT類型。在DATETIME類型中，將直接保存“年月日時(shí)分秒”類型的時(shí)間。在INT類型中，保存的是時(shí)間戳。時(shí)間戳是一個(gè)10位的整型數(shù)據(jù)，具體是指格林尼治時(shí)間1970年01月01日00時(shí)00分00秒（北京時(shí)間1970年01月01日08時(shí)00分00秒）至現(xiàn)在的總秒數(shù)。子任務(wù)3.3將注冊信息寫入數(shù)據(jù)庫【任務(wù)實(shí)施】第一步是“連接數(shù)據(jù)庫服務(wù)器”第二步是“設(shè)置字符集”第三步是“設(shè)置SQL語句”第四步是“執(zhí)行SQL查詢語句”3.3.1連接數(shù)據(jù)庫服務(wù)器

上述代碼的第2行用于連接數(shù)據(jù)庫服務(wù)器。在PHP中，連接不同的數(shù)據(jù)庫服務(wù)器需要使用不同的連接函數(shù)。由于小王同學(xué)已經(jīng)確定了在會(huì)員管理系統(tǒng)中使用MySQL數(shù)據(jù)庫，因此，后面所有的內(nèi)容均以MySQL數(shù)據(jù)庫為例進(jìn)行編碼。在上面的代碼中，第2行使用了mysqli_connect()函數(shù)，該函數(shù)將打開一個(gè)到MySQL數(shù)據(jù)庫服務(wù)器的新連接，其語法規(guī)則為：mysqli_connect(host,username,password,dbname,port,socket);

該函數(shù)支持6個(gè)參數(shù)，參數(shù)詳情如表3.3.1所示。參數(shù)描述host可選。規(guī)定主機(jī)名或IP地址username可選。規(guī)定MySQL用戶名password可選。規(guī)定MySQL密碼dbname可選。規(guī)定默認(rèn)使用的數(shù)據(jù)庫port可選。規(guī)定嘗試連接到MySQL服務(wù)器的端口號socket可選。規(guī)定套接字（socket）文件表3.3.1

mysqli_connect()函數(shù)參數(shù)詳情

該函數(shù)的返回值是一個(gè)連接到MySQL服務(wù)器的對象，這里使用的是“$conn”。如果該函數(shù)執(zhí)行出錯(cuò)，則返回false。

在實(shí)際使用時(shí)，一般來說，主機(jī)名都使用“l(fā)ocalhost”，代表本地主機(jī)，也就是當(dāng)前運(yùn)行PHP文件的服務(wù)器。用戶名和密碼都使用的是“root”，這是默認(rèn)的最高權(quán)限的賬戶。第4個(gè)參數(shù)是默認(rèn)使用的數(shù)據(jù)庫，在這里使用的是“member”。最后兩個(gè)參數(shù)可以不用填寫，直接使用默認(rèn)值。

因?yàn)榇撕瘮?shù)執(zhí)行失敗會(huì)返回false，所以接下來在代碼的第3行中用if語句來判斷“$conn”的真假，如果返回值為false，則通過“!”取反，其結(jié)果會(huì)變成true，程序進(jìn)入if分支，會(huì)通過die()函數(shù)輸出錯(cuò)誤提示信息，即“連接數(shù)據(jù)庫服務(wù)器失敗”，同時(shí)，此函數(shù)會(huì)中止整個(gè)程序的運(yùn)行。3.3.2設(shè)置字符集

上述代碼的第7行用于設(shè)置字符集，使用到了PHP中的函數(shù)mysqli_query()，這個(gè)函數(shù)的作用是執(zhí)行針對數(shù)據(jù)庫的查詢，其語法規(guī)則如下。mysqli_query(connection,query,resultmode);

該函數(shù)的參數(shù)詳情如表3.3.2所示。參數(shù)描述connection必需。規(guī)定要使用的MySQL連接query必需。規(guī)定查詢字符串resultmode可選。一個(gè)常量，可以是下列值中的任意一個(gè)：（1）MYSQLI_USE_RESULT（如果需要檢索大量數(shù)據(jù)，則使用這個(gè)）；（2）MYSQLI_STORE_RESULT（默認(rèn)）表3.3.2

mysqli_query()函數(shù)參數(shù)詳情

針對成功的SELECT、SHOW、DESCRIBE或EXPLAIN查詢，該函數(shù)將返回一個(gè)mysqli_result對象。針對其他成功的查詢，將返回TRUE。如果失敗，則返回FALSE。

在上述代碼的第7行中，第一個(gè)參數(shù)是$conn，表示上面第一步生成的數(shù)據(jù)庫連接對象。第二個(gè)參數(shù)是“setnamesutf8”，表示將字符集設(shè)置成UTF-8，這個(gè)字符集要和數(shù)據(jù)庫的字符集保持一致，否則在顯示中文等特殊內(nèi)容時(shí)會(huì)出現(xiàn)亂碼。3.3.3設(shè)置SQL查詢語句

上述代碼的第9行使用結(jié)構(gòu)化查詢語言（StructuredQueryLanguage，SQL）設(shè)置了一個(gè)查詢語句。SQL是一種具有特殊目的的編程語言，是一種數(shù)據(jù)庫查詢和程序設(shè)計(jì)語言，用于存取數(shù)據(jù)，以及查詢、更新和管理關(guān)系數(shù)據(jù)庫系統(tǒng)。

在這里，小王同學(xué)使用INSERTINTO語句向數(shù)據(jù)表中插入新記錄。INSERTINTO語句有兩種編寫形式。

第一種形式無須指定要插入數(shù)據(jù)的列名，只需提供被插入的值。INSERTINTO

table_nameVALUES(value1,value2,value3,...);

第二種形式需要指定列名及被插入的值：INSERTINTO

table_name

(column1,column2,column3,...)VALUES(value1,value2,value3,...);3.3.4執(zhí)行SQL查詢語句

上述代碼的第11行用于執(zhí)行SQL查詢語句。執(zhí)行SQL查詢語句使用的還是mysqli_query()函數(shù)，其返回值是$result。如果系統(tǒng)成功執(zhí)行了給定的SQL語句，則$result將為真，否則為假。上述代碼的第12～第16行用于通過判斷$result的真假，彈出注冊成功或失敗的提示。

回到注冊頁面，輸入各項(xiàng)數(shù)據(jù)，如圖3.3.1所示。單擊“提交”按鈕，然后順利看到了“數(shù)據(jù)插入成功”的提示。接下來，如果進(jìn)入phpMyAdmin，重新刷新info數(shù)據(jù)表，就可以在其中看到新插入的一條數(shù)據(jù)記錄。圖3.3.1

輸入信息進(jìn)行會(huì)員注冊

在PHP程序中，如果執(zhí)行代碼時(shí)出現(xiàn)錯(cuò)誤，則會(huì)在頁面中根據(jù)錯(cuò)誤的級別進(jìn)行相應(yīng)的錯(cuò)誤提示。PHP中的典型錯(cuò)誤有以下幾種。（1）E_ERROR：這是一種致命的錯(cuò)誤，遇到這種錯(cuò)誤時(shí)，程序?qū)⑦M(jìn)行錯(cuò)誤提示，并終止腳本繼續(xù)運(yùn)行。（2）E_WARNING：這是一種非致命的錯(cuò)誤，遇到這種錯(cuò)誤時(shí)，程序?qū)⑦M(jìn)行錯(cuò)誤提示，但是不會(huì)終止腳本繼續(xù)運(yùn)行。（3）E_PARSE：這是一種腳本語法錯(cuò)誤，是級別最高的錯(cuò)誤。當(dāng)出現(xiàn)這種錯(cuò)誤時(shí)，整個(gè)腳本根本不會(huì)執(zhí)行。（4）E_NOTICE：這是一種運(yùn)行時(shí)通知消息，表示腳本遇到可能會(huì)表現(xiàn)為錯(cuò)誤的情況，但是在可以正常運(yùn)行的腳本中也可能會(huì)有類似的通知。

在上面將注冊信息寫入數(shù)據(jù)庫的代碼中，如果故意將mysqli_

connect()函數(shù)中的數(shù)據(jù)庫用戶名輸入錯(cuò)誤，則運(yùn)行程序時(shí)，在頁面中會(huì)顯示出錯(cuò)誤提示，如圖3.3.2所示。從這個(gè)提示來看，系統(tǒng)產(chǎn)生了一個(gè)警告（Warning）信息，提示用戶root訪問數(shù)據(jù)庫失敗。這時(shí)需要檢查數(shù)據(jù)庫用戶名和密碼是否正確。

重新修改為正確的密碼后，刷新瀏覽器，系統(tǒng)彈出“數(shù)據(jù)插入成功”的提示，如圖3.3.3所示。

圖3.3.2

會(huì)員注冊出錯(cuò)

圖3.3.3

會(huì)員注冊成功

此時(shí)，進(jìn)入數(shù)據(jù)庫，查看結(jié)果，可以看到新插入的一條數(shù)據(jù)記錄，如圖3.3.4所示。3.3.5項(xiàng)目階段性成果

圖3.3.4

新插入的數(shù)據(jù)記錄子任務(wù)3.4判斷用戶名是否被占用【任務(wù)實(shí)施】

由于每一個(gè)會(huì)員的用戶名是唯一的，就好比人的身份證號碼一樣，不能重復(fù)。因此，在插入新的記錄時(shí)，需要先判斷當(dāng)前用戶名是否在數(shù)據(jù)表中已經(jīng)存在。如果已經(jīng)存在，則應(yīng)該彈出提示，讓用戶重新輸入不同的用戶名。如果用戶名在數(shù)據(jù)表中不存在，則說明是一個(gè)全新的用戶名，可以直接寫入數(shù)據(jù)庫。3.4.1通過SQL語句判斷用戶名是否被占用

3.4.2使用SQL中的SELECT語句

參數(shù)描述result必需。規(guī)定由

mysqli_query()、mysqli_store_result()或

mysqli_use_result()返回的結(jié)果集標(biāo)識(shí)符表3.4.1

mysqli_num_rows()函數(shù)參數(shù)詳情

在PHP中，任何非零非空的值均表示true。因此，只要結(jié)果集中有記錄，$num就是一個(gè)大于0的數(shù)字，其結(jié)果為真，表示查詢到了此用戶名（當(dāng)然，根據(jù)info數(shù)據(jù)表的設(shè)計(jì)原則，如果找到了數(shù)據(jù)，則一定只能找到一條數(shù)據(jù)，也就是$num要么為0，要么為1）。如果查詢到了此用戶名，則通過echo函數(shù)顯示JavaScript彈窗提示該用戶名已經(jīng)被占用。參數(shù)描述string必需。規(guī)定要檢查的字符串表3.4.2

strlen()函數(shù)參數(shù)詳情

該函數(shù)如果執(zhí)行成功，則返回字符串的長度，如果字符串為空，則返回0。如果返回0，對于if條件語句而言，結(jié)果就是false，因此，用“！”運(yùn)算符取反就得到true。一旦用戶名為空，或者密碼為空，系統(tǒng)都會(huì)顯示彈窗。exit()函數(shù)可以輸出一條消息，并退出當(dāng)前腳本（中止當(dāng)前程序的執(zhí)行）。該函數(shù)是

die()

函數(shù)的別名。3.4.3在PhpStorm中配置數(shù)據(jù)源

注冊功能已經(jīng)完成了，可是，小王同學(xué)突然注意到，他在PhpStorm中所寫的SQL語句被標(biāo)記有黃色底紋。同時(shí)，把鼠標(biāo)指針移至底紋上，系統(tǒng)還出現(xiàn)了一些提示信息，如圖3.4.1所示。圖3.4.1

未配置數(shù)據(jù)源和SQLDialect的提示圖3.4.2

配置SQLDialect圖3.4.3

未配置數(shù)據(jù)源的提示

注意觀察，數(shù)據(jù)源配置界面下面有一個(gè)提示，即“missingdriverfiles”，表示系統(tǒng)缺少驅(qū)動(dòng)文件。單擊前面的“Download”，系統(tǒng)會(huì)自動(dòng)下載當(dāng)前驅(qū)動(dòng)程序。最后單擊“TestConnection”按鈕，測試是否能正常連接數(shù)據(jù)庫。由于PhpStorm的版本不同，此時(shí)可能會(huì)出現(xiàn)圖3.4.5所示的錯(cuò)誤提示信息。此信息表明當(dāng)前Web服務(wù)器時(shí)區(qū)配置錯(cuò)誤，單擊“Settimezone”，將默認(rèn)的UTC時(shí)區(qū)修改成PRC時(shí)區(qū)即可，如圖3.4.6所示。這個(gè)時(shí)區(qū)非常重要，關(guān)系到系統(tǒng)時(shí)間是否正確。圖3.4.4

配置數(shù)據(jù)源和驅(qū)動(dòng)圖3.4.5

服務(wù)器時(shí)區(qū)配置錯(cuò)誤圖3.4.6

配置服務(wù)器時(shí)區(qū)

配置好上述內(nèi)容后，在PhpStorm的右側(cè)出現(xiàn)一個(gè)Database標(biāo)簽，單擊可以展開，在其中可以看到當(dāng)前member數(shù)據(jù)庫的詳細(xì)情況，如圖3.4.7所示。圖3.4.7

配置好的數(shù)據(jù)源子任務(wù)3.5表單驗(yàn)證【任務(wù)實(shí)施】3.5.1重視數(shù)據(jù)驗(yàn)證

數(shù)據(jù)驗(yàn)證需要在前端和后端同時(shí)進(jìn)行，這樣做的目的是保證系統(tǒng)安全，以及減輕服務(wù)器的壓力。比如，用戶明明沒有填寫用戶名，還去單擊“提交”按鈕，這顯然是沒有意義的。如果在前端不進(jìn)行判斷和處理，那么這一次無效的交互仍然要占用服務(wù)器的資源。另外，本系統(tǒng)的后端主要是使用SQL語句和數(shù)據(jù)庫進(jìn)行交互，如果在前端不加以限制，則可能會(huì)輸入一些危險(xiǎn)字符，帶來SQL注入風(fēng)險(xiǎn)。3.5.2在前端驗(yàn)證表單數(shù)據(jù)

前端數(shù)據(jù)驗(yàn)證一般是使用JavaScript來進(jìn)行的。為了避免前端繞過數(shù)據(jù)驗(yàn)證，在后端接收到數(shù)據(jù)后，還需要再一次進(jìn)行數(shù)據(jù)驗(yàn)證。

在會(huì)員注冊表單中，需要驗(yàn)證的內(nèi)容如下。（1）用戶名。必填，內(nèi)容只能是大小寫字母、數(shù)字，長度為3～10個(gè)字符。（2）密碼。必填，內(nèi)容只能是大小寫字母、數(shù)字、“_”、“*”，長度為6～10個(gè)字符。（3）確認(rèn)密碼。必填，且必須和密碼保持一致。（4）信箱。格式必須正確，可以不填。（5）愛好?？梢圆贿x。

在單擊“提交”按鈕時(shí)，要攔截系統(tǒng)提交，即先驗(yàn)證數(shù)據(jù)，合格后再提交表單。只需要在<form>標(biāo)簽中添加一個(gè)onsubmit事件，即可實(shí)現(xiàn)提交攔截。3.5.3在前端驗(yàn)證數(shù)據(jù)

解讀一下小王同學(xué)寫的代碼。在代碼的第3行，document.

getElementsByName()讀取名字為“username”的元素，這樣就可以得到一個(gè)數(shù)組。但在整個(gè)注冊頁面中，只有一個(gè)username元素，因此，取此數(shù)組的第一個(gè)元素，然后讀取其value屬性，即可得到用戶輸入的用戶名，再使用“trim()”方法刪去其前后用戶可能不小心輸入的空格。3.5.4在后端驗(yàn)證表單數(shù)據(jù)

在前端完成了數(shù)據(jù)驗(yàn)證，為了提高安全性與可靠性，在后端也必須完成表單數(shù)據(jù)驗(yàn)證。

在前端使用JavaScript來完成表單驗(yàn)證，主要使用正則表達(dá)式來完成驗(yàn)證。在后端同樣可以使用正則表達(dá)式來完成驗(yàn)證，只是使用的方法有點(diǎn)不同。參數(shù)描述pattern要搜索的模式，為字符串形式subject輸入字符串matches如果提供了參數(shù)matches，則它將被填充為搜索結(jié)果。$matches[0]將包含完整模式匹配到的文本，$matches[1]將包含第一個(gè)捕獲子組匹配到的文本，以此類推flagsflags可以被設(shè)置為以下標(biāo)記值。PREG_OFFSET_CAPTURE:如果傳遞了這個(gè)標(biāo)記，則對于每一個(gè)出現(xiàn)的匹配返回時(shí)會(huì)附加字符串偏移量（相對于目標(biāo)字符串）offset通常，搜索從目標(biāo)字符串的開始位置開始?？蛇x參數(shù)offset用于指定從目標(biāo)字符串的某個(gè)位置開始搜索（單位是字節(jié)）表3.5.1

preg_match()函數(shù)參數(shù)詳情

作為計(jì)算機(jī)軟件從業(yè)人員，應(yīng)當(dāng)具備和遵守嚴(yán)格的職業(yè)道德規(guī)范，包括但不限于以下方面。（1）尊重客戶隱私。在工作中，不可避免地會(huì)接觸到客戶的各種信息。這些信息是客戶的隱私，僅限于工作過程中使用，不得泄露、傳播。（2）保護(hù)知識(shí)產(chǎn)權(quán)。在從事軟件開發(fā)的過程中，會(huì)涉及不同硬件、軟件的使用。這要求從業(yè)人員能夠保護(hù)知識(shí)產(chǎn)權(quán)，切不可侵權(quán)，否則要承擔(dān)相應(yīng)的法律責(zé)任。（3）培養(yǎng)誠信、守時(shí)的意識(shí)和習(xí)慣。在工作崗位中，要重視合同、協(xié)議和指定的責(zé)任，要按照規(guī)定的時(shí)間，認(rèn)真完成各項(xiàng)工作。【任務(wù)小結(jié)】

在任務(wù)3中，我們創(chuàng)建了數(shù)據(jù)庫，并完成了用戶注冊的功能。在用戶注冊時(shí)，還需要判斷用戶名是否重復(fù)。同時(shí)，為了保證數(shù)據(jù)的安全性和合法性，我們在前端和后端都進(jìn)行了數(shù)據(jù)驗(yàn)證，驗(yàn)證的方法主要是使用正則表達(dá)式。正則表達(dá)式本身也較為復(fù)雜，有很多的語法規(guī)則，大家如果想全面了解正則表達(dá)式的相關(guān)內(nèi)容，可以去網(wǎng)上查詢相關(guān)資料。牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）任務(wù)4會(huì)員管理系統(tǒng)用戶登錄、資料修改及注銷子任務(wù)4.1用戶登錄4.1.1創(chuàng)建用戶登錄文件

根據(jù)項(xiàng)目開始前完成的詳細(xì)需求分析，現(xiàn)在需要完成登錄頁面的制作。（1）選中member目錄并單擊鼠標(biāo)右鍵，在快捷菜單中選擇“New”

→“PHPFile”命令，創(chuàng)建新文件login.php。（2）打開signup.php文件，把其中的內(nèi)容復(fù)制到login.php中。因?yàn)榈卿涰撁婧妥皂撁娴撵o態(tài)內(nèi)容有一定的相似之處，所以可以直接把注冊頁面的內(nèi)容復(fù)制過來，然后進(jìn)行修改。（3）在login.php文件中修改導(dǎo)航欄中的當(dāng)前欄目，在“會(huì)員登錄”鏈接上添加class樣式“current”。在表單中只保留用戶名和密碼控件，刪除其他控件。同理，在JavaScript方法check()中只保留用戶名和密碼的相關(guān)驗(yàn)證內(nèi)容。（4）選中member目錄并單擊鼠標(biāo)右鍵，在快捷菜單中選擇“New”

→“PHPFile”命令，創(chuàng)建新文件postLogin.php。（5）在login.php文件中修改<form>標(biāo)簽中的action屬性，將其值改成postLogin.php即可。4.1.2制作用戶登錄后端文件

在SQL語句中，通過select關(guān)鍵字來實(shí)現(xiàn)查詢，通過where子句來實(shí)現(xiàn)數(shù)據(jù)記錄的篩選。篩選的依據(jù)是，判斷username這一列是否存在數(shù)據(jù)等于用戶輸入的用戶名，pw這一列是否存在數(shù)據(jù)等于用戶輸入的密碼經(jīng)過MD5加密后的結(jié)果。4.1.3通過Session變量保存登錄標(biāo)志

PHP中的Session變量用于存儲(chǔ)關(guān)于用戶會(huì)話（Session）的信息，或者更改用戶會(huì)話的設(shè)置。Session變量存儲(chǔ)單一用戶的信息，并且對于應(yīng)用程序中的所有頁面都是可用的。

存儲(chǔ)和取出Session變量的正確方法是使用PHP中的$_SESSION全局變量。如果要?jiǎng)h除某些Session變量，則可以使用unset()或session_destroy()函數(shù)。unset()函數(shù)用于釋放指定的Session變量，而session_destroy()可以刪除所有的Session變量。

需要注意，Session是有生命周期的，長時(shí)間不操作該網(wǎng)站，Session將會(huì)過期，過期的Session會(huì)被自動(dòng)刪除。Session的默認(rèn)生命周期是1440s，可以在php.ini配置文件中修改和設(shè)置，或者直接在PHP文件中使用代碼來重新設(shè)置生命周期。子任務(wù)4.2注銷登錄4.2.1在導(dǎo)航欄中使用文件包含

項(xiàng)目制作到這里，小王同學(xué)發(fā)現(xiàn)，頁面頂部的導(dǎo)航欄會(huì)在每一個(gè)頁面中顯示，這些代碼在每一個(gè)文件中重復(fù)出現(xiàn)，借鑒前面完成conn.php文件的經(jīng)驗(yàn)，應(yīng)該也可以用同樣的方法，即將導(dǎo)航欄代碼放到一個(gè)單獨(dú)的文件中，以優(yōu)化代碼。

選中member目錄并單擊鼠標(biāo)右鍵，創(chuàng)建新文件nav.php，并將原來導(dǎo)航欄相關(guān)的CSS、HTML代碼移植過來。

修改index.php、signup.php、login.php文件，在原來導(dǎo)航欄代碼的位置用include_once()包含nav.php文件。需要注意的是，由于在nav.php文件中使用了Session，因此，在其他文件中引用此文件之前，都需要先開啟會(huì)話。

可以看到，小王同學(xué)在導(dǎo)航欄中添加了當(dāng)前登錄者的用戶名和注銷登錄的鏈接。其中使用了一個(gè)函數(shù)isset()，這個(gè)函數(shù)用于判斷變量是否存在。if(isset($_SESSION['loggedUsername'])&&$_SESSION['loggedUsername']<>'')的作用是，首先判斷$_SESSION['loggedUsername']是否存在，如果不存在，則直接返回false；如果存在，則判斷$_SESSION['loggedUsername']是否為空。登錄成功后，$_SESSION['loggedUsername']中保存的是當(dāng)前登錄者的用戶名。如果這兩個(gè)條件均為true，則if條件判斷語句結(jié)果為true，顯示當(dāng)前登錄者的用戶名和注銷登錄的鏈接。4.2.2實(shí)現(xiàn)導(dǎo)航欄當(dāng)前欄目高亮功能

完成導(dǎo)航欄的文件包含后，小王測試了一下項(xiàng)目，發(fā)現(xiàn)單擊導(dǎo)航欄中的各個(gè)欄目后，無法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示。通過思考他發(fā)現(xiàn)了問題，就是當(dāng)前欄目會(huì)在當(dāng)前鏈接的“<a>”標(biāo)簽上添加一個(gè)樣式current?，F(xiàn)在使用的是包含文件，無法知道當(dāng)前是哪個(gè)欄目，樣式current也就不知道應(yīng)該添加在哪個(gè)鏈接上。

經(jīng)過反復(fù)研究，小王同學(xué)終于想到了一個(gè)辦法來解決此難題。他使用的具體方法是，在nav.php文件中的各個(gè)導(dǎo)航鏈接上添加一個(gè)id參數(shù)，當(dāng)其他頁面包含nav.php文件后，在單擊鏈接跳轉(zhuǎn)時(shí)，會(huì)同時(shí)傳遞這個(gè)id參數(shù)，然后在nav.php中讀取這個(gè)參數(shù)，根據(jù)參數(shù)的值來決定給哪一個(gè)欄目添加當(dāng)前欄目指示。這里就涉及PHP各個(gè)頁面之間參數(shù)傳遞的方法。一個(gè)簡單的頁面間傳參的方式是在URL后面添加參數(shù)，使用“？”進(jìn)行地址和參數(shù)的分隔，用等號連接參數(shù)名和具體的值，如果有多個(gè)參數(shù)，則使用“&”連接即可。

其中地址欄傳遞過來的參數(shù)在后端頁面中可以使用$_GET讀取。在讀取之前，應(yīng)該先用isset()函數(shù)判斷id參數(shù)是否存在。比如，當(dāng)用戶第一次進(jìn)入系統(tǒng)，打開首頁，這里包含的nav.php文件沒有id參數(shù)，自然也就無法讀取到id。只有單擊某個(gè)導(dǎo)航鏈接跳轉(zhuǎn)至新的頁面時(shí)，才會(huì)傳遞id參數(shù)。圖4.2.1

系統(tǒng)提示

在PhpStorm的右下角默認(rèn)顯示有一個(gè)“PHP:5.6”鏈接，表示當(dāng)前IDE設(shè)置的PHP版本是5.6，單擊可以設(shè)置PHP的版本，如圖4.2.2所示。根據(jù)前面Web服務(wù)器的配置（請參考圖2.2.1中的“PHP版本”），在這里將PHP的版本設(shè)置成7.3即可。經(jīng)過重新設(shè)置，紅色波浪線會(huì)自動(dòng)消失。圖4.2.2

設(shè)置PHP版本

session_destroy()函數(shù)的作用是刪除所有會(huì)話。當(dāng)然需要注意的是，使用session_destroy()之前還是需要先開啟會(huì)話。刪除會(huì)話后，再使用header()函數(shù)即可直接跳轉(zhuǎn)至index.php文件。

接下來小王同學(xué)測試了項(xiàng)目的運(yùn)行，得到了圖4.2.3所示的結(jié)果。圖4.2.3

登錄成功后在導(dǎo)航欄顯示登錄者的用戶名子任務(wù)4.3會(huì)員資料修改4.3.1優(yōu)化登錄頁面跳轉(zhuǎn)邏輯

小王同學(xué)查看了已經(jīng)做好的用戶登錄功能，當(dāng)?shù)卿洺晒?，保存了登錄?biāo)志，就沒有執(zhí)行其他操作了，頁面也還是繼續(xù)停留在登錄頁面，這顯然不太合理。登錄成功后應(yīng)該跳轉(zhuǎn)到首頁才比較合理。

小王同學(xué)把postLogin.php文件修改了一下，添加了登錄成功后的跳轉(zhuǎn)功能。如果登錄成功，則跳轉(zhuǎn)至首頁。如果登錄失敗，則返回至上一個(gè)頁面，讓用戶重新輸入用戶名和密碼進(jìn)行登錄。4.3.2創(chuàng)建會(huì)員資料修改頁面

通過分析會(huì)員資料修改頁面的特點(diǎn)，小王同學(xué)梳理了制作的思路。（1）在member項(xiàng)目中新建文件modify.php。在制作導(dǎo)航欄時(shí)，已經(jīng)在nav.php中的“個(gè)人資料修改”鏈接添加了目標(biāo)鏈接頁面modify.php，但還未制作此文件，因此需要?jiǎng)?chuàng)建此文件。（2）從signup.php文件中復(fù)制代碼，然后粘貼到modify.php文件中。由于資料修改頁面和注冊頁面有較高的相似性，因此可以直接從signup.php文件中復(fù)制代碼，再進(jìn)行適當(dāng)修改。（3）在表單中顯示已有的各項(xiàng)資料。（4）修改資料后，單擊“提交”按鈕，將各項(xiàng)數(shù)據(jù)提交至后端，使用SQL中的update語句更新數(shù)據(jù)表記錄，即可完成資料更新操作。（5）修改資料時(shí)，要注意密碼的處理方式?？梢钥紤]兩種方式：第一種方式是，密碼默認(rèn)留空，如果要修改，就填寫新的密碼和確認(rèn)密碼，不填寫就不修改密碼；第二種方式是，在密碼后面添加一個(gè)復(fù)選框，勾選代表要修改密碼，不勾選代表不修改密碼。（6）修改資料時(shí)，還要注意檢查當(dāng)前是否處于登錄狀態(tài)。只有登錄以后才能修改資料。同時(shí)，一般來說，用戶名是不允許修改的。

通過上述分析，小王同學(xué)查詢了各種相關(guān)資料，順利地完成了修改資料的功能。參數(shù)描述result必需。規(guī)定由mysqli_query()、mysqli_store_result()或

mysqli_use_result()返回的結(jié)果集標(biāo)識(shí)符resulttype可選。規(guī)定應(yīng)該產(chǎn)生哪種類型的數(shù)組?？梢允且韵轮抵械娜我庖粋€(gè)：1．MYSQLI_ASSOC（關(guān)聯(lián)數(shù)組）；2．MYSQLI_NUM（數(shù)字?jǐn)?shù)組）；3．MYSQLI_BOTH（二者兼有）表4.3.1

mysqli_fetch_array()函數(shù)參數(shù)詳情參數(shù)描述separator必需。規(guī)定在哪里分割字符串string必需。要分割的字符串limit可選。規(guī)定所返回的數(shù)組元素的數(shù)目?？赡艿闹担?/p>

l

大于

0——返回包含最多

limit

個(gè)元素的數(shù)組；l

小于

0——返回包含除了最后的

limit

個(gè)元素以外的所有元素的數(shù)組；l0——會(huì)被當(dāng)作1，返回包含一個(gè)元素的數(shù)組表4.3.2

explode()函數(shù)參數(shù)詳情參數(shù)描述needle必需。規(guī)定要在數(shù)組中搜索的值haystack必需。規(guī)定要搜索的數(shù)組strict可選。如果該參數(shù)設(shè)置為

TRUE，則

in_array()函數(shù)判斷搜索的數(shù)據(jù)與數(shù)組的值的類型是否相同表4.3.3

in_array()函數(shù)參數(shù)詳情4.3.3制作資料修改后端文件

完成了前端文件，接下來就是后端文件的制作了。單擊“提交”按鈕，將進(jìn)入postModify.php文件。

小王同學(xué)新建了postModify.php文件，并在其中讀取了前端提交的各項(xiàng)數(shù)據(jù)，完成必要的數(shù)據(jù)驗(yàn)證后，使用update語句更新數(shù)據(jù)庫，這樣就完成了修改資料的操作?！救蝿?wù)小結(jié)】

在本任務(wù)中主要實(shí)現(xiàn)了用戶的登錄和注銷功能。這兩個(gè)功能的實(shí)現(xiàn)都基于PHP中的一個(gè)關(guān)鍵技術(shù)，即會(huì)話（Session）。在使用Session時(shí)，一定要記得先開啟會(huì)話，且開啟會(huì)話的語句必須放在所有用于輸出的HTML代碼之前。

登錄成功，通過Session保存登錄標(biāo)志。注銷則是刪除登錄成功后保存的Session。

修改資料最關(guān)鍵的是實(shí)現(xiàn)數(shù)據(jù)回顯，其中單選按鈕和多選按鈕的回顯方式和普通的文本框有所區(qū)別，要注意理解。牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）任務(wù)5會(huì)員管理系統(tǒng)管理員功能子任務(wù)5.1管理員登錄

實(shí)現(xiàn)管理員登錄比較通用的方法有兩種。第一種方法是單獨(dú)建立一張管理員數(shù)據(jù)表，其中的所有數(shù)據(jù)記錄都是管理員。第二種方法是在現(xiàn)有的普通用戶數(shù)據(jù)表中增加一列，用來標(biāo)識(shí)是否是管理員。如果是管理員，則可以把這一列設(shè)置為1，如果是普通用戶，則將這一列設(shè)置為0。為了處理方便，可以將此列默認(rèn)值設(shè)置為0，這樣，用戶注冊時(shí)默認(rèn)注冊為普通用戶。

對于第一種方式，在登錄時(shí)，需要單獨(dú)做一個(gè)管理員登錄的頁面，或者在普通用戶登錄時(shí)，添加一組復(fù)選框，用來標(biāo)識(shí)是否是管理員登錄。如果是管理員登錄，則后端在判斷用戶名和密碼時(shí)，查詢管理員數(shù)據(jù)表。對于第二種方式，和普通用戶登錄完全一樣，只是在登錄成功后，再判斷管理員標(biāo)識(shí)列的值為多少，以判斷當(dāng)前用戶是不是管理員。

管理員登錄成功后，需要單獨(dú)保存一個(gè)Session標(biāo)識(shí)符，用以標(biāo)識(shí)管理員登錄。由于Session的全局性，我們在任意頁面判斷是否是管理員登錄，只需要檢查是否存在這個(gè)Session標(biāo)識(shí)符即可。5.1.1修改數(shù)據(jù)表結(jié)構(gòu)以實(shí)現(xiàn)管理員登錄

小王同學(xué)決定通過上述第二種方式來實(shí)現(xiàn)管理員登錄。很明顯，在前面創(chuàng)建的數(shù)據(jù)表中并無管理員標(biāo)識(shí)列。因此，他必須先修改數(shù)據(jù)表。打開phpMyAdmin，找到數(shù)據(jù)表info，單擊“結(jié)構(gòu)”按鈕，在下面的“添加1個(gè)字段”提示文字后面單擊“執(zhí)行”按鈕，然后就和創(chuàng)建數(shù)據(jù)表時(shí)一樣，正常添加列即可。小王添加的列名是admin，類型可以選擇“tinyint”，長度為1，默認(rèn)值設(shè)置為0（在默認(rèn)值中選擇“定義”，然后輸入0即可），表示不是管理員。如果是管理員，這一列的值自然就為1。最后單擊“保存”按鈕完成添加。最后的info數(shù)據(jù)表結(jié)構(gòu)如圖5.1.1所示。圖5.1.1

添加管理員標(biāo)識(shí)列后的數(shù)據(jù)表結(jié)構(gòu)5.1.2管理員登錄后查看導(dǎo)航欄的變化

根據(jù)前面小王設(shè)計(jì)的系統(tǒng)頁面，在管理員登錄后，還需要在頂部的導(dǎo)航欄中添加一個(gè)“歡迎管理員登錄”的提示信息。因此，小王同學(xué)打開nav.php文件，在顯示登錄者信息的區(qū)域修改了部分代碼。

管理員登錄后，首頁如圖5.1.2所示。圖5.1.2

管理員登錄后的頁面子任務(wù)5.2管理員查看所有會(huì)員5.2.1判斷管理員權(quán)限

正確的做法應(yīng)該是，借鑒前面包含數(shù)據(jù)庫連接文件的方法，單獨(dú)制作checkAdmin.php文件，在其中通過Session來判斷是否有管理員權(quán)限，然后在所有需要驗(yàn)證管理員權(quán)限的文件中使用include包含即可。5.2.2循環(huán)輸出數(shù)據(jù)表記錄

小王同學(xué)在制作導(dǎo)航欄時(shí)，已經(jīng)給“后臺(tái)管理”欄目添加了鏈接目標(biāo)文件admin.php。因此，接下來就要制作admin.php文件了。在這個(gè)文件中需要實(shí)現(xiàn)查看所有會(huì)員列表的功能。制作好admin.php文件后，可以在導(dǎo)航欄中單擊“后臺(tái)管理”跳轉(zhuǎn)至管理員頁面。

回想一下前面實(shí)現(xiàn)的登錄功能，不管是普通用戶登錄，還是管理員登錄，登錄成功后，都是跳轉(zhuǎn)至系統(tǒng)首頁?，F(xiàn)在看來，這樣做已經(jīng)不太合適了，應(yīng)該區(qū)分用戶類型，如果是管理員登錄成功，則直接跳轉(zhuǎn)至admin.php頁面；如果是普通用戶登錄成功，則跳轉(zhuǎn)至首頁即可。根據(jù)這樣的思路，小王同學(xué)再次優(yōu)化了登錄成功后的跳轉(zhuǎn)邏輯。

圖5.2.1所示為管理員登錄后查看所有會(huì)員列表的結(jié)果。圖5.2.1

管理員查看所有會(huì)員列表5.2.3了解PHP中的循環(huán)語句

1．while循環(huán)

只要指定的條件成立（運(yùn)算結(jié)果為真），就循環(huán)執(zhí)行代碼塊。其語法規(guī)則為：while(條件){要執(zhí)行的代碼;}2．do...while循環(huán)

首先執(zhí)行一次代碼塊，然后在指定的條件成立時(shí)重復(fù)這個(gè)循環(huán)。其語法規(guī)則為：do{要執(zhí)行的代碼;}while(條件);3．for循環(huán)

循環(huán)執(zhí)行代碼塊指定的次數(shù)。其語法規(guī)則為：for(初始值;條件;增量){要執(zhí)行的代碼;}4．foreach循環(huán)

根據(jù)數(shù)組中的元素來循環(huán)代碼塊，也就是遍歷數(shù)組，其語法規(guī)則為：foreach($arrayas$value){要執(zhí)行代碼;}或者：foreach($arrayas$key=>$value){要執(zhí)行代碼;}子任務(wù)5.3數(shù)據(jù)分頁5.3.1理解分頁的基本原理

分頁的基本原理是，在執(zhí)行數(shù)據(jù)表查詢時(shí)，使用limit關(guān)鍵字只讀取指定條數(shù)的記錄。通過多次讀取，最終顯示所有內(nèi)容。5.3.2制作分頁文件

分頁不光要實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的按頁（指定數(shù)量）獲取，還需要在前端實(shí)現(xiàn)分頁的導(dǎo)航鏈接等相關(guān)功能。同時(shí)，分頁功能也是各個(gè)系統(tǒng)經(jīng)常使用的功能之一，可能會(huì)多次重復(fù)使用，因此，小王同學(xué)還是借鑒前面的制作方法，準(zhǔn)備單獨(dú)制作一個(gè)分頁文件。這樣，以后凡是需要使用分頁的地方，都可以直接引入此文件來實(shí)現(xiàn)分頁功能。5.3.3實(shí)現(xiàn)分頁

按照下面的步驟進(jìn)行操作，可快速實(shí)現(xiàn)數(shù)據(jù)分頁。（1）在admin.php中包含page.php文件。（2）查詢記錄表的記錄總數(shù)。（3）設(shè)置每一頁顯示多少條記錄。（4）讀取當(dāng)前頁碼。（5）引用分頁函數(shù)。（6）在SQL語句中加上limit關(guān)鍵字進(jìn)行分頁查詢。（7）在末尾加上分頁鏈接。圖5.3.1

數(shù)據(jù)分頁效果【知識(shí)儲(chǔ)備】1．SQL查詢中count()函數(shù)的使用（1）count(*)：返回表中的記錄數(shù)（包括所有列），相當(dāng)于統(tǒng)計(jì)表的行數(shù)（不會(huì)忽略列值為NULL的記錄）。（2）count(1)：忽略所有列，1表示一個(gè)固定值，也可以用count(2)、count(3)代替（不會(huì)忽略列值為NULL的記錄）。（3）count(列名)：返回指定列名的記錄數(shù)，在統(tǒng)計(jì)結(jié)果時(shí)，會(huì)忽略列值為NULL的記錄（不包括空字符串和0），即列值為NULL的記錄不統(tǒng)計(jì)在內(nèi)。（4）count(distinct列名)：返回指定列名的不同值的記錄數(shù)（相同的記錄只統(tǒng)計(jì)1次），在統(tǒng)計(jì)結(jié)果時(shí)，會(huì)忽略列值為NULL的記錄（不包括空字符串和0），即列值為NULL的記錄不統(tǒng)計(jì)在內(nèi)。count(id)

as

total表示獲取記錄總數(shù)后，以total的別名返回，所以在第13行中可以使用$info['total']來得到記錄總數(shù)。2．變量作用域

在PHP中，變量是有作用域的。所謂變量作用域（VariableScope），是指特定變量在代碼中可以被訪問到的位置。變量必須在其有效范圍內(nèi)使用，如果超出有效范圍，那么變量會(huì)失去其意義。

PHP中包含3種類型變量，分別是局部變量（LocalVariable）、全局變量（GlobalVariable）、靜態(tài)變量（StaticVariable）。子任務(wù)5.4設(shè)置或取消管理員5.4.1修改文件靜態(tài)內(nèi)容5.4.2制作setAdmin.php文件5.4.3避免刪除管理員admin

最終完成的設(shè)置（取消）管理員頁面如圖5.4.1所示。圖5.4.1

設(shè)置（取消）管理員頁面子任務(wù)5.5管理員刪除用戶5.5.1修改前端頁面

5.5.2制作后端頁面【素養(yǎng)小貼士】

一個(gè)優(yōu)秀的程序員應(yīng)該養(yǎng)成哪些良好的習(xí)慣呢？1．寫代碼前應(yīng)該先想好思路，再規(guī)劃框架，最后才是局部實(shí)現(xiàn)。2．注重代碼風(fēng)格。3．注重代碼執(zhí)行效率。4．解決問題時(shí)，對于原理性的問題，不要面向搜索引擎編程。5．在執(zhí)行一些風(fēng)險(xiǎn)操作時(shí)，一定要仔細(xì)檢查，并做好二次確認(rèn)。子任務(wù)5.6管理員修改會(huì)員資料5.6.1添加資料修改鏈接

5.6.2修改modify.php文件

【任務(wù)小結(jié)】

在本任務(wù)中，主要是完成了管理員相關(guān)功能的實(shí)現(xiàn)，包括管理員的登錄、查看所有會(huì)員列表、數(shù)據(jù)分頁、設(shè)置或取消管理員、刪除用戶、修改會(huì)員資料。管理員功能和普通用戶功能的區(qū)別就是，需要通過Session中保存的標(biāo)識(shí)符來識(shí)別是否為管理員。牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）任務(wù)6會(huì)員管理系統(tǒng)項(xiàng)目優(yōu)化子任務(wù)6.1優(yōu)化跳轉(zhuǎn)目標(biāo)頁面6.1.1文件跳轉(zhuǎn)時(shí)添加來源參數(shù)6.1.2讀取來源參數(shù)，并跳轉(zhuǎn)至目標(biāo)頁面

子任務(wù)6.2注冊時(shí)使用AJAX驗(yàn)證用戶名是否有效6.2.1理解異步（1）同步：瀏覽器端提交請求→服務(wù)器處理→處理完畢返回。其間瀏覽器端不能干任何事。（2）異步：瀏覽器端的請求通過事件觸發(fā)→服務(wù)器處理（這時(shí)瀏覽器端仍然可以做其他事情）→處理完畢，通過回調(diào)等方式完成結(jié)果處理。

AJAX就是一種典型的異步請求技術(shù)。AJAX（AsynchronousJavaScriptAndXML）翻譯成中文就是“異步JavaScript和XML”技術(shù)，即使用JavaScript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML，現(xiàn)在更多使用的是JSON數(shù)據(jù)）。

AJAX不是一種新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

AJAX最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容（這一特點(diǎn)給用戶的感受是在不知不覺中完成請求和響應(yīng)過程）。6.2.2初識(shí)jQuery

在Web頁面中，使用AJAX的一個(gè)比較方便的方法是使用jQuery中封裝好的AJAX操作。

jQuery是一個(gè)快速、簡潔的JavaScript框架，于2006年1月由約翰·雷西格（JohnResig）發(fā)布。jQuery設(shè)計(jì)的宗旨是“WriteLess,DoMore”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝了JavaScript中常用的一些功能代碼，提供了一種簡便的JavaScript設(shè)計(jì)模式，優(yōu)化了HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和AJAX交互。

jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery可兼容各種主流瀏覽器。

jQuery是一種非常優(yōu)秀的前端框架，在網(wǎng)絡(luò)上可以找到很多的使用教程。jQuery自2006年誕生以來，一共發(fā)行了1.x、2.x、3.x這3個(gè)大版本。而在這3個(gè)大版本下又細(xì)分了許多小版本。這3個(gè)大版本的簡單區(qū)別如下。1．IE的支持情況比較（1）情況分析1.x版本：支持IE6、IE7、IE8。2.x、3.x版本：只支持IE9及以上的版本。（2）選擇建議

如果需要兼容IE6、IE7、IE8，則只能選擇1.x版本。

如果不需要兼容IE6、IE7、IE8，則可以選擇2.x、3.x版本。因?yàn)?.x版本中有大部分代碼是針對“舊”瀏覽器做的兼容，所以增加了運(yùn)行的負(fù)擔(dān)，影響了運(yùn)行效率。2．插件的支持情況比較（1）情況分析

jQuery的版本都是不向后兼容的，導(dǎo)致基于jQuery開發(fā)的插件會(huì)有兼容性問題。也就是說，當(dāng)新版本的jQuery推出后，原有的插件可能無法正常使用，需要插件作者重新開發(fā)新版本。（2）選擇建議

為了保證與各種插件有更好的兼容性，可以選擇1.x版本。3．新特性比較（1）2.x版本相較于1.x版本沒有增加什么新特性，主要是去除了對IE6、IE7、IE8的支持，從而提升了性能，減小了體積。（2）3.x版本相較于之前的版本，增加了許多新特性，也改變了一些以往的特性，具體內(nèi)容可以查閱網(wǎng)絡(luò)上的相關(guān)資料。6.2.3引入jQuery庫文件

6.2.4在表單中添加事件

6.2.5實(shí)現(xiàn)方法checkUsername()

6.2.6使用jQuery中封裝的AJAX

6.2.7制作AJAX后端文件

由于系統(tǒng)中已經(jīng)有一個(gè)用戶名是admin的用戶了，如果輸入這個(gè)用戶名來注冊，則當(dāng)鼠標(biāo)光標(biāo)離開用戶名控件時(shí)，在用戶名控件后面顯示綠色的“此用戶名不可用”的提示信息，如圖6.2.1所示。

在用戶名控件中輸入admin1，確保是一個(gè)新的未被使用過的用戶名，當(dāng)再次失去焦點(diǎn)時(shí)，會(huì)在用戶名控件后面顯示黑色的“此用戶名可用”的提示，如圖6.2.2所示。圖6.2.1

用戶名不可用的效果圖

圖6.2.2

用戶名可用的效果圖6.2.8在Chrome瀏覽器中調(diào)試網(wǎng)絡(luò)通信

（1）按“F12”鍵，可以打開或關(guān)閉瀏覽器“開發(fā)者工具”。在開發(fā)者工具中單擊上面“網(wǎng)絡(luò)”選項(xiàng)卡，然后把鼠標(biāo)光標(biāo)移至用戶名文本框中，再單擊其他地方讓用戶名控件失去焦點(diǎn)，此時(shí)，可以清楚地看到在“網(wǎng)絡(luò)”面板中出現(xiàn)一條網(wǎng)絡(luò)請求，如圖6.2.3所示。在名稱一欄將顯示具體請求的目標(biāo)網(wǎng)址，并顯示狀態(tài)、類型等。這個(gè)狀態(tài)默認(rèn)是請求成功后返回的200。如果請求的文件不存在，則返回404。具體的HTTP狀態(tài)碼有很多，大家可以查詢相關(guān)資料進(jìn)一步了解。圖6.2.3

在開發(fā)者工具中查看網(wǎng)絡(luò)請求（2）在查看網(wǎng)絡(luò)請求時(shí)，默認(rèn)會(huì)顯示請求圖片、JavaScript文件、CSS文件等所有的網(wǎng)絡(luò)請求，而我們在使用AJAX時(shí)，只關(guān)心異步請求后端接口文件的情況，因此，我們可以單擊“過濾”選項(xiàng)中的“Fetch/XHR”進(jìn)行網(wǎng)絡(luò)請求的過濾顯示。（3）在網(wǎng)絡(luò)請求面板中單擊“checkUsername.php”文件，在右邊會(huì)顯示這一次網(wǎng)絡(luò)請求的詳情，圖6.2.4中顯示的是“預(yù)覽”選項(xiàng)卡中的內(nèi)容，其中會(huì)顯示后端文件返回的結(jié)果?？梢钥吹剑@里返回的是一個(gè)JSON對象，其中包括code和msg兩個(gè)屬性。圖6.2.4

查看網(wǎng)絡(luò)請求詳情（4）單擊“標(biāo)頭”選項(xiàng)卡，可以查看這一次網(wǎng)絡(luò)請求的響應(yīng)標(biāo)志頭、請求標(biāo)志頭等詳情，當(dāng)訪問后端文件出現(xiàn)問題時(shí)，這個(gè)選項(xiàng)卡中的內(nèi)容可以幫助我們查詢請求的各種標(biāo)志頭等信息，有利于判斷問題之所在。在“載荷”選項(xiàng)卡中可以看到前端傳遞給后端的具體參數(shù)。子任務(wù)6.3beforeSend的使用

使用AJAX方式的優(yōu)勢很明顯，即在頁面不刷新的情況下，可以直接更新頁面內(nèi)容，使得用戶體驗(yàn)更好。但由于不是同步操作，所以如果網(wǎng)絡(luò)較慢等情況導(dǎo)致更新延遲，用戶體驗(yàn)就會(huì)大打折扣。為了解決這個(gè)問題，AJAX提供了一個(gè)beforeSend回調(diào)函數(shù)，在發(fā)起請求時(shí)，可以在頁面中顯示加載中（loading）圖標(biāo)，給用戶明確的提示，這樣用戶體驗(yàn)會(huì)更好。

當(dāng)用戶名文本框失去焦點(diǎn)時(shí)，執(zhí)行AJAX程序，向后端發(fā)起請求。這個(gè)請求發(fā)起后要后端程序執(zhí)行結(jié)束，并返回結(jié)果以后，前端頁面才會(huì)執(zhí)行相應(yīng)的更新。在使用jQuery的AJAX時(shí)，可以在complete、success、error這3個(gè)回調(diào)函數(shù)中進(jìn)行處理，也就是說，當(dāng)后端程序執(zhí)行完畢，并將結(jié)果返回給前端后，complete回調(diào)一定會(huì)執(zhí)行。

如果執(zhí)行成功，則還會(huì)執(zhí)行success回調(diào)，如果執(zhí)行失敗，則執(zhí)行error回調(diào)。在發(fā)起請求之前，執(zhí)行beforeSend回調(diào)。因此，可以在beforeSend中顯示一個(gè)加載中圖標(biāo)，在complete、success、error中隱藏加載中圖標(biāo)。子任務(wù)6.4登錄時(shí)使用AJAX判斷用戶名是否有效6.4.1修改login.php文件6.4.2顯示異步登錄的效果

完成相關(guān)代碼后，小王同學(xué)測試了最終的結(jié)果。圖6.4.1所示是輸入正常的用戶名后，異步查詢顯示“√”的結(jié)果。

圖6.4.2所示是輸入不存在的用戶名后，異步查詢顯示“×”的結(jié)果。

圖6.4.1

輸入用戶名正確

圖6.4.2

輸入用戶名錯(cuò)誤子任務(wù)6.5驗(yàn)證碼的使用【知識(shí)儲(chǔ)備】1．驗(yàn)證碼簡介

什么是驗(yàn)證碼？驗(yàn)證碼CAPTCHA是“CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart”（全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈測試）的縮寫，是一種區(qū)分用戶是計(jì)算機(jī)還是人的公