16210320433-許鈺婷-基于html5的個(gè)人網(wǎng)站開發(fā)

1、本科畢業(yè)設(shè)計(jì)（論文） 基于HTML5的個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)廣東東軟學(xué)院本科畢業(yè)設(shè)計(jì)（論文） Design and Implementation of Personal Website Based on HTML5 院 （系）計(jì)算機(jī)學(xué)院專 業(yè)數(shù)字媒體技術(shù)班 級(jí)數(shù)字媒體技術(shù)4班學(xué) 號(hào)16210320433學(xué)生姓名許鈺婷指導(dǎo)教師李梁奇提交日期2020年 4 月 22 日畢業(yè)設(shè)計(jì)（論文）原創(chuàng)性聲明本人鄭重聲明：所呈交的畢業(yè)設(shè)計(jì)（論文），是本人在指導(dǎo)老師的指導(dǎo)下，獨(dú)立進(jìn)行的設(shè)計(jì)（研究）工作及取得的成果，論文中引用他人的文獻(xiàn)、數(shù)據(jù)、圖件、資料均已明確標(biāo)注出，論文中的結(jié)論和結(jié)果為本人獨(dú)立完成，不包含他人已經(jīng)

2、發(fā)表或撰寫的作品及成果。對(duì)本文的研究作出貢獻(xiàn)的個(gè)人和集體，均已在論文中作了明確的說(shuō)明。本人完全意識(shí)到本聲明的法律結(jié)果由本人承擔(dān)。畢業(yè)論文作者（簽字）： 簽字日期： 年 月 日成績(jī)?cè)u(píng)定成績(jī)項(xiàng)論文成績(jī)（百分制）折合比例實(shí)得成績(jī)（折合分）指導(dǎo)教師成績(jī)30%評(píng)閱教師成績(jī)20%答辯成績(jī)50%總評(píng)成績(jī)注：畢業(yè)設(shè)計(jì)（論文）成績(jī)按百分制評(píng)定。答辯成績(jī)不及格的（評(píng)分低于60分的），則該畢業(yè)設(shè)計(jì)（論文）總評(píng)成績(jī)?yōu)榇疝q成績(jī)。內(nèi)容摘要本項(xiàng)目將要設(shè)計(jì)及制作一個(gè)博客類的個(gè)人網(wǎng)站，網(wǎng)站分為學(xué)習(xí)、旅游、寵物、愛豆四個(gè)博客大類。訪客可以瀏覽文章和對(duì)文章進(jìn)行評(píng)論，還可以給博主留言。管理員可以在后臺(tái)對(duì)網(wǎng)站的數(shù)據(jù)進(jìn)行增、刪、改。本網(wǎng)

3、站采用HTML5進(jìn)行頁(yè)面開發(fā)，PHP實(shí)現(xiàn)數(shù)據(jù)的交互，MySQL建立數(shù)據(jù)庫(kù)。網(wǎng)站設(shè)計(jì)及制作過(guò)程中所使用到的軟件包括但不限于Illustrator （網(wǎng)站界面圖片）、Visual Studio Code（代碼編寫）、MySQL（網(wǎng)站數(shù)據(jù)庫(kù)）、Draw.io等等。本項(xiàng)目中涉及到的工作流程有：前期網(wǎng)站運(yùn)行環(huán)境（包括服務(wù)器的搭建，PHP環(huán)境設(shè)置等），個(gè)人網(wǎng)站功能的設(shè)計(jì)和構(gòu)思，網(wǎng)站數(shù)據(jù)庫(kù)的設(shè)計(jì)，靜態(tài)頁(yè)面的設(shè)計(jì)和搭建，PHP實(shí)現(xiàn)前端和數(shù)據(jù)庫(kù)的交互，后臺(tái)登錄的安全性設(shè)置。關(guān)鍵詞：HTML5 PHP MySQL數(shù)據(jù)庫(kù) 個(gè)人網(wǎng)站 博客類AbstractThis project will design and pr

4、oduce a personal blog website, which is divided into four blog categories: learning, travel, pets and idol.Visitors can browse and comment on articles，also leave a message to blogger.Administr-ators can add, delete and change the data of website.This website uses HTML5 to design pages, uses PHP to a

5、chieve data interaction, uses MySQL to establish a database.The software used in website design and production includes but is not limited to Illustrator (website interface pictures), VisualStudioCode (code writing), Mysql (website database), draw.io, etc.Work process involved in this project are: B

6、uilding site running environment ( the construction of the server, the PHP environment Settings, etc.), personal website function design, web database design, building static pages, realize the dynamic development in PHP, login security Settings.Key words: HTML5 PHP MySQL database personal website B

7、log目錄第二章 緒論11.1開發(fā)背景及意義11.2選題國(guó)內(nèi)研究現(xiàn)狀11.3課題研究主要內(nèi)容2第三章 前期準(zhǔn)備32.1 HTML5介紹32.1.1 發(fā)展歷程32.1.2 新特點(diǎn)32.2搭建運(yùn)行環(huán)境3第四章 系統(tǒng)分析43.1 網(wǎng)站需求分析43.3.1 前臺(tái)需求分析43.3.2 后臺(tái)需求分析43.2 網(wǎng)站邏輯模型53.3 數(shù)據(jù)庫(kù)設(shè)計(jì)6第五章 靜態(tài)頁(yè)面實(shí)現(xiàn)74.1 網(wǎng)站文件結(jié)構(gòu)74.2 首頁(yè)實(shí)現(xiàn)74.2.1 JavaScript導(dǎo)航欄74.2.2 CSS文字特效84.2.3 jQuery頁(yè)面滾動(dòng)元素94.3留言頁(yè)實(shí)現(xiàn)94.3.1 JavaScript表單驗(yàn)證94.3.2 JavaScript生成簡(jiǎn)單

8、的驗(yàn)證碼114.3.3 onsubmit阻止表單提交124.4 文章列表頁(yè)實(shí)現(xiàn)124.4.1 點(diǎn)擊返回頂部按鈕124.4.2 CSS偽元素制作提示框134.5 其他前端展示頁(yè)面134.6 后臺(tái)系統(tǒng)頁(yè)面144.6.1 Bootstrap網(wǎng)格系統(tǒng)144.6.2 后臺(tái)首頁(yè)基本框架154.6.3 Bootstrap模態(tài)框16第六章 實(shí)現(xiàn)動(dòng)態(tài)開發(fā)175.1 留言板動(dòng)態(tài)開發(fā)175.1.1數(shù)據(jù)庫(kù)連接175.1.2 表單提交175.1.3 留言顯示185.1.4 后臺(tái)留言刪除185.2 欄目動(dòng)態(tài)開發(fā)195.2.1 欄目修改195.3 文章頁(yè)面的動(dòng)態(tài)開發(fā)205.3.1 Simditor富文本編輯器205.3.2

9、 文章添加215.3.3 文章修改225.3.4 文章刪除235.3.5 后臺(tái)文章顯示列表235.4 其他頁(yè)面開發(fā)235.4.1 評(píng)論的添加和刪除235.4.2 登錄和登出235.4.3 文章搜索24第七章 登錄安全256.1 使用Session判斷用戶登錄256.1.1 Session工作原理256.1.2 判斷用戶登錄25第八章 功能測(cè)試267.1 前端顯示頁(yè)面測(cè)試267.2 后臺(tái)系統(tǒng)操作測(cè)試26第九章 總結(jié)與展望288.1 總結(jié)288.2 展望28參考文獻(xiàn)29致謝30廣東東軟學(xué)院本科畢業(yè)設(shè)計(jì)（論文）第1章 緒論1.1開發(fā)背景及意義如今，隨著信息技術(shù)的飛速發(fā)展，人們足不出戶就能知天下，互聯(lián)

10、網(wǎng)已經(jīng)成為人與外界交流的重要渠道之一，它的作用滲透到社會(huì)的方方面面。而網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式之一，更是在互聯(lián)網(wǎng)上發(fā)揮著中流砥柱的作用?；ヂ?lián)網(wǎng)的發(fā)展使人們的生活發(fā)生了翻天覆地的變化，互聯(lián)網(wǎng)的世界每分每秒都交織著巨大的信息，如何在此情況下抓住消費(fèi)者的眼球，社會(huì)各行各業(yè)紛紛開始搭建屬于自己的網(wǎng)站，在網(wǎng)站內(nèi)企業(yè)可以根據(jù)自身品牌文化來(lái)打造專屬頁(yè)面，從而吸引消費(fèi)者的來(lái)訪。網(wǎng)站是一個(gè)集文字、圖片、音頻等多元化的信息傳播方式，比起傳統(tǒng)的信息傳播方式，人們?cè)讷@取信息的同時(shí)可以感受到更多的樂(lè)趣。在計(jì)算機(jī)技術(shù)的飛速發(fā)展下，建設(shè)網(wǎng)站不再局限于企業(yè)和單位，獨(dú)立的個(gè)人也可以擁有網(wǎng)站。這就是本論文所討論的個(gè)人網(wǎng)站了

11、。個(gè)人網(wǎng)站是一個(gè)可以充分展示個(gè)人人格魅力和才能的地方的，越來(lái)越多人認(rèn)為擁有個(gè)人網(wǎng)站是一件很酷的事情。于是互聯(lián)網(wǎng)上的個(gè)人網(wǎng)站數(shù)量與日俱增，五彩繽紛的主頁(yè)讓人看得眼花繚亂，每個(gè)人都可以在自己的網(wǎng)站上盡情發(fā)揮和展示自己的才能。在技術(shù)層面來(lái)說(shuō)，一個(gè)網(wǎng)站的頁(yè)面是由靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)。靜態(tài)頁(yè)面我們可以通過(guò)HTML5來(lái)完成，而動(dòng)態(tài)頁(yè)面則可以通過(guò)Java、PHP、Python等來(lái)完成。HTML5是一種專門用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，是開放的Web網(wǎng)絡(luò)平臺(tái)的基礎(chǔ)，常與CSS和JavaScript搭配使用。近年來(lái)，HTML5儼然已經(jīng)成為當(dāng)今最主流的網(wǎng)頁(yè)制作語(yǔ)言了。HTML5采用直觀的標(biāo)準(zhǔn)化標(biāo)記語(yǔ)言簡(jiǎn)化了網(wǎng)頁(yè)的設(shè)

12、計(jì)和構(gòu)建，且大大減少了網(wǎng)頁(yè)對(duì)于插件的依賴。本次畢業(yè)設(shè)計(jì)的選題就是基于HTML5的直觀和便捷，再結(jié)合Bootstrap框架使用，我在設(shè)計(jì)時(shí)充分發(fā)揮自己的個(gè)性。而后臺(tái)則使用PHP+MySQL來(lái)實(shí)現(xiàn)和前端頁(yè)面的交互。1.2選題國(guó)內(nèi)研究現(xiàn)狀隨著互聯(lián)網(wǎng)的飛速發(fā)展，有關(guān)互聯(lián)網(wǎng)的技術(shù)也層出不窮。在過(guò)去的10年時(shí)間里，互聯(lián)網(wǎng)上的個(gè)人網(wǎng)站多如毫毛。但是這么多的網(wǎng)站不可能每個(gè)都是美輪美奐，制作精良，而且近年來(lái)個(gè)人博客和個(gè)人網(wǎng)站的潮流也消退了很多。那么現(xiàn)在的個(gè)人網(wǎng)站發(fā)展現(xiàn)狀到底如何呢？根據(jù)上一節(jié)說(shuō)明我們可以知道對(duì)于個(gè)人來(lái)說(shuō)，創(chuàng)建網(wǎng)站不再是遙不可及的事情，所以個(gè)人網(wǎng)站才會(huì)出現(xiàn)大量繁殖的現(xiàn)象。那么個(gè)人網(wǎng)站的門檻是不是真

13、的這么低呢？是不是每個(gè)人都可以搭建個(gè)人網(wǎng)站呢？答案肯定是否。下面是我分析出來(lái)的近幾年國(guó)內(nèi)個(gè)人網(wǎng)站現(xiàn)狀。（1）資本商家套路重重：打開百度搜索個(gè)人網(wǎng)站，你會(huì)發(fā)現(xiàn)一大堆建站廣告，而且大多數(shù)廣告商都標(biāo)榜著“免費(fèi)建站”的字樣。那事實(shí)真的是免費(fèi)建站嗎？在商家的消費(fèi)套路浸淫多年的我們應(yīng)該也知道這只不過(guò)是商家貼出來(lái)吸引消費(fèi)者眼球的慣有手段罷了。進(jìn)去之后，你就會(huì)發(fā)現(xiàn)其實(shí)處處都需要掏錢，而且一旦這個(gè)商家出了什么意外，那么你的個(gè)人網(wǎng)站也很可能會(huì)消失在這茫茫互聯(lián)網(wǎng)長(zhǎng)河中。（2）成本高：搭建個(gè)人網(wǎng)站最基本需要域名和服務(wù)器，這些都是需要錢購(gòu)買的，而且后期的運(yùn)營(yíng)也是需要投入成本的。再就是搭建個(gè)人你需要有專業(yè)的知識(shí)作為基礎(chǔ)，

14、你要設(shè)計(jì)網(wǎng)頁(yè)、編寫代碼等等。那對(duì)于一個(gè)從未接觸過(guò)這方面技術(shù)的人來(lái)說(shuō)，讓他花大量的時(shí)間和金錢來(lái)搭建一個(gè)個(gè)人網(wǎng)站，顯然是不現(xiàn)實(shí)的。（3）專業(yè)性強(qiáng)：現(xiàn)存的個(gè)人網(wǎng)站的擁有者大都是程序員和設(shè)計(jì)師，他們?cè)趥€(gè)人網(wǎng)站分享自己的設(shè)計(jì)，記錄自己的學(xué)習(xí)收獲。對(duì)于他們來(lái)說(shuō)，擁有一個(gè)個(gè)人網(wǎng)站可以大大提升他們?cè)诼殘?chǎng)的競(jìng)爭(zhēng)力，所以他們個(gè)人網(wǎng)站制作都十分精良。1.3課題研究主要內(nèi)容本項(xiàng)目是開發(fā)一個(gè)博客類的個(gè)人網(wǎng)站，這是一個(gè)比較基礎(chǔ)的網(wǎng)站設(shè)計(jì)，在頁(yè)面的設(shè)計(jì)上會(huì)融入個(gè)人特色和風(fēng)格，網(wǎng)站也具備博客的基本功能。網(wǎng)站系統(tǒng)設(shè)計(jì)分為前臺(tái)頁(yè)面展示和后臺(tái)管理系統(tǒng)。網(wǎng)站的前端會(huì)用HTML5和Bootstrap框架，后臺(tái)會(huì)用PHP和MySQL的搭

15、配實(shí)現(xiàn)。（1）前臺(tái)頁(yè)面展示平臺(tái)功能 文章瀏覽：內(nèi)容包括學(xué)習(xí)、旅游、愛豆、寵物四個(gè)欄目，用戶可以通過(guò)欄目進(jìn)入文章列表，通過(guò)搜索找到感興趣的文章。用戶點(diǎn)擊進(jìn)入文章詳情頁(yè)面可以在文章下方進(jìn)行評(píng)論。留言板： 網(wǎng)站有一個(gè)留言板塊，用戶可以進(jìn)入該板塊留下想對(duì)博主說(shuō)的話。（2）后臺(tái)管理平臺(tái)功能欄目管理板塊：管理員可以對(duì)欄目進(jìn)行增加、修改和刪除。 文章管理板塊：管理員可以在后臺(tái)發(fā)布文章，可以對(duì)文章內(nèi)容、標(biāo)題、標(biāo)簽進(jìn)行修改，還可以刪除文章。 評(píng)論管理板塊：管理員可以對(duì)評(píng)論進(jìn)行選擇刪除。 留言管理板塊：管理員可以對(duì)留言進(jìn)行選擇刪除。第2章 前期準(zhǔn)備2.1 HTML5介紹隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的高速發(fā)展，如今HTML5已經(jīng)

16、成為主流的前端開發(fā)技術(shù)。廣義地說(shuō)，HTML5是包含HTML、CSS、JavaScript在內(nèi)的一套技術(shù)組合。2.1.1 發(fā)展歷程在HTML5出現(xiàn)之前，人們一直都是在使用HTML4.01，但是4.01版本從2000年開始就沒(méi)有跟新過(guò)了。當(dāng)時(shí)的一些公司想繼續(xù)推動(dòng)web標(biāo)準(zhǔn)化的發(fā)展，于是他們就共同成立了超文本應(yīng)用技術(shù)工作組（WHATWG），投身于web應(yīng)用程序中。2006年，WHATWG和萬(wàn)維網(wǎng)聯(lián)盟決定進(jìn)行合作，開發(fā)出新的HTML。隨后經(jīng)過(guò)雙方的共同努力，HTML5終于在2014年面世。2.1.2 新特點(diǎn)HTML5提供了一些新的元素和屬性，給開發(fā)人員帶來(lái)很多便利。如canvas繪畫元素，video和

17、audio媒介回放元素等。HTML5有很好的跨平臺(tái)性和離線緩存功能。HTML5增加了更多樣化的應(yīng)用程序接口（API）。2.2搭建運(yùn)行環(huán)境在開發(fā)網(wǎng)站前先要電腦配置好網(wǎng)站的運(yùn)行環(huán)境，Apache服務(wù)器、PHP腳本語(yǔ)言和MySQL數(shù)據(jù)庫(kù)是當(dāng)前主流的動(dòng)態(tài)網(wǎng)站開發(fā)組合，組合的開源性和跨平臺(tái)是其最突出的優(yōu)勢(shì)，是很多中小型網(wǎng)站開發(fā)的首選組合。Apache是一款基于C語(yǔ)言開發(fā)的專門用來(lái)提供HTTP服務(wù)的服務(wù)器，PHP是一種開源的多用途腳本語(yǔ)言，非常適用于Web開發(fā)，MySQL是一種開源的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)。本次畢業(yè)設(shè)計(jì)的網(wǎng)站后臺(tái)我也將采用這種組合方式來(lái)進(jìn)行開發(fā)。第3章 系統(tǒng)分析3.1 網(wǎng)站需求分析現(xiàn)在網(wǎng)上有

18、很多博客網(wǎng)站，功能也很完善，能給用戶提供一個(gè)很好的分享空間。但是這些網(wǎng)站是面向大眾的，這就意味著它有很多方面是受限制的，如果用戶比較追求網(wǎng)頁(yè)個(gè)性化樣式的布局，顯然這些網(wǎng)站是無(wú)法滿足的。在具備網(wǎng)站開發(fā)知識(shí)的基礎(chǔ)上，自己開發(fā)一個(gè)博客類網(wǎng)站不僅能滿足自身對(duì)頁(yè)面設(shè)計(jì)的要求，而且能對(duì)在大學(xué)期間所學(xué)的知識(shí)進(jìn)一步加深和鞏固。3.3.1 前臺(tái)需求分析分析viky博客類個(gè)人網(wǎng)站的用戶需求：（1） 文章瀏覽：該板塊瀏覽者可以根據(jù)自己的興趣通過(guò)欄目板塊進(jìn)入文章列表，瀏覽不同的文章。（2） 文章查詢：訪客在文章列表可以通過(guò)搜索框找到自己想要的文章，搜索的關(guān)鍵字會(huì)和文章的標(biāo)題進(jìn)行比對(duì)。（3） 文章評(píng)論：訪客在瀏覽完文章

19、的時(shí)候可以對(duì)文章進(jìn)行評(píng)論，給博主提供一些意見或詢問(wèn)相關(guān)問(wèn)題。（4） 訪客聯(lián)系博主：訪客可以通過(guò)網(wǎng)站下方的社交軟件聯(lián)系博主，也可以通過(guò)網(wǎng)站的留言面板聯(lián)系博主。（5） 了解博主：訪客通過(guò)介紹頁(yè)面獲得博主的一些基本信息。3.3.2 后臺(tái)需求分析分析viky博客類個(gè)人網(wǎng)站的（博主）管理員需求：（1） 文章管理：該板塊可以對(duì)文章進(jìn)行添加、修改和刪除。在添加完文章后，管理員可以對(duì)文章的標(biāo)題、簡(jiǎn)介、內(nèi)容、欄目、標(biāo)簽、圖片進(jìn)行再次修改。（2） 評(píng)論管理：管理員可以對(duì)評(píng)論進(jìn)行篩選，對(duì)一些惡意評(píng)論進(jìn)行刪除。（3） 留言管理：管理員可以對(duì)留言進(jìn)行篩選，對(duì)一些惡意留言進(jìn)行刪除。（4） 欄目管理：該板塊可以對(duì)欄目進(jìn)行添

20、加、修改和刪除。本網(wǎng)站雖然只固定了四個(gè)欄目，但是后續(xù)可能還會(huì)增加。管理員可以對(duì)欄目的標(biāo)題和簡(jiǎn)介進(jìn)行修改。（5） 用戶管理：本網(wǎng)站只設(shè)置了一個(gè)管理員用戶。3.2 網(wǎng)站邏輯模型根據(jù)網(wǎng)站的需求分析，我針對(duì)兩個(gè)角色分別繪制了流程圖：面向訪客的流程圖、面向管理員的流程圖。運(yùn)用邏輯的思維把系統(tǒng)所需的功能展示出來(lái)。面向訪客的流程圖如圖改為圖3-1，后面依次修改3-1所示。圖改為圖3-1，后面依次修改3-1面向訪客的流程圖面向管理員的流程圖如圖3-2所示圖3-2面向管理員的流程圖根據(jù)上面兩個(gè)流程圖，我們可以得到一個(gè)網(wǎng)站系統(tǒng)基本功能的流程圖，如圖3-3所示。圖3-3網(wǎng)站基本功能流程圖3.3 數(shù)據(jù)庫(kù)設(shè)計(jì) 根據(jù)之前

21、分析的網(wǎng)站的需求分析，我會(huì)創(chuàng)建一下表單：管理員表，文章表，評(píng)論表，留言表，標(biāo)簽表，欄目表。然后找到各表之間的聯(lián)系，繪制如圖3-4的數(shù)據(jù)表結(jié)構(gòu)圖。圖3-4數(shù)據(jù)表結(jié)構(gòu)圖第4章 靜態(tài)頁(yè)面實(shí)現(xiàn)4.1 網(wǎng)站文件結(jié)構(gòu)在編寫靜態(tài)頁(yè)面之前，先介紹一下本網(wǎng)站的文件結(jié)構(gòu)，我在Apache的htdocs文件夾創(chuàng)建了一個(gè)vblog文件夾，里面放著本網(wǎng)站的所有頁(yè)面和所需的類、庫(kù)。admin文件夾放的是后臺(tái)頁(yè)面，assets文件夾放js、css和圖片，database文件夾放連接數(shù)據(jù)庫(kù)和操作數(shù)據(jù)庫(kù)的PHP文件，lib文件夾放方法和類，upfiles文件夾放需要上傳的圖片，view文件夾放前端頁(yè)面。4.2 首頁(yè)實(shí)現(xiàn)首先創(chuàng)建

22、一個(gè)名為index的HTML文件，網(wǎng)頁(yè)的頭部用header標(biāo)簽包裹，中間內(nèi)容用類名為container的div標(biāo)簽包裹，尾部用footer標(biāo)簽包裹。我先進(jìn)行css的初始化，在css文件夾新建一個(gè)total.css文件，輸入如下初始化代碼，然后link到當(dāng)前頁(yè)面。Css的初始化包括對(duì)頁(yè)面整體風(fēng)格的設(shè)定和標(biāo)簽樣式的初始化。4.2.1 JavaScript導(dǎo)航欄（1）導(dǎo)航欄的HTML部分整個(gè)導(dǎo)航部分用div包裹，定義一個(gè)（.active）的div標(biāo)簽作為遮罩層，用ul和li標(biāo)簽來(lái)寫一級(jí)和二級(jí)菜單。代碼如下：（2）導(dǎo)航欄的JavaScript部分首先獲取頁(yè)面元素，定義一個(gè)當(dāng)前位置current，用fo

23、r循環(huán)lis元素給它綁定一個(gè)鼠標(biāo)進(jìn)入事件（mouseenter）和鼠標(biāo)離開事件（mouseleave），當(dāng)鼠標(biāo)移動(dòng)到某個(gè)li時(shí)調(diào)用animateX這函數(shù)遮罩層向當(dāng)前l(fā)i移動(dòng)，鼠標(biāo)離開遮罩回到原來(lái)位置。animateX是一個(gè)橫向移動(dòng)的緩動(dòng)函數(shù)，函數(shù)的兩個(gè)參數(shù)分別是移動(dòng)的物體和移動(dòng)的距離。下面一個(gè)if判斷，如果循環(huán)到下標(biāo)是2的li時(shí)，給這個(gè)lis2添加鼠標(biāo)移入和移出事件，調(diào)用下面的fnNav函數(shù)對(duì)二級(jí)菜單進(jìn)行顯示和隱藏。循環(huán)代碼如下。 for (var i = 0; i lis.length; i+) lisi.addEventListener(mouseenter, function () an

24、imateX(mask, this.offsetLeft);) lisi.addEventListener(mouseleave, function () animateX(mask, current);) if (lisi = 2) lis2.onmouseover = function () fnNav(this, block); lis2.onmouseout = function () fnNav(this, none); 導(dǎo)航欄最終效果如圖4-1所示。圖4-1js二級(jí)菜單4.2.2 CSS文字特效首頁(yè)開場(chǎng)文字動(dòng)畫，使用到CSS中的animation，效果是welcome字樣會(huì)有一個(gè)字

25、距由寬變窄的，顏色由黑色過(guò)渡到粉色的過(guò)程，然后vikyvika的字樣會(huì)在welcome動(dòng)畫結(jié)束后下墜出現(xiàn)，HTML代碼如下。 Welcome in VikyvikaCSS動(dòng)畫部分代碼如下。文字的布局如圖4-2所示。圖4-2css文字特效4.2.3 jQuery頁(yè)面滾動(dòng)元素首頁(yè)的四個(gè)欄目特效運(yùn)用了jQuery和它的插件smove，制作了一個(gè)3D向上翻的效果。首先引入jQuery和smove的庫(kù)，然后把包裹著欄目的div標(biāo)簽里寫上這段data-rotate-x=90deg data-move-z=-500px data-move-y=200px代碼，然后在頁(yè)面的下面寫一個(gè)函數(shù)就可以了，代碼如下：$

26、(.block).smoove(offset: 40%);4.3留言頁(yè)實(shí)現(xiàn)留言頁(yè)面需把向后臺(tái)提交數(shù)據(jù)，這里要form表單標(biāo)簽把要提交數(shù)據(jù)的留言發(fā)送區(qū)域包裹起來(lái)，然后input框里name的名稱一定要和數(shù)據(jù)庫(kù)的對(duì)應(yīng)的字段相同，不然到后期提交數(shù)據(jù)會(huì)提交不了。form表單的提交方法是post，綁定了一個(gè)checkSubmit的方法用于驗(yàn)證，表單里面則包裹多個(gè)div，div中包裹文字和輸入框內(nèi)。4.3.1 JavaScript表單驗(yàn)證既然要向數(shù)據(jù)庫(kù)傳數(shù)據(jù)，那么就要驗(yàn)證數(shù)據(jù)的正確與否，并向用戶作出相應(yīng)的提示。（1）內(nèi)容為空或錯(cuò)誤的提示方法inputCheck：首先獲取頁(yè)面元素，包括表單，提示和所有的輸入

27、框。通過(guò)for循環(huán)，遍歷每個(gè)輸入框，當(dāng)遇到類型為submit的輸入框continue跳過(guò)，給剩下的輸入框綁定失去焦點(diǎn)事件和獲得焦點(diǎn)事件，然后給兩個(gè)事件添加事件處理函數(shù)。 第一個(gè)失去焦點(diǎn)事件的處理函數(shù)，if語(yǔ)句判斷輸入框里的value是否為空，如果為空，輸入框的顏色會(huì)變成粉紅色，并且輸入框的placeholder提示“此處不為空”，然后返回false。如果不為空則執(zhí)行下一個(gè)if語(yǔ)句，判斷輸入的郵箱格式是否正確，這里運(yùn)用到正則表達(dá)值，先定義了一個(gè)叫reg的變量來(lái)存放正則表達(dá)式，if語(yǔ)句判斷，如果輸入框的內(nèi)容和正則表達(dá)式不符合且這個(gè)輸入框的類型是email，就把提示的樣式設(shè)為visible，然后返回

28、false。最后else如果兩條if語(yǔ)句都為真，則把提示的樣式設(shè)為hidden，返回真。第二個(gè)獲得焦點(diǎn)函數(shù)，則把輸入框的顏色變?yōu)樗{(lán)色，給輸入框插入一個(gè)為空的占位符屬性。在這個(gè)方法的下面調(diào)用這個(gè)方法。部分代碼如下。for (var i = 0; i inputs.length; i+) if (inputsi.type = submit) continue; inputsi.addEventListener(blur, function () if (this.value = ) this.style.backgroundColor = #f3d7ca; this.placeholder = 此

29、處不為空; return false;錯(cuò)誤提示效果如圖4-3所示圖4-3錯(cuò)誤提示（2）內(nèi)容為空阻止提交的方法checkSubmit：首先獲取頁(yè)面元素（表單、輸入框），for循環(huán)遍歷每個(gè)輸入框，然后continue跳過(guò)表單提交按鈕，再if語(yǔ)句判斷輸入框的value是否為空，如果為空彈出彈框，提示“所有內(nèi)容不為空”，然后返回false。提示結(jié)果如圖4-4所示。圖4-4彈框提示4.3.2 JavaScript生成簡(jiǎn)單的驗(yàn)證碼（1）HTML部分在表單最下面添加一個(gè)div，在div中添加一個(gè)span標(biāo)簽包裹“驗(yàn)證碼：”，一個(gè)input輸入框，再一個(gè)空span標(biāo)簽用來(lái)顯示生成的驗(yàn)證碼。（2）JavaScr

30、ipt部分隨機(jī)生成驗(yàn)證碼：首先定義一個(gè)全局變量code，在窗口加載是調(diào)用createCode方法，在方法中先把空字符賦值給code，定義一個(gè)codeLength變量來(lái)確定驗(yàn)證碼的長(zhǎng)度，并賦值為4，然后就是獲取id為code的span元素，接著定義一個(gè)數(shù)組，里面存放大小寫字母和數(shù)字。然后通過(guò)for循環(huán)和Math.random方法隨機(jī)獲取四個(gè)數(shù)組元素，然后把獲取的元素存到code變量中，最后把code的值賦給驗(yàn)證碼。校驗(yàn)驗(yàn)證碼部分：新建一個(gè)名為validate的方法，首先獲取輸入的驗(yàn)證碼，然后將驗(yàn)證碼通過(guò)toUpperCase方法轉(zhuǎn)化為大寫，同時(shí)也將顯示的驗(yàn)證碼轉(zhuǎn)化為大寫。然后通過(guò)if語(yǔ)句校驗(yàn)，如

31、果輸入的驗(yàn)證碼長(zhǎng)度為0，則彈出彈框提示“請(qǐng)輸入驗(yàn)證碼”，返回false。如果不為空則繼續(xù)判斷，如果輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不同，則彈出彈框提示“驗(yàn)證碼輸入錯(cuò)誤”，并重新調(diào)用createCode方法，刷新驗(yàn)證碼，并把輸入框清空，返回false。隨后兩個(gè)if語(yǔ)句都為true是返回true。最后要在checkSubmit函數(shù)中返回validate方法。驗(yàn)證碼生產(chǎn)代碼如下：var code; function createCode() code = ; var codeLength = 4; var checkCode = document.getElementById(code); var ran

32、dom = new Array(數(shù)字和26個(gè)字母大小寫); for (var i = 0; i query()執(zhí)行SQL語(yǔ)句，判斷如果執(zhí)行成功header連接到留言頁(yè)面，失敗echo“數(shù)據(jù)插入失敗”。代碼如下：send.php寫完之后，返回留言的前端顯示頁(yè)面在form表單的action里填上send.php的路徑。發(fā)送測(cè)試，打開Navicat，打開留言的表單，會(huì)顯示剛剛發(fā)送的留言數(shù)據(jù)。如圖5-1所示。圖5-1留言表5.1.3 留言顯示讀取數(shù)據(jù)：返回留言的前端頁(yè)面，首先引入conn.php，寫SQL語(yǔ)句$sql = sql語(yǔ)句;，然后$conn-query()執(zhí)行SQL語(yǔ)句，然后$result-

33、num_rows 返回結(jié)果集中的行數(shù)，用while ($row = $result-fetch_assoc() 返回?cái)?shù)據(jù)集的關(guān)聯(lián)數(shù)組，并移動(dòng)內(nèi)部的數(shù)據(jù)指針，逐行輸出數(shù)據(jù)。效果如圖5-2所示。圖5-2留言顯示5.1.4 后臺(tái)留言刪除 （1）單條刪除新建delete.php，引入conn.php，用$_GETxx獲取留言的唯一id，創(chuàng)建SQL語(yǔ)句DELETE from contact where id = . $id，$conn.query()執(zhí)行SQL語(yǔ)句，if語(yǔ)句判斷執(zhí)行成功彈出“刪除成功”并回到留言管理頁(yè)面，否則echo“刪除失敗”。到留言管理頁(yè)面，和之前獲取數(shù)據(jù)的方法一樣，在頁(yè)面動(dòng)態(tài)生成留

34、言列表，這里列表的刪除連接要連接到delete.php頁(yè)面并且拼接該留言的id，代碼如下：href=./database/contact/delete.php?id= . $rowid留言管理頁(yè)面如圖5-3所示。圖5-3留言管理頁(yè)面 （2）批量刪除如圖4-3中所見，在動(dòng)態(tài)生成數(shù)據(jù)的時(shí)候會(huì)生成了對(duì)應(yīng)的CheckBox，在HTML結(jié)構(gòu)中用form表單把全部?jī)?nèi)容包裹起來(lái)，批量刪除會(huì)以表單提交POST的方式進(jìn)行刪除。所以動(dòng)態(tài)生成的時(shí)候，要在CheckBox的value上綁定留言的id。代碼如下：value= .$rowid .新建checkAll.php,引入conn.php，用$_POST獲區(qū)Che

35、ckBox的id，獲取過(guò)來(lái)是一個(gè)數(shù)組，所以用implode（）函數(shù)把數(shù)組轉(zhuǎn)化為字符串并用逗號(hào)隔開，創(chuàng)建刪除留言SQL語(yǔ)句，執(zhí)行SQL語(yǔ)句，判斷。（3）刪除確認(rèn)最后用JavaScript寫一個(gè)comfirm（）防止管理員誤刪操作，在點(diǎn)擊刪除的時(shí)先彈框是否刪除，如果是再提交數(shù)據(jù)。5.2 欄目動(dòng)態(tài)開發(fā)欄目的添加和刪除和留言的添加和刪除方法一致，下面對(duì)欄目的修改進(jìn)行詳細(xì)說(shuō)明。5.2.1 欄目修改在欄目管理頁(yè)面點(diǎn)擊進(jìn)入欄目修改頁(yè)面，欄目修改頁(yè)面應(yīng)該存在默認(rèn)值，所以在欄目管理頁(yè)面的修改連接要把欄目的cid傳過(guò)去。代碼如下：修改 然后在欄目修改頁(yè)面用$_GETxx獲取cid并讀取數(shù)據(jù)，修改頁(yè)面如圖5-4所示

36、。圖5-4欄目修改頁(yè)面新建c_update.php，引入conn.php，用isset（）函數(shù)判斷是否獲得cid，用POST方法獲取管理員輸入的數(shù)據(jù)，創(chuàng)建SQL語(yǔ)句UPDATE category SET cname = $cname, calias = $calias,cdescription=$cdescription WHERE cid= . $cid，執(zhí)行語(yǔ)句，判斷。5.3 文章頁(yè)面的動(dòng)態(tài)開發(fā)文章頁(yè)面的動(dòng)態(tài)開發(fā)比之前復(fù)雜，因?yàn)樯婕暗剿膫€(gè)數(shù)據(jù)表和圖片的上傳。5.3.1 Simditor富文本編輯器使用Simditor首先要引入它所需要的CSS和JS文件，在文章的添加頁(yè)面插入一個(gè)textar

37、ea文本域并賦一個(gè)id，在頁(yè)面下面用JS初始化編輯器，代碼如下：$(function() toolbar = bold, italic, underline, strikethrough, fontScale, color, |, ol, ul, blockquote, code, table, |,link, image, hr, |, indent, outdent, |, alignment,;var editor = new Simditor(textarea: $(#content),toolbar: toolbar, /工具欄defaultImage: ./assets/img/l

38、ogo.jpg, /編輯器插入圖片時(shí)使用的默認(rèn)圖片upload: url: ./lib/simditor/sim_upload.php, /文件上傳的接口地址params: null, /鍵值對(duì), fileKey: fileData, /服務(wù)器端獲取文件數(shù)據(jù)的參數(shù)名 connectionCount: 3, leaveConfirm: 正在上傳文件 ,);)初始化成功后，在瀏覽器上看到效果如圖5-5所示。圖5-5simditor文本編輯器編寫upload.php作為富文本的接收接口，PHP文件中要判斷上傳文件是否有錯(cuò)誤，判斷文件是否超過(guò)2bm，判斷上傳的文件是不是圖片，最后把數(shù)據(jù)以json格式返

39、回。5.3.2 文章添加新建一個(gè)art_action.php的文件，把所有操作整合到這個(gè)文件中，首先引入conn.php，用if判斷提交數(shù)據(jù)的方法是POST還是GET，然后定義一個(gè)變量$act來(lái)存?zhèn)鬟^(guò)來(lái)的操作。然后下面用switch語(yǔ)句選擇判斷執(zhí)行哪段代碼。代碼如下： if ($_SERVERREQUEST_METHOD = POST) $act = $_POSTact; else if ($_SERVERREQUEST_METHOD = GET) $act = $_GETact; else $act = ;switch ($act) 在文章添加頁(yè)面的form表單插入連個(gè)隱藏的input標(biāo)簽，

40、用來(lái)判斷進(jìn)行添加操作。返回action.php，在switch語(yǔ)句添加case add，在里面寫文章添加的處理語(yǔ)句，前半部分的添加和之前寫的一樣所以不重復(fù)了，到判斷文章插入的SQL語(yǔ)句成功后，這里添加一個(gè)if判斷是否插入標(biāo)簽，如果有用SELECT LAST_INSERT_ID()語(yǔ)句查詢最新插入的文章id，把id賦給$aid。然后用explode（）函數(shù)把剛剛獲取的標(biāo)簽字符串轉(zhuǎn)化為數(shù)組，創(chuàng)建SQL語(yǔ)句把標(biāo)簽插入到tag表中，這里要用foreach循環(huán)拼接。代碼如下：$tags = trim($_POSTtags); / echo $tags; if ($tags = ) echo alert(

41、添加成功！);parent.location.href=././admin/ad_article.php; else $sql = SELECT LAST_INSERT_ID(); $result = $conn-query($sql); $row = mysqli_fetch_row($result); $aid = $row0; $tname = explode(, $tags); $sql = insert into tag (aid,tname) values; foreach ($tname as $v) $sql .= ( . $aid . , . $v . ),; $sql =

42、rtrim($sql, ,);5.3.3 文章修改文章修改頁(yè)面也需要把文章id傳過(guò)來(lái)，讓修改頁(yè)面有默認(rèn)內(nèi)容，操作和之前的欄目修改一樣。這里文章表和欄目表是分開的，所以在欄目顯示的上方再做一次查詢，然后取出所以欄目，在input標(biāo)簽里寫一個(gè)判斷，如果文章表的cid等于欄目表的cid就把當(dāng)前欄目選中，用checked屬性。在form表單中也要加入兩個(gè)隱藏的input框，一個(gè)傳upload方法，一個(gè)傳文章的aid。代碼如下：文章修改頁(yè)面如圖5-6所示。圖5-6文章修改頁(yè)面文章修改操作代碼部分：在action.php里添加case upload，前面的修改語(yǔ)句和欄目的一樣用update更新數(shù)據(jù)庫(kù)就可以

43、了，之后判斷執(zhí)行成功后再添加判斷來(lái)判斷是否有標(biāo)簽插入。如果有則先把標(biāo)簽表里所有對(duì)應(yīng)文章的標(biāo)簽刪除，再插入新的標(biāo)簽。部分代碼如下：$tags = trim($_POSTtags); if (empty($tags) echo alert(修改成功！);parent.location.href=././admin/ad_article.php; else $sql = delete from tag where aid = . $aid; $conn-query($sql);5.3.4 文章刪除刪除文章的同時(shí)把文章的評(píng)論一并刪除，寫一個(gè)case del，用GET方法獲取文章id，執(zhí)行SQL語(yǔ)句，執(zhí)

44、行成功后用if判斷，如果成功再執(zhí)行一條刪除文章對(duì)應(yīng)評(píng)論的SQL語(yǔ)句，再執(zhí)行成功后彈出“刪除成功”并返回到文章列表頁(yè)面，如果失敗顯示“刪除失敗”。5.3.5 后臺(tái)文章顯示列表文章顯示列表中，要有欄目的顯示，但是文章表和欄目表是分開的，所以這里用到了兩表聯(lián)查，SQL代碼如下： select aid,acomment,atitle,cname,atime,tags from article left join category on article.cid=category.cid order by aid desc5.4 其他頁(yè)面開發(fā)后臺(tái)還剩下評(píng)論、登錄、登出頁(yè)面的動(dòng)態(tài)開發(fā)，因?yàn)榇蠖鄶?shù)操作相同，所以在這節(jié)統(tǒng)一分析。5.4.1 評(píng)論的添加和刪除評(píng)論的添加、刪除操作和留言的添加、刪除操作基本相同，評(píng)論的添加要在數(shù)據(jù)插入成功的時(shí)候文章表的評(píng)論數(shù)加一，評(píng)論刪除成功的時(shí)候文章表的評(píng)論數(shù)要減一。代碼如下：$sql = update article set acomment=acomment-1 where (aid= . $aid . );$sql = update article set acomment=acomment+1 where (aid= . $aid . );5.4.2 登錄和登出（1）登錄登錄