整理前一段所做的工作內(nèi)容
0.其它
vue實(shí)戰(zhàn)(1):準(zhǔn)備與資料整理
vue實(shí)戰(zhàn)(2):初始化項(xiàng)目沛申、搭建底部導(dǎo)航路由
vue實(shí)戰(zhàn)(3):底部導(dǎo)航顯示侣姆、搭建各模塊靜態(tài)頁面背零、添加登錄頁頁面與路由
vue實(shí)戰(zhàn)(4):postman測(cè)試數(shù)據(jù)哺壶、封裝ajax笑撞、使用vuex管理狀態(tài)
vue實(shí)戰(zhàn)(5):總結(jié)一
vue實(shí)戰(zhàn)(6):異步顯示數(shù)據(jù)、開發(fā)Star組件
vue實(shí)戰(zhàn)(7):完整開發(fā)登錄頁面(一)
vue實(shí)戰(zhàn)(8):完整開發(fā)登錄頁面(二)
vue實(shí)戰(zhàn)(9):總結(jié)二
vue實(shí)戰(zhàn)(10):開發(fā)店鋪詳情(一)
vue實(shí)戰(zhàn)(11):開發(fā)店鋪詳情(二)
vue實(shí)戰(zhàn)(12):完結(jié) + 附學(xué)習(xí)視頻
1. 異步數(shù)據(jù)
封裝ajax:
promise+axios封裝ajax請(qǐng)求的函數(shù)
封裝每個(gè)接口對(duì)應(yīng)的請(qǐng)求函數(shù)(能根據(jù)接口定義ajax請(qǐng)求函數(shù))
解決ajax的跨越域問題: 配置代理, 對(duì)代理的理解
vuex編碼
創(chuàng)建所有相關(guān)的模塊: store/index
設(shè)計(jì)state: 從后臺(tái)獲取的數(shù)據(jù)
實(shí)現(xiàn)actions:
定義異步action: async/await
流程: 發(fā)ajax獲取數(shù)據(jù), commit給mutation
實(shí)現(xiàn)mutations: 給狀態(tài)賦值
實(shí)現(xiàn)index: 創(chuàng)建store對(duì)象
main.js: 配置store
組件異步顯示數(shù)據(jù)
在mounted()通過$store.dispatch('actionName')來異步獲取后臺(tái)數(shù)據(jù)到state中
mapState(['xxx'])讀取state中數(shù)據(jù)到組件中
在模板中顯示xxx的數(shù)據(jù)
模板中顯示數(shù)據(jù)的來源
data: 自身的數(shù)據(jù)(內(nèi)部改變)
props: 外部傳入的數(shù)據(jù)(外部改變)
computed: 根據(jù)data/props/別的compute/state/getters
異步顯示輪播圖
通過vuex獲取foodCategorys數(shù)組(發(fā)請(qǐng)求, 讀取)
對(duì)數(shù)據(jù)進(jìn)行整合計(jì)算(一維變?yōu)樘囟ǖ亩S數(shù)組)
使用Swiper顯示輪播, 如何在界面更新之后創(chuàng)建Swiper對(duì)象?
1). 使用回調(diào)+$nextTick()
2). 使用watch+$nextTick()
2. 登陸/注冊(cè): 界面相關(guān)效果
a. 切換登陸方式
b. 手機(jī)號(hào)合法檢查
c. 倒計(jì)時(shí)效果
d. 切換顯示或隱藏密碼
g. 前臺(tái)驗(yàn)證提示
3. 前后臺(tái)交互相關(guān)問題
1). 如何查看你的應(yīng)用是否發(fā)送某個(gè)ajax請(qǐng)求?
瀏覽器的network
2). 發(fā)ajax請(qǐng)求404
請(qǐng)求的路徑的對(duì)
代理是否生效(配置和重啟)
服務(wù)器應(yīng)用是否運(yùn)行
3). 后臺(tái)返回了數(shù)據(jù), 但頁面沒有顯示?
vuex中是否有
組件中是否讀取