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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

具體見圖1樂器電子商務(wù)網(wǎng)站前臺。

圖1 樂器電子商務(wù)網(wǎng)站前臺

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

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

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

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

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

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

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

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

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

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

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

圖2 樂器電子商務(wù)網(wǎng)站后臺

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

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

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

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

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

5.1 管理員登錄

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

5.2 用戶管理

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

5.3 新聞公告管理

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

5.4 樂器信息管理

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

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

6.1 首頁

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

6.2 用戶注冊

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

6.3 用戶登錄

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

6.4 用戶中心

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

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

6.5 預(yù)約音樂課程

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

6.6 個人信息修改

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

6.7 樂器詳細(xì)

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

6.8 我的訂單

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

7. 混合APP

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

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

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

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

7.2 開發(fā)原理

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

7.3 開發(fā)過程

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

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

（2）新建頁面

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

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

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

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

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

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

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

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

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

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