vue3.0中使用web云开发（5）

vue3.0结合腾讯云开发项目

• 今天在使用云开发实现登录注册的功能时，发现在vue中直接写方法有时候会显得非常混乱，如果以后需要修改代码将会变得非常麻烦，所有从今天开始将方法分离开来写
• 在写的过程中遇到了很多麻烦，由于还不习惯这种写法，所有现在头还是晕晕的，一些参数绕来绕去还是挺打头的

使用class 实现注册简单逻辑

1. 下面时通过es6类的语法封装的注册逻辑
2. 第一行引入的时封装的另外一个用来操作云开发数据库的一个js文件
3. 不知道为什么总感觉使用class 这种语法看起来非常爽，不知到和直接使用函数的写法使用存在性能上的差异
4. 登录部分逻辑还没有处理，慢慢来

import Database from "./db";
// 登录注册逻辑
class Login {
    constructor(state) {
        this.state = state;
        this.database = new Database(this.state)
    }
    // 注册
    SignUp() {
        //昵称验证规则
        let nickname_Reg = /^.{2,8}$/;
        // 邮箱验证
        let email_Reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        // 密码验证
        let password_Reg = /^.{6,12}$/;
        if (this.state.nickname == '' || this.state.email == '' || this.state.password == '' || this.state.repassword == '') {
            alert('输入不能为空')
        } else {
            if (nickname_Reg.test(this.state.nickname) &&
                email_Reg.test(this.state.email) &&
                password_Reg.test(this.state.password)) {
                if (this.state.password === this.state.repassword) {
                   //调用数据库中添加用户的方法
                    this.database.addUsers(this.state)
                } else {
                    alert('密码不一致')
                }
            } else {
                alert('请按照要求填写')
            }

        }
    }
    // 登录
    SignIn() {
        console.log("登录")
    }
}
export default Login

向数据库中添加用户

1. 引入cloudbase

2. 通过emai条件查询是否该emai是否注册过，如果注册过则提醒注册过，否注将该账号信息加入到数据库中

import cloudbase from "@cloudbase/js-sdk";
class Database {
    constructor(state) {
        this.state = state
        const app = cloudbase.init({
            env: "环境id"
        })
        const auth = app.auth({
            persistence: 'local'
        })
        auth
            .anonymousAuthProvider()
            .signIn()
            .then(() => {
                console.log('匿名登录成功')
            })
        this.db = app.database()
    }

    // 添加用户
    addUsers() {
        this.db.collection('register').where({
            email: this.state.email
        }).get().then((res) => {
            if (res.length !== 0) {
                alert('用户已经存在')
            } else {
                this.db.collection('register').add({
                    nickname: this.state.nickname,
                    email: this.state.email,
                    password: this.state.password,
                }).then((res) => {
                    console.log(res)
                }).catch((err) => {
                    console.log(err)
                })
            }
        })

    }
}

export default Database