樂器電子商務網站設計與實現

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

樂器電子商務網站設計與實現

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

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

電子商務；PHP；MySQL；HTML；CSS；JavaScript

1. 系統的需求及功能

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

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

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

2. 系統的整體框架和模塊設計

樂器電子商務網站主要包括前臺展示和后臺管理系統

2.1 前臺實現功能

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

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

商品評論（并保存在數據庫）：顧客在收到商品后，可對商品的質量或者服務進行評價。

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

訂單結算、支付：在訂單被銷售方確認后，顧客付款給賣家。

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

商品分類、庫存數量動態顯示：對商品進行篩選分類，動態顯示庫存信息

分頁：對頁面進行分頁操作。

在線瀏覽樂行業務和聲樂經驗相關信息：信息展示頁。

課程預約：通過了解琴行實體店的信息，顧客可以根據自己的愛好進行課程的預約。

具體見圖1樂器電子商務網站前臺。

圖1 樂器電子商務網站前臺

2.2 后臺管理實現功能

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

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

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

支付狀態管理：管理員可以管理訂單的支付狀態。

頁面信息管理：管理員可以上傳新的樂器知識和經驗分享。

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

分頁：對頁面進行分頁操作。

時間動態獲取顯示：在頁面上動態顯示當時時間

3. 系統的流程設計

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

圖2 樂器電子商務網站后臺

后臺系統流程設計圖如下圖3所示。

圖3 后臺管理系統流程圖

4. 系統的數據庫設計

本系統一共設計了13張表，分別為：管理員信息表、新聞公告信息表、課程預約表、樂器品牌表、購物車表、樂器分類表、音樂課程表、訂單明細表、樂器信息表、樂器知識表、訂單表、樂器評價表、用戶表。

5. 后臺管理系統詳細設計與開發

5.1 管理員登錄

后臺管理員登錄到后臺管理系統后，可以進行整個后臺的管理

5.2 用戶管理

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

5.3 新聞公告管理

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

5.4 樂器信息管理

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

6. 前臺展示詳細設計與開發

6.1 首頁

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

6.2 用戶注冊

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

6.3 用戶登錄

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

6.4 用戶中心

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

主要實現代碼如下：

6.5 預約音樂課程

登錄后的用戶可以對自己喜好的音樂課程進行在線預約。

6.6 個人信息修改

登錄后的用戶可以對自己注冊時填寫的個人信息進行修改。

6.7 樂器詳細

樂器詳細頁面里面介紹的樂器的詳細內容，并可以進行購買。

6.8 我的訂單

用戶將購物車中的樂器結算完畢后，將會自己跳轉進入自己的訂單。

7. 混合APP

7.1 功能實現

樂器電子商務網站App是一款性能優越，風格簡潔的軟件，提供首頁、商品分類頁、搜索頁、商品列表頁、商品詳細頁、購物車頁等頁面，數據使用靜態數據。

首先新建一個應用yinyue。再新建一個W文件，在新建W向導中選擇模板 “移動→應用→樂器電子商務網站”，文件名輸入index，就在yinyue目錄下建出了完整的樂器電子商務網站應用。下面介紹首頁main.w和列表頁list.w上常用的功能是如何實現的。

樂器電子商務網站App，掌握使用向導生成一個應用，初步了解圖片輪播、二級門戶圖標、廣告欄、雙列列表、本地存儲（HTML5 LocalStorage）以及遮罩的使用

7.2 開發原理

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

7.3 開發過程

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

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

（2）新建頁面

WeX5的前端頁面采用組件化開發方式，即頁面完全由組件構成。

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

（3）頁面運行調試

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

7.3.2 后端服務開發

后端服務為前端頁面提供數據。前端頁面需要數據時，向后端服務發送請求，后端服務訪問數據庫表，將查詢結果返回前端頁面；用戶輸入數據后，前端頁面提交數據給后端服務，后端服務將數據存入數據庫。

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

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

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

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