ZhangYang's Blog

【实战】js+leancloud实现注册登录

发表于 | 分类于

前端leancloud模块

1
2
npm init 
npm install leancloud-storage --save

后台leancloud

https://leancloud.cn/dashboard/applist.html#/apps

前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// index.html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
	<meta charset="UTF-8">
	<title>LeanCloud</title>
</head>
<body>
	<div id="welcome"></div>
	<button id="logout" hidden>登出</button>
	<form name="signIn">
		<input type="text" name="username" placeholder="用户名">
		<input type="email" name="email" placeholder="邮箱">
		<input type="password" name="password" placeholder="密码">
		<input type="submit" value="注册">
	</form>
	<form name="login">
		<input type="text" name="username" placeholder="用户名">
		<input type="password" name="password" placeholder="密码">
		<input type="submit" value="登入">
	</form>
	<script src="./node_modules/leancloud-storage/dist/av.js"></script>
	<script>
	var APP_ID = 'lMyLMtfaXchMiG5zx6i1bMyK-gzGzoHsz';
	var APP_KEY = '56cne1Yd2ueOk1pHMbp9tIYB';
	AV.init({
	  appId: APP_ID,
	  appKey: APP_KEY
	});
	let user = AV.User.current()
	if (user) {
		welcome.textContent = '你好, ' + user.attributes.username
		logout.removeAttribute('hidden')
	}
	let signInForm = document.querySelector('form[name=signIn]')
	logout.onclick = function(){
		AV.User.logOut();
		window.location.reload()
	}
	signInForm.addEventListener('submit',(e)=>{
		e.preventDefault();
		// 新建 AVUser 对象实例
		var user = new AV.User();
		// 设置用户名
		user.setUsername(signInForm.username.value);
		// 设置密码
		user.setPassword(signInForm.password.value);
		// 设置邮箱
		user.setEmail(signInForm.email.value);
		user.signUp().then(function (loggedInUser) {
		    console.log(loggedInUser);
		}, function (error) {
			console.log(error);
		});
	})
	let loginForm = document.querySelector('form[name=login]')
	loginForm.onsubmit = (e)=>{
		e.preventDefault()
		let username = loginForm.username.value
		let password = loginForm.password.value
		AV.User.logIn(username,password).then(function(loginedUser){
			console.log(loginedUser)
			location.reload()
		},function(error){
			if (error.code === 210) {
				alert('用户名和密码不匹配')
			}else if(error.code === 211){
				alert('用户名不存在')
			}
		})
	}
	</script>
</body>
</html>