資源共享吧|易語言論壇|逆向破解教程|輔助開發(fā)教程|網(wǎng)絡(luò)安全教程|anzei.cn|我的開發(fā)技術(shù)隨記
標(biāo)題: 技術(shù)胖Vue.js+Koa2移動(dòng)電商實(shí)戰(zhàn)視頻教程 [打印本頁]
作者: show0p 時(shí)間: 2019-4-13 16:00
標(biāo)題: 技術(shù)胖Vue.js+Koa2移動(dòng)電商實(shí)戰(zhàn)視頻教程
本帖最后由 show0p 于 2019-5-4 20:54 編輯
技術(shù)胖Vue.js+Koa2移動(dòng)電商實(shí)戰(zhàn)視頻教程自我介紹:
我是一個(gè)已經(jīng)從事編程行業(yè)12年的碼農(nóng),業(yè)余愛好就是寫寫博客錄下課程。
以后技術(shù)胖,好好寫博客,增加自己的技術(shù)能力,不忘初心。
這是我的第一套實(shí)戰(zhàn)課程,希望小伙伴多支持。有很多不足,但是總要開始,只有在不足中不斷成長(zhǎng),才能成功。 課程一共61集,10萬多字文字版教程,從前端講到全棧,希望小伙伴們有所收獲。
課程說明這個(gè)教程將全面講解Vue+Koa的實(shí)戰(zhàn)項(xiàng)目,學(xué)完本教程能成為以前端技術(shù)為主的全棧程序員。 這套課程總時(shí)長(zhǎng)會(huì)超過20小時(shí),每節(jié)課會(huì)控制在15分鐘左右。
第01節(jié):前端環(huán)境的搭建
前端開發(fā)環(huán)境搭建
一個(gè)README.md的重要性
總結(jié)
第02節(jié):優(yōu)雅引入Vant組件庫(kù)
Vant簡(jiǎn)介
安裝Vant
引入Vant的第一種方法(不推薦)
優(yōu)雅的引入Vant
按需使用Vant組件
總結(jié):
第03節(jié):移動(dòng)端屏幕適配基礎(chǔ)
常見移動(dòng)web布局適配方法
rem單位介紹
JS控制適配屏幕
總結(jié)
第04節(jié):首頁布局和路由設(shè)置
user-scalable設(shè)置
首頁路由的配置
建立首頁組件
Vant布局講解
第05節(jié):首頁搜索區(qū)域的布局
解決小問題
搜索條的布局(search bar)
第06節(jié):首頁輪播圖的制作
1.按需加載Swipe組件
2.下載這三張圖片
開始制作輪播圖
利用Vant實(shí)現(xiàn)圖片輪播的懶加載
Chrome調(diào)試技巧 模擬慢速3G網(wǎng)絡(luò)
第07節(jié):easyMock和Axios的使用
Mock數(shù)據(jù)準(zhǔn)備
進(jìn)入easy-Mock
axios的引入
第08節(jié):Mock數(shù)據(jù)的使用flex布局
首頁商品分類欄的布局
編寫html代碼
CSS樣式
廣告Banner的布局
改造swpie組件
總結(jié)
第09節(jié):商品推薦vue-awesome-swiper
先來簡(jiǎn)單的布局
安裝 vue-awesome-swiper
引入 vue-awesome-swiper 的兩種方式
獲取推薦商品數(shù)據(jù)
編寫swiper的html
第10節(jié):vue-awesome-swiper 詳講1
一個(gè)最簡(jiǎn)單的輪播圖
添加分頁器
豎屏切換效果
第11節(jié):vue-awesome-swiper 詳講2
區(qū)域滾動(dòng)效果
讓分頁器可以自由選擇
無限循環(huán)滾動(dòng)
第12節(jié):首頁樓層區(qū)域布局
不規(guī)則的布局
第一步:先獲取樓層1的數(shù)據(jù)
第二步編寫HTML代碼
第三步編寫CSS樣式
規(guī)則部分的布局
第一步布局我們的html
第二步編寫CSS樣式
樓層標(biāo)題的布局
第13節(jié):樓層組件的封裝和watch使用
編寫組件
引入組件
刪除頁面中的無用代碼。
第14節(jié):樓層組件的完善
樓層組件標(biāo)題區(qū)域制作
給頭部區(qū)域傳值
完成其他兩個(gè)樓層的代碼編寫
第15節(jié):Filter在實(shí)戰(zhàn)中的使用
編寫過濾器通用方法
引入Filter
編寫vue里的filter屬性
在template中使用filter
優(yōu)化我們的filter通用方法
第16節(jié):首頁熱賣模塊的Van-list組件使用
html+CSS部分的編寫
Vant列表(List)組件的使用
商品顯示組件的編寫
第17節(jié):編寫后臺(tái)服務(wù)接口配置文件
編寫接口配置文件
第18節(jié):安裝Koa2到項(xiàng)目中來
安裝Koa和MongoDB到項(xiàng)目中
編寫一個(gè)Hello World 測(cè)試一下安裝是否成功
第19節(jié):安裝MongoDB數(shù)據(jù)庫(kù)
安裝步驟
運(yùn)行MongoDB服務(wù)端
下載Robo3
第20節(jié): Koa用Mongoose連接數(shù)據(jù)庫(kù)(1)
Mongoose概念
Mongoose的安裝
連接數(shù)據(jù)庫(kù)
第21節(jié): Koa用Mongoose連接數(shù)據(jù)庫(kù)(2)
增加Promise的支持
連接失敗自動(dòng)重連
全部文件
第22節(jié): Mongoose的Schema建模介紹
Schema中的數(shù)據(jù)類型
Mongoose中的三個(gè)概念
初學(xué)定義一個(gè)用戶Schema
第23節(jié): 載入Schema和插入查出數(shù)據(jù)
載入所有Schema
插入一條數(shù)據(jù)
讀出已經(jīng)插入進(jìn)去的數(shù)據(jù)
第24節(jié): 打造安全的用戶密碼加密機(jī)制
加密處理
加鹽處理
bcrypt的使用
第25節(jié): 編寫注冊(cè)頁面前端視圖
注冊(cè)頁面的vue模板編寫
第26節(jié): Koa2的用戶操作的路由模塊化
安裝koa-router
新建一個(gè)User.js的文件
讓路由模塊化
第27節(jié):打通注冊(cè)用戶的前后端通訊
安裝koa-bodyparser中間件
前臺(tái)的axios請(qǐng)求處理
讓koa2支持跨域請(qǐng)求
編寫koa2接收前臺(tái)數(shù)據(jù)的方法
第28節(jié):用戶注冊(cè)數(shù)據(jù)庫(kù)操作
Koa2的User.js 接口的完善
前端Vue的業(yè)務(wù)處理
第29節(jié):注冊(cè)的防重復(fù)提交
1.在按鈕上綁定loading屬性
2.改寫我們的注冊(cè)方法
解決一個(gè)網(wǎng)友的小問題
第30節(jié):注冊(cè)時(shí)的前端驗(yàn)證
1.首先為Field綁定error-message屬性
2.編寫驗(yàn)證方法checkFrom
3.重新編寫注冊(cè)方法
4.重新綁定注冊(cè)按鈕事件
第31節(jié):Vue的登錄界面制作和路由配置
1.復(fù)制Register.vue文件并進(jìn)行修改
2. 配置路由,讓頁面可以正常訪問
第32節(jié):登錄的服務(wù)端業(yè)務(wù)邏輯代碼
Shema中的比對(duì)實(shí)例方法
編寫登錄的Api接口
前后端結(jié)合調(diào)試
第33節(jié):登錄的前端交互效果制作和登錄狀態(tài)存儲(chǔ)
前端交互效果制作
保存用戶登錄狀態(tài)
第34節(jié):商品詳細(xì)數(shù)據(jù)的提純操作
用fs讀入數(shù)據(jù)
寫入到新的文件中
第35節(jié):批量插入商品詳情數(shù)據(jù)到MongoDB中
1.建立Goods的Schema
2.批量插入數(shù)據(jù)庫(kù)的路由方法
3.把路由加入到index.js里
第36節(jié):商品大類的Shema建立和導(dǎo)入數(shù)據(jù)庫(kù)
1.編寫Category的Schema
插入Mongodb數(shù)據(jù)庫(kù)
第37節(jié):商品子類的Shema建立和導(dǎo)入數(shù)據(jù)庫(kù)
1.categorySub的Schema建立
2.保存到數(shù)據(jù)庫(kù)的業(yè)務(wù)邏輯
第38節(jié):編寫商品詳情頁的數(shù)據(jù)接口
1.編寫后臺(tái)數(shù)據(jù)接口
2.編寫Goods.vue 頁面
3.把組件加入到路由管理中
改寫程序,讓程序更優(yōu)雅
第39節(jié):商品詳情頁路由的制作和參數(shù)的傳遞
修改goodsInfoComponent.vue文件
接收路由傳遞的參數(shù)
改寫首頁,傳遞goodsId參數(shù)
第40節(jié):商品詳情的頁面模板編寫-1
1.引入Vant框架中的NavBar組件
2.使用NavBar制作頭部導(dǎo)航
3.編寫商品頭圖部分
第41節(jié):商品詳情的頁面模板編寫-2
vant標(biāo)簽組建的使用
解決圖片有空隙問題
第42節(jié):商品詳情的頁面模板編寫-3
加入Filter過濾器,來格式化價(jià)格
底部購(gòu)買按鈕和加入購(gòu)物車按鈕
第43節(jié):分類頁面的數(shù)據(jù)讀取
讀取大類別的API制作
讀取小類別的API制作
根據(jù)商品類別獲取商品列表
第44節(jié):補(bǔ)充商品詳細(xì)頁的滑動(dòng)切換和吸頂效果
Tab頁的滑動(dòng)切換
吸頂效果的制作
第45節(jié):商品列表頁的布局-1
建立頁面和配置列表頁路由
標(biāo)題欄的布局
大類的側(cè)邊欄的布局
axios讀取左側(cè)大類
第46節(jié):商品列表頁的大類交互效果制作
把大類列表放到左側(cè)導(dǎo)航上
點(diǎn)擊后的交互效果制作-反白操作
第47節(jié):一二級(jí)分類的聯(lián)動(dòng)效果制作
在serviceAPI.config.js中加入接口
改寫后端接口
獲取小類的方法
用Vant的Tabs組建實(shí)現(xiàn)聯(lián)動(dòng)
第48節(jié):商品列表頁上拉加載效果的實(shí)現(xiàn)
實(shí)現(xiàn)上拉加載效果
第49節(jié):商品列表頁下拉刷新效果的實(shí)現(xiàn)
1.引入Vant中的PullRefresh組件
2.增加下拉刷新用的變量和方法
3.編寫template部分
第50節(jié):商品類別分類的Koa2分頁服務(wù)制作
修改Koa2服務(wù)代碼
把寫好的接口加入到前臺(tái)
第51節(jié):真實(shí)數(shù)據(jù)的上拉加載效果制作
在data屬性里注冊(cè)必要的參數(shù)
編寫axios商品列表的獲取方法
點(diǎn)擊獲取子類商品信息的方法
改造大類的方法
編寫OnLoad方法,實(shí)現(xiàn)上來加載效果
編寫html和CSS
第52節(jié):真實(shí)數(shù)據(jù)的下拉刷新效果制作
下拉刷新效果的制作
補(bǔ)充,首頁類別導(dǎo)航圖片大小不一Bug的解決
第53節(jié):Vue中圖片失效替補(bǔ)圖片的制作方法
制作一張?zhí)嫜a(bǔ)圖片
把圖片放到相應(yīng)位置
在圖片位置加入onerror事件
第54節(jié):商品列表頁編程式導(dǎo)航的制作
編程式導(dǎo)航
價(jià)格過濾器的添加
第55節(jié):購(gòu)物車頁面的的建立
建立購(gòu)物車頁面
加入頭部區(qū)域
配置路由
得到購(gòu)物車數(shù)據(jù)方法編寫
第56節(jié):購(gòu)物車中商品的添加
向購(gòu)物車中添加商品
第57節(jié):購(gòu)物車清空和商品布局(Flex)
上節(jié)課程序的問題說明
清空購(gòu)物車按鈕的制作
購(gòu)物車商品的布局
第58節(jié):購(gòu)物車中的商品價(jià)格計(jì)算
商品價(jià)格的格式化
改造template,增加單個(gè)商品總價(jià)計(jì)算
商品總價(jià)的計(jì)算
第59節(jié):底部導(dǎo)航欄和子導(dǎo)航的制作
引入tabbar組件
新建Main.vue文件
子導(dǎo)航的制作
第60節(jié):底部導(dǎo)航欄優(yōu)化
購(gòu)物車頁面底部導(dǎo)航的處理
商城首頁不能拉到底部的修改
列表頁Bug的解決
第61節(jié):底部導(dǎo)航欄的keep-alive設(shè)置(完結(jié))
作者: 賣鐵而已 時(shí)間: 2019-4-13 20:46
個(gè)最簡(jiǎn)單的輪播圖
作者: fengz666 時(shí)間: 2019-4-14 00:22
祝資源共享吧越來越火!
作者: zxcvbnm01079 時(shí)間: 2019-4-14 10:58
wqeqe
作者: zero0 時(shí)間: 2019-4-15 13:07
在上傳?
作者: qq1055663428 時(shí)間: 2019-4-16 14:01
看起來好屌的樣子
作者: hyb3155 時(shí)間: 2019-4-17 15:08
感謝感謝感謝感謝感謝感謝感謝感謝感謝
作者: liuboyan12 時(shí)間: 2019-4-17 16:30
哇塞
作者: hstktk 時(shí)間: 2019-4-18 15:26
謝謝分享。!
作者: willischoi 時(shí)間: 2019-6-12 00:59
swi2
作者: psun 時(shí)間: 2019-8-3 17:01
技術(shù)胖Vue.js+Koa2移動(dòng)電商實(shí)戰(zhàn)視頻教程
作者: TiAmo 時(shí)間: 2019-11-11 11:02
好用
作者: sorrygang 時(shí)間: 2019-12-4 22:37
dddddddddddddddddddddddd
作者: xuzygx12316 時(shí)間: 2019-12-22 14:10
大神 的 課程 !
作者: Marco 時(shí)間: 2020-4-10 12:58
你好
作者: ye1987xx 時(shí)間: 2020-4-24 17:28
強(qiáng)大的資源共享吧,一定給你多拉人推薦!
作者: 慕青青青 時(shí)間: 2020-4-29 08:27
作者: stars 時(shí)間: 2020-5-17 11:09
個(gè)最簡(jiǎn)單的輪播圖
作者: gq94 時(shí)間: 2020-6-1 09:42
感謝樓主分享
作者: qwertyuiop1822 時(shí)間: 2020-8-9 19:11
祝資源共享吧越來越火!
作者: etconeminute 時(shí)間: 2020-8-16 08:57
技術(shù)胖Vue.js+Koa2移動(dòng)電商實(shí)戰(zhàn)視頻教程
作者: xiedanting 時(shí)間: 2020-8-28 11:08
支持
作者: ly1123245599 時(shí)間: 2020-10-23 18:27
支持一下
作者: wjr5566 時(shí)間: 2020-10-29 15:18
樓主,大恩不言謝了!
作者: xyj1984218 時(shí)間: 2020-12-13 15:32
學(xué)習(xí)
作者: nibababa 時(shí)間: 2020-12-16 10:15
祝資源共享吧越來越火!
作者: qq21687747 時(shí)間: 2020-12-25 14:50
路過回帖。。。。
作者: 13143373814 時(shí)間: 2021-5-8 19:41
666666666666
作者: 創(chuàng)源 時(shí)間: 2021-7-23 12:06
學(xué)習(xí)一下 謝謝分享
作者: 978069486 時(shí)間: 2021-9-26 22:43
laikankan
作者: Decimal 時(shí)間: 2021-10-15 23:32
學(xué)習(xí)一下~
作者: eagle083 時(shí)間: 2021-12-10 15:29
111111111111
作者: beyond0716 時(shí)間: 2023-4-10 20:01
kankan
作者: zygx8ttss8 時(shí)間: 2024-3-20 22:50
祝資源共享吧越來越火!
作者: 1215276862 時(shí)間: 2024-4-5 13:00
自動(dòng)回復(fù)腳本
作者: tanxi 時(shí)間: 2024-11-5 23:19
123123123
歡迎光臨 資源共享吧|易語言論壇|逆向破解教程|輔助開發(fā)教程|網(wǎng)絡(luò)安全教程|anzei.cn|我的開發(fā)技術(shù)隨記 (http://anzei.cn/) |
Powered by Discuz! X3.4 |