使用LeanCloud服务完成注册登录功能

1 准备

####1.1 注册LeanCloud服务

LeanCloud

1.2 本地环境

1
2
3
4
5
6
7
8
# 生成package.json
npm init
# 存储服务（包括推送和统计）
$ npm install leancloud-storage --save
# taobao 镜像
$ npm install leancloud-storage --save --registry=https://registry.npm.taobao.org
# 服务器
$ npm install http-server --save
JavaScript SDK 安装指南 数据存储开发指南·JavaScript

2 程序代码

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LeanCloud注册登录</title>
	<div id="welcome">
		Welcome! Please Login.
	</div>
	<button id="logIn">Login</button>
	<button id="signIn">Sign In</button>
	<button id='logout' hidden="">Logout</button>
	<form name="userLogin" hidden="">
		<p>
			<label for="userName">User Name</label>
			<input type="text" name="userName" placeholder="Please input your name">
		</p>
		<p>
			<label for="userEmail">User Email</label>
			<input type="email" name="userEmail" placeholder="Please input your email">
		</p>
		<p>
			<label for="passWord">Password</label>
			<input type="password" name="passWord" placeholder="Please input password">
		</p>
		<p>
			<input type="submit" name="" value="Login">
		</p>
	</form>
	<form name="userSignin" hidden="">
		<p>
			<label for="userName">User Name</label>
			<input type="text" name="userName" placeholder="Please input your name">
		</p>
		<p>
			<label for="passWord">Password</label>
			<input type="password" name="passWord" placeholder="Please input password">
		</p>
		<p>
			<input type="submit" name="" value="Sign in">
		</p>
	</form>
</head>
<body>
  	<!-- 选择依赖模块中的av.js， 由leancloud提供 -->
	<script type="text/javascript" src="./node_modules/leancloud-storage/dist/av.js"></script>
	<script type="text/javascript">
		// 第一步：初始化。在开发指南选好相应应用，自动显示。
		var APP_ID = 'Your_App_Id';
		var APP_KEY = 'Your_App_Key';
		AV.init({
		  appId: APP_ID,
		  appKey: APP_KEY
		});
		// 第二步： 与leancloud服务进行验证，验证完成可以注释代码
		var TestObject = AV.Object.extend('TestObject'); // 选择数据库中的表-TestObject作为存储表
		var testObject = new TestObject();
		// 通过键值对方式存入数据到表
		// testObject.save({
		//   words: 'Hello World!'
		// }).then(function(object) {
		//   alert('LeanCloud Rocks!');
		// })
	
      	// 第三步：设计注册功能
		var loginForm = document.querySelector("form[name=userLogin]")
		logIn.addEventListener("click",function (e) {
			loginForm.hidden = false
		})
		loginForm.addEventListener("submit",function (e) {
			e.preventDefault()
			// 注册
			// 新建 AVUser 对象实例
			var user = new AV.User()
			// 设置用户名
			user.setUsername(loginForm.userName.value);
			// 设置密码
			user.setPassword(loginForm.passWord.value);
			// 设置邮箱
			user.setEmail(loginForm.userEmail.value);
			user.signUp().then(function (loginedUser) {
			    console.log(loginedUser)
			    window.location.reload()
			}, function (error) {
				console.log("Login Error!")
			});
		})
		// 第四步：设计登录功能
		var signInForm = document.querySelector("form[name=userSignin")
		signIn.addEventListener("click",function (e) {
			signInForm.hidden = false
		})
		signInForm.addEventListener("submit",function (e) {
			e.preventDefault()
			// 登录
			var userName = signInForm.userName.value
			var passWord = signInForm.passWord.value
			console.log(userName + "   " + passWord);
			AV.User.logIn(userName, passWord).then(function (loginedUser) {
				console.log(loginedUser)
				window.location.reload()
			}, function (error) {
				console.log("Sign In Error!")
				if (error.code === 210) {
					alert("用户名和密码不匹配")
				} else if (error.code === 211) {
					alert("用户名不存在")
				}
			});
		})
		// 第五步：设计当前用户状态功能
		var user = AV.User.current()
		if (user) {
			welcome.textContent = "Welcome! " + user.attributes.username
			logout.hidden = false
			loginForm.hidden = true
			signInForm.hidden = true
		}
		// 第六步：设计登出功能
		if (logout) {
			logout.addEventListener("click",function (e) {
				AV.User.logOut()
				window.location.reload()
			})
		}
	</script>
</body>
</html>