vue3.0中使用web云开发(5)
vue3.0结合腾讯云开发项目
- 今天在使用云开发实现登录注册的功能时,发现在vue中直接写方法有时候会显得非常混乱,如果以后需要修改代码将会变得非常麻烦,所有从今天开始将方法分离开来写
- 在写的过程中遇到了很多麻烦,由于还不习惯这种写法,所有现在头还是晕晕的,一些参数绕来绕去还是挺打头的
使用class 实现注册简单逻辑
- 下面时通过es6类的语法封装的注册逻辑
- 第一行引入的时封装的另外一个用来操作云开发数据库的一个
js
文件 - 不知道为什么总感觉使用class 这种语法看起来非常爽,不知到和直接使用函数的写法使用存在性能上的差异
- 登录部分逻辑还没有处理,慢慢来
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
向数据库中添加用户
-
引入cloudbase
-
通过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