【Vue2项目(尚品汇前台)】(六）Register登录与注册模块搭建

一、登录注册静态组件引入

在样式当中也可以使用@符号，但要加~@/

二、注册业务

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()