apicloud結合聚雲網後端雲開發app之註冊實現
我是一個剛接觸開發的初學者，至於怎麼進入學習的原因，我也說不清楚，只是不知不覺被程式設計開發激起了興趣；我今後準備把自己學習經歷的一些點滴記錄下來，今天主要分享一下用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之登入實現》。
相關文章
- vuelidate 結合 Laravel 後端資料註冊驗證VueLaravel後端
- 藉助小程式雲開發實現小程式的登陸註冊功能
- Vue新技能系列：結合apicloud開發高效能APPVueAPICloudAPP
- 低程式碼開發的前後端聯調——APICloud Studio 3 API管理工具結合資料雲3.0使用教程後端APICloud
- 鬥魚直播雲原生實踐之註冊中心篇
- 微信小程式雲開發 -- 一個人註冊到上線微信小程式
- 物流APP開發實現物流行業與網際網路完美結合！APP行業
- 基於後端雲微信小程式開發後端微信小程式
- 網易雲－招聘後端開發工程師後端工程師
- 雲鼎遊戲註冊網址-18788378457遊戲
- 鬥魚直播雲原生實踐——註冊中心篇
- app後端伺服器開發小結APP後端伺服器
- uni-app + Cloudbase——uni-app 專案中如何使用騰訊雲開發後端服務APPCloud後端
- iphone app開發實戰很重要：《iPhone App開發實戰手冊》讀後感iPhoneAPP
- Zookeeper實現服務註冊/發現
- 註冊中心 Eureka 原始碼解析 —— 應用例項註冊發現（一）之註冊原始碼
- Sealos 雲開發：Laf 出嫁了，與 Sealos 正式結合！
- Flask後端開發(二) - 功能實現和專案總結Flask後端
- 騰訊雲 雲開發 部署 Blazor網站Blazor網站
- spring cloud構建網際網路分散式微服務雲平臺-服務註冊與發現SpringCloud分散式微服務
- APICloud平臺使用融雲模組實現音視訊通話實踐經驗總結分享APICloud
- APP後端開發雜談APP後端
- Eureka實現服務註冊與發現
- 【說雲精選】後端之Laravel專刊後端Laravel
- 直播軟體app開發，HTML和CSS分別實現註冊頁面表單APPHTMLCSS
- 微服務學習小結-Eureka如何實現註冊中心，以及服務之間的註冊、呼叫微服務
- springcloud之服務註冊與發現SpringGCCloud
- 【微服務之Eureka服務註冊發現】微服務
- 實戰|如何使用雲開發實現照片附件上傳開發
- 教你使用rest雲服務介面，自己完成前後端開發REST後端
- 泛微e-office結合雲解析實現快速訪問
- 實現etcd服務註冊與發現
- 阿里雲KubernetesSpringCloud實踐進行時(1):分散式服務註冊與發現阿里SpringGCCloud分散式
- 實戰：雲開發·實現奶茶店小程式（一）
- AppGallery Connect場景化開發實戰—註冊訂閱通知APP
- 劍網3雲遊戲首次測試開放 移動端瀏覽器雲遊戲2020實現遊戲瀏覽器
- 藉助雲開發輕鬆實現後臺資料批量匯出丨實戰
- laravel cdn 結合七牛雲實現檔案自動同步功能Laravel