微信小程序登录开发 (登录功能开发需要多久)

1.login.vue

<!-- 登录表单 -->
<el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
    <el-form-item>
        <h1>登录</h1>
    </el-form-item>
    <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
    </el-form-item>
    <el-form-item class="flex">
        <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
        </div>
    </el-form-item>
    <!-- 登录按钮 -->
    <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
    </el-form-item>
    <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="isRegister = true;clearRegisterData()">
            注册 →
        </el-link>
    </el-form-item>
</el-form>

2.表单校验

//校验密码的函数
const checkRePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次确认密码'))
    } else if (value !== registerData.value.password) {
        callback(new Error('请确保两次输入的密码一样'))
    } else {
        callback()
    }
}

//定义表单校验规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    rePassword: [
        { validator: checkRePassword, trigger: 'blur' }
    ]
}

3.登录函数

const login =async ()=>{
    //调用接口,完成登录
   let result =  await userLoginService(registerData.value);
   /* if(result.code===0){
    alert(result.msg? result.msg : '登录成功')
   }else{
    alert('登录失败')
   } */
   //alert(result.msg? result.msg : '登录成功')
   ElMessage.success(result.msg ? result.msg : '登录成功')
   //把得到的token存储到pinia中
   tokenStore.setToken(result.data)
   //跳转到首页 路由完成跳转
   router.push('/')
}

4.接口js

//提供调用登录接口的函数
export const userLoginService = (loginData)=>{
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key])
    }
    return request.post('/user/login',params)
}