1. 程式人生 > >小程式登入——PHP後臺處理資料庫的完整過程以及程式碼

小程式登入——PHP後臺處理資料庫的完整過程以及程式碼

    注:這裡用到的是本地測試,所以後面的URL網址並沒有使用https。

 

    你需要做的幾件小事:

  1. 頁面
  2. php
  3. mysql

 

   關於頁面,直接貼程式碼。具體自己去看。效果圖最後放出來。

 

    需要指出的是,這裡用到form表單。

    bindsubmit代表事件繫結函式,在js中處理form表單觸發的事件。

    那麼事件又是如何被觸發的呢?

    form表單中有一個formType

屬性,當值為submit時,點選formType所在的元件就可以觸發form提交事件,在js中進行事件處理。

<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函式)