小程序部分
一、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());
}
?>
数据库部分
建立一个数据库(跟php里的名字一样),里面有login表,有name和pass字段,插入几个数据用于验证![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7da0e92492427383b0b32d82bd09c11a.png)
最后就可以验证啦!
失败那里的图标是开发工具的bug,真机正常显示![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a86c0f7fb9e384142e7e9b54a13c88a6.png)
最后最后,附上官方小程序开发文档,很重要!
链接: 开发文档.