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

vue.js

2024.7vue.js第17章

案例—電子商務網站設定基本目標省略的功能介紹本案例的20個步驟文件首頁產品列表頁和加入購物車產品詳情頁和加入購物車訂單詳情頁訂單列表頁項目目錄結構安裝BootstrapDEMO（電子商務網站）第17章

案例—電子商務網站

第17章

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

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

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

案例—電子商務網站

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

案例—電子商務網站

首頁PC端移動端第17章

案例—電子商務網站

產品列表頁和加入購物車PC端移動端第17章

案例—電子商務網站

產品詳情頁和加入購物車PC端移動端第17章

案例—電子商務網站

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

案例—電子商務網站

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

案例—電子商務網站

項目目錄結構第17章

案例—電子商務網站

安裝Bootstrap

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

案例—電子商務網站DEMO第17章

案例—電子商務網站設定基本目標省略的功能介紹本案例的20個步驟文件首頁