后端云，YES！

Author Avatar
favorhau 12月 26, 2020

随着后端的完善，许多后端云服务浮起水面

前面写到简单的用户注册登录功能，其实这时候会想–有没有一个集成的用户接口，供我们调用，而省去了一系列的功能呢？
后端云的功能包括有云函数、短信验证码、数据储存等功能，可以理解为一个”大后端“，
常有的后端云服务提供商有bmob、leancloud等。
突然想起前面写到过尚未完工的登录注册功能，所以继续来探究数据储存（登录注册）的功能

文件的引入

Bmob的JavaScript SDK基于Backbone.js框架开发，在使用过程中除Bmob.view类需要提供jQuery或者类似JQuery的$方法外，不需要再引入其他类库。

1
2
<script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="Bmob-2.2.5.min.js"></script>

在这里下载了bomb最新的sdk。

控制台测试

通过控制台测试查看返回值。

新建一个用户

先新建一个用户，用户名为admin密码为admin。
rhsyxP.png

查看返回值

1
2
3
4
5
Bmob.User.login('admin','admin').then(res => {
   console.log(res)
 }).catch(err => {
  console.log(err)
});

根据文档在JavaScript下添加如上代码。

1
2
3
4
5
6
7
{createdAt: "2020-12-26 15:10:29", objectId: "49n3GGGL", sessionToken: "f6f05579407b5e518048c32884f566f0", updatedAt: "2020-12-26 15:13:48", username: "admin"}
createdAt: "2020-12-26 15:10:29"
objectId: "49n3GGGL"
sessionToken: "f6f05579407b5e518048c32884f566f0"
updatedAt: "2020-12-26 15:13:48"
username: "admin"
__proto__: Object

得到以上的返回结果：登录成功。
此时回想起前面的mysql，感觉后端云还是挺棒的。

基础表单设定

需要完成用户的注册、登录以及美化，才算是一个相对完整的登录注册表单（吧）。

引入前端框架

emmm，我们看到过许多HTML5沉浸式的前端登录表单，由于功底不足，先找一些开源的表单样式。感觉这样的还不需动用到Github，直接去源码之家找一个就好。

rhcDPJ.png

很可!
附上出处：https://tj.mycodes.net/202011/denglukuangqiehuan.zip

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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>后端云用户注册登录</title>
<!--前端样式来源：源码之家-->
<!--图标库-->
<link rel='stylesheet' href='css/font-awesome.min.css'>
<!--核心样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <div class="card"></div>
  <div class="card">
    <h1 class="title">用户登录</h1>
    <form>
      <div class="input-container">
        <input type="#{type}" id="#{label}" required="required" />
        <label for="#{label}">用户名</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="#{type}" id="#{label}" required="required" />
        <label for="#{label}">密码</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>登录</span></button>
      </div>
    </form>
  </div>
  <div class="card alt">
    <div class="toggle"></div>
    <h1 class="title">会员注册
      <div class="close"></div>
    </h1>
    <form>
      <div class="input-container">
        <input type="#{type}" id="#{label}" required="required" />
        <label for="#{label}">用户名</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="#{type}" id="#{label}" required="required" />
        <label for="#{label}">密码</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="#{type}" id="#{label}" required="required" />
        <label for="#{label}">确认密码</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>提交注册</span></button>
      </div>
    </form>
  </div>
</div>

<script src='js/jquery.min.js'></script>
<script src="js/script.js"></script>
<div style="text-align:center;">
</div>
</body>
</html>

这是一个非常好的前端源码，那么问题来了？如何与后端配合完成用户注册登录的功能呢？

引入JavaScript SDK

引入此段代码，将Bmob-2.2.5.min.js并入js文件夹中。

1
<script type="text/javascript" src="js/Bmob-2.2.5.min.js"></script>

在script.js中添加

1
Bmob.initialize("1c30ea567*******","*****");//分别为secret key和安全密码

添加注册登录事件

在按钮处添加onclick事件,并且修改一下id。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="#">
      <div class="input-container">
        <input type="#{type}" id="login_u" required="required" />
        <label for="#{label}">用户名</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="#{type}" id="login_p" required="required" />
        <label for="#{label}">密码</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button onclick="login(event)"><span>登录</span></button>
      </div>
    </form>
1
2
3
4
5
6
7
8
9
function login(e)
{Bmob.User.login(document.getElementById("login_u").value,document.getElementById("login_p").value).then(res => {
    alert("success");
    console.log(res)
  }).catch(err => {
    alert("false");
   console.log(err)
 });
}

注册页面同理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <form action="#">
      <div class="input-container">
        <input type="#{type}" id="register_u" required="required" />
        <label for="#{label}">用户名</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="#{type}" id="register_p" required="required" />
        <label for="#{label}">密码</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="#{type}" id="register_p2" required="required" />
        <label for="#{label}">确认密码</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button onclick="register(event)"><span>提交注册</span></button>
      </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function register(e)
{
  let params = 
  {
    username: document.getElementById("register_u").value,
    password: document.getElementById("register_p").value,
  }
Bomb.User.register(params).then(res => {
    console.log(res)
    alert("success");
    window.location.href="welcome.html";
  }).catch(err => {
    alert("false");
   console.log(err)
  });
}

测试注册登录

测试一下注册
rhTXPP.png
查询一下后端云的结果-
rh7UqH.png
这样子一个简单的壳就弄好了。同理可用于微信小程序当中。
rh72LQ.png

表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性

验证必填项目

1
2
3
4
5
if(document.getElementById("login_u").value=="" || document.getElementById("login_p").value=="")
{
 alert("请输入用户名和密码");
 return false;
}

验证两次密码是否一致

1
2
3
4
5
if(document.getElementById("login_u").value=="" || document.getElementById("login_p").value=="")
{
 alert("请输入用户名和密码");
 return false;
}

其他

表单验证其实是一个很复杂的过程，从规范层面来说，可能需要检测输入是否合法，从安全角度来说，需要检测是否存在sql注入等，这里面的检测暂且忽略安全问题。

登录状态保持

用户登录不得不去解决登录状态保持的问题（可能专业一点称为”保持会话“），一般可以通过cookie去维持。
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”

Cookie 以名/值对形式存储username=John Doe

设置cookie函数

新建welcome.html设置代码

1
2
3
4
5
6
7
function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

获取cookie的函数

1
2
3
4
5
6
7
8
9
10
11
function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

嵌入js代码

在登录表单成功后添加下面的代码，设置登录状态。

1
setCookie("username",document.getElementById("login_u").value,365);

设置页面重定向

1
window.location.href="welcome.html";

在welcome.html设置显示cookie

1
alert(getCookie("username"));

登录以后可以看到后台缓存了cookie

r4SiCQ.png

有一个很奇妙的东西：经测试谷歌浏览器无法在本地文件保存cookie，火狐可以。

写在后面

算是终于把一个（拿得出手）的正常表单完成了，个人感觉表单不论是对于开发还是对于安全的意义还是十分重要的，写完发现-php好像不见了。随着后端的发展和成熟，越来越多的工作交给云后端或许正是趋势，可能不久的将来，将会有更多如同react、node.js出现。