電子商務(wù)模擬實(shí)驗(yàn)報(bào)告

1、實(shí)驗(yàn)：電子商務(wù)網(wǎng)站設(shè)計(jì)試驗(yàn)實(shí)驗(yàn)?zāi)康模?、登錄模塊設(shè)計(jì)實(shí)驗(yàn)：（1）理解電子商務(wù)網(wǎng)站中登陸模塊設(shè)計(jì)的意義。（2）掌握登陸模塊的設(shè)計(jì)方法和技巧。2、導(dǎo)航條模塊設(shè)計(jì)實(shí)驗(yàn)（1）理解導(dǎo)航模條在網(wǎng)站中的意義。(2）掌握設(shè)計(jì)導(dǎo)航條的方法。3、新聞模塊設(shè)計(jì)實(shí)驗(yàn)：（1）熟悉電子商務(wù)網(wǎng)站中新聞模塊的幾種樣式。（2）掌握新聞模塊的設(shè)計(jì)方法和應(yīng)用技巧。 4、公告模塊設(shè)計(jì)實(shí)驗(yàn)：（1）理解電子商務(wù)網(wǎng)站中公告存在的意義。（2）學(xué)會(huì)在電子商務(wù)網(wǎng)站中設(shè)計(jì)公告。（3）學(xué)會(huì)添加高效的公告5、商品展示模塊設(shè)計(jì)實(shí)驗(yàn)：（1）熟悉電子商務(wù)網(wǎng)站中商品展示的方式。（2）掌握在電子商務(wù)網(wǎng)站中展示商品的方法和技巧。 6、商品購物車、訂單模塊查詢?cè)O(shè)計(jì)

2、：（1）熟悉電子商務(wù)網(wǎng)站中購物的流程。（2）掌握電子商務(wù)網(wǎng)站中訂單產(chǎn)生的流程7、咨詢信息模塊設(shè)計(jì)實(shí)驗(yàn)：（1）掌握電子商務(wù)網(wǎng)站中公告模塊的設(shè)計(jì)方法。（2）掌握電子商務(wù)網(wǎng)站中咨詢信息的添加方法。（3）體會(huì)在電子商務(wù)網(wǎng)站中咨詢信息的作用。8、友情鏈接模塊設(shè)計(jì)實(shí)驗(yàn)：（1）掌握在電子商務(wù)網(wǎng)站中添加友情鏈接模塊的方法。（2）掌握在電子商務(wù)網(wǎng)站中添加高效友情鏈接的技巧。9、網(wǎng)站調(diào)查模塊設(shè)計(jì)實(shí)驗(yàn)：（1）了解網(wǎng)站調(diào)查的意義。（2）掌握設(shè)計(jì)網(wǎng)站調(diào)查的方法。（3）掌握從網(wǎng)絡(luò)收集信息的手段和效率10、電子商務(wù)網(wǎng)站設(shè)計(jì)綜合實(shí)驗(yàn)：（1）掌握開發(fā)功能齊全的電子商務(wù)網(wǎng)站過程。（2）掌握電子商務(wù)網(wǎng)站的綜合管理技能。1、登陸界面

3、的設(shè)計(jì)1.1.進(jìn)入前臺(tái)編輯器界面-點(diǎn)擊登錄注冊(cè)樣式一。在組件列表中選擇“登陸樣式一”或者“登陸樣式二”來添加登陸功能模塊，模塊添加完成后就可以在編輯器的編輯模式下看到添加組件的頁面效果了圖1.1 登陸界面1.2保存好之后程序版本控制。添加完成登陸頁面保存后，在導(dǎo)航中通過“程序版本控制”按鈕來把新添加的頁面從測(cè)試區(qū)同步到工作區(qū)去。在完成頁面的同步后就可以進(jìn)行前臺(tái)頁面測(cè)試了。圖1.2 程序版本控制界面1.3 進(jìn)入測(cè)試程序前臺(tái)圖1.3 進(jìn)入前臺(tái)程序測(cè)試1.4.1生成程序后臺(tái) 圖1.4 生成程序后臺(tái)1.4.2添加用戶：在后臺(tái)的用戶管理上添加用戶數(shù)據(jù)庫。在對(duì)登陸前臺(tái)頁面添加完成后，就可以利用系統(tǒng)提供的“

4、生成程序后臺(tái)”按鈕自動(dòng)生成登陸頁面的后臺(tái)程序了。通過后臺(tái)程序的生成就完成了一個(gè)完整的用戶管理模塊的設(shè)計(jì)了。圖1.5 添加用戶數(shù)據(jù)庫1.5學(xué)生作業(yè)練習(xí)某電子商務(wù)網(wǎng)站首頁做的很難看，特別是登陸框做的很小，很難被發(fā)現(xiàn)，導(dǎo)致該網(wǎng)站訪問率下降。請(qǐng)你現(xiàn)在為該網(wǎng)站主頁只設(shè)計(jì)一個(gè)登陸框，其他內(nèi)容不需設(shè)計(jì)。練習(xí)如下，適當(dāng)調(diào)整寬度圖1.6 調(diào)整寬度之后的登陸界面2導(dǎo)航條設(shè)計(jì)實(shí)驗(yàn)2.1導(dǎo)航條實(shí)現(xiàn)原理：后臺(tái)管理界面添加導(dǎo)航，將導(dǎo)航信息保存到數(shù)據(jù)庫中，前臺(tái)展示頁面通過查詢后臺(tái)數(shù)據(jù)庫，得出導(dǎo)航信息的標(biāo)題、鏈接頁面、打開方式等信息，以超級(jí)鏈接形式實(shí)現(xiàn)導(dǎo)航。2.2實(shí)驗(yàn)內(nèi)容及步驟： 2.2.1進(jìn)入編輯器頁面，點(diǎn)擊“電子商務(wù)組件

5、”按鈕，通過按鈕點(diǎn)擊“導(dǎo)航條”，設(shè)置相關(guān)導(dǎo)航條圖2.1進(jìn)入編輯器界面2.2.2 程序版本控制圖2.2進(jìn)入程序版本控制界面2.2.3測(cè)試程序前臺(tái) 圖2.3 進(jìn)入測(cè)試程序前臺(tái)2.2.4生成程序后臺(tái) 在對(duì)導(dǎo)航前臺(tái)頁面添加完成后，就可以利用系統(tǒng)提供的“生成程序后臺(tái)”按鈕自動(dòng)生成導(dǎo)航頁面的后臺(tái)程序了。通過后臺(tái)程序的生成就完成了一個(gè)完整的導(dǎo)航條管理模塊的設(shè)計(jì)了。圖2.4 進(jìn)入生成程序后臺(tái)2.2.5練習(xí)：為沃爾瑪練習(xí)導(dǎo)航條：后臺(tái)程序添加導(dǎo)航條：添加首頁、促銷活動(dòng)。新聞界面等圖2.5 在后臺(tái)管理導(dǎo)航管理上添加導(dǎo)航條前臺(tái)測(cè)試顯示：圖2.6沃爾瑪導(dǎo)航條顯示3 新聞模塊設(shè)計(jì)實(shí)驗(yàn)3.1 實(shí)現(xiàn)原理：后臺(tái)管理界面添加新聞

6、，將新聞信息保存到數(shù)據(jù)庫中，前臺(tái)展示頁面通過查詢后臺(tái)數(shù)據(jù)庫，得到新聞的標(biāo)題、作者、內(nèi)容及新聞的展示圖片，在表格中呈現(xiàn)新聞信息。3.2實(shí)驗(yàn)內(nèi)容及步驟（1）進(jìn)入編輯器界面。添加組件：新聞信息樣式一。圖3.1點(diǎn)擊新聞樣式出現(xiàn)新聞界面調(diào)整位置如下：圖3.2 調(diào)整新聞的界面3.2.2程序版本控制：圖3.3 程序版本控制之新聞管理3.2.3前臺(tái)測(cè)試：圖3.4 進(jìn)入測(cè)試程序前臺(tái)3.2.4進(jìn)入生成程序后臺(tái)新聞管理。添加新聞圖3.5 進(jìn)入后臺(tái)管理界面3.2.5作業(yè)練習(xí)。添加花店新聞：假設(shè)你開了一個(gè)網(wǎng)上花店，現(xiàn)在需要通過在網(wǎng)上發(fā)布相關(guān)新聞來宣傳產(chǎn)品和網(wǎng)站，甚至可以炒作網(wǎng)站。請(qǐng)?jiān)O(shè)計(jì)一個(gè)新聞中心，要求以適當(dāng)?shù)拇笮》旁?/p>

7、適當(dāng)?shù)奈恢?，并發(fā)布適當(dāng)?shù)膬?nèi)容。圖3.6 添加花店新聞的編輯界面圖3.7添加新聞后花店的整體效果圖 3.8新聞界面的詳細(xì)內(nèi)容界面4 公告設(shè)計(jì)模塊4.1 實(shí)現(xiàn)原理：實(shí)現(xiàn)原理：后臺(tái)管理界面發(fā)布公告，將公告信息保存到數(shù)據(jù)庫中，前臺(tái)展示頁面通過查詢后臺(tái)數(shù)據(jù)庫，得出公告信息的標(biāo)題、內(nèi)容等信息，以表格形式展示出來。4.2 實(shí)驗(yàn)內(nèi)容及步驟4.2.1 進(jìn)入編輯器，添加公告信息樣式組件，調(diào)整頁面排版圖4.1 添加公告信息樣式一4.2.3測(cè)試程序前臺(tái).程序控制之后進(jìn)入測(cè)試程序前臺(tái)測(cè)試。圖4.2 添加公告樣式一之前臺(tái)4.2.4生成程序后臺(tái) 在對(duì)公告前臺(tái)頁面添加完成后，就可以利用系統(tǒng)提供的“生成程序后臺(tái)”按鈕自動(dòng)生成公

8、告頁面的后臺(tái)程序了。通過后臺(tái)程序的生成就完成了一個(gè)完整的公告管理模塊的設(shè)計(jì)了。圖4.3 后臺(tái)管理界面之公告管理4.2.4練習(xí)：某電子商務(wù)公司內(nèi)部員工出現(xiàn)內(nèi)部經(jīng)濟(jì)丑聞，現(xiàn)公司決定通過網(wǎng)站公告欄發(fā)布公告，以挽回公司形象。請(qǐng)為該公司網(wǎng)站設(shè)計(jì)一公告欄，具體文字內(nèi)容自擬。要求以適當(dāng)大小放在適當(dāng)位置，并發(fā)布適當(dāng)內(nèi)容。 圖4.4 公告之編輯界面5商品展示模塊設(shè)計(jì)實(shí)驗(yàn)5.1 實(shí)驗(yàn)原理：后臺(tái)管理界面發(fā)布商品，將商品信息保存到數(shù)據(jù)庫中，前臺(tái)展示頁面通過查詢后臺(tái)數(shù)據(jù)庫，得到商品的名稱、價(jià)格、原價(jià)和現(xiàn)價(jià)及商品的展示圖片，在表格中呈現(xiàn)商品信息。5.2實(shí)驗(yàn)內(nèi)容及步驟5.2.1前臺(tái)編輯器-多商品展示（調(diào)整居中）圖5.1前臺(tái)

9、編輯器之多商品展示5.2.2程序版本控制：圖5.2多商品展示之程序控制版本 5.2.3后臺(tái)測(cè)試：商品管理頁圖5.3多商品展示之后臺(tái)5.2.4練習(xí)：請(qǐng)為聯(lián)想電腦網(wǎng)站的產(chǎn)品介紹頁面設(shè)計(jì)商品展示欄。要求從電子商務(wù)角度，以適當(dāng)?shù)拇笮》旁谶m當(dāng)?shù)奈恢?，發(fā)布適當(dāng)?shù)男畔?，介紹其最新的幾種產(chǎn)品。圖5.4多商品展示之后臺(tái)管理：添加電腦產(chǎn)品前臺(tái)測(cè)試：圖5.5 多商品展示之前臺(tái)測(cè)試 商品修改：圖5.6 多商品展示之修改后臺(tái)6商品購物車、訂單查詢實(shí)現(xiàn)原理：點(diǎn)擊購買商品，將選購的商品信息保存在購物車表中，同時(shí)購物車模塊中的信息從購物車表中查詢出來，以表格形式表現(xiàn)出來。當(dāng)點(diǎn)擊付款時(shí)，產(chǎn)生隨即訂單編號(hào)，將這次選購的商品金額，

10、郵購地址等信息保存起來。一次購物操作完成。6.1現(xiàn)在上題點(diǎn)擊聯(lián)想電腦進(jìn)入購物車圖6.1購物車之添加商品加入購物車6.2新建用戶登錄訂購商品頁面圖6.2 購物車之前田編輯器調(diào)整排版：圖6.3購物車之前臺(tái)編輯器6.3程序版本控制：圖6.4購物車之程序版本控制6.4測(cè)試前臺(tái)：圖6.5購物車之測(cè)試程序前臺(tái)6.5生成程序后臺(tái);圖6.6購物車之后臺(tái)管理6.6訂購貨物后圖6.1購物車之后臺(tái)管理7咨詢信息模塊設(shè)計(jì)實(shí)驗(yàn)實(shí)現(xiàn)原理：后臺(tái)管理界面或前臺(tái)頁面添加咨詢信息，將咨詢信息保存到數(shù)據(jù)庫中，前臺(tái)展示頁面通過查詢后臺(tái)數(shù)據(jù)庫，得到咨詢信息的標(biāo)題、作者、內(nèi)容，在表格中呈現(xiàn)咨詢信息。7.1實(shí)驗(yàn)內(nèi)容及步驟：7.1.1前臺(tái)編

11、輯器修改格式：圖7.1咨詢信息之前臺(tái)編輯器7.1.2程序版本控制圖7.1咨詢信息之程序版本控制7.1.3測(cè)試程序前臺(tái)：圖7.2咨詢信息測(cè)試程序前臺(tái)7.1.4生成程序后臺(tái)：圖7.3咨詢信息之生成程序后臺(tái)7.1.5發(fā)布咨詢：圖7.4咨詢信息之后臺(tái)管理7.1.6某域名代理公司網(wǎng)站主頁需要加入信息咨詢功能，請(qǐng)為該公司設(shè)計(jì)。要求以適當(dāng)大小放在適當(dāng)位置。圖7.5咨詢信息之前臺(tái)編輯器8友情鏈接模塊設(shè)計(jì)及實(shí)驗(yàn)實(shí)現(xiàn)原理：后臺(tái)管理界面添加友情鏈接，將鏈接信息保存到數(shù)據(jù)庫中，前臺(tái)展示頁面通過查詢后臺(tái)數(shù)據(jù)庫，得到鏈接的地址、鏈接的標(biāo)題、網(wǎng)站的log圖片等信息，以超級(jí)鏈接的形式實(shí)現(xiàn)友情鏈接。8.1 實(shí)驗(yàn)內(nèi)容及步驟8.1

12、.1前臺(tái)編輯器加入友情模塊鏈接：圖8.1友情鏈接之前臺(tái)編輯器調(diào)整格式后圖8.2友情鏈接之前臺(tái)編輯器8.1.2程序版本控制：圖8.2友情鏈接之程序版本控制8.1.3測(cè)試前臺(tái)初步：圖8.2友情鏈接之測(cè)試程序前臺(tái)8.1.4生成程序后臺(tái)：添加各種網(wǎng)站鏈接，如淘寶，Google等圖8.4友情鏈接之添加鏈接添加中國移動(dòng)、360，京東商城圖8.5、友情鏈接之添加鏈接圖8.6友情鏈接咨詢信息之添加鏈接再重新測(cè)試程序前臺(tái)圖8.7友情鏈接之添加鏈接圖8.8友情鏈接之添加鏈接8.4學(xué)生練習(xí)，為電腦銷售公司添加友情鏈接添加友情鏈接1號(hào)店圖8.9友情鏈接之添加鏈接一號(hào)店添加友情鏈接京東商城圖8.10友情鏈接之添加鏈接京

13、東商城測(cè)試程序前臺(tái)顯示圖8.11友情鏈接之測(cè)試程序前臺(tái)9網(wǎng)站調(diào)查模塊設(shè)計(jì)9.1進(jìn)入網(wǎng)站編輯頁面，前臺(tái)編輯器圖9.1網(wǎng)站調(diào)查之測(cè)試程序前臺(tái)改動(dòng)位置之后居中自成一個(gè)區(qū)塊圖9.2網(wǎng)站調(diào)查之測(cè)試程序前臺(tái)9.2保存之后程序版本控制圖9.3網(wǎng)站調(diào)查之程序版本控制9.3測(cè)試程序前臺(tái)圖9.3網(wǎng)站調(diào)查之測(cè)試程序前臺(tái)9.4生成程序后臺(tái)圖9.4網(wǎng)站調(diào)查之后臺(tái)9.5練習(xí)為肯德基做個(gè)客戶需求調(diào)查圖9.5網(wǎng)站調(diào)查之后臺(tái)添加調(diào)查調(diào)查問題：圖9.5網(wǎng)站調(diào)查之調(diào)查問題圖9.6網(wǎng)站調(diào)查之調(diào)查問題圖9.7網(wǎng)站調(diào)查調(diào)查問題另添加女性對(duì)褲子喜好的調(diào)查圖9.8網(wǎng)站調(diào)查之程序版本控制至此，實(shí)驗(yàn)1到實(shí)驗(yàn)9全部做完，效果圖如下：圖9.9整體頁

14、面 圖9.9整體頁面 圖9.9整體頁面 后臺(tái)效果圖如下：圖9.9整體頁面 10電子商務(wù)網(wǎng)站設(shè)計(jì)綜合實(shí)驗(yàn)建立一個(gè)clothestore站點(diǎn)，賣各種款式的女裝10.1圖片插入服務(wù)器：圖10.1加入圖片 10.2 公告的管理設(shè)計(jì)圖10.2加入公告圖10.3加入公告10.2.2前臺(tái)顯示效果：圖10.3加入公告后前臺(tái)顯示效果10.3導(dǎo)航條的設(shè)計(jì)圖10.5加入導(dǎo)航條圖10.7新聞 10.4上傳商品：圖10.7上傳商品 前臺(tái)顯示商品圖10.8前臺(tái)顯示商品10.5雙11新聞管理：圖10.9新聞管理前臺(tái)顯示：圖10.10加入雙11新聞10.6商品訂購：圖10.11商品訂購商品訂購：圖10.12前臺(tái) 圖10.13

15、購物車及訂單查詢10.7加入咨詢信息管理： 圖10.14咨詢臺(tái)10.8加入后臺(tái)鏈接管理。圖10.15咨詢管理前臺(tái)測(cè)試顯示至后臺(tái)咨詢管理和友情鏈接圖10.16 友情鏈接10.9 調(diào)查管理：圖10.16調(diào)查管理添加項(xiàng)目主題：圖10.17調(diào)查管理對(duì)原創(chuàng)設(shè)計(jì)外套的調(diào)查；圖10.19調(diào)查管理前臺(tái)調(diào)查管理的顯示效果：圖10.20 調(diào)查管理 之前臺(tái)1010整體前臺(tái)效果：圖10.21前臺(tái)整體效果圖10.22前臺(tái)整體效果圖10.23前臺(tái)整體效果整體后臺(tái)效果： 圖10.24后臺(tái)整體效果實(shí)驗(yàn)總結(jié)以前在逛各大網(wǎng)站時(shí)，總是想著那些網(wǎng)站如何進(jìn)行網(wǎng)站的布局的。所以接觸這次電子商務(wù)模擬實(shí)驗(yàn)時(shí)是充滿興趣的，帶著期待的心情去做這個(gè)實(shí)驗(yàn)。不過，一開始進(jìn)入里面覺得一點(diǎn)都不有趣，因?yàn)槎际且粋€(gè)框架一個(gè)框架的做，而且系統(tǒng)本身存在很大問題，進(jìn)入代碼模式修改代碼時(shí)只能進(jìn)行一些基本的修改，不能深入。而且每個(gè)電子商務(wù)組件是固定的，機(jī)械的，布局又有點(diǎn)丑。之后進(jìn)行新聞管理時(shí)才感到樂趣，自己撰寫新聞稿，發(fā)布到上面，上傳