作者/馬相旭、李冶 ，沈陽(yáng)師范大學(xué)

樂(lè)器電子商務(wù)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

作者/馬相旭、李冶 ，沈陽(yáng)師范大學(xué)

本課題主要基于電子商務(wù)的基本原理，運(yùn)用HTML+CSS+JavaScript+PHP開(kāi)發(fā)技術(shù)搭建一個(gè)動(dòng)態(tài)的樂(lè)器電子商務(wù)網(wǎng)站。它是在Windows系統(tǒng)環(huán)境下，以MySQL數(shù)據(jù)庫(kù)開(kāi)發(fā)平臺(tái)，Apache網(wǎng)絡(luò)信息服務(wù)器，采用PHP技術(shù)開(kāi)發(fā)的樂(lè)器電子商務(wù)網(wǎng)站。本系統(tǒng)分為前臺(tái)與后臺(tái)兩部分組成，前臺(tái)主要針對(duì)消費(fèi)者，主要包括網(wǎng)站首頁(yè)、新聞公告、樂(lè)器知識(shí)、知識(shí)分享、音樂(lè)課程、推薦樂(lè)器、特價(jià)樂(lè)器等功能模塊；后臺(tái)由管理員使用，主要包括用戶管理、新聞公告管理、樂(lè)器知識(shí)管理、音樂(lè)課程管理、課程預(yù)約管理、樂(lè)器分類(lèi)管理、樂(lè)器品牌管理、樂(lè)器信息管理、訂單管理、樂(lè)器評(píng)價(jià)管理等功能模塊。通過(guò)這些功能的實(shí)現(xiàn)，給商家提供一個(gè)動(dòng)態(tài)、交互式的樂(lè)器電子商務(wù)網(wǎng)站。

電子商務(wù)；PHP；MySQL；HTML；CSS；JavaScript

1. 系統(tǒng)的需求及功能

作為一個(gè)樂(lè)器電子商務(wù)網(wǎng)站，最主要的功能就是可以在網(wǎng)絡(luò)上展示各種樂(lè)器，用戶可以在線預(yù)約課程和在線評(píng)論。完整的樂(lè)器電子商務(wù)主要包括兩部分：后臺(tái)管理系統(tǒng)和前臺(tái)展示。

后臺(tái)管理系統(tǒng)主要包括：管理員的用戶管理、新聞公告管理、樂(lè)器知識(shí)管理、音樂(lè)課程管理、課程預(yù)約管理、樂(lè)器分類(lèi)管理、樂(lè)器品牌管理、樂(lè)器信息管理、訂單管理、樂(lè)器評(píng)價(jià)管理。

前臺(tái)系統(tǒng)的信息來(lái)源是通過(guò)后臺(tái)管理系統(tǒng)信息的錄入、修改。關(guān)于前臺(tái)系統(tǒng)的實(shí)現(xiàn)，主要包括首頁(yè)、新聞公告、樂(lè)器知識(shí)、知識(shí)分享、音樂(lè)課程、推薦樂(lè)器、特價(jià)樂(lè)器、用戶注冊(cè)/登錄、在線預(yù)約、在線評(píng)論。

2. 系統(tǒng)的整體框架和模塊設(shè)計(jì)

樂(lè)器電子商務(wù)網(wǎng)站主要包括前臺(tái)展示和后臺(tái)管理系統(tǒng)

2.1 前臺(tái)實(shí)現(xiàn)功能

登錄、注冊(cè)、退出：顧客首先要注冊(cè)為網(wǎng)站的用戶，注冊(cè)時(shí)只要填寫(xiě)登錄用戶名、密碼、手機(jī)號(hào)碼等信息即可。購(gòu)買(mǎi)物品前需要填寫(xiě)用戶名和密碼進(jìn)行登錄。

購(gòu)物車(chē)：顧客選擇完商品后可進(jìn)入購(gòu)物車(chē)頁(yè)面，查看自己要購(gòu)買(mǎi)的商品，可修改某一商品數(shù)量、取消購(gòu)買(mǎi)某商品和清空購(gòu)物車(chē)等操作。

商品評(píng)論（并保存在數(shù)據(jù)庫(kù)）：顧客在收到商品后，可對(duì)商品的質(zhì)量或者服務(wù)進(jìn)行評(píng)價(jià)。

個(gè)人信息修改：可以修改收貨人信息，同時(shí)可修改密碼。

訂單結(jié)算、支付：在訂單被銷(xiāo)售方確認(rèn)后，顧客付款給賣(mài)家。

用戶訂單管理：用戶可以查看已結(jié)算的訂單和未結(jié)算的訂單。

商品分類(lèi)、庫(kù)存數(shù)量動(dòng)態(tài)顯示：對(duì)商品進(jìn)行篩選分類(lèi)，動(dòng)態(tài)顯示庫(kù)存信息

分頁(yè)：對(duì)頁(yè)面進(jìn)行分頁(yè)操作。

在線瀏覽樂(lè)行業(yè)務(wù)和聲樂(lè)經(jīng)驗(yàn)相關(guān)信息：信息展示頁(yè)。

課程預(yù)約：通過(guò)了解琴行實(shí)體店的信息，顧客可以根據(jù)自己的愛(ài)好進(jìn)行課程的預(yù)約。

具體見(jiàn)圖1樂(lè)器電子商務(wù)網(wǎng)站前臺(tái)。

圖1 樂(lè)器電子商務(wù)網(wǎng)站前臺(tái)

2.2 后臺(tái)管理實(shí)現(xiàn)功能

用戶/管理員信息增、刪、改、查詢：管理員可以在此進(jìn)行管理員信息的添加，修改，刪除和查詢。

商品信息增、刪、改、查詢：管理員可以在這里上傳新的商品，或修改、刪除和查詢已上架商品信息。

訂單管理刪、改、查詢：管理員可以在這里修改，刪除和查詢已存在的訂單。

支付狀態(tài)管理：管理員可以管理訂單的支付狀態(tài)。

頁(yè)面信息管理：管理員可以上傳新的樂(lè)器知識(shí)和經(jīng)驗(yàn)分享。

管理員/用戶登陸、登出：管理員通過(guò)登陸界面進(jìn)入網(wǎng)站前臺(tái)和后臺(tái)界面，用戶可以通過(guò)登錄操作，進(jìn)一步地進(jìn)行商品購(gòu)買(mǎi)和評(píng)論操作。

分頁(yè)：對(duì)頁(yè)面進(jìn)行分頁(yè)操作。

時(shí)間動(dòng)態(tài)獲取顯示：在頁(yè)面上動(dòng)態(tài)顯示當(dāng)時(shí)時(shí)間

3. 系統(tǒng)的流程設(shè)計(jì)

樂(lè)器預(yù)約平臺(tái)完整的工作流程是：首先，管理員登錄系統(tǒng)，登錄后可以執(zhí)行對(duì)用戶信息、新聞公告、樂(lè)器知識(shí)、音樂(lè)課程、課程預(yù)約、樂(lè)器分類(lèi)、樂(lè)器品牌、樂(lè)器信息、樂(lè)器訂單、樂(lè)器評(píng)價(jià)等信息的管理。

圖2 樂(lè)器電子商務(wù)網(wǎng)站后臺(tái)

后臺(tái)系統(tǒng)流程設(shè)計(jì)圖如下圖3所示。

圖3 后臺(tái)管理系統(tǒng)流程圖

4. 系統(tǒng)的數(shù)據(jù)庫(kù)設(shè)計(jì)

本系統(tǒng)一共設(shè)計(jì)了13張表，分別為：管理員信息表、新聞公告信息表、課程預(yù)約表、樂(lè)器品牌表、購(gòu)物車(chē)表、樂(lè)器分類(lèi)表、音樂(lè)課程表、訂單明細(xì)表、樂(lè)器信息表、樂(lè)器知識(shí)表、訂單表、樂(lè)器評(píng)價(jià)表、用戶表。

5. 后臺(tái)管理系統(tǒng)詳細(xì)設(shè)計(jì)與開(kāi)發(fā)

5.1 管理員登錄

后臺(tái)管理員登錄到后臺(tái)管理系統(tǒng)后，可以進(jìn)行整個(gè)后臺(tái)的管理

5.2 用戶管理

后臺(tái)管理員可以對(duì)不合理的注冊(cè)用戶進(jìn)行刪除操作。

5.3 新聞公告管理

后臺(tái)管理員可以對(duì)本站中的新聞公告信息進(jìn)行添加、修改、刪除操作。

5.4 樂(lè)器信息管理

后臺(tái)管理員可以本站上的樂(lè)器信息進(jìn)行添加、修改、刪除等管理操作。

6. 前臺(tái)展示詳細(xì)設(shè)計(jì)與開(kāi)發(fā)

6.1 首頁(yè)

前臺(tái)首頁(yè)采用粉紅色來(lái)搭配，彰顯了樂(lè)器藝術(shù)的氣息，整體給人簡(jiǎn)介大方的效果，分為了logo和菜單欄、左邊為樂(lè)趣分類(lèi)，中間為輪轉(zhuǎn)圖片，下方為樂(lè)器。

6.2 用戶注冊(cè)

本站為沒(méi)有賬戶的用戶提供了在線注冊(cè)，用戶填寫(xiě)自己的用戶名、密碼、確認(rèn)密碼、姓名、性別、出生日期、地址、手機(jī)、郵箱后，點(diǎn)擊“會(huì)員注冊(cè)”按鈕即可，將會(huì)post提交到注冊(cè)頁(yè)面進(jìn)行信息驗(yàn)證，驗(yàn)證都通過(guò)后，即可注冊(cè)成功；否則，將會(huì)顯示相應(yīng)錯(cuò)誤提示信息。

6.3 用戶登錄

本站為沒(méi)有賬戶的用戶提供了在線注冊(cè)，用戶填寫(xiě)自己的用戶名、密碼、確認(rèn)密碼、姓名、性別、出生日期、地址、手機(jī)、郵箱后，點(diǎn)擊“會(huì)員注冊(cè)”按鈕即可，將會(huì)post提交到注冊(cè)頁(yè)面進(jìn)行信息驗(yàn)證，驗(yàn)證都通過(guò)后，即可注冊(cè)成功；否則，將會(huì)顯示相應(yīng)錯(cuò)誤提示信息。

6.4 用戶中心

登錄后的用戶將進(jìn)入自己的用戶中心界面，里面包含了修改密碼、用戶信息、我的訂單、我的課程。

主要實(shí)現(xiàn)代碼如下：

6.5 預(yù)約音樂(lè)課程

登錄后的用戶可以對(duì)自己喜好的音樂(lè)課程進(jìn)行在線預(yù)約。

6.6 個(gè)人信息修改

登錄后的用戶可以對(duì)自己注冊(cè)時(shí)填寫(xiě)的個(gè)人信息進(jìn)行修改。

6.7 樂(lè)器詳細(xì)

樂(lè)器詳細(xì)頁(yè)面里面介紹的樂(lè)器的詳細(xì)內(nèi)容，并可以進(jìn)行購(gòu)買(mǎi)。

6.8 我的訂單

用戶將購(gòu)物車(chē)中的樂(lè)器結(jié)算完畢后，將會(huì)自己跳轉(zhuǎn)進(jìn)入自己的訂單。

7. 混合APP

7.1 功能實(shí)現(xiàn)

樂(lè)器電子商務(wù)網(wǎng)站App是一款性能優(yōu)越，風(fēng)格簡(jiǎn)潔的軟件，提供首頁(yè)、商品分類(lèi)頁(yè)、搜索頁(yè)、商品列表頁(yè)、商品詳細(xì)頁(yè)、購(gòu)物車(chē)頁(yè)等頁(yè)面，數(shù)據(jù)使用靜態(tài)數(shù)據(jù)。

首先新建一個(gè)應(yīng)用yinyue。再新建一個(gè)W文件，在新建W向?qū)е羞x擇模板 “移動(dòng)→應(yīng)用→樂(lè)器電子商務(wù)網(wǎng)站”，文件名輸入index，就在yinyue目錄下建出了完整的樂(lè)器電子商務(wù)網(wǎng)站應(yīng)用。下面介紹首頁(yè)main.w和列表頁(yè)list.w上常用的功能是如何實(shí)現(xiàn)的。

樂(lè)器電子商務(wù)網(wǎng)站App，掌握使用向?qū)梢粋€(gè)應(yīng)用，初步了解圖片輪播、二級(jí)門(mén)戶圖標(biāo)、廣告欄、雙列列表、本地存儲(chǔ)（HTML5 LocalStorage）以及遮罩的使用

7.2 開(kāi)發(fā)原理

使用HTML5開(kāi)發(fā)出來(lái)的App可以是混合型應(yīng)用（Hybrid APP），也可以是WEB的應(yīng)用（Web App）?；旌闲蛻?yīng)用安裝在iOS和安卓手機(jī)上，WEB的應(yīng)用在微信中運(yùn)行?；旌闲蛻?yīng)用看上去是一個(gè)本地化應(yīng)用（Native App），其實(shí)里面只有一個(gè)UI WebView，就是包了個(gè)客戶端的殼，其實(shí)里面是HTML5的網(wǎng)頁(yè)，通過(guò)Cordova插件，使得App具備訪問(wèn)本地服務(wù)的能力，例如相機(jī)、錄音等等。

7.3 開(kāi)發(fā)過(guò)程

7.3.1 前端頁(yè)面開(kāi)發(fā)前端頁(yè)面開(kāi)發(fā)定義App的前端展現(xiàn)，可以使用WeX5開(kāi)工具，進(jìn)行可視化、拖曳式開(kāi)發(fā)。具體過(guò)程如下：

（1）新建應(yīng)用 每次開(kāi)發(fā)一個(gè)新的應(yīng)用，都需要從新建應(yīng)用開(kāi)始。 步驟：選中模型資源視圖中的UI2目錄，單擊鼠標(biāo)右鍵，打開(kāi)快捷菜單，選擇 “新建→應(yīng)用”菜單命令，打開(kāi)“新建應(yīng)用”對(duì)話框，輸入應(yīng)用名稱。點(diǎn)擊“完成”按鈕，在UI2目錄下就會(huì)生成一個(gè)應(yīng)用目錄。

（2）新建頁(yè)面

WeX5的前端頁(yè)面采用組件化開(kāi)發(fā)方式，即頁(yè)面完全由組件構(gòu)成。

組件的擺放—WeX5提供UI設(shè)計(jì)器，使用拖拽組件的方式開(kāi)發(fā)頁(yè)面。拖放組件有兩種方法：一是用鼠標(biāo)左鍵點(diǎn)擊組件面板中的組件，松開(kāi)鼠標(biāo)左鍵，然后再用鼠標(biāo)左鍵點(diǎn)擊組件要放置的位置。注意不需要進(jìn)行拖拽操作；二是先點(diǎn)擊組件要放置的位置，即選中組件的父組件，再在組件面板中雙擊要添加的組件，組件就會(huì)被添加到父組件中。如果要改變組件的位置，可以通過(guò)鼠標(biāo)拖拽組件實(shí)現(xiàn)。

（3）頁(yè)面運(yùn)行調(diào)試

W文件作為前端頁(yè)面是可以在瀏覽器里面運(yùn)行的，開(kāi)發(fā)時(shí)可隨時(shí)查看運(yùn)行效果，并且編輯保存后，瀏覽器會(huì)自動(dòng)刷新頁(yè)面。開(kāi)發(fā)工具為運(yùn)行W文件提供了快捷方式，在要運(yùn)行的W文件上單擊鼠標(biāo)右鍵，打開(kāi)快捷菜單，選擇 “用瀏覽器運(yùn)行”菜單命令，即可打開(kāi)Chrome瀏覽器，并運(yùn)行選中的W文件。 運(yùn)行前，需要啟動(dòng)Tomcat，如果訪問(wèn)了數(shù)據(jù)庫(kù)，還需要啟動(dòng)數(shù)據(jù)庫(kù)

7.3.2 后端服務(wù)開(kāi)發(fā)

后端服務(wù)為前端頁(yè)面提供數(shù)據(jù)。前端頁(yè)面需要數(shù)據(jù)時(shí)，向后端服務(wù)發(fā)送請(qǐng)求，后端服務(wù)訪問(wèn)數(shù)據(jù)庫(kù)表，將查詢結(jié)果返回前端頁(yè)面；用戶輸入數(shù)據(jù)后，前端頁(yè)面提交數(shù)據(jù)給后端服務(wù)，后端服務(wù)將數(shù)據(jù)存入數(shù)據(jù)庫(kù)。

后端服務(wù)可以使用WeX5中的Baas來(lái)實(shí)現(xiàn)，WeX5的Bass支持多種語(yǔ)言，例如Java、.Net（后續(xù)會(huì)支持PHP）。后端服務(wù)不僅可以使用Bass來(lái)實(shí)現(xiàn)，也可以直接使用云API來(lái)替代，或者自定義服務(wù)端。

＊ [1]貝伊利 (Lynn Beighley),莫里森 (Michael Morrison),蘇金國(guó), 徐陽(yáng). Head First PHP & MySQL(中文版)[M]. 中國(guó)電力出版社,2010,03

＊ [2]潘凱華,劉中華, 等. PHP開(kāi)發(fā)實(shí)戰(zhàn)1200例(第1卷)(附DVD—ROM光盤(pán)1張)[M].清華大學(xué)出版社,2011,01

＊ [3]帕蒂拉(Armando Padilla),霍金斯(Tim Hawkins),盛海艷,劉霞. 高性能PHP應(yīng)用開(kāi)發(fā)[M]. 人民郵電出版社,2015,11