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

vue.js

2024.7vue.js第17章

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

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

第17章

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

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

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

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

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

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

首頁PC端移動端第17章

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

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

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

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

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

訂單詳情頁PC端移動端第17章

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

訂單列表頁PC端移動端第17章

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

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

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

安裝Bootstrap

運行命令：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個步驟文件首頁