Vue2.0 系列教程:登录页面

6264 次阅读 zuley 发布于 10个月前 (01-18) 前端开发 6 COMMENTS

登录页面和注册页面没有差多少,只是少了个一个确认密码。其他操作都差不多的,注册和登录过程都又SDK完成

template 模板

<el-form label-width="100px" class="demo-ruleForm" v-bind:rules="rules" ref="ruleForm" v-bind:model="ruleForm">
    <el-form-item label="账号" prop="name">
        <el-input type="text" auto-complete="off" v-model="ruleForm.name" placeholder="请输入账号"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input type="password" auto-complete="off" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item>
        <!-- 点击进行登录提交 -->
        <el-button type="primary" v-on:click="handleSubmit">登录</el-button>
        <!-- 点击重置表单 -->
        <el-button v-on:click="handleReset">重置</el-button>
    </el-form-item>
</el-form>

Script 脚本

结构大纲

<script>
export default {
    // 进入路由的时候执行,用于判断登录状态
    beforeRouteEnter () {},
    // 数据
    data () {},
    // 方法
    methods: {}
}
</script>

登录状态跳转

LeanCloud 检测当前登录用户API

beforeRouteEnter (to, from, next) {
    next(VM => {
        // 当前是否有用户登录
        if (VM.$AV.User.current()) {
            console.log('当前登录')
            // 跳转到首页
            VM.$router.push('/')
        } else {
            console.log('当前未登录')
        }
    })
}

数据结构

data () {
    // 姓名验证
    let validatorName = function (rule, value, callback) {
        if (!value) {
            callback(new Error('请输入账号'))
        } else if (!/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/.test(value) || value.length < 6) {
            callback(new Error('账号只能是6位以上中英文或者数字'))
        } else {
            callback()
        }
    }
    // 密码验证
    let validatorPass = (rule, value, callback) => {
        if (!value) {
            callback(new Error('请输入密码'))
        } else if (!/^[A-Za-z0-9]+$/.test(value) || value.length < 6) {
            callback(new Error('密码只能是6位以上英文或者数字'))
        } else {
            callback()
        }
    }
    return {
        // 表单数据
        ruleForm: {
            name: '',
            password: '',
            password2: ''
        },
        // 验证规则
        rules: {
            name: [
                { validator: validatorName, trigger: 'blur' }
            ],
            password: [
                { validator: validatorPass, trigger: 'blur' }
            ]
        }
    }
}

方法

LeanCloud 登录方法

methods: {
    // 表单提交
    handleSubmit () {
        // 验证表单
        this.$refs.ruleForm.validate(valid => {
            if (valid) {
            console.log('验证通过')
            // 调用SDK登录方法,执行登录过程
            this.$AV.User.logIn(this.ruleForm.name, this.ruleForm.password).then(loginedUser => {
                    console.log(loginedUser)
                    this.$message('成功登录')
                    // 登录成功跳转到首页
                    this.$router.push('/')
                }, error => {
                    console.log(error)
                    this.$message('登录失败,请重试')
                    // 登录失败清空表单
                    this.handleReset()
                })
            } else {
                console.log('验证不通过')
            }
        })
    },
    // 重置表单
    handleReset () {
        this.$refs.ruleForm.resetFields()
    }
}

Github 登录页面源码

第一讲:起步

  1. Vue2.0 系列教程:简介
  2. Vue2.0 系列教程:npm 常用命令
  3. Vue2.0 系列教程:npm package.json 配置文件语法
  4. Vue2.0 系列教程:Vue的安装和使用

第二讲: 构建环境和安装依赖

  1. Vue2.0 系列教程:初始化项目
  2. Vue2.0 系列教程:配置路由
  3. Vue2.0 系列教程:使用 leancloud 云服务

第三讲:开发页面

  1. Vue2.0 系列教程:注册页面
  2. Vue2.0 系列教程:登录页面
  3. Vue2.0 系列教程:首页 OR 退出登录
二维码
扫描此二维码去手机端访问

Vue2.0 系列教程:登录页面

文章评论

  1. lduo 2017-2-28 16:12 #1

    我也是用vue-cli 和 leancloud,正好做登录遇到问题搜到这,可是 this.$AV.User.logIn… 直接提示我“TypeError: Cannot read property ‘User’ of undefined”…

    • 提示的意思是User未定义,你是不是没有把$AV载入VUE?具体你可以参考我写的DEMO,如果还么有解决可以私聊我

  2. kunyu 2017-3-7 14:03 #2

    this.$AV.User.logIn(this.ruleForm.name, this.ruleForm.password).then(loginedUser => {
    console.log(loginedUser)
    this.$message(‘成功登录’)
    // 登录成功跳转到首页
    this.$router.push(‘/’)

    这里直接使用 this.$message(‘成功登录’) 和 this.$router.push(‘/’),并不能执行呢。 AV.User.logIn里不能用this吧。

    • 这里注意一下我是使用了箭头函数,所以可以使用this的,this就是指向这个组件的实例。详细你可以去看一下ES6方面关于箭头函数的介绍

  3. yetty 2017-7-7 10:12 #3

    你好~文章很有用!感谢up主!
    请教一个问题:登录验证时,如果账户密码错误就出现400 badrequest,如何解决?

发表评论