vue.js

2024.7vue.js第17章

案例—電子商務(wù)網(wǎng)站設(shè)定基本目標(biāo)省略的功能介紹本案例的20個(gè)步驟文件首頁(yè)產(chǎn)品列表頁(yè)和加入購(gòu)物車(chē)產(chǎn)品詳情頁(yè)和加入購(gòu)物車(chē)訂單詳情頁(yè)訂單列表頁(yè)項(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)品列表的展示頁(yè)面（產(chǎn)品列表頁(yè)）實(shí)現(xiàn)單一產(chǎn)品的顯示頁(yè)面（產(chǎn)品詳情頁(yè)）實(shí)現(xiàn)將一個(gè)產(chǎn)品“加入購(gòu)物車(chē)”功能實(shí)現(xiàn)“確定下單”功能可以查看一個(gè)訂單的信息可以查看訂單列表模擬訂單的支付過(guò)程模擬遠(yuǎn)程API的處理邏輯模擬存在API調(diào)用失敗的情況使用localStorage實(shí)現(xiàn)本地存儲(chǔ)第17章

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

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

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

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

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

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

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

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

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

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

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

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

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

訂單列表頁(yè)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è)步驟文件首頁(yè)