体验地址:
项目逻辑
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] 纯文本查看 复制代码<?phpheader("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
|
声明
1，本帖收录内容来源于系统采集或网友自主提交，不代表本网站立场！
2，本帖收录内容，仅供参考使用，本站不对其安全性，正确性等作出保证。
3，如您认为本帖收录内容侵犯了您的版权或者违规，请在右下角进行举报，发现直接删帖！
|
发表于 10-21 21:11:33
提升卡