微信小程序和php实现简单登录

linjunbin0101

已于 2023-04-14 18:33:50 修改

阅读量1.5k

点赞数 1

文章标签：小程序 php 服务器

于 2021-02-19 22:48:58 首次发布

本文链接：https://blog.csdn.net/weixin_44777814/article/details/113871809

版权

小程序部分

一、index.wxml

form标签可以很容易在js获取到input里的值，为form绑定一个login方法，下面button里的form-type为了绑定form，这里只为了实现功能把样式都去掉了

//index.wxml,特别注意这里的name="",不加上读不到值
<form bindsubmit="login">
name:<input type="text" name="login_name" />
pass:<input type="password" name="login_pass" />
<button form-type="submit">登录</button>
</form>

二、index.wxss 和 index.json

因为不是必须的，保持默认即可

//index.wxss、index.json
略

三、index.js

需要事先配置好服务器，博主用腾讯云+宝塔面板，小白操作

Page({
data: { 
  },
login:function(e){//登录的方法
  console.log(e.detail.value.login_name)//在控制台输出填入的用户名
  console.log(e.detail.value.login_pass)//同理
  var form = e.detail.value//赋值
  if(form.login_name == '' ||form.login_name == null ||form.login_pass == '' || form.login_pass == null){//判断是否填写完整
    wx.showToast({
      title: '请检查是否填写完整！',
    })
  }else{
    wx.request({//小程序连接服务器的方法
      url: '你的服务器ip地址/api/login.php',//服务器ip地址要事先搭建好，把接口文件放在api文件夹下
      data:{
        name:form.login_name,//name是向服务器传值，后面的是你input里填的值
        pass:form.login_pass,//同理
      },
      success:function(res){//调用连接数据库成功的方法,注意不是登录成功
        console.log(res.data)//打印返回的信息
        if(res.data.name == form.login_name && res.data.pass == form.login_pass){//判断返回的信息是否跟你填的一致
          wx.showToast({
            title: '登录成功',
            icon:"success",
            success:function(){
              wx.navigateTo({
                url: '/pages/log/log',//登录成功会弹窗并跳转到log页
              })
            }
          })
        }else{
          wx.showToast({
            title: '用户名或密码错误！',//登录失败
            icon:"error",
          })
        }
      }
    })
  }
}
})

php部分

需要跟上面wx.request里的url路径一致

<?php
	header('content-type:text/html;charset=utf-8');
	try{
		$link = new PDO('mysql:host=localhost;port=3306;dbname=数据库名称','数据库的用户','数据库用户的密码');
		$link->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
	}catch(PDOException $e){
		die('数据库连接出错:'.$e->getMessage());
	}
	$sql = 'select * from login where name=? and pass=?';//sql查询语句，login是表名，name和pass是字段名
	try{
			$stmt = $link->prepare($sql);
			$stmt->execute([$_GET['name'],$_GET['pass']]);
			if($stmt->rowCount() != 1){
				echo "学号或密码不正确！";
			}else{
				$row = $stmt->fetch(PDO::FETCH_ASSOC);
				$_SESSION['name'] = $row['name'];
				$_SESSION['pass'] = $row['pass'];
				echo json_encode($row);//把查询结果用json传给小程序
			}
		}catch(PDOException $e){
			die('登录失败:'.$e->getMessage());
	}
?>