本帖最后由 YFSafe 于 2023-1-17 01:50 编辑
体验地址:
项目逻辑
html作为前端显示
js实现在html中,作用是将输入的信息加密并发送到php
php使用现成的sqlite3接口对数据库进行读取,判断内容是否与获取到的传入密码一致
sqlite存储着用户的名称,id,密码等
实现过程
html+js
html的实现部分很简单,只需要添加一个背景和一个悬浮框,在悬浮框中添加两个输入框即可
背景部分:
[HTML] 纯文本查看 复制代码 <div id="background" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;">
<img class="img" src="Default2.jpg"
style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
悬浮框:
[HTML] 纯文本查看 复制代码 <div style="width:300px;height:350px;background-color:White;border-radius:30px;margin:140px auto;text-align: center">
js部分,我们需要引入一个md5.js用于对将输入的密码进行md5计算,毕竟安全最重要.调用也很简单:var value = md5(你要计算的内容);
如何获取输入的内容呢?我们在这里使用document.getElementById.value来读取.那么获取id为name的输入框中的内容就可以这么写:
[JavaScript] 纯文本查看 复制代码 var tag=document.getElementById('name');
var name=tag.value;
请求部分,我们使用XMLHttpRequests.本来想使用ajax,但是想了一下没必要.
会使用到的函数有XMLHttpRequests.open,XMLHttpRequests.send.
我们要请求的url可以这样构造:var url = "./handle.php?name=" + name.value + "&password=" + hash;(这里的hash是pwd经过md5计算后的结果)
如果请求的状态码为200,那我们就需要修改页面中的status,我们是这么定义这个status的:
[HTML] 纯文本查看 复制代码 <a>Status:</a>
<lable type='text' id='login_status'></lable>
lable标签的id是login_status,那我们修改标签就可以这么写:
[JavaScript] 纯文本查看 复制代码 var tag = document.getElementById('login_status');
tag.innerText = req.responseText;
代码中的innerText是文本内容的意思,req.responseText则是返回的内容.
到这里,我们的html+js部分的内容基本结束.
php
php部分的逻辑比较简单.
获取网页传入的参数:
[PHP] 纯文本查看 复制代码 $name = $_GET['name'];
$password = $_GET['password'];
接下来就要构造我们的sql查询语句,使用接口对数据库进行查询,获取用户对应的密码(也是md5加密的)
查询+判断部分代码如下:
[PHP] 纯文本查看 复制代码 $sql = "SELECT `password` FROM `users` WHERE name = '$name' limit 1";
$db = new SQLite3('./user.db');
$password1 = $db->querySingle($sql);
if($password1 == $password)
{
echo "Login Success";
}
else
{
echo "Login Failed";
}
sqlite
由于我们使用的环境是ubuntu,所以我们使用apt install sqlite来安装sqlite
安装好后,终端键入sqlite3进入sqlite环境,使用sqlite3 你想要的数据库名称.db来创建一个数据库
接下来的内容就比较简单,就是创建表再塞入数据
创建数据表:
[Bash shell] 纯文本查看 复制代码 CREATE TABLE users( ID INT PRIMARY KEY NOT NULL, NAME TEXT NOT NULL, PASSWORD CHAR(50));
塞入数据:
[Bash shell] 纯文本查看 复制代码 INSERT INTO users VALUES(1,'admin','e3d0e74a1aef6605dee86648d69e6b5b');
测试
输入错误的密码,登录失败
输入正确的密码,登录成功
源代码
html+js
[HTML] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="md5.js"></script>
<script>
function post()
{
var name = document.getElementById('name');
var passwd = document.getElementById('password').value;
var hash = md5(passwd);
var req = new XMLHttpRequest();
var url = "./handle.php?name=" + name.value + "&password=" + hash;
req.open('GET',url,false);
req.send(null);
if(req.status=200)
{
var tag = document.getElementById('login_status');
tag.innerText = req.responseText;
}
}
</script>
</head>
<body>
<div id="bing-container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;">
<img class="bing-img" src="Default2.jpg"
style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
</div>
<script src='https://api.vvhan.com/api/snow'></script>
<div style="width:300px;height:350px;background-color:White;border-radius:30px;margin:140px auto;text-align: center">
<h2>登录</h2>
<br>
<a >name</a>
<input style="margin:0 auto" type="text" id="name" >
<br>
<a style="margin:0 auto">password</a>
<input type='password' id="password">
<br>
<br>
<button>Click To Login</button>
<!--<a>or</a>-->
<!--<button>Click To Register</button>-->
<br>
<br>
<a>Status:</a>
<lable type='text' id='login_status'></lable>
</div>
</body>
</html>
php
[PHP] 纯文本查看 复制代码 <?php
header("Content-type: text/html; charset=utf-8");
$name = $_GET['name'];
$password = $_GET['password'];
$sql = "SELECT `password` FROM `users` WHERE name = '$name' limit 1";
$db = new SQLite3('./user.db');
$password1 = $db->querySingle($sql);
if($password1 == $password)
{
echo "Login Success";
}
else
{
echo "Login Failed";
}
?>
md5.js
Default2.jpg
| 
|Archiver|小黑屋|X64论坛
( 沪ICP备2020028431号-4 )|网站地图
发表于 2023-1-17 01:48:50
发表于 2023-1-17 07:46:27
