Vue3.x網上商城項目黑馬小兔鮮兒電商實戰視頻教程
vue3電商商城項目功能介紹與項目演示
咱們的這個vue3項目是一個小兔鮮兒綜合品類電商項目,是獨家運營的品類,參考的競品是網易嚴選,首頁展示還是比較大的,有很多塊分類內容,有頂級分類,頂級分類下有二級分類,然后有搜索功能和購物車功能,分類點進去之后右邊顯示的是一些配件,下面還有一些品牌推薦。 品牌推薦包括新鮮好物、人氣推薦、 熱門品牌等等,然后還有居家美食、母嬰等等,這是首頁主打的四個類目。
每個類目下都有自己的推薦商品及它下面所有的二級類目, 項目中還專門設計一個最新專題板塊,比如說三八節、618節日做一些推廣之類的促銷和秒殺搶購等。
你從首頁這里還可以進入它的二級類目,然后看到的就是一些具體的商品,二級類目中可以做一些篩選屬性,可以按照規格、尺寸、顏色等進行篩選展示,下一塊就是商品詳情,點商品進入咱們的商品詳情頁,這個位置就是一個商品圖的展示、放大鏡的展示、圖片的切換,需要購買的話下面還有配選地區的一個選擇, 有規格選擇、有spu 的選擇。
小兔鮮兒商城項目的特色功能
下面講一下購物車的特色功能,首先點擊加入到購物車,登錄成功的狀態下是可以直接添加購物車的,我們的這個項目還支持離線購物車功能,就是退出登錄后顯示未登錄的狀態,點一下商品依然可以加入購物車, 登錄和未登錄兩種狀態下都可以實現,這是購物車的特色功能,?一旦當我去進行登錄的時候,就會將本地購物車合并。
登錄這一塊的話有三種方式的登錄,有賬號和密碼的登錄,有手機號和驗證碼的登錄,這其實都是直接登錄,然后你還可以通過qq進行登錄,qq登錄就分兩種情況,一種是你已經綁定過當前的注冊賬號,然后直接點擊qq登錄就可以直接登錄成功,另一種是從來沒有注冊過賬號,這種情況的話點擊qq登錄就會提示綁定手機號然后完善信息,這也是一個特色業務。
購物車結算功能又有一套邏輯,購物車包括全選全選商品、刪除商品、清空商品、改變商品數量、改變規格、計算價格等等,然后進行下單結算, 下單結算之后就會跳到填寫地址界面,這里有個收貨地址的管理,默認會有一個收貨地址,你也可以修改收貨地址,如果沒有你也可以添加一個新的收貨地址,提交訂單必須在半小時之內進行支付,可以選擇微信和支付寶,支付寶支付完了會跳轉到支付成功頁面,會顯示當前的訂單狀態,其他功能都是比較雷同的了。
還有告訴大家一個消息,本vue3電商商城項目沒有用任何組件庫,主線全部自己封裝,內容已經給大家介紹完畢了,大家不用太擔心,只要跟著老師一步一步的走,做這個項目完全沒問題的。
前后臺接口對接開發說明
后端接口大部分都是我前端來定的,后端按照這個接口字段來開發就可以,當然也有后臺編寫接口返回給前臺,我們按照后臺的約定來做開發,都是一樣的,我們和后臺做好約定就可以,后臺看到我們定義的接口之后,按照這個文檔進行開發就可以,或者說后臺把這個東西定義好,前端按照這個文檔開發就可以。即使后臺接口沒有開發完,我們也可以調這個接口來完成一些前臺邏輯,只要到時候和后臺就進行接口聯調就可以了。
我們在做這個項目的時候,會遇到同樣的一些問題,首先大家會遇到的一個問題就是數據問題,剛才演示的時候是有些數據就不太對,后臺老師后續會整理完成,我們專門有一個后臺,java技術開發的后臺, 如果遇到不合適的數據,老師還是會給大家演示一下如何在沒有后臺接口的情況下完成前端開發。
開發過程中,由于我們用的是最新版本的vue,因此有可能會遇到各種問題,你使用一些新特性之類的,你就要準備踩坑,項目中老師也會手把手的帶著我們進行踩坑埋坑,大家不用太擔心啊,突然出現了bug不知道怎么回事也沒關系啊,我們會慢慢過渡下去,慢慢的一起解決版本的bug問題,如果你想把這個項目作為工作的項目經驗,那就得好好聽一聽,步驟細節應該要做清楚。
Vue3.0小兔鮮兒電商項目視頻教程課程詳情
1、課程大小:6.20GB
2、課程課時:共計154課時
3、播放格式:(mp4視頻格式)百度云網盤在線播放、下載視頻播放器播放、不加密
4、技術架構:Vue3.x+Vuex+Vue-router+Vue-cli+axios+vuex-persistedstate+vee-validate+dayjs
5、課件說明:教程課程涵蓋素材、代碼、筆記資料