一、登录注册静态组件引入
在样式当中也可以使用@符号,但要加
~@/
二、注册业务
1、验证码功能
用v-model动态绑定用户输入的手机号和验证码
<input placeholder="请输入你的手机号" v-model="phone"/>
<input placeholder="请输入你的验证码" v-model="code"/>
data() {
return {
phone: '', //phone numbers
code: '', //code numbers
};
},
2、获取验证码接口
因为接口文件里有获取验证码的接口,在这我们要写接口,分析一下要返回的数据,输入手机号,应该返回一个code,也就是验证码
//获取验证码
//URL:/api/user/passport/sendCode/{phone} method:get
export const reqGetCode = (phone) =>
requests({
url: `/user/passport/sendCode/${
phone}`,
method: "get"
});
写仓库
import {
reqGetCode } from '@/api';
const state = {
code: '',
};
const actions = {
//获取验证码
async getCode({
commit }, phone) {
let result = await reqGetCode(phone);
// console.log(result);
if (result.code == 200) {
commit('GETCODE', result.data);
}
},
}
const mutations = {
GETCODE(state, code) {
state.code = code;
},
};
const getters = {
};
export default {
state,
actions,
mutations,
getters,
};
在获取密码这定义点击事件
<button style="width:100px;height:38px" @click="getCode">获取验证码</button>
data()