小程式登入——PHP後臺處理資料庫的完整過程以及程式碼
注:這裡用到的是本地測試,所以後面的URL網址並沒有使用https。
你需要做的幾件小事:
- 頁面
- php
- mysql
關於頁面,直接貼程式碼。具體自己去看。效果圖最後放出來。
需要指出的是,這裡用到form表單。
bindsubmit代表事件繫結函式,在js中處理form表單觸發的事件。
那麼事件又是如何被觸發的呢?
form表單中有一個formType
<form bindsubmit='formSubmit' bindreset='formReset'> <view class="container"> <view class="login-icon"> <image class="login-img" src="圖片地址"></image> </view> <view class="login-from"> <!--賬號--> <view class="inputView"> <image class="nameImage" src="/images/name.png"></image> <label class="loginLab">賬號</label> <input class="inputText" name="zhanghao" placeholder="請輸入賬號" /> </view> <view class="line"></view> <!--密碼--> <view class="inputView"> <image class="keyImage" src="/images/key.png"></image> <label class="loginLab">密碼</label> <input class="inputText" name="mima" password="true" placeholder="請輸入密碼" /> </view> <!--登入按鈕--> <view class="loginBtnView"> <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" form-type='submit'>登入</button> </view> </view> </view> </form>
page{ height: 100%; } .container { height: 100%; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; background-color: #f2f2f2 } /*登入圖片*/ .login-icon{ flex: none; } .login-img{ width: 750rpx; } /*表單內容*/ .login-from { margin-top: 20px; flex: auto; height:100%; } .inputView { background-color: #fff; line-height: 44px; } /*輸入框*/ .nameImage, .keyImage { margin-left: 22px; width: 14px; height: 14px } .loginLab { margin: 15px 15px 15px 10px; color: #545454; font-size: 14px } .inputText { flex: block; float: right; text-align: right; margin-right: 22px; margin-top: 11px; color: #cccccc; font-size: 14px } .line { width: 100%; height: 1px; background-color: #cccccc; margin-top: 1px; } /*按鈕*/ .loginBtnView { width: 100%; height: auto; background-color: #f2f2f2; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } .loginBtn { width: 80%; margin-top: 15px; }
接下來才是重點。
function函式中的(e)或者(res)代表提交的結果。比如formSubmit: function(e)提交的來自表單的結果,success:function(res)提交的來自php訪問成功返回資料的結果。
在wx.request中設定URL以及變數提交方式等。data{}用來傳值變數。
如果訪問網址成功執行success函式,失敗則執行else中的程式碼。
// pages/login/login.js
Page({
data: {
},
formSubmit: function(e) {
if (e.detail.value.zhanghao.length == 0 || e.detail.value.mima.length == 0) {
wx.showToast({
title: '賬戶或密碼為空!',
icon: 'loading',
duration: 1500
})
setTimeout(function() {
wx.hideToast()
}, 2000)
} else {
wx.request({
url: 'http://localhost/wechatlogin.php',
method: 'GET',
header: {
'content-type': 'application/json'
},
data:{
num:e.detail.value.zhanghao,
pass:e.detail.value.mima
},
success:function(res){
console.log(res.data);
console.log("賬號:" + res.data.num + "密碼:" + res.data.pass);
console.log("輸入賬號為:" + e.detail.value.zhanghao + "輸入密碼為:" + e.detail.value.mima);
if(res.data.num==e.detail.value.zhanghao||res.data.pass==e.detail.value.mima){
//如果輸入結果符合查詢結果,將要執行的程式碼(我這裡直接跳轉了一個頁面)
wx.reLaunch({
url: '../posts/post',
})
}else{
wx.showToast({
title: '賬戶或密碼錯誤!',
icon:'loading',
duration:1500
})
setTimeout(function(){
wx.hideToast()
},2000)
}
}
})
}
}
})
訪問成功以後才可以執行PHP檔案程式碼。
其中GET的資料就是從wx.request下的data{}中傳遞過來的變數。
mysqli_fetch_assoc返回的是以資料庫表的欄位為索引的關聯陣列,但是很需要注意的是,在輸出這段陣列之前,有其他輸出就一定要記得換行,不然得到的就是一個組合在一起的字串而不是陣列。陣列的正確輸出形式(JSON):
為什麼是註明是JSON型別的?
小程式只接收JSON檔案,所以還要轉成JSON檔案。 使用json_encode將返回的陣列操作就ok啦。此時將得到的陣列輸出就是上面的樣子。
那麼這個資料在哪裡呢?在success函式的res中。通過 res.data.索引 就可以得到想要的資料庫查詢內容。
然後參考上面的js程式碼完成登入功能吧!
<?php
//設定編碼utf—8
header('Content-type:text/html;charset=utf-8');
$num = $_GET['num'];
$pass = $_GET['pass'];
$con = new mysqli("localhost","root","123","demo");
//定義sql語句
$sql = "select number as num,password as pass,username from user where number='$num' and password='$pass'";
//傳送sql語句
$result = mysqli_query($con,$sql)
or die("SQL語句執行失敗!");
if ($res = mysqli_fetch_assoc($result)) {
$json=json_encode($res);
echo "$json";
}else{
echo "賬號或者密碼錯誤";
}
mysqli_close($con);
?>
效果圖:
(上述程式碼我刪除掉了註冊功能,所以沒有第二個按鈕。註冊的思路也很簡單。這裡點選按鈕跳轉註冊頁面,資訊填寫提交表單,後臺php處理資料庫,完成後返回執行success函式)