Apicloud_(模板)登陆注册功能模板
2024-08-28 19:49:41
项目已托管到Github上 传送门
不需要使用任何图片资源，需要用到SHA1.js库文件，
Apicloud_(接口验证)用户注册头部信息X-APICloud-AppKey生成 传送门
项目全代码放到博文最下方，注册和登陆功能在login_frame.html和register_frame.html中实现
Apicloud通过api.ajax()方法去实现,ajax()方法在api.js中已经定义好
api.ajax(json,
function(ret,err){
if (ret) {
fnSuc && fnSuc(ret);
}
}
);
headers：链接自己应用程序的头部信息，由AppId和AppKey组成
data：传输到云端的数据
function (ret,err)：回调函数(api.ajax()执行完后立即执行的函数)，当链接到数据库成功时返回ret，否则返回err
实现过程
创建一个新项目
在控制台开启云服务Database数据库，随便选择一个云存储服务商
Apicloud默认内置user、file、role等基础数据结构，可以更具应用需求，拓展字段或自定义其它数据模型，这里我们可以看到user表目前是空的
在APICloud Studio中编写代码
修改index.html中的apiready()函数，加载程序时让它指向login.html页面
apiready = function(){
api.openWin({
name:'main',
url:'./html/login.html',
slidBackEnabled:false
});
};
查看自己项目的ID和appKey
"X-APICloud-AppKey"生成规则是基于SHA1()算法生成的
AppKey= SHA1（你的应用ID + 'UZ' + 你的应用KEY +'UZ' +当前时间毫秒数）.当前时间毫秒数
我的应用ID：A6091638150502
我的应用KEY：416502F6-E4FE-0286-C7BF-D272599F870F
注册
在register_frame中实现注册功能，把里边appkey生成修改一下
<body>
<div class="row">
<input id="username" class="input" type="text" placeholder="用户名">
</div>
<div class="row">
<input id="password" class="input" type="password" placeholder="密码">
</div>
<div class="btn" tapmode="highlight" onclick="fnRegister();">注册</div>
</body>
编写fnRegister()注册函数
function fnRegister() {
var username = $api.byId("username");
var password = $api.byId("password");
var vusername = $api.val(username);
var vpassword = $api.val(password);
var now = Date.now();
//A6091638150502修改为自己项目ID 416502F6-E4FE-0286-C7BF-D272599F870F修改为自己项目appKey
var appKey = SHA1("A6091638150502"+"UZ"+"416502F6-E4FE-0286-C7BF-D272599F870F"+"UZ"+now)+"."+now
api.ajax({
url: 'https://d.apicloud.com/mcm/api/user',
method: 'post',
headers: {
//A6091638150502修改为自己项目ID
"X-APICloud-AppId": "A6091638150502",
"X-APICloud-AppKey":appKey,
},
data: {
values: {
username:vusername,
password:vpassword
}
}},
function (ret,err){
if(ret&&ret.id){
alert("注册成功！");
}else{
alert("注册失败！");
}
}
);
}
<!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/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-repeat: no-repeat;
background-size: 11px 18px;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>会员注册</h1>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var headerH = $api.fixStatusBar(header); api.openFrame({
name: 'register_frame',
url: './register_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bounces: false,
softInputBarEnabled: false //不显示键盘上方的工具条
});
}; </script> </html>
register.html
<!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>注册Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
.row {
box-sizing: border-box;
width: auto;
height: 70px;
margin-left: 32px;
margin-right: 32px;
padding-top: 40px;
border-bottom: 1px solid #888;
} .input {
width: 100%;
height: 20px;
line-height: 20px;
border: none;
outline: none;
font-size: 16px;
} .btn {
width: auto;
height: 50px;
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
background-color: #ffaf45;
color: #fff;
font-size: 24px;
line-height: 50px;
text-align: center;
border-radius: 8px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<div class="row">
<input id="username" class="input" type="text" placeholder="用户名">
</div>
<div class="row">
<input id="password" class="input" type="password" placeholder="密码">
</div>
<div class="btn" tapmode="highlight" onclick="fnRegister();">注册</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
apiready = function() { }; // 注册
function fnRegister() {
var username = $api.byId("username");
var password = $api.byId("password");
var vusername = $api.val(username);
var vpassword = $api.val(password);
var now = Date.now();
//A6091638150502修改为自己项目ID 416502F6-E4FE-0286-C7BF-D272599F870F修改为自己项目appKey
var appKey = SHA1("A6091638150502"+"UZ"+"416502F6-E4FE-0286-C7BF-D272599F870F"+"UZ"+now)+"."+now api.ajax({
url: 'https://d.apicloud.com/mcm/api/user',
method: 'post',
headers: {
//A6091638150502修改为自己项目ID
"X-APICloud-AppId": "A6091638150502",
"X-APICloud-AppKey":appKey,
},
data: {
values: {
username:vusername,
password:vpassword
}
}},
function (ret,err){
if(ret&&ret.id){
alert("注册成功！");
}else{
alert("注册失败！");
}
}
);
} </script> </html>
register_frame.html
登陆
在login_frame.html中实现登陆功能，把里边appkey生成修改一下
<body>
<div class="row">
<input id="username" class="input" type="text" placeholder="用户名">
</div>
<div class="row">
<input id="password" class="input" type="password" placeholder="密码">
</div>
<div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
</body>
编写fnLogin()函数
function fnLogin(){
var username = $api.byId("username");
var password = $api.byId("password");
var vusername = $api.val(username);
var vpassword = $api.val(password);
var now = Date.now();
//6091638150502修改为自己项目ID 416502F6-E4FE-0286-C7BF-D272599F870F修改为自己项目appKey
var appKey = SHA1("A6091638150502"+"UZ"+"416502F6-E4FE-0286-C7BF-D272599F870F"+"UZ"+now)+"."+now
api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/login',
method: 'post',
headers: {
//6091638150502修改为自己项目ID
"X-APICloud-AppId": "A6091638150502",
"X-APICloud-AppKey":appKey,
},
data: {
values: {
username:vusername,
password:vpassword
}
}},
function (ret,err){
if(ret&&ret.id){
alert("登陆成功！");
}else{
alert("登陆失败！");
}
}
);
}
<!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/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>会员登录</h1>
<div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
$api.fixStatusBar(header);
var headerH = $api.offset(header).h; // 打开注册Frame
api.openFrame({
name: 'login_frame',
url: './login_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bgColor:'rgba(0,0,0,0)',
});
}; // 打开注册Window
function fnOpenRegisterWin () {
api.openWin({
name: 'register',
url: './register.html'
});
} </script> </html>
login.html
<!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>登录Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {
text-align: center;
} .row {
width: auto;
height: 70px;
box-sizing: border-box;
margin-left: 32px;
margin-right: 32px;
padding-top: 40px;
border-bottom: 1px solid #888;
} .input {
width: 100%;
height: 20px;
border: none;
outline: none;
font-size: 16px;
line-height: 20px;
} .btn {
width: auto;
height: 50px;
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
background-color: #ffaf45;
line-height: 50px;
color: #fff;
font-size: 24px;
text-align: center;
border-radius: 8px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<div class="row">
<input id="username" class="input" type="text" placeholder="用户名">
</div>
<div class="row">
<input id="password" class="input" type="password" placeholder="密码">
</div>
<div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
apiready = function() { }; function fnLogin(){
var username = $api.byId("username");
var password = $api.byId("password");
var vusername = $api.val(username);
var vpassword = $api.val(password);
var now = Date.now();
//6091638150502修改为自己项目ID 416502F6-E4FE-0286-C7BF-D272599F870F修改为自己项目appKey
var appKey = SHA1("A6091638150502"+"UZ"+"416502F6-E4FE-0286-C7BF-D272599F870F"+"UZ"+now)+"."+now api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/login',
method: 'post',
headers: {
//6091638150502修改为自己项目ID
"X-APICloud-AppId": "A6091638150502",
"X-APICloud-AppKey":appKey,
},
data: {
values: {
username:vusername,
password:vpassword
}
}},
function (ret,err){
if(ret&&ret.id){
alert("登陆成功！");
}else{
alert("登陆失败！");
}
}
);
} </script> </html>
login_frame.html
在移动端进行注册测试，数据库_user表中不存在相同ID时注册成功，重复注册时会提示注册失败
登陆时，匹配到数据库_user表中相同的username和password时注册成功
<!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>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<style type="text/css"> </style>
</head>
<body> </body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function(){
api.openWin({
name:'main',
url:'./html/login.html',
slidBackEnabled:false
});
};
</script>
</html>
index.html
<!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/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-repeat: no-repeat;
background-size: 11px 18px;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>会员注册</h1>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var headerH = $api.fixStatusBar(header); api.openFrame({
name: 'register_frame',
url: './register_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bounces: false,
softInputBarEnabled: false //不显示键盘上方的工具条
});
}; </script> </html>
register.html
<!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>注册Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
.row {
box-sizing: border-box;
width: auto;
height: 70px;
margin-left: 32px;
margin-right: 32px;
padding-top: 40px;
border-bottom: 1px solid #888;
} .input {
width: 100%;
height: 20px;
line-height: 20px;
border: none;
outline: none;
font-size: 16px;
} .btn {
width: auto;
height: 50px;
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
background-color: #ffaf45;
color: #fff;
font-size: 24px;
line-height: 50px;
text-align: center;
border-radius: 8px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<div class="row">
<input id="username" class="input" type="text" placeholder="用户名">
</div>
<div class="row">
<input id="password" class="input" type="password" placeholder="密码">
</div>
<div class="btn" tapmode="highlight" onclick="fnRegister();">注册</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
apiready = function() { }; // 注册
function fnRegister() {
var username = $api.byId("username");
var password = $api.byId("password");
var vusername = $api.val(username);
var vpassword = $api.val(password);
var now = Date.now();
//A6091638150502修改为自己项目ID 416502F6-E4FE-0286-C7BF-D272599F870F修改为自己项目appKey
var appKey = SHA1("A6091638150502"+"UZ"+"416502F6-E4FE-0286-C7BF-D272599F870F"+"UZ"+now)+"."+now api.ajax({
url: 'https://d.apicloud.com/mcm/api/user',
method: 'post',
headers: {
//A6091638150502修改为自己项目ID
"X-APICloud-AppId": "A6091638150502",
"X-APICloud-AppKey":appKey,
},
data: {
values: {
username:vusername,
password:vpassword
}
}},
function (ret,err){
if(ret&&ret.id){
alert("注册成功！");
}else{
alert("注册失败！");
}
}
);
} </script> </html>
register_frame.html
<!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/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>会员登录</h1>
<div class="right" tapmode onclick="fnOpenRegisterWin();">注册</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
$api.fixStatusBar(header);
var headerH = $api.offset(header).h; // 打开注册Frame
api.openFrame({
name: 'login_frame',
url: './login_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bgColor:'rgba(0,0,0,0)',
});
}; // 打开注册Window
function fnOpenRegisterWin () {
api.openWin({
name: 'register',
url: './register.html'
});
} </script> </html>
login.html
<!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>登录Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {
text-align: center;
} .row {
width: auto;
height: 70px;
box-sizing: border-box;
margin-left: 32px;
margin-right: 32px;
padding-top: 40px;
border-bottom: 1px solid #888;
} .input {
width: 100%;
height: 20px;
border: none;
outline: none;
font-size: 16px;
line-height: 20px;
} .btn {
width: auto;
height: 50px;
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
background-color: #ffaf45;
line-height: 50px;
color: #fff;
font-size: 24px;
text-align: center;
border-radius: 8px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<div class="row">
<input id="username" class="input" type="text" placeholder="用户名">
</div>
<div class="row">
<input id="password" class="input" type="password" placeholder="密码">
</div>
<div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
apiready = function() { }; function fnLogin(){
var username = $api.byId("username");
var password = $api.byId("password");
var vusername = $api.val(username);
var vpassword = $api.val(password);
var now = Date.now();
//6091638150502修改为自己项目ID 416502F6-E4FE-0286-C7BF-D272599F870F修改为自己项目appKey
var appKey = SHA1("A6091638150502"+"UZ"+"416502F6-E4FE-0286-C7BF-D272599F870F"+"UZ"+now)+"."+now api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/login',
method: 'post',
headers: {
//6091638150502修改为自己项目ID
"X-APICloud-AppId": "A6091638150502",
"X-APICloud-AppKey":appKey,
},
data: {
values: {
username:vusername,
password:vpassword
}
}},
function (ret,err){
if(ret&&ret.id){
alert("登陆成功！");
}else{
alert("登陆失败！");
}
}
);
} </script> </html>
login_frame.html
最新文章
- shiro-简介
- Asp.Net Mvc Areas 的用法与好处
- SQL笔记 - 解决CTE定位点类型和递归部分的类型不匹配
- 配置 AEM CQ6 (author + publish + apache dispatcher + ubuntu )
- Windows命令行重命名文件
- PHP5生成条形码器
- JS学习第四课
- Fragstats景观分析研究
- XML 的实体引用
- Spring学习笔记——01 控制反转
- HTML标签小记文本类标签
- windows下,读取快捷方式lnk所指向的路径
- Saiku控制页面展示的数据过长自动换行(二十四)
- (转)ArcGIS Runtime for Android 使用异步GP服务绘制等值线
- 如何确保Memcache数据读写操作的原子性（转）
- 使用睿云智合开源 Breeze 工具部署 Kubernetes v1.12.3 高可用集群
- 【Jenkins】安装插件
- why "Everything" is so fast?
- python错误 ImportError: No module named setuptools 解决方法[转]
- RabbitMQ---9、消息确认机制（事务+Confirm）
热门文章
- sublime集成MinGW，打造C/C++开发环境
- mysql转换表的存储引擎方法
- Wannafly挑战赛19:C. 多彩的树
- 前端 使用localStorage 和 Cookie相结合的方式跨页面传递参数
- IdentitiServser4 + Mysql实现Authorization Server
- 腾讯地图JSAPI开发demo 定位，查询
- 【异常】~/.bash_profile:source:44: no such file or directory: /usr/local/Cellar/nvm/0.34.0/nvm.sh
- Jmeter 常见逻辑控制器详解
- 手动写一个类支持foreach循环
- 标准C语言(10)