apicloud结合聚云网后端云开发app之注册实现
2017-01-21 本文已影响181人
张大娃创业笔记
我是一个刚接触开发的初学者，至于怎么进入学习的原因，我也说不清楚，只是不知不觉被编程开发激起了兴趣；我今后准备把自己学习经历的一些点滴记录下来，今天主要分享一下用apicloud结合聚云网后端云使用app的注册功能，好了废话不多说进入正题:
- 首页要完成注册表单的html模板页面，在这里我贴出我用“百小僧”的hui框架写的注册表单代码，代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
<style type="text/css">
</style>
</head>
<body class="hui-width-height-full hui-background-color-greenSea">
<div class="hui-position-absolute hui-position-col-middle hui-width-full hui-text-align-center">
<div class="hui-row-center hui-padding-row-25">
<div class="hui-text-align-center">
<div class="hui-font-size-18">Hui</div>
</div>
</div>
<div class="hui-margin-top-10 hui-padding-col-15">
<div class="hui-flexbox-row hui-border-all-e6e6e6-after">
<span class="hui-col-middle hui-padding-left-10"><i class="hui-iconfont hui-icon-add-user hui-font-size-18 hui-col-middle hui-font-color-white"></i></span><input type="text" id="username" class="hui-vertical-align-middle hui-col-middle hui-font-size-16 hui-flexbox-item hui-box-sizing-border-box hui-border-none hui-outline-none hui-padding-all-15 hui-background-color-transparent hui-font-color-white" placeholder="用户名" />
</div>
<div class="hui-flexbox-row hui-border-bottom-e6e6e6-after hui-border-col-e6e6e6-after">
<span class="hui-col-middle hui-padding-left-10"><i class="hui-iconfont hui-icon-lock hui-font-size-18 hui-col-middle hui-font-color-white"></i></span><input type="text" id="password" class="hui-vertical-align-middle hui-col-middle hui-font-size-16 hui-flexbox-item hui-box-sizing-border-box hui-border-none hui-outline-none hui-padding-all-15 hui-background-color-transparent hui-font-color-white" placeholder="密码" />
</div>
<div class="hui-margin-top-10">
<button class="hui-button hui-width-full hui-border-radius-3 hui-background-color-turquoise hui-outline-none hui-border-all-turquoise hui-padding-row-10 hui-background-color-turquoise-active hui-font-color-white hui-border-all-turquoise-active">
<label>注册</label>
</button>
</div>
<div class="hui-margin-top-10">
<span class="hui-font-color-white hui-float-left hui-font-size-15"><input type="checkbox" class="hui-checkbox hui-checkbox-null hui-vertical-align-middle hui-font-size-18 hui-font-color-white hui-circle hui-border-all-white" checked="checked" style="-webkit-transform: scale(0.6); -webkit-transform-origin: 0 38%;" /><label style="position:relative;left:-10px;">《Hui用户注册协议》</label></span>
</div>
</div>
</div>
</body>
</html>
- 这样注册页模板就写好了，接下来我们就要编写js代码了，首先给<button>添加一个onclick事件，如下代码：
<button onclick="reg()" class="hui-button hui-width-full hui-border-radius-3 hui-background-color-turquoise hui-outline-none hui-border-all-turquoise hui-padding-row-10 hui-background-color-turquoise-active hui-font-color-white hui-border-all-turquoise-active">
<label>注册</label>
</button>
- 然后我们先来引入聚云网后端云的sdk和jquery，因为后端云注册时接收的密码是要进行md5加密的，所以还要加入md5.js，代码如下：
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="../script/mashup_sdk.js" type="text/javascript" charset="UTF-8"></script>
<script src="../script/md5.js" type="text/javascript" charset="UTF-8"></script>
<script src="../script/hui.js" type="text/javascript" charset="UTF-8"></script>
- 接下来就是编写js代码了，首先要获取注册表单输入的值，然后加入后端云的调用示例，这样就实现了提交数据到后端云数据库，代码如下：
<script type="text/javascript">
function reg(){
var username = hui.byId("username").value; //获取输入的username值
var password = hui.byId("password").value; //获取输入的password值
//后端云调用注册API示例
var appid = '';
var token = '';
$(document).ready(function(){
//获取token，调用API服务
auth();
});
function auth(){
$.ajax({
type:'get',
//async:false,
url:"http://v2.mashupcloud.cn/developer/auth.do",
data:{
appkey:'UotqFqitgOlLtisTMtMBwAfvmzPjdoTo' , //修改为自己appkey
appsecret: 'orBlqdwKIZOwiTvEWmrZfpKysvDLLIwn' //修改为自己的appsecret
},
//dataType: "json",
success: function(json){
var jo = eval(json);
var token = jo[1];
var appid = jo[2];
//用户注册
user_register(token,appid);
},
error: function(json){
console.log("err:"+json);
}
});
}
//用户注册
function user_register(token,appid){
$.ajax({
type:'get',
url:"http://v2.mashupcloud.cn/system/user_register.do",
data:{
appid: appid,
token: token,
username:username,
password:md5(password)
},
success: function(json){
console.log("returnInfo=="+json);
},
error: function(json){
console.log("json=="+json);
}
});
}
}
}
- 做完上面4项之后是完成了整个功能，但也许有人会遇到这样的问题，那就是如果我要在加一些表单验证提示或者用alert弹出的打印信息不好看，要修改提示内容，那么这两个问题该如何解决呢？那就让我一步一步教大家实现：
（1）alert问题，代码如下：
var jo=eval(json); //返回数据转化为json格式，然后才能进行后面的根据判断弹出对应信息;当然也可以不用这个函数进行转化，那就是要在success回调的前面添加一项dataType="json",这样返回的数据就是json类型，可以直接进行判断。
console.log("returnInfo=="+jo);
if (jo[0]=="OK") {
alert("注册成功");
} else if (jo[1]=="重复的用户名") {
alert("该用户名已注册");
}
（2）表单验证，那就是在执行注册方法前进行表单输入验证，如果都符合要求再执行注册方法，代码示例如下：
if (username.length==0) {
alert("用户名不能为空");
}else if (password.length==0) {
alert("密码不能为空");
}else{
var appid = '';
var token = '';
$(document).ready(function(){
//获取token，调用API服务
auth();
});
function auth(){
$.ajax({
type:'get',
//async:false,
url:"http://v2.mashupcloud.cn/developer/auth.do",
data:{
appkey:'UotqFqitgOlLtisTMtMBwAfvmzPjdoTo' , //修改为自己appkey
appsecret: 'orBlqdwKIZOwiTvEWmrZfpKysvDLLIwn' //修改为自己的appsecret
},
//dataType: "json",
success: function(json){
var jo = eval(json);
var token = jo[1];
var appid = jo[2];
//用户注册
user_register(token,appid);
},
error: function(json){
console.log("err:"+json);
}
});
}
//用户注册
function user_register(token,appid){
$.ajax({
type:'get',
url:"http://v2.mashupcloud.cn/system/user_register.do",
data:{
appid: appid,
token: token,
username:username,
password:md5(password)
},
success: function(json){
var jo=eval(json);
console.log("returnInfo=="+jo);
if (jo[0]=="OK") {
alert("注册成功");
} else if (jo[1]=="重复的用户名") {
alert("该用户名已注册");
}
},
error: function(json){
console.log("json=="+json);
}
});
}
}
}
至此，注册页面功能就实现了，对于需要自定义验证和提示的各自进行修改就好了，好了这篇文章就先写到这里。敬请期待下篇文章:《apicloud结合聚云网后端云开发app之登录实现》。
