day03
一殿较、完成登錄注冊功能
- 2種登錄方式
- 手機(jī)號/驗證碼登錄
- 用戶名/密碼/圖片驗證碼登錄
- 登錄的基本流程
- 表單前臺驗證耸峭，如果不通過，提示
- 發(fā)送ajax請求淋纲，得到返回的結(jié)果
- 根據(jù)結(jié)果的標(biāo)識(code)來判斷登錄請求是否成功
- 1： 不成功劳闹，顯示提示
- 0： 成功，保存用戶信息洽瞬，跳轉(zhuǎn)到個人中心路由
async login() {
let result
//前臺表單驗證
if (this.loginWay) {
// 發(fā)送ajax請求本涕，短信登錄
result = await reqSmsLogin(phone,code)
} else {
// 發(fā)送ajax請求，密碼登錄
result = await reqPwdLogin({name,pwd,captcha})
}
//根據(jù)結(jié)果數(shù)據(jù)處理
if(result.code === 0) {
const user = result.data
//將user保存到vuex的state中
this.$store.dispatch('recordUser',user)
//去個人中心界面
this.$router.replace('/profile')
} else {
//顯示新的圖形驗證碼
this.getCaptcha()
//顯示警告提示
const msg = result.msg
this.showAlert(msg)
}
}
//action.js
// TODO: 同步記錄用戶信息
recordUser ({commit},userInfo) {
commit(RECEIVE_USER_INFO,{userInfo})
}
//mutations.js
[RECEIVE_USER_INFO](state,{userInfo}) {
state.userInfo = userInfo
},
- vue自定義事件
- 監(jiān)聽事件： @eventName="fn" function fn (data) {//處理}
- 分發(fā)事件： this.$emit('eventName',data)
<!-- AlertTip提示組件 -->
<template>
<div class="alert_container">
<section class="tip_text_container">
<div class="tip_icon">
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p>
<div class="confrim" @click="closeTip">確認(rèn)</div>
</section>
</div>
</template>
<script>
export default {
props: {
alertText: String
},
methods: {
closeTip() {
// 分發(fā)自定義事件(事件名: closeTip)
this.$emit('closeTip')
}
}
}
</script>
<!-- login組件調(diào)用AlertTip組件 -->
<AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"/>
<script>
import AlertTip from "../../components/AlertTip/AlertTip.vue";
export default {
methods: {
//關(guān)閉警告框
closeTip() {
this.alertShow = false;
this.alertText = '';
},
}
}
</script>
- 注意
- 使用network查看請求(路徑/參數(shù)/請求方式/響應(yīng)數(shù)據(jù))
- 使用vue的chrome插件查看vuex中的state和組件中的數(shù)據(jù)
- 使用debugger語句調(diào)試代碼
- 實參類型與形參類型的匹配問題
//定義
fun({a,b,c}) //{a,b,c}是一個對象
//調(diào)用
fun({a,b,c}) //也要傳對象
2伙窃、自動登錄菩颖，退出登錄
- 通過會話獲取后臺用戶信息，后臺處理session保持登錄狀態(tài)为障，刷新頁面時登錄存在
// 根據(jù)會話獲取用戶信息
export const reqUserInfo = () => ajax(BASE_URL + '/userinfo')
// 異步獲取用戶信息
async getUserInfo({commit}) {
const result = await reqUserInfo()
if(result.code === 0) {
const userInfo = result.data
commit(RECEIVE_USER_INFO,{userInfo})
}
},
- 點擊退出登錄晦闰，返回退出登錄狀態(tài)給后臺，刪除前臺用戶信息
logout() {
Dialog.confirm({
title: "提示",
message: "確認(rèn)退出嗎"
})
.then(() => {
//請求退出
this.$store.dispatch("logout");
Toast('退出成功');
})
.catch(() => {
console.log("點擊了取消");
});
}
//actions
// 異步登出
async logout ({commit}) {
const result = await reqLogout()
if(result.code === 0) {
commit(RESET_USER_INFO)
}
}
3鳍怨、搭建商家整體界面
-
學(xué)會拆分界面路由呻右，看出頁面拆分成幾個組件
頁面組件和路由拆分 - 路由的定義/配置|使用---父子路由，路由重定向
{
path: '/shop',
component: Shop,
children: [
{
path: '/shop/goods',
component: ShopGoods
},
{
path: '/shop/ratings',
component: ShopRatings
},
{
path: '/shop/info',
component: ShopInfo
},
{
path: '',
redirect: '/shop/goods'
},
]
},
4鞋喇、模擬(mock)數(shù)據(jù)/接口
- 前后臺分離的理解
- mock.js的理解和使用
- json數(shù)據(jù)設(shè)計的理解
- JSON分為json對象和json數(shù)組声滥，
- 結(jié)構(gòu)：名稱/數(shù)據(jù)類型
- 結(jié)構(gòu) + value值，值可以變侦香，結(jié)構(gòu)不可以變
//接口
//獲取商家信息
export const reqShopInfo = () => ajax('/info') //mock模擬數(shù)據(jù)不需要代理api
//獲取商家評價數(shù)組
export const reqShopRatings = () => ajax('/ratings')
//獲取商家商品數(shù)組
export const reqShopGoods = () => ajax('/goods')
/*mockServer.js*/
/*
使用mockjs提供mock數(shù)據(jù)接口
*/
import Mock from 'mockjs'
import data from './data.json'
// 返回goods的接口
Mock.mock('/goods',{code: 0, data: data.goods})
// 返回ratings的接口
Mock.mock('/ratings',{code: 0, data: data.ratings})
// 返回info的接口
Mock.mock('/info',{code: 0, data: data.info})
// export default ??? 不需要向外暴露任何數(shù)據(jù), 只需要保存能執(zhí)行即可
5落塑、ShopHeader組件
- 異步顯示數(shù)據(jù)效果的編碼流程
- ajax
- ajax請求函數(shù)
- 接口請求函數(shù)
- vuex
- state
- mutation-types
- actions
- mutations
- 組件
- dispatch(): 異步獲取后臺數(shù)據(jù)到vuex的state
- mapState(): 從vuex的state中讀取對應(yīng)的數(shù)據(jù)
- 模板中顯示
- 初始化顯示異常
- 情況1：
Cannot read property 'xxx' of undefined" - 原因： 初始值是空對象, 內(nèi)部沒有數(shù)據(jù), 而模塊中直接顯示3層表達(dá)式
-
a.b.xxx,undefined表示b未定義 - 解決： 使用v-if指令
- 情況1：
<!-- 使用v-if判斷info是否加載了數(shù)據(jù)，控制是否顯示鄙皇，三級表達(dá)式會出現(xiàn)報錯 -->
<div class="shop-header-discounts" v-if="info.supports" @click="toggleSupportShow">
<div class="discounts-left">
<div class="activity" :class="supportClasses[info.supports[0].type]" >
<span class="content-tag">
<span class="mini-tag">{{info.supports[0].name}}</span>
</span>
<span class="activity-content ellipsis">{{info.supports[0].content}}</span>
</div>
</div>
<div class="discounts-right">{{info.supports.length}} 個優(yōu)惠</div>
</div>
- 情況2:
Cannot read property 'xxx' of null" - 原因： 數(shù)據(jù)定義時使用了
a=null - 解決： 直接使用
a=[]或a={}定義空對象空數(shù)組
- vue transition動畫
