校园赛事2前端登录部分代码分析

export default {
        name: "Login",
        data(){
            return{
                user:{
                },
                rules: {
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    userPassword: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur'}
                    ],
                },
            }
        },
        methods:{
            login(){
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {
                        this.request.post("/user/login",this.user).then(res => {
                            if(res.code === '200'){
                                localStorage.setItem("user",JSON.stringify(res.data))   //存储用户信息到浏览器
                                this.$router.push("/")
                                this.$message.success("登录成功")
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }
                });

            }
        }
    }

这段代码定义了一个名为“login”的方法，用于处理登录操作。下面是该方法的详细介绍：

- `login`：此方法会调用“$refs['userForm'].validate”方法来验证表单数据。如果验证通过，会调用“request.post”方法发送一个 POST 请求到“/user/login”端点，并传递用户信息作为参数。当请求成功时，会将返回的用户信息保存到浏览器的 localStorage 中，并跳转到主页。如果请求失败，则会显示一个错误消息。

这段代码中只定义了一个方法，即“login”方法。