《Vue.js3Web開發(fā)案例教程（在線實(shí)訓(xùn)版）》 課件 17 案例-電子商務(wù)網(wǎng)站

vue.js

2024.7vue.js第17章

案例—電子商務(wù)網(wǎng)站設(shè)定基本目標(biāo)省略的功能介紹本案例的20個(gè)步驟文件首頁產(chǎn)品列表頁和加入購(gòu)物車產(chǎn)品詳情頁和加入購(gòu)物車訂單詳情頁訂單列表頁項(xiàng)目目錄結(jié)構(gòu)安裝BootstrapDEMO（電子商務(wù)網(wǎng)站）第17章

案例—電子商務(wù)網(wǎng)站

第17章

案例—電子商務(wù)網(wǎng)站本案例設(shè)定如下基本目標(biāo)：實(shí)現(xiàn)一個(gè)結(jié)構(gòu)完整的電子商務(wù)網(wǎng)站實(shí)現(xiàn)產(chǎn)品列表的展示頁面（產(chǎn)品列表頁）實(shí)現(xiàn)單一產(chǎn)品的顯示頁面（產(chǎn)品詳情頁）實(shí)現(xiàn)將一個(gè)產(chǎn)品“加入購(gòu)物車”功能實(shí)現(xiàn)“確定下單”功能可以查看一個(gè)訂單的信息可以查看訂單列表模擬訂單的支付過程模擬遠(yuǎn)程API的處理邏輯模擬存在API調(diào)用失敗的情況使用localStorage實(shí)現(xiàn)本地存儲(chǔ)第17章

案例—電子商務(wù)網(wǎng)站本案例進(jìn)行了省略的功能：沒有實(shí)現(xiàn)調(diào)用后端API，但是通過JavaScript模擬異步調(diào)用沒有實(shí)現(xiàn)用戶的注冊(cè)、登錄、驗(yàn)證等相關(guān)邏輯產(chǎn)品沒有分類產(chǎn)品和訂單列表沒有分頁展示購(gòu)物車中的產(chǎn)品不能調(diào)整數(shù)量，及每種產(chǎn)品都只有一件第17章

案例—電子商務(wù)網(wǎng)站首先對(duì)這20個(gè)步驟做一介紹，使讀者對(duì)本案例的整體開發(fā)過程有所認(rèn)知。步驟編號(hào)案例文件夾名稱說明1geekfun-01-emptyVue-cli腳手架工具生成的基礎(chǔ)代碼2geekfun-02-router配置基本路由基本頁面3geekfun-03-bootstrap安裝Bootstrap4geekfun-04-products-html搭建產(chǎn)品列表頁的靜態(tài)文件5geekfun-05-products-vue動(dòng)態(tài)化產(chǎn)品列表頁6geekfun-06-product-html搭建產(chǎn)品詳情頁的靜態(tài)文件7geekfun-07-product-vue動(dòng)態(tài)化產(chǎn)品詳情頁8geekfun-08-loading耗時(shí)操作顯示提示框9geekfun-09-cart-html購(gòu)物車的靜態(tài)視圖10geekfun-10-cart-moving使購(gòu)物車可以移動(dòng)第17章

案例—電子商務(wù)網(wǎng)站

步驟編號(hào)案例文件夾名稱說明11geekfun-11-add-to-cart加入購(gòu)物車功能12geekfun-12-header-cart-count在頁頭顯示購(gòu)物車中產(chǎn)品數(shù)量13geekfun-13-order-detail訂單詳情頁14geekfun-14-orders訂單列表15geekfun-15-check-out“確認(rèn)下單”功能16geekfun-16-pay“支付”功能17geekfun-17-404-redirect對(duì)訂單詳情頁和產(chǎn)品詳情頁顯示40418geekfun-18-nav-header制作響應(yīng)式的頁頭導(dǎo)航19geekfun-19-footer頁腳20geekfun-20-final-home-about首頁和關(guān)于我們頁面第17章

案例—電子商務(wù)網(wǎng)站

首頁P(yáng)C端移動(dòng)端第17章

案例—電子商務(wù)網(wǎng)站

產(chǎn)品列表頁和加入購(gòu)物車PC端移動(dòng)端第17章

案例—電子商務(wù)網(wǎng)站

產(chǎn)品詳情頁和加入購(gòu)物車PC端移動(dòng)端第17章

案例—電子商務(wù)網(wǎng)站

訂單詳情頁P(yáng)C端移動(dòng)端第17章

案例—電子商務(wù)網(wǎng)站

訂單列表頁P(yáng)C端移動(dòng)端第17章

案例—電子商務(wù)網(wǎng)站

項(xiàng)目目錄結(jié)構(gòu)第17章

案例—電子商務(wù)網(wǎng)站

安裝Bootstrap

運(yùn)行命令：npminstallbootstrap--save在main.js中引入Bootstrap相關(guān)文件：import"bootstrap/dist/js/bootstrap.bundle";import"bootstrap/dist/css/bootstrap.min.css";第17章

案例—電子商務(wù)網(wǎng)站DEMO第17章

案例—電子商務(wù)網(wǎng)站設(shè)定基本目標(biāo)省略的功能介紹本案例的20個(gè)步驟文件首頁