title: “ ApiCloud学习笔记(2)-数据云API用户登录注册\t\t”
tags:

  • apicloud
    url: 907.html
    id: 907
    categories:
  • 前端
    date: 2018-02-06 20:18:02

用户登录

通过api调试页面可以获取用户登录的方法，也可在云数据API中查到，使用jquery.ajax实现登陆： 页面html：

fnSelectLogin方法

  1. function fnSelectLogin() {
  2.   //取编辑框内容
  3.   var code_edit = $api.byId('code');
  4.   var mobile_edit = $api.byId('mobile');
  5.   alert(mobile_edit.value);
  6.   //取时间计算appkey
  7.     var now = Date.now();
  8.     var appKey = SHA1("A6062192783555" + "UZ" +
  9.         "792719C9-1BDE-8474-D699-4362EC6E2546" +
  10.         "UZ" + now) + "." + now;
  11.         //调用jQuery.ajax
  12.     $.ajax({
  13.         "url": "https://d.apicloud.com/mcm/api/user/login",
  14.         "cache": false,
  15.         "headers": {
  16.             "X-APICloud-AppId": "A6062192783555",
  17.             "X-APICloud-AppKey": appKey
  18.         },
  19.         "data": {
  20.             "username": mobile_edit.value,
  21.             "password": code_edit.value
  22.         },
  23.         "type": "POST"
  24.     }).done(function(data, status, header) {
  25.         //success body
  26.         var userid = data.userId;
  27.         if (undefined == userid) {
  28.             alert('登陆过程未知错误')
  29.             return;
  30.         }
  31.         alert("userid=" + userid);
  32.     }).fail(function(header, status, errorThrown) {
  33.         //fail body
  34.         alert("用户名或密码错误");
  35.     });
  36. }

注意包含jquery.js和SHA1.js，sha1下载地址：下载

用户注册

html：

  1. <section class="aui-content aui-margin-t-15">
  2.     <ul class="aui-list aui-form-list">
  3.         <li class="aui-list-item">
  4.             <div class="aui-list-item-inner">
  5.                 <div class="aui-list-item-label aui-border-r color-orange">
  6.                     手机号 <small class="aui-margin-l-5 aui-text-warning">+86</small>
  7.                 </div>
  8.                 <div class="aui-list-item-input aui-padded-l-10">
  9.                     <input type="number" pattern="\[0-9\]*" placeholder="请输入手机号注册" id="mobile" >
  10.                 </div>
  11.             </div>
  12.         </li>
  13.         <li class="aui-list-item">
  14.             <div class="aui-list-item-inner">
  15.                 <div class="aui-list-item-input" style="width: auto;">
  16.                     <input type="password" placeholder="请输入密码" id="code">
  17.                 </div>
  18.             </div>
  19.         </li>
  20.         <li class="aui-list-item">
  21.             <div class="aui-list-item-inner">
  22.                 <div class="aui-list-item-input" style="width: auto;">
  23.                     <input type="password" placeholder="请再次输入密码" id="code2">
  24.                 </div>
  25.             </div>
  26.         </li>
  27.     </ul>
  28. </section>
  29. <section class="aui-content-padded">
  30.     <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" tapmode onclick="fnSelectLogin();">注册</div>
  31. </section>

js

function fnSelectLogin() {
//取编辑框内容
var code_edit = $api.byId(‘code’);
var code2_edit = $api.byId(‘code2’);
if(code2_edit.value != code_edit.value) {
alert(“两次密码输入不一致”);
return;
}
var mobile_edit = $api.byId(‘mobile’);
//取时间计算appkey
var now = Date.now();
var appKey = SHA1(“A6062192783555” + “UZ” +
“792719C9-1BDE-8474-D699-4362EC6E2546” +
“UZ” + now) + “.” + now;
//调用jQuery.ajax
$.ajax({
“url”: “https://d.apicloud.com/mcm/api/user“,
“cache”: false,
“type”: “POST”,
“headers”: {
“X-APICloud-AppId”: “A6062192783555”,
“X-APICloud-AppKey”: appKey
},
“data”: {
“username”: mobile_edit.value,
“password”: code_edit.value
}
}).done(function(data, status, header) {
//success body
var userid = data.id;
if (undefined == userid) {
alert(‘注册失败，用户名已存在’);
return;
}
alert(‘注册成功 userid=’+ userid);
api.closeWin({
name: api.winName
});
return;
}).fail(function(header, status, errorThrown) {
//fail body
alert(“用户名或密码错误”);
});
}

首先取输入框内容，注意输入框是number类型，如果输入了非数字内容提取到的mobile_edit.value只包括数字，会导致实际注册的用户名不一致，上述代码并未处理此问题。 然后判断两次密码输入的一次性，最后上传。 jq.ajax的done是表明收到了200状态码，但是并不一定收到200就是注册成功，应该判断data.id是否有内容，若没有表明注册失败，失败原因是用户名重名。