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