陳穎博 張麗

摘 ?要：本次網(wǎng)站項(xiàng)目采用了wampServer 服務(wù)器、webstorm編輯器、phpstorm編輯器、Avcode切圖軟件，使用了apache mysql 以及ECS服務(wù)器的運(yùn)行環(huán)境，語言包括HTML5、CSS3、PHP、Less、Sql語句，網(wǎng)站首先采用ps以及CorelDraw進(jìn)行l(wèi)ogo的制作，Avcode和Fireworks設(shè)計(jì)網(wǎng)站前端的界面，在線配色器對(duì)網(wǎng)站進(jìn)行配色，下來網(wǎng)站的前端界面采用webstorm開發(fā)完成后，利用phpstorm開發(fā)后臺(tái)。

關(guān)鍵詞：在線客服;公告輪詢;后臺(tái)數(shù)據(jù)

一、網(wǎng)站設(shè)計(jì)

網(wǎng)站前端界面的設(shè)計(jì)是一個(gè)網(wǎng)站整站開發(fā)中的一個(gè)重要的環(huán)節(jié)，本次網(wǎng)站開發(fā)前端界面首先使用了Avcode軟件進(jìn)行前端的界面切圖，利用fireworks軟件進(jìn)行網(wǎng)站的靜態(tài)頁面的設(shè)計(jì)和制作，WebStorm是本次網(wǎng)站的代碼編輯軟件。利用Html5 CSS3以及jQuery Less實(shí)現(xiàn)了網(wǎng)站前端界面的全部特效和部分效果。網(wǎng)站前端界面的Logo使用PhotoShop進(jìn)行設(shè)計(jì)CD進(jìn)行制作，Icon使用了Iconfont進(jìn)行設(shè)計(jì)和取材，網(wǎng)站的字體使用Font Awesome字體庫利用H5中的功能引入。

（一）功能設(shè)計(jì)

尚品銘居飾官網(wǎng)

網(wǎng)站的前端特效常見有前端的輪播圖、按鈕特效、圖片特效等，本次論文采用H5? C3? jQuery來完成上述的前端特效，輪播圖利用jQuery和CSS3實(shí)現(xiàn)了首頁的焦點(diǎn)圖，導(dǎo)航欄等網(wǎng)頁其余特效都適當(dāng)?shù)牟扇×薺Query和CSS3實(shí)現(xiàn)。為了保證網(wǎng)頁對(duì)于瀏覽器的兼容性，項(xiàng)目采取了響應(yīng)式開發(fā)。

（二）前端設(shè)計(jì)

網(wǎng)頁的布局是一個(gè)老生常談的問題，一般網(wǎng)頁的布局基礎(chǔ)的是采取position定位，設(shè)置padding 或者margin外邊距等CSS2的方法來實(shí)現(xiàn)網(wǎng)頁圖片的網(wǎng)格化布局或者居中布局、start布局等效果，為了網(wǎng)站的健壯性和網(wǎng)頁布局的便捷，本次網(wǎng)站的布局大量的使用了flex布局，網(wǎng)格化布局采用了給予父盒子（display：flex;flex-wrap：wrap;）子盒子采用了（flex：0 1 50%）的方式，實(shí)現(xiàn)了子盒子在父盒子中自適應(yīng)的布局，而網(wǎng)站中的cons在父盒子中實(shí)現(xiàn)排列的布局，我這里使用了給予父盒子（display：flex;flex-wrap：wrap;），子盒子給予了（justify-content：space-between;），這里的wrap是什么？Flex-wrap是CSS3中新增的布局方式，簡(jiǎn)單好用，不會(huì)出CSS2布局中出現(xiàn)的脫離文檔流浮動(dòng)等問題。且對(duì)于移動(dòng)端，webkit核心瀏覽器等使用這種布局方式是非常不錯(cuò)的。wrap字面理解是換行的意思。所以flex-wrap就是用來指示是否換行的意思，我們父盒子默認(rèn)都是（flex-wrap：nowrap;）不換行的，所以我們?cè)谄匠５拈_發(fā)中如果子盒子的溢出，父盒子會(huì)被擠下去，或者擠出去，導(dǎo)致布局混亂，但是我們這里采用給予一級(jí)父盒子換行給于二級(jí)父盒子justifiy進(jìn)行布局，可以很巧妙地實(shí)現(xiàn)新的網(wǎng)格布局。

二、網(wǎng)站開發(fā)

為了實(shí)現(xiàn)網(wǎng)站相應(yīng)的功能本次網(wǎng)站開發(fā)使用了一定的Api。分別是網(wǎng)站的地圖，qq客服，微信留言這三個(gè)功能。

（一）關(guān)鍵技術(shù)及工具介紹

1.百度地圖api介紹

我們的地圖使用了百度地圖的api，再進(jìn)行優(yōu)化和樣式的改造，過程中地圖的icon等出現(xiàn)問題，最后發(fā)現(xiàn)是地圖中本來使用的icon地址過于陳舊，使用了新的百度地圖icon地址鏈接過去然后在JavaScript中進(jìn)行修改就行了（http：//map.baidu.com/image/us_mk_ icon.png）。

2.微信留言功能介紹

微信實(shí)時(shí)留言是利用了網(wǎng)上的server醬服務(wù)器，采用了別人的服務(wù)器和自己微信的sdk。功能我自己寫了一個(gè)jQuery版本的ajax，實(shí)現(xiàn)了自己的手機(jī)和server醬服務(wù)器鏈接，，這樣就實(shí)現(xiàn)了網(wǎng)站用戶實(shí)時(shí)留言，我可以實(shí)時(shí)接收的效果。當(dāng)然自己寫的ajax代碼可能健壯性不夠好。后續(xù)會(huì)繼續(xù)修改，此處不過多贅述。

3. websocket輪詢功能及工具介紹

我們知道，輪詢就是每隔特定的時(shí)間間隔，由瀏覽器對(duì)服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的HTTP request模式帶來很明顯的缺點(diǎn)——瀏覽器需要不斷地向服務(wù)器發(fā)出請(qǐng)求，然而HTTP request的header是非常長(zhǎng)的，里面包含的有用數(shù)據(jù)可能只是一個(gè)很小的值，這樣會(huì)占用很多的帶寬。我們平常使用輪詢進(jìn)行聊天室、行情分析、在線游戲等，本次使用輪詢實(shí)現(xiàn)網(wǎng)站公告的實(shí)時(shí)更新考慮了三個(gè)方面，輪詢有長(zhǎng)輪詢、短輪詢、ajax輪詢、基于websocket協(xié)議的輪詢。

三、結(jié)束語

本次網(wǎng)站采用阿里云Ecs服務(wù)器和域名實(shí)現(xiàn)了在線訪問的效果。Ecs使用cmd命令安裝了寶塔面板，上傳文件和與本機(jī)對(duì)接采用了Putty。網(wǎng)站后臺(tái)功能采用了websocket協(xié)議和ajax，php等實(shí)現(xiàn)網(wǎng)站的后臺(tái)以及前端網(wǎng)站公告的實(shí)時(shí)輪詢。

參考文獻(xiàn)：

[1] Nicholas C.Zakas.JavaScript高級(jí)程序設(shè)計(jì)[M]，人民郵電出版社.

[2] amesEdwards [澳].CameronAdams JavaScript精粹（修訂版POD）[M]，人民郵電出版社.

作者簡(jiǎn)介：

陳穎博（通訊作者），碩士，講師，安康學(xué)院電子與信息工程學(xué)院，研究方向：教育數(shù)據(jù)分析

張麗 安康學(xué)院電子與信息工程學(xué)院數(shù)字媒體技術(shù)專業(yè)本科生。