PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版） 課件 任務(wù)7-9 項(xiàng)目開發(fā)前的準(zhǔn)備工作、在線投票系統(tǒng)首頁(yè)制作及投票功能實(shí)現(xiàn)、在線投票系統(tǒng)投票功能實(shí)現(xiàn)

牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）項(xiàng)目2在線投票系統(tǒng)任務(wù)7項(xiàng)目開發(fā)前的準(zhǔn)備工作子任務(wù)7.1項(xiàng)目介紹7.1.1項(xiàng)目基本需求分析

（1）游客可以查看投票項(xiàng)目，以及各項(xiàng)目的當(dāng)前得票數(shù)。（2）游客可以注冊(cè)成為會(huì)員。（3）游客注冊(cè)后可以登錄本系統(tǒng)。（4）登錄系統(tǒng)后，可以單擊車輛圖片實(shí)現(xiàn)投票。（5）管理員可以登錄后臺(tái)管理系統(tǒng)查看車輛列表。（6）管理員可以通過(guò)列表查看所有投票項(xiàng)目的得票情況。（7）管理員可以管理各個(gè)投票項(xiàng)目（包括新增、刪除、編輯）。（8）管理員可以通過(guò)圖表的形式查看各項(xiàng)目的得票情況。

7.1.2項(xiàng)目詳細(xì)設(shè)計(jì)

（1）整合會(huì)員管理系統(tǒng)。（2）會(huì)員登錄后，單擊列表中的項(xiàng)目進(jìn)行投票。投票后，票數(shù)立即變化，顯示新的票數(shù)。（3）只有登錄用戶可以投票，未登錄用戶單擊投票項(xiàng)目時(shí)，彈出需要登錄的提示。（4）限制同一名用戶一天只能給一個(gè)投票對(duì)象投5票。（5）限制同一名用戶一天只能給3個(gè)投票對(duì)象投票。（6）投票時(shí)要輸入驗(yàn)證碼，以防止機(jī)器或程序刷票。（7）每個(gè)投票對(duì)象之間至少要間隔1min才能重復(fù)投票。（8）一個(gè)IP地址一天只能給一個(gè)投票對(duì)象投5票。（9）投票采用AJAX無(wú)刷新技術(shù)，前端頁(yè)面無(wú)須刷新。（10）管理員登錄后，進(jìn)入管理頁(yè)面，通過(guò)列表查看所有投票項(xiàng)目的得票情況。（11）管理員登錄后，可以管理所有投票項(xiàng)目，包括編輯和刪除已有項(xiàng)目、添加新的投票項(xiàng)目。（12）管理員可以通過(guò)圖表的形式查看投票項(xiàng)目得票情況，圖表以柱狀圖的形式呈現(xiàn)。7.1.3項(xiàng)目展示

（1）圖7.1.1所示為項(xiàng)目首頁(yè)。圖7.1.1

項(xiàng)目首頁(yè)（2）圖7.1.2所示為管理員登錄后的首頁(yè)。圖7.1.2

管理員登錄后的首頁(yè)（3）圖7.1.3所示為投票時(shí)輸入驗(yàn)證碼的頁(yè)面。圖7.1.3

投票時(shí)輸入驗(yàn)證碼（4）圖7.1.4所示為管理員進(jìn)行車輛管理的頁(yè)面。圖7.1.4

管理員進(jìn)行車輛管理（5）圖7.1.5所示為管理員添加車輛時(shí)的頁(yè)面。圖7.1.5

管理員添加車輛（6）圖7.1.6展示了管理員查看車輛得票情況柱狀圖頁(yè)面。圖7.1.6

管理員查看車輛得票情況柱狀圖子任務(wù)7.2版本控制與代碼托管【知識(shí)儲(chǔ)備】7.2.1版本控制

版本控制軟件提供完備的版本管理功能，用于存儲(chǔ)、追蹤目錄（文件夾）和文件的修改歷史，是軟件開發(fā)者的必備工具，是軟件公司的基礎(chǔ)設(shè)施。版本控制軟件的最高目標(biāo)是支持軟件公司的配置管理活動(dòng)、追蹤多個(gè)版本的開發(fā)和維護(hù)活動(dòng)，以及及時(shí)發(fā)布軟件。簡(jiǎn)單來(lái)說(shuō)，在開發(fā)過(guò)程中會(huì)不斷發(fā)現(xiàn)新需求，不斷發(fā)現(xiàn)bug，如果不做控制，那么軟件將永遠(yuǎn)不能發(fā)布，或今天發(fā)布一個(gè)版本，明天又發(fā)布一個(gè)版本。

版本控制對(duì)于DevOps（Development和Operations的組合詞，是一組過(guò)程、方法與系統(tǒng)的統(tǒng)稱，用于促進(jìn)開發(fā)、技術(shù)運(yùn)營(yíng)和質(zhì)量保障部門之間的溝通、協(xié)作與整合）團(tuán)隊(duì)的成功起著核心作用。根據(jù)2022年度DevOps研究，版本控制一直是整體軟件工程性能的最佳指標(biāo)之一，使用版本控制有以下優(yōu)勢(shì)。1．更快、更簡(jiǎn)單地發(fā)現(xiàn)錯(cuò)誤2．并行開發(fā)3．提高最終產(chǎn)品的可靠性

版本控制和一流的軟件工程性能之間的共生關(guān)系是顯而易見的。當(dāng)團(tuán)隊(duì)正確利用版本控制系統(tǒng)時(shí)，可以以更快的速度和更高的可靠性水平進(jìn)行更改。DevOps的目標(biāo)是加快整個(gè)生產(chǎn)過(guò)程，同時(shí)提高工作的質(zhì)量。版本控制在增強(qiáng)團(tuán)隊(duì)溝通和成功開發(fā)產(chǎn)品方面發(fā)揮著巨大作用，并為實(shí)現(xiàn)這些目標(biāo)提供了巨大的幫助。7.2.2Git介紹

代碼托管服務(wù)通常是企業(yè)或者組織基于版本控制工具提供的一種研發(fā)流程管理工具，例如，大家熟知的“GitHub”就是面向開源開發(fā)者提供的基于Git版本管理工具的代碼托管服務(wù)。所以代碼托管服務(wù)隨著使用規(guī)模的擴(kuò)大，通常也會(huì)變得更加龐大、復(fù)雜和難以管理，對(duì)于個(gè)人開發(fā)者而言可能無(wú)須關(guān)注，但對(duì)于企業(yè)而言需要一定的維護(hù)成本，畢竟大多數(shù)情況下，代碼托管服務(wù)中存儲(chǔ)的可能是企業(yè)的核心軟資產(chǎn)。對(duì)于代碼托管服務(wù)來(lái)說(shuō)，比較核心的要點(diǎn)有3個(gè)。（1）可協(xié)同。在功能層面要包含倉(cāng)庫(kù)管理、分支管理、權(quán)限管理、提交管理、代碼評(píng)審等代碼存儲(chǔ)和版本管理功能，讓開發(fā)者更好地協(xié)同工作。（2）可集成。好的代碼托管服務(wù)應(yīng)該具備靈活和簡(jiǎn)易的第三方工具集成能力，有些甚至直接提供了嵌入式的CI/CD（CI指的是持續(xù)集成，CD指的是持續(xù)部署）能力，降低了DevOps的落地成本。（3）安全可靠。這是最重要的一點(diǎn)，對(duì)于個(gè)人開發(fā)者而言可能無(wú)感，但是對(duì)于企業(yè)而言，代碼的安全性、服務(wù)的穩(wěn)定性、數(shù)據(jù)是否存在丟失的風(fēng)險(xiǎn)，是最被優(yōu)先考量的點(diǎn)。7.2.3碼云的使用

打開碼云的官網(wǎng)，注冊(cè)一個(gè)個(gè)人賬號(hào)即可免費(fèi)使用代碼托管服務(wù)。

為了配合代碼托管的使用，我們還需要在計(jì)算機(jī)中安裝Git軟件。

PhpStorm完美支持Git，可以通過(guò)PhpStorm的菜單命令完成版本控制和代碼托管的相關(guān)操作，非常方便。7.2.4Git的工作流程

在本地計(jì)算機(jī)中分有3個(gè)區(qū)域，分別是工作區(qū)（IDE代碼區(qū)）、暫存區(qū)（修改過(guò)的文件緩存區(qū)）、本地倉(cāng)庫(kù)（確認(rèn)修改過(guò)的所有文件區(qū)）。在遠(yuǎn)程服務(wù)器上有一個(gè)“遠(yuǎn)程倉(cāng)庫(kù)”，保存所有的代碼，可以推送到服務(wù)器與別人共享。在項(xiàng)目開始時(shí)，我們的本地倉(cāng)庫(kù)為空，此時(shí)，需要從遠(yuǎn)程倉(cāng)庫(kù)克隆（clone）代碼到本地倉(cāng)庫(kù)（此時(shí)，遠(yuǎn)程倉(cāng)庫(kù)應(yīng)該有初始化信息，或者有其他人完成的代碼）。

在后續(xù)過(guò)程中，如果要更新代碼，就需要從服務(wù)器拉?。╢etch）代碼到本地倉(cāng)庫(kù)，然后合并（merge）到工作區(qū)，也可以使用pull命令合并上述fetch和merge命令。上述工作流程的示意如圖7.2.1所示。圖7.2.1

Git工作流程示意

圖7.2.2所示為個(gè)人使用Git的流程示意。圖7.2.2

個(gè)人使用Git的流程示意

圖7.2.3所示為團(tuán)隊(duì)使用Git的流程示意。圖7.2.3

團(tuán)隊(duì)使用Git的流程示意

其中，fork操作表示把別人的倉(cāng)庫(kù)直接復(fù)制到本人的遠(yuǎn)程倉(cāng)庫(kù)中；clone命令表示從遠(yuǎn)程倉(cāng)庫(kù)直接下載到本地倉(cāng)庫(kù)中（適用于初始化，本地倉(cāng)庫(kù)為空的情況）；pull命令表示從遠(yuǎn)程倉(cāng)庫(kù)拉取代碼合并到本地倉(cāng)庫(kù)（適用于已經(jīng)有本地倉(cāng)庫(kù)的情況）；add命令表示將修改后的代碼添加至?xí)捍鎱^(qū)，commit命令表示將暫存區(qū)代碼提交至本地倉(cāng)庫(kù)；push命令表示從本地倉(cāng)庫(kù)更新文件到遠(yuǎn)程倉(cāng)庫(kù)。

PhpStorm可以完美支持Git，只需要先安裝好Git軟件，然后在PhpStorm中配置好Git文件路徑，就可以在PhpStorm中克隆遠(yuǎn)程倉(cāng)庫(kù)至本地以初始化項(xiàng)目。在本地編輯程序后，再通過(guò)add、commit、push命令更新遠(yuǎn)程倉(cāng)庫(kù)。7.2.5在PhpStorm中使用Git

（1）在Git官網(wǎng)下載安裝程序。下載時(shí)，選擇好對(duì)應(yīng)的操作系統(tǒng)和軟件位數(shù)。同時(shí)，還可以選擇安裝版本（Setup）或綠色版本（Portable），如圖7.2.4所示。圖7.2.4

下載Git安裝程序（2）打開PhpStorm，單擊“Settings”

→“VersionControl”

→“Git”，然后在“PathtoGitexecutable”中選擇“git.exe”文件的路徑，最后單擊“Test”按鈕，如果成功顯示Git的版本，則說(shuō)明配置完成，如圖7.2.5所示。圖7.2.5

配置git.exe文件路徑

在新版本的PhpStorm中，也可以不用事先安裝Git，而是在使用時(shí)，通過(guò)PhpStorm直接下載并安裝。以PhpStorm2021.2.1為例，在歡迎界面中單擊右上角的“GetfromVCS”按鈕，然后在Versioncontrol下拉菜單中選擇Git，系統(tǒng)會(huì)提示Git并未安裝，只需要單擊“DownloadandInstall”按鈕即可完成安裝，如圖7.2.6所示。圖7.2.6

從VCS復(fù)制項(xiàng)目（3）在碼云中創(chuàng)建一個(gè)倉(cāng)庫(kù)。登錄碼云后，將鼠標(biāo)指針移至右上角的“+”處，在彈出的快捷菜單中選擇“新建倉(cāng)庫(kù)”。按要求輸入倉(cāng)庫(kù)名稱和路徑（輸入倉(cāng)庫(kù)名稱后，路徑會(huì)自動(dòng)填充），如果路徑和已有倉(cāng)庫(kù)路徑重復(fù)，則系統(tǒng)會(huì)給出提示，只需要修改路徑名稱即可。如圖7.2.7所示，新建倉(cāng)庫(kù)時(shí)，可以選擇是“私有”還是“開源”。開源表示任何人都可以訪問(wèn)你的倉(cāng)庫(kù)，可以下載你的文件。私有表示僅有你自己，或你添加的成員可以下載或修改你的文件。當(dāng)然，在現(xiàn)在的碼云系統(tǒng)中新建倉(cāng)庫(kù)時(shí)，只能選擇私有。如果想設(shè)置成開源，則可以在倉(cāng)庫(kù)創(chuàng)建好以后，單擊“管理”→“基本信息”命令，重新設(shè)置成開源。圖7.2.7

在碼云中新建倉(cāng)庫(kù)

創(chuàng)建好倉(cāng)庫(kù)以后，單擊“代碼”選項(xiàng)卡，可以看到有一個(gè)倉(cāng)庫(kù)的地址，如圖7.2.8所示。此處默認(rèn)顯示的是HTTPS地址，單擊右邊的復(fù)制圖標(biāo)即可復(fù)制地址，然后將地址填充到圖7.2.6中的URL文本框中，在下面的Directory中選擇項(xiàng)目所在位置，再單擊右下角的“Clone”按鈕，即可完成項(xiàng)目的復(fù)制。小王同學(xué)選擇將項(xiàng)目創(chuàng)建至E:\onlineVote。圖7.2.8

復(fù)制倉(cāng)庫(kù)地址（4）項(xiàng)目復(fù)制成功后，PhpStorm會(huì)自動(dòng)打開當(dāng)前項(xiàng)目。由于剛才在碼云中新建的是一個(gè)空白倉(cāng)庫(kù)，因此，現(xiàn)在在本地項(xiàng)目文件夾中沒有任何文件。如果在碼云的當(dāng)前倉(cāng)庫(kù)中添加了一些文件，那么復(fù)制項(xiàng)目以后，這些文件會(huì)自動(dòng)同步到當(dāng)前項(xiàng)目中。選中項(xiàng)目根目錄并單擊鼠標(biāo)右鍵，創(chuàng)建一個(gè)新文件index.php。當(dāng)有新的文件加入項(xiàng)目中時(shí)，系統(tǒng)會(huì)自動(dòng)提示是否將此文件添加到Git中，如圖7.2.9所示。圖7.2.9

添加文件到Git

單擊“Add”按鈕，即可將文件添加至Git。勾選“Don’taskagain”復(fù)選框后，以后新增加的文件都會(huì)自動(dòng)添加至Git。為了查看文件是否添加到Git的區(qū)別，還可以再新建一個(gè)test.php文件，然后選擇不添加至Git，最后觀察這兩個(gè)文件的顏色是有區(qū)別的，“index.php”為綠色，“test.php”為紅色，如圖7.2.10所示。當(dāng)然，具體的顏色和當(dāng)前PhpStorm使用的主題有關(guān)。圖7.2.10

將新增文件添加至Git（5）當(dāng)工作進(jìn)行到一定的進(jìn)度以后，就可以把當(dāng)前的文件提交到碼云。選中項(xiàng)目目錄并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Git”→“CommitDirectory”命令，如圖7.2.11所示。接下來(lái)，會(huì)打開提交文件的對(duì)話框，如圖7.2.12所示。其中左上角第一個(gè)區(qū)域就是當(dāng)前添加到Git且有修改的文件，第二個(gè)區(qū)域是未添加到Git的文件，默認(rèn)選中第一類文件。在左邊中間區(qū)域需要輸入提交信息（CommitMessage），就是這一次提交的描述信息。圖7.2.11

提交目錄

在圖7.2.12最下面的區(qū)域顯示當(dāng)前選中文件的內(nèi)容。如果此文件是新增加的文件，則直接在下面區(qū)域顯示其當(dāng)前內(nèi)容。如果此文件是原來(lái)已經(jīng)有的文件，并進(jìn)行了修改，則下面的區(qū)域分成左右兩欄顯示。其中左邊一欄是該文件上一個(gè)版本的內(nèi)容，右邊一欄是該文件現(xiàn)在的內(nèi)容。單擊下面的“Commit”按鈕即可將修改后的文件提交至本地倉(cāng)庫(kù)。

如果需要將文件提交至遠(yuǎn)程倉(cāng)庫(kù)，則再次在圖7.2.11中單擊“Push”命令。當(dāng)然，也可以在“Commit”時(shí)同時(shí)完成“Push”，只需要單擊“Commit”按鈕旁邊的下拉按鈕，選擇“CommitandPush”命令，打開圖7.2.13所示的界面，單擊右下角的“Push”按鈕，在彈出的登錄的窗口中輸入碼云的用戶名和密碼，可以勾選“Remember”復(fù)選框以記住密碼，避免每次都要重新輸入。圖7.2.12

提交文件圖7.2.13

提交文件至遠(yuǎn)程倉(cāng)庫(kù)

“Push”成功后，可以到碼云中查看倉(cāng)庫(kù)，在倉(cāng)庫(kù)中可以看到剛才新上傳的所有文件。

如果我們換了一臺(tái)新計(jì)算機(jī)，或者有其他協(xié)作者也上傳了代碼，本地倉(cāng)庫(kù)的文件就不是最新版本了。此時(shí)，可以在圖7.2.11中選擇“Pull”命令，將最新的文件拉取至本地倉(cāng)庫(kù)。

如果多次提交過(guò)某一個(gè)文件，這個(gè)文件就會(huì)被保存為多個(gè)版本。此時(shí)，可以在圖7.2.11中單擊“ShowHistory”命令，此文件的所有版本將顯示在下面的窗口中，可以單擊任意一個(gè)版本的文件查看內(nèi)容，如圖7.2.14所示。如果想撤銷某個(gè)版本的修改內(nèi)容，或者回到這個(gè)版本的上一個(gè)版本，就可以選中想要回退的版本并單擊鼠標(biāo)右鍵，然后選擇“RevertCommit”命令，新建一個(gè)名為“Revert×××Commit”的提交記錄，該記錄進(jìn)行的操作是將“×××Commit”中對(duì)代碼進(jìn)行的修改全部撤銷。圖7.2.14

查看文件的歷史版本子任務(wù)7.3數(shù)據(jù)庫(kù)設(shè)計(jì)的方法及原理【知識(shí)儲(chǔ)備】7.3.1數(shù)據(jù)庫(kù)設(shè)計(jì)的方法

（1）直觀設(shè)計(jì)法（手工試湊法）。這是最早使用的數(shù)據(jù)庫(kù)設(shè)計(jì)方法。這種方法依賴于設(shè)計(jì)者的經(jīng)驗(yàn)和技巧，缺乏科學(xué)分析的理論基礎(chǔ)和工程手段的支持，因?yàn)樵O(shè)計(jì)質(zhì)量與設(shè)計(jì)人員的經(jīng)驗(yàn)和水平有直接關(guān)系，所以設(shè)計(jì)質(zhì)量很難保證，主要適用于一些簡(jiǎn)單小型的系統(tǒng)。（2）規(guī)范設(shè)計(jì)法。將數(shù)據(jù)庫(kù)設(shè)計(jì)分為若干階段，明確規(guī)定各階段的任務(wù)，采用“自頂向下、分層實(shí)現(xiàn)、逐步求精”的設(shè)計(jì)原則，結(jié)合數(shù)據(jù)庫(kù)理論和軟件工程設(shè)計(jì)方法，實(shí)現(xiàn)設(shè)計(jì)過(guò)程的每一細(xì)節(jié)，最終完成整個(gè)設(shè)計(jì)任務(wù)。這種方法包括新奧爾良方法、基于實(shí)體-聯(lián)系（Entity-Relationship，E-R）模型的數(shù)據(jù)庫(kù)設(shè)計(jì)方法、基于第三范式（ThirdNormalForm，3NF）的設(shè)計(jì)方法、面向?qū)ο蟮臄?shù)據(jù)庫(kù)設(shè)計(jì)方法、統(tǒng)一建模語(yǔ)言（UnifiedModelingLanguage，UML）方法等。（3）計(jì)算機(jī)輔助設(shè)計(jì)法。在數(shù)據(jù)庫(kù)設(shè)計(jì)的某些過(guò)程中，可以利用計(jì)算機(jī)和一些輔助設(shè)計(jì)工具模擬某一規(guī)范設(shè)計(jì)法，并以人的知識(shí)或經(jīng)驗(yàn)為主導(dǎo)，通過(guò)人機(jī)交互方式實(shí)現(xiàn)設(shè)計(jì)中的某些部分。比如，Oracle公司開發(fā)的Designer、Sybase公司開發(fā)的PowerDesigner，都是常用的數(shù)據(jù)庫(kù)設(shè)計(jì)工具軟件。7.3.2數(shù)據(jù)庫(kù)設(shè)計(jì)的基本步驟

（1）需求分析。通過(guò)詳細(xì)調(diào)查現(xiàn)實(shí)世界要處理的對(duì)象（組織、部門、企業(yè)等），充分了解原系統(tǒng)（手工系統(tǒng)或計(jì)算機(jī)系統(tǒng)）的工作概況，明確用戶的各種需求。（2）概念結(jié)構(gòu)設(shè)計(jì)。通過(guò)對(duì)用戶需求進(jìn)行綜合、歸納與抽象，形成一個(gè)獨(dú)立于具體數(shù)據(jù)庫(kù)管理系統(tǒng)的概念模型。（3）邏輯結(jié)構(gòu)設(shè)計(jì)。將概念結(jié)構(gòu)轉(zhuǎn)換為某個(gè)數(shù)據(jù)庫(kù)管理系統(tǒng)支持的數(shù)據(jù)模型，并對(duì)其進(jìn)行優(yōu)化。（4）物理結(jié)構(gòu)設(shè)計(jì)。為邏輯結(jié)構(gòu)選取最適合應(yīng)用環(huán)境的物理結(jié)構(gòu)，包括存儲(chǔ)結(jié)構(gòu)和存取方法等。（5）數(shù)據(jù)庫(kù)實(shí)施。根據(jù)邏輯結(jié)構(gòu)設(shè)計(jì)和物理結(jié)構(gòu)設(shè)計(jì)的結(jié)果構(gòu)建數(shù)據(jù)庫(kù)，編寫與調(diào)試應(yīng)用程序，組織數(shù)據(jù)入庫(kù)并進(jìn)行試運(yùn)行。（6）數(shù)據(jù)庫(kù)運(yùn)行和維護(hù)。經(jīng)過(guò)試運(yùn)行后即可投入正式運(yùn)行，在運(yùn)行過(guò)程中必須不斷對(duì)其進(jìn)行評(píng)估、調(diào)整與修改。設(shè)計(jì)步驟設(shè)計(jì)描述數(shù)據(jù)處理需求分析數(shù)據(jù)字典、數(shù)據(jù)項(xiàng)、數(shù)據(jù)流、數(shù)據(jù)存儲(chǔ)的描述數(shù)據(jù)流圖、判定樹、數(shù)據(jù)字典中處理過(guò)程的描述概念結(jié)構(gòu)設(shè)計(jì)概念模型（E-R模型）、數(shù)據(jù)字典系統(tǒng)說(shuō)明書（系統(tǒng)要求、方案、數(shù)據(jù)流圖）邏輯結(jié)構(gòu)設(shè)計(jì)某種數(shù)據(jù)模型（如關(guān)系）系統(tǒng)結(jié)構(gòu)圖（模塊結(jié)構(gòu)）物理結(jié)構(gòu)設(shè)計(jì)存儲(chǔ)安排、方法選擇、存取路徑建立模塊設(shè)計(jì)數(shù)據(jù)庫(kù)實(shí)施編寫與調(diào)試應(yīng)用程序、裝入數(shù)據(jù)、數(shù)據(jù)庫(kù)試運(yùn)行程序編碼、編譯聯(lián)結(jié)、測(cè)試數(shù)據(jù)庫(kù)運(yùn)行和

維護(hù)性能監(jiān)測(cè)、轉(zhuǎn)儲(chǔ)/恢復(fù)、數(shù)據(jù)庫(kù)重組和重構(gòu)新舊系統(tǒng)轉(zhuǎn)換、運(yùn)行、維護(hù)表7.3.1

數(shù)據(jù)庫(kù)的設(shè)計(jì)步驟及具體的設(shè)計(jì)描述7.3.3概念結(jié)構(gòu)設(shè)計(jì)

概念結(jié)構(gòu)設(shè)計(jì)就是將需求分析得到的用戶需求抽象為信息結(jié)構(gòu)（即概念模型）的過(guò)程。

目前應(yīng)用最普遍的是E-R模型，它將現(xiàn)實(shí)世界的信息結(jié)構(gòu)統(tǒng)一用屬性、實(shí)體以及它們之間的聯(lián)系來(lái)描述。

為了簡(jiǎn)化E-R模型的處理，現(xiàn)實(shí)世界的事物能作為屬性對(duì)待的，盡量作為屬性對(duì)待。

其中有兩條基本的準(zhǔn)則。（1）作為屬性，不能再具有需要描述的性質(zhì)。屬性必須是不可再細(xì)分的數(shù)據(jù)項(xiàng)，不能包含其他屬性。（2）屬性不能與其他實(shí)體具有聯(lián)系，即E-R模型中所表示的聯(lián)系是實(shí)體之間的聯(lián)系。7.3.4實(shí)體-聯(lián)系圖（E-R模型）

對(duì)E-R模型的理解，主要是弄清楚其組成元素和元素間的聯(lián)系。（1）組成元素。E-R模型中具體的組成元素如表7.3.2所示。元素描述表示形式實(shí)體客觀存在并可以相互區(qū)別的事物用矩形框表示，矩形框內(nèi)寫明實(shí)體名屬性實(shí)體所具有的一個(gè)屬性用橢圓形表示，并用無(wú)向邊將其與相應(yīng)的實(shí)體連接起來(lái)聯(lián)系實(shí)體和實(shí)體之間，以及實(shí)體內(nèi)部的聯(lián)系用菱形表示，菱形框內(nèi)寫明聯(lián)系名，并用無(wú)向邊分別將其與有關(guān)實(shí)體連接起來(lái)，同時(shí)在無(wú)向邊旁邊標(biāo)上聯(lián)系的類型表7.3.2

E-R模型中具體的組成元素（2）聯(lián)系詳解。

實(shí)體之間的聯(lián)系最常見的有如下3種。①一對(duì)一。

圖7.3.1所示為一對(duì)一聯(lián)系的示意。其含義是，實(shí)體集“公民”中的每一個(gè)實(shí)體至多與實(shí)體集“身份證號(hào)碼”中一個(gè)實(shí)體有聯(lián)系；反之，實(shí)體集“身份證號(hào)碼”中的每個(gè)實(shí)體至多與實(shí)體集“公民”中的一個(gè)實(shí)體有聯(lián)系。圖7.3.1

一對(duì)一聯(lián)系示意②一對(duì)多。

圖7.3.2所示為一對(duì)多聯(lián)系的示意。其含義是，實(shí)體集“班級(jí)”至少與實(shí)體集“學(xué)生”中的N（N

>0）個(gè)實(shí)體有聯(lián)系；并且實(shí)體集“學(xué)生”中的每一個(gè)實(shí)體至多與實(shí)體集“班級(jí)”中的一個(gè)實(shí)體有聯(lián)系。圖7.3.2

一對(duì)多聯(lián)系示意③多對(duì)多。

圖7.3.3所示為多對(duì)多聯(lián)系的示意。其含義是，實(shí)體集“學(xué)生”中的每一個(gè)實(shí)體至少與實(shí)體集“課程”中的M（M

>0）個(gè)實(shí)體有聯(lián)系，并且實(shí)體集“課程”中的每一個(gè)實(shí)體至少與實(shí)體集“學(xué)生”中的N（N

>0）個(gè)實(shí)體有聯(lián)系。圖7.3.3

多對(duì)多聯(lián)系示意子任務(wù)7.4創(chuàng)建數(shù)據(jù)庫(kù)7.4.1實(shí)例詳解

為了能順利完成數(shù)據(jù)庫(kù)設(shè)計(jì)，小王同學(xué)先做了如下的練習(xí)。

問(wèn)題描述：（1）一個(gè)學(xué)生可選修多門課程，一門課程有若干學(xué)生選修；（2）一個(gè)教師可講授多門課程，一門課程只有一個(gè)教師講授；（3）一個(gè)學(xué)生選修一門課程，僅有一個(gè)成績(jī)；（4）學(xué)生的屬性有學(xué)號(hào)、姓名；教師的屬性有教師編號(hào)、教師姓名；課程的屬性有課程號(hào)、課程名。

根據(jù)上面的問(wèn)題描述，小王同學(xué)最終繪制了圖7.4.1所示的E-R模型，其中，有下畫線的屬性表示主鍵。圖7.4.1

根據(jù)問(wèn)題描述繪制的E-R模型

有了E-R模型，就可以轉(zhuǎn)換數(shù)據(jù)表了。一般來(lái)說(shuō)，可以為一個(gè)實(shí)體創(chuàng)建一張表，為一個(gè)聯(lián)系（關(guān)系）創(chuàng)建一張表。當(dāng)然，在實(shí)際工作中，可以根據(jù)情況進(jìn)行合并等操作。

完成上面的E-R模型后，小王同學(xué)覺得火候差不多了，可以正式制作在線投票系統(tǒng)的數(shù)據(jù)庫(kù)了。他仔細(xì)看了子任務(wù)7.1的需求分析，然后畫出了圖7.4.2所示的E-R模型。

他仔細(xì)檢查和分析后，覺得這個(gè)E-R模型已經(jīng)沒有問(wèn)題了，能夠完整體現(xiàn)在線投票系統(tǒng)的需求分析，接下來(lái)，他根據(jù)E-R模型設(shè)計(jì)出了最終的數(shù)據(jù)表，其具體結(jié)構(gòu)如表7.4.1～表7.4.3所示。圖7.4.2

在線投票系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)之E-R模型序號(hào)列名類型排序規(guī)則注釋1idint(11)

用戶ID，主鍵2userNamevarchar(20)utf8_unicode_ci用戶名3pwvarchar(32)utf8_unicode_ci密碼4emailvarchar(256)utf8_unicode_ci信箱5admintinyint(1)

是否為管理員6picvarchar(256)utf8_unicode_ci用戶頭像表7.4.1

用戶表（表名：userInfo）序號(hào)列名類型排序規(guī)則注釋1idint(11)

投票詳情ID，主鍵2userIDint(11)

用戶ID，外鍵3carIDint(11)

車輛ID，外鍵4voteTimedate

投票時(shí)間5ipvarchar(15)utf8_unicode_ci投票者IP地址表7.4.2

投票表（表名：voteDetail）序號(hào)列名類型排序規(guī)則注釋1idint(11)

車輛ID，主鍵2carNamevarchar(45)utf8_unicode_ci車輛名稱3carDescvarchar(1000)utf8_unicode_ci車輛描述4carPICvarchar(256)utf8_unicode_ci車輛圖片5carNumint(11)

車輛得票數(shù)表7.4.3

車輛表（表名：carInfo）7.4.2主鍵和外鍵

在小王同學(xué)設(shè)計(jì)的數(shù)據(jù)表中出現(xiàn)了“主鍵”和“外鍵”。那什么是主鍵和外鍵呢？

關(guān)系數(shù)據(jù)庫(kù)中的一條記錄有若干屬性，若其中某一個(gè)屬性或?qū)傩越M能唯一標(biāo)識(shí)一條記錄，該屬性或?qū)傩越M就可以稱為一個(gè)主鍵。

比如，有一張數(shù)據(jù)表名為“學(xué)生表”，其列構(gòu)成為：學(xué)號(hào)、姓名、性別、班級(jí)。其中每個(gè)學(xué)生的學(xué)號(hào)是唯一的，因此，學(xué)號(hào)就是一個(gè)主鍵。

又如，有一張數(shù)據(jù)表名為“課程表”，其列構(gòu)成為：課程編號(hào)、課程名、學(xué)分。其中課程編號(hào)是唯一的，因此，課程編號(hào)就是一個(gè)主鍵。

再如，有一張數(shù)據(jù)表名為“成績(jī)表”，其列構(gòu)成為：學(xué)號(hào)、課程編號(hào)、成績(jī)。顯然，成績(jī)表中的單個(gè)屬性無(wú)法唯一標(biāo)識(shí)一條記錄，學(xué)號(hào)和課程編號(hào)的組合才可以唯一標(biāo)識(shí)一條記錄，所以學(xué)號(hào)和課程編號(hào)的屬性組就是一個(gè)主鍵。

雖然成績(jī)表中的學(xué)號(hào)不是成績(jī)表的主鍵，但它和學(xué)生表中的學(xué)號(hào)相對(duì)應(yīng)，并且學(xué)生表中的學(xué)號(hào)是學(xué)生表的主鍵，因此，可以稱成績(jī)表中的學(xué)號(hào)是學(xué)生表的外鍵。同理，成績(jī)表中的課程編號(hào)是課程表的外鍵。

數(shù)據(jù)表中，除了主鍵、外鍵，還有索引。那么主鍵、外鍵和索引有什么區(qū)別？表7.4.4總結(jié)了主鍵、外鍵和索引的區(qū)別。主鍵外鍵索引定義唯一標(biāo)識(shí)一條記錄，不能有重復(fù)，不允許為空表的外鍵是另一表的主鍵，外鍵可以有重復(fù)的值，可以是空值該字段沒有重復(fù)值，但可以是空值作用用來(lái)保證數(shù)據(jù)完整性用來(lái)和其他表建立聯(lián)系提高查詢排序的速度個(gè)數(shù)主鍵只能有一個(gè)一張表可以有多個(gè)外鍵一張表可以有多個(gè)唯一索引表7.4.4

主鍵、外鍵和索引的區(qū)別

小王同學(xué)根據(jù)前面創(chuàng)建好的3張數(shù)據(jù)表，在phpMyAdmin中進(jìn)行數(shù)據(jù)庫(kù)創(chuàng)建。他創(chuàng)建了一個(gè)數(shù)據(jù)庫(kù)，名為vote，其中就包括上述3張數(shù)據(jù)表，具體內(nèi)容如圖7.4.3所示。其中每一張表都采用了一個(gè)id作為主鍵，這個(gè)id列是一個(gè)自動(dòng)增長(zhǎng)列，它本身并無(wú)實(shí)際意義，僅僅用來(lái)作為主鍵，作用是標(biāo)識(shí)某一行數(shù)據(jù)。圖7.4.3

在phpMyAdmin中創(chuàng)建好的數(shù)據(jù)表7.4.3如何創(chuàng)建外鍵

1．創(chuàng)建外鍵的必備條件（1）需要把相關(guān)數(shù)據(jù)表的存儲(chǔ)引擎設(shè)置為InnoDB。（2）創(chuàng)建外鍵時(shí)，外鍵本身必須創(chuàng)建索引。（3）設(shè)置外鍵的列，其數(shù)據(jù)類型要和對(duì)應(yīng)的主鍵數(shù)據(jù)類型保持一致。2．選擇數(shù)據(jù)表存儲(chǔ)引擎

在創(chuàng)建數(shù)據(jù)表時(shí)，可以在右下角的存儲(chǔ)引擎中選擇類型，如圖7.4.4所示。

在MySQL數(shù)據(jù)庫(kù)中，數(shù)據(jù)表的存儲(chǔ)引擎默認(rèn)是MyISAM。如果要?jiǎng)?chuàng)建外鍵，則存儲(chǔ)引擎必須設(shè)置為InnoDB。3．MyISAM和InnoDB的區(qū)別（1）緩存機(jī)制。MyISAM僅僅緩存索引，不會(huì)緩存實(shí)際數(shù)據(jù)信息，它會(huì)將這一工作交給操作系統(tǒng)（OperatingSystem，OS）級(jí)別的文件系統(tǒng)緩存，所以MyISAM緩存優(yōu)化工作集中在索引緩存優(yōu)化上。InnoDB有自己的緩存，不僅緩存索引，還緩存表中的數(shù)據(jù)。（2）事務(wù)支持。MyISAM不支持事務(wù)。InnoDB支持事務(wù)，也支持主鍵和外鍵。（3）鎖定實(shí)現(xiàn)。MyISAM鎖定由MySQL服務(wù)控制，只支持表級(jí)鎖。InnoDB鎖定交由InnoDB存儲(chǔ)引擎，支持行級(jí)鎖、頁(yè)級(jí)鎖等粒度更小的鎖定級(jí)別。由于鎖定級(jí)別的差異，在更新并行度上，InnoDB比MyISAM好很多。（4）數(shù)據(jù)物理存儲(chǔ)方式（包括索引和數(shù)據(jù)）。在MyISAM存儲(chǔ)引擎中，每張數(shù)據(jù)表有3個(gè)文件：“.FRM”文件存放表結(jié)構(gòu)數(shù)據(jù)；“.MYI”文件存放索引信息；“.MYD”文件存放表數(shù)據(jù)。圖7.4.4

新建數(shù)據(jù)表時(shí)設(shè)置存儲(chǔ)引擎4．存儲(chǔ)引擎的修改

如果已經(jīng)使用默認(rèn)存儲(chǔ)引擎創(chuàng)建好了數(shù)據(jù)表，則可以在進(jìn)入數(shù)據(jù)表以后，在頁(yè)面上方導(dǎo)航菜單中單擊“操作”按鈕，然后在“存儲(chǔ)引擎”中進(jìn)行修改，如圖7.4.5所示。圖7.4.5

在“操作”中修改數(shù)據(jù)表的存儲(chǔ)引擎5．添加外鍵

在phpMyAdmin中打開表結(jié)構(gòu)后，其中有一個(gè)“關(guān)聯(lián)視圖”按鈕，單擊該按鈕，即可添加外鍵約束，如圖7.4.6所示。

從圖7.4.6中可以看出，在第一欄中可以輸入外鍵約束的名稱，在第二欄和第三欄中，可以設(shè)置當(dāng)刪除（ONDELETE）、更新（ONUPDATE）外鍵對(duì)應(yīng)的主鍵記錄時(shí)，外鍵的值應(yīng)該如何處理。可選值有4種，其含義如下。圖7.4.6

在關(guān)聯(lián)視圖中創(chuàng)建外鍵約束（1）CASCADE：在父表上更新/刪除記錄時(shí)，同步更新/刪除子表的匹配記錄。（2）SETNULL：在父表上更新/刪除記錄時(shí)，將子表上匹配記錄的列設(shè)為null（要注意子表的外鍵列不能設(shè)置為notnull）。（3）NOACTION：如果子表中有匹配的記錄，則不允許對(duì)父表對(duì)應(yīng)外鍵的記錄進(jìn)行更新/刪除操作。（4）RESTRICT：同NOACTION，都是立即檢查外鍵約束。

第四欄用于選擇要將哪一列設(shè)置成外鍵。第五欄用于選擇此外鍵對(duì)應(yīng)的主鍵所在的數(shù)據(jù)庫(kù)名稱。第六欄用于選擇此外鍵對(duì)應(yīng)的主鍵所在表。第七欄用于選擇此外鍵對(duì)應(yīng)的主鍵所在的列。

創(chuàng)建好外鍵后，再次查看voteDetail數(shù)據(jù)表的表結(jié)構(gòu)，如圖7.4.7所示。其中，userID和carID后面都有灰色的鑰匙圖標(biāo)，表明是外鍵；id后面有金色的鑰匙圖標(biāo)，表明是主鍵。在表結(jié)構(gòu)下面的索引區(qū)域可以看到一個(gè)主鍵（鍵名是PRIMARY），還有兩個(gè)索引（鍵名分別是carID和userID）。圖7.4.7

創(chuàng)建好外鍵的voteDetail數(shù)據(jù)表7.4.4數(shù)據(jù)庫(kù)的導(dǎo)入和導(dǎo)出

數(shù)據(jù)庫(kù)創(chuàng)建完成后，如何在不同計(jì)算機(jī)之間轉(zhuǎn)移數(shù)據(jù)庫(kù)呢？這就涉及數(shù)據(jù)庫(kù)（表）的導(dǎo)入和導(dǎo)出操作了。

在phpMyAdmin中，可以很方便地進(jìn)行數(shù)據(jù)庫(kù)的導(dǎo)入和導(dǎo)出操作。只是要注意，如果直接在phpMyAdmin左邊單擊某個(gè)數(shù)據(jù)庫(kù)，右邊會(huì)顯示當(dāng)前數(shù)據(jù)庫(kù)的所有表，此時(shí)，單擊右邊上方導(dǎo)航欄中的“導(dǎo)出”按鈕，可以在導(dǎo)出方式中選擇“自定義”，然后可以選擇導(dǎo)出一張或多張表，如圖7.4.8所示。圖7.4.8

導(dǎo)出數(shù)據(jù)表

在圖7.4.8左上角位置單擊“服務(wù)器：localhost”鏈接，然后單擊“導(dǎo)出”按鈕，可以選擇導(dǎo)出一個(gè)或多個(gè)數(shù)據(jù)庫(kù)，如圖7.4.9所示。此時(shí)，可以在下方的“數(shù)據(jù)庫(kù)”中選擇要導(dǎo)出哪個(gè)或哪些數(shù)據(jù)庫(kù)。在“輸出”中，可以按照需要選擇輸出格式。其他內(nèi)容和導(dǎo)出數(shù)據(jù)表一樣。以此種方式導(dǎo)出的SQL文件是包含數(shù)據(jù)庫(kù)本身的。如果要在另外一臺(tái)計(jì)算機(jī)中進(jìn)行恢復(fù)，則單擊“服務(wù)器：localhost”，再單擊“導(dǎo)入”按鈕，選擇此SQL文件，即可將數(shù)據(jù)庫(kù)連帶數(shù)據(jù)表一起恢復(fù)。圖7.4.9

導(dǎo)出數(shù)據(jù)庫(kù)【任務(wù)小結(jié)】

在本任務(wù)中，主要完成了項(xiàng)目的需求分析，學(xué)習(xí)了版本控制和代碼托管的使用。這些內(nèi)容在正式的商業(yè)項(xiàng)目開發(fā)中非常重要，屬于必須掌握的內(nèi)容。

另外，本任務(wù)還講解了數(shù)據(jù)庫(kù)設(shè)計(jì)的方法和基本步驟，同學(xué)們?nèi)绻麑?duì)這一塊內(nèi)容感興趣，則建議下載PowerDesigner軟件，并嘗試在其中設(shè)計(jì)數(shù)據(jù)庫(kù)。牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）任務(wù)8在線投票系統(tǒng)首頁(yè)制作及投票功能實(shí)現(xiàn)子任務(wù)8.1首頁(yè)靜態(tài)頁(yè)面制作（Bootstrap布局）8.1.1了解Bootstrap

Bootstrap是全球最受歡迎的前端開源工具庫(kù)之一，它支持Sass變量和Mixin，提供響應(yīng)式柵格系統(tǒng)，并且自帶大量組件和眾多強(qiáng)大的JavaScript插件。

Bootstrap是美國(guó)設(shè)計(jì)師馬克·奧托（MarkOtto）和雅各布·桑頓（JacobThornton）基于HTML、CSS、JavaScript合作開發(fā)的簡(jiǎn)潔、直觀、功能強(qiáng)大的前端開發(fā)框架，使得Web開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它是由動(dòng)態(tài)CSS語(yǔ)言Less寫成的。Bootstrap一經(jīng)推出便頗受歡迎，一直是GitHub上的熱門開源框架，NASA的MSNBC（微軟全國(guó)廣播公司）的BreakingNews也使用了該框架。國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源代碼進(jìn)行性能優(yōu)化而來(lái)的。

Bootstrap目前有多個(gè)版本并存，關(guān)于Bootstrap的詳細(xì)使用方法，可以到官網(wǎng)下載教程，網(wǎng)絡(luò)上也有很多相關(guān)的資源可以使用。

需要注意的是，Bootstrap的所有JavaScript插件都依賴于jQuery，因此，在使用時(shí)，需要先引入jQuery（必須在引入Bootstrap的核心JavaScript庫(kù)之前引入）。

8.1.2認(rèn)識(shí)Bootstrap的柵格系統(tǒng)

在Bootstrap中，頁(yè)面的布局使用柵格系統(tǒng)來(lái)完成。Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，它的基本原理是把整個(gè)頁(yè)面分成12列，然后可以隨著屏幕或視口（ViewPort）尺寸的變化，自動(dòng)設(shè)置每一行占據(jù)多少列。

柵格系統(tǒng)的工作原理很簡(jiǎn)單，就是通過(guò)一系列的行（Row）與列（Column）的組合來(lái)創(chuàng)建頁(yè)面布局。下面簡(jiǎn)單介紹Bootstrap柵格系統(tǒng)的工作原理和注意事項(xiàng)。（1）所有的“.row（行）”都必須包含在具有“.container

（固定寬度）”或“

.container-fluid（100%寬度）”樣式的容器中。（2）在每一“行”中，都會(huì)在水平方向創(chuàng)建一組“列”。（3）頁(yè)面中的具體內(nèi)容應(yīng)當(dāng)位于“列”內(nèi)，并且只有“列”可以作為“行”的直接子元素。（4）在制作柵格布局時(shí)，需要使用“

.row”“.col-xs-3”等預(yù)定義的類。（5）每一“列”都可添加間距（Padding）屬性，這樣可以創(chuàng)建列與列之間的槽（Gutter）寬。（6）柵格系統(tǒng)中的列可以通過(guò)指定1～12的值來(lái)表示其跨越的范圍。例如，3個(gè)等寬的列可以使用3個(gè)“.col-xs-4”來(lái)創(chuàng)建。（7）如果一“行”中包含的“列”數(shù)目大于12，則多余的“列”將另起一行排列。（8）柵格類適用于屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類，也就是說(shuō)，小屏幕是優(yōu)先的。

通過(guò)表8.1.1可以詳細(xì)查看Bootstrap的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。超小屏幕

手機(jī)

(<768px)小屏幕

平板電腦

(≥768px)中等屏幕

小型桌面顯示器

(≥992px)大屏幕

大型桌面顯示器

(≥1200px)柵格系統(tǒng)行為總是水平排列開始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕?container最大寬度None（自動(dòng)）750px970px1170px類前綴.col-xs-.col-sm-.col-md-.col-lg-列數(shù)12最大列寬自動(dòng)62px81px97px槽寬30px（每列左右均有

15px間隔）嵌套是偏移（Offset）是支持列排序是表8.1.1

Bootstrap的柵格系統(tǒng)在多種屏幕設(shè)備上的工作模式8.1.3引入Bootstrap庫(kù)文件

要使用Bootstrap來(lái)布局，首先需要引入Bootstrap庫(kù)文件。Bootstrap目前有v2、v3、v4、v5這4個(gè)版本，版本之間有一定的差異。

一般來(lái)說(shuō)，普通項(xiàng)目采用v3比較合適。在引入Bootstrap庫(kù)文件時(shí)，可以不用下載，推薦直接使用內(nèi)容分發(fā)網(wǎng)絡(luò)（ContentDeliveryNetwork，CDN）加速器，其中Bootstrap的核心CSS文件和核心JavaScript文件必須引入。8.1.4Bootstrap布局測(cè)試

（1）新建index.php文件。（2）在文檔中引入Bootstrap的核心CSS文件和核心JavaScript文件。（3）實(shí)現(xiàn)頁(yè)面布局。（4）測(cè)試效果。圖8.1.1

首頁(yè)基本布局測(cè)試8.1.5在項(xiàng)目首頁(yè)中使用Bootstrap布局

小王同學(xué)用了一些示例文字和圖片來(lái)模擬最終的投票界面。最后運(yùn)行的結(jié)果如下，其中圖8.1.2所示為在大型桌面顯示器上的布局效果；圖8.1.3所示為在小型桌面顯示器上的布局效果；圖8.1.4所示為在平板電腦上的布局效果；圖8.1.5所示為在手機(jī)上的布局效果。圖8.1.2

大型桌面顯示器布局效果圖8.1.3

小型桌面顯示器布局效果圖8.1.4

平板布局效果圖8.1.5

手機(jī)布局效果

仔細(xì)看小王同學(xué)完成的代碼，可以看到，他在“行”中又嵌套了“行”。事實(shí)上，這種嵌套可以多次進(jìn)行。只是需要注意，需要保證每一“行”中的“列”數(shù)量在不同分辨率的設(shè)備上加起來(lái)要等于12。

圖8.1.6

大型桌面顯示器中未使用clearfix類響應(yīng)式工具的布局效果圖8.1.7

小型桌面顯示器中未使用clearfix類和響應(yīng)式工具的布局效果8.1.6在PhpStorm中下載外部庫(kù)文件

小王同學(xué)已經(jīng)完成了首頁(yè)的靜態(tài)內(nèi)容制作，但他突然發(fā)現(xiàn)，在PhpStorm中，第9行和第13行就是遠(yuǎn)程引用的CSS文件和JavaScript文件，鏈接背景是黃色的，將鼠標(biāo)指針移至其上，會(huì)提示該庫(kù)文件在本地不存在，這樣會(huì)導(dǎo)致該庫(kù)文件對(duì)應(yīng)的代碼自動(dòng)提示等功能失效，如圖8.1.8所示。圖8.1.8

外部庫(kù)文件下載提示

單擊提示中的“Downloadlibrary”鏈接，就可以將對(duì)應(yīng)的庫(kù)文件下載至本地，如圖8.1.9所示?？梢钥吹剑螺d庫(kù)文件后，第13行的背景已經(jīng)沒有黃色底紋了，同時(shí)，可以關(guān)注到編輯器左邊的Profect窗口下方有ExternalLibraries（外部庫(kù)文件）標(biāo)簽，單擊展開可以看到已經(jīng)存在第13行對(duì)應(yīng)的庫(kù)文件。圖8.1.9

查看下載的外部庫(kù)文件子任務(wù)8.2首頁(yè)動(dòng)態(tài)數(shù)據(jù)讀取8.2.1在數(shù)據(jù)庫(kù)中初始化數(shù)據(jù)表8.2.2在首頁(yè)中讀取數(shù)據(jù)表內(nèi)容并循環(huán)輸出已有車輛信息

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

本任務(wù)的核心內(nèi)容是使用Bootstrap完成頁(yè)面布局。在使用Bootstrap時(shí)，要靈活運(yùn)用其柵格特性，針對(duì)不同設(shè)備進(jìn)行編程，并配合使用響應(yīng)式工具，以達(dá)到響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)要求。牟奇春主編PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程（微課版）任務(wù)9在線投票系統(tǒng)投票功能實(shí)現(xiàn)子任務(wù)9.1游客投票功能實(shí)現(xiàn)9.1.1修改前端頁(yè)面文件

9.1.2制作后端投票文件

子任務(wù)9.2整合會(huì)員登錄系統(tǒng)9.2.1分析整合文件

小王同學(xué)根據(jù)前面的需求分析，整理了在線投票系統(tǒng)需要的會(huì)員管理系統(tǒng)功能，該系統(tǒng)的功能有：會(huì)員注冊(cè)、登錄（包括管理員登錄）、會(huì)員修改個(gè)人資料。管理員登錄后可進(jìn)入后臺(tái)管理，但此處的后臺(tái)管理功能和會(huì)員管理系統(tǒng)中的后臺(tái)管理功能有很大不同。

通過(guò)分析需求，小王同學(xué)已經(jīng)清楚了如何整合前面的會(huì)員管理系統(tǒng)。以下文件是需要從會(huì)員管理系統(tǒng)中移植過(guò)來(lái)的文件：checkAdmin.php（判斷管理員是否登錄）checkUsername.php（判斷用戶名是否可用）code.php（生成驗(yàn)證碼）login.php（用戶登錄前端文件）logout.php（注銷登錄）modify.php（修改用戶資料）nav.php（導(dǎo)航欄）page.php（數(shù)據(jù)分頁(yè)文件）postLogin.php（用戶登錄后端文件）postModify.php（資料修改后端文件）postReg.php（用戶注冊(cè)后端文件）signup.php（用戶注冊(cè)前端文件）

另外，img下面的0.jpg和1.jpg也要復(fù)制過(guò)來(lái)。然后在index.

php中給右上角的“登錄”和“注冊(cè)”添加鏈接，就可以打開頁(yè)面測(cè)試效果了。9.2.2了解前端UI框架Layui

Layui是一個(gè)前端UI框架，其中包含一個(gè)layer彈層組件，這個(gè)組件有豐富的彈窗效果，正好可以用來(lái)展示注冊(cè)、登錄等頁(yè)面。

layer是一款近年來(lái)備受青睞的Web彈層組件，這得益于它全方位的解決方案，以及致力于服務(wù)各個(gè)水平段的開發(fā)人員，可令相關(guān)頁(yè)面輕松擁有豐富友好的操作體驗(yàn)。

它盡可能地以更少的代碼展現(xiàn)更強(qiáng)健的功能，且格外注重性能的提升、易用和實(shí)用性，正因如此，越來(lái)越多的開發(fā)者都使用了layer。

layer兼容了包括IE6在內(nèi)的所有主流瀏覽器，擁有數(shù)量可觀的接口，可以自定義各種風(fēng)格，每一種彈層模式都極具特色，因此廣受歡迎。9.2.3使用Layui顯示注冊(cè)和登錄頁(yè)面

（1）在index.php中引入layer的核心JavaScript文件。（2）引入jQuery庫(kù)文件。（3）修改頭部的導(dǎo)航鏈接。（4）使用JavaScript完成open()方法的編寫。圖9.2.1

未引入jQuery庫(kù)文件而報(bào)錯(cuò)

當(dāng)小王同學(xué)在測(cè)試頁(yè)面效果時(shí)，發(fā)現(xiàn)在彈出層中還有會(huì)員管理系統(tǒng)的標(biāo)題、導(dǎo)航鏈接等內(nèi)容，現(xiàn)在這些內(nèi)容已經(jīng)不適合放在彈出層，因此，他修改了注冊(cè)和登錄頁(yè)面，使其不再包含nav.php文件。修改好以后，單擊“登錄”鏈接，效果如圖9.2.2所示，單擊“注冊(cè)”鏈接，效果如圖9.2.3所示。

圖9.2.2

使用layer彈窗顯示登錄頁(yè)面

圖9.2.3

使用layer彈窗顯示注冊(cè)頁(yè)面9.2.4優(yōu)化彈窗跳轉(zhuǎn)邏輯，匹配新的數(shù)據(jù)表

（1）修改JavaScript中的代碼，添加一個(gè)關(guān)閉彈出層的方法。（2）打開postLogin.php文件，修改登錄后的頁(yè)面跳轉(zhuǎn)邏輯的相