- App封裝
- 搭建專案
- 登錄
- 注冊
App封裝
一般就是去封裝一些專案的時候經常出現的，必須一些布局、功能，這樣可以幫助我們優化代碼，提高效率，后期更好維護
搭建專案
基于webpack，創建vue腳手架，進行專案的開發，寫專案，首頁要去進行整體頁面的排版，以及路由的跳轉，一般我們搭建專案，一些插件是必須要用的，比如axios，vuex，router等
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.6.5",
"vant": "^2.10.11",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
登錄
寫一個form表單驗證，里面是判斷登錄的條件，比如用戶名和密碼的長度，是否為空，手機號碼是否正確，然后再點擊登錄的函式中，判斷，并呼叫介面，傳入用戶名和密碼的引數，判斷是否獲取到資料，沒有就報錯，獲取到就保存token值和用戶資訊的值
注冊
先寫一個from表單手機號注冊，并設定密碼，點擊獲取資訊驗證碼，系結一個點擊事件，在點擊的時候，呼叫介面并傳入手機號（和圖形驗證碼），然后在點擊注冊的時候，去呼叫獲取注冊介面，并傳入手機號、密碼及驗證碼，完成注冊
<!-- html代碼 -->
<!-- 手機號 -->
<div class="int_num">
<input type="number" placeholder="請輸入手機號" maxlength="11" v-model="mobile" />
<div class="getC" @click="isSendCode">{{codeTxt}}</div>
</div>
<!-- 找回密碼 -->
<div class="other">
<span class="forget">*未注冊得手機號將自動注冊</span>
<span class="login_cap" @click="$router.push('/login')"> 使用密碼登錄</span>
</div>
</div>
<!-- 登錄按鈕 -->
<div class="login">
<span @click="submitLogin">登錄</span>
</div>
// 驗證手機號正則
let phone = /^1[3456789]\d{9}$/;
if (phone.test(this.mobile)) {
let { data } = await smCodeAjax({
mobile: this.mobile,
sms_type: "login"
});
console.log(data);
// console.log(res);
if (data.code == 200) {
this.isSendCode = true; //驗證碼發送狀態為真
this.time();
this.$toast(data.msg);
}
} else {
this.$toast("請輸入正確得手機號");
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/200652.html
標籤：其他