login

最新推荐文章于 2021-03-22 12:15:20 发布
最新推荐文章于 2021-03-22 12:15:20 发布
阅读量194 收藏
点赞数
分类专栏： web 文章标签： 信息安全 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLKJSAF/article/details/109642791
版权

第一个网页

做的不好，花了很长时间才想明白一些很简单的道理。简单记录

  • 连接数据库

用纯Php实现的时候，打开phpstudy直接开干。html+php的模式中采用了phpstudy+Navicat+Intellij IDEA的方式。

先用phpstudy打开Apache和MySQL服务，Navicat中可以直观地看到本地数据库。IDEA中编写代码：

首先是明确整体框架。实现的功能是：1）指定的用户才能登录2）增删改查3）显示结果

设计页面功能：在经过调整和构思后，最终定的效果是1）登录2）显示结果及增删改查按钮3）返回

其中第二张网页和第三张在功能上还可以进行进一步优化，只是目前笔者还无法实现这一点。


login.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Ginkgo_Login</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <form class="box" action="http://localhost/admin.php" method="post">
        <img src="image/MiniGoldLogo.png" width="180px" height="100px">
        <span><h1>Login</h1></span>
        <input type="text" placeholder="账户" name="admin">
        <br/>
        <input type="password" placeholder="密码" name="passwd">
        <br/>
        <input type="submit" value="确定">
    </form>
</body>
</html>

style.css

body{
    margin:0;
    padding:0;
    font-family:sans-serif ;
    background: #34495e;
}
.box{
    width:300px;
    padding:40px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background: #191919;
    text-align:center;
}
.box h1{
    color:white;
    text-transform: none;
    font-weight: 500;
}
.box input[type="text"],.box input[type="password"]{
    border: 0;
    background: none;
    display: block;
    margin:20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding:14px 10px;
    width:200px;
    outline:none;
    color:white;
    border-radius: 240px;
    transition: 0.25s;
}
.box input[type="text"]:focus,.box input[type="password"]:focus{
    width:280px;
    border-color:#F5B041;
}
.box input[type="submit"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #F5B041;
    padding:14px 40px;
    outline:none;
    color:white;
    border-radius: 240px;
    transition:0.25s;
    cursor:pointer;
}
.box input[type="submit"]:hover{
    background: none;
}

以上两段代码实现了对登录界面的优化及跳转到第二张网页的功能。至于验证用户的功能则安排在了下一部分代码中：

admin.php

<?php
function conn(){
    header("content-type:text/html;charset=utf8");
    $conn = new mysqli('localhost', 'root', 'Phpstudy', 'test');
    if ($conn->connect_error) {
        die("连接失败" . $conn->connect_error);
        echo "<script> alert('连接失败')</script>";
    }
    if (preg_match("/^\w{1,20}$/", $_POST['admin'], $matches)) {
        if (preg_match("/^\w{1,20}$/", $_POST['passwd'], $matches)) {
            $login_sql = "SELECT * FROM `admin` WHERE `id`=" . "\"{$_POST['admin']}\"" . "AND `passwd`=" . "\"{$_POST['passwd']}\"";
            $login_result = $conn->query($login_sql);

        }
    }
    else
    {
        echo "<script>alert('输入异常')</script>";
        echo "<script type='text/javascript'>history.go(-1)</script>";   //此方法直接返回
    }
        if($login_result->num_rows>0||$_POST['goto']) {
            find($conn);
    }
    return($conn);
    $conn->close();
}
function find($conn){
    $sql = "SELECT * FROM `member` ORDER BY `num`";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo "Id:   " . $row["id"] . "  ";
            echo "Grade:    " . $row["grade"] . "<br>";
        }
    } else {
        echo "无数据";
    }
}
?>

这里笔者还添加了一段用于防止sql注入的代码，目前的测试是有效的，只允许输入字母数字下划线构成的1到20位字符。但专业的测试人员还没介入，暂时不敢说大话。

登录界面

在这里插入图片描述

简单注入语句

在这里插入图片描述
在这里插入图片描述

密码错误时

在这里插入图片描述
在这里插入图片描述

admin.php中的下半部分代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Ginkgo_Login</title>
    <link rel="stylesheet" type="text/css" href="css/admin.css">
    <style>
        body{
            margin:0px;
        }
        div#container{
            width:100%;
            height:750px;
            background-color: #34495e;
        }
        div#header{
            width:100%;
            height: 30%;
            background-color: #34495e;
        }
        div#menu{
            width:60%;
            height:67%;
            background-color: #F5B041;
        }
        div#content{
            width:40%;
            height: 67%;
            background-color: white;
        }
        div#footer{
            width:100%;
            height:3%;
            background-color: gray;
        }
    </style>

</head>
<body>
<div id="container">

    <div id="header" align="middle" >
        <img src="image/MiniGoldLogo.png" width="200px" height="120px">
        <span><h1 style="color: white">
                    <script type="text/javascript">
                        var today=new Date();
                        var hour=today.getHours();
                        var times = "";
                        if(hour >5 & hour <=11){
                            times="上午好";
                        }
                        else if(hour>11&hour<=14){t
                            times="中午好";
                        }
                        else if(hour>14 &hour<=18){
                            times="下午好";
                        }
                        else if(hour>18&hour<=24){
                            times="晚上好";
                        }
                        //document.write(hour);
                        document.write(times);

                    </script>
                ,admin
            </h1></span>
    </div>
    <div id="menu" style="float:left;">
        <?php conn();?>
    </div>

    <div id="content" style="float:right;">

        <form class="box" action="http://localhost/dosth.php" method="post">
            <input type="text" placeholder="ID" name="id">
            <input type="text" placeholder="Grade" name="grade">

            <input type="submit" name="action" value="add">
            <input type="submit" name="action" value="delete" >
            <input type="submit" name="action" value="change" >
            <input type="submit" name="action" value="find" >
        </form>
    </div>

    <div id="footer" style="clear:both;text-align:center;">
        ©版权所有</div>

</div>

</body>

对前端进行了简单的设计，使其与login界面相对和谐。并根据系统的当前时间设置了对应的欢迎语。

在这里插入图片描述

增删改查的具体代码在dosth.php中：

<?php
function dosth(){
$q=isset($_POST['action'])?htmlspecialchars($_POST['action']):"";
echo $q."<br>";
if($q){
    $conn = new mysqli('localhost', 'root', 'Phpstudy', 'test');
    if($q=='add'){
        $sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
        $result=mysqli_query($conn,$sql);
        $row_cnt=mysqli_num_rows($result);
        if($row_cnt > 0){
            echo "<script>alert('该id已存在')</script>";
            echo "<script type='text/javascript'>history.go(-1)</script>";   //此方法直接返回
        }elseif($row_cnt == 0){
            $sql = "INSERT INTO `member`(`id`,`grade`) VALUES("."\"{$_POST['id']}\"".","."\"{$_POST['grade']}\"".")";
            echo "id: " . $_POST["id"] . " - grade: " . $_POST["grade"]  . "<br>";
        }

    }
    elseif ($q=='delete'){
        $sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
        $result=mysqli_query($conn,$sql);
        $row_cnt=mysqli_num_rows($result);
        if($row_cnt > 0){
            $sql= "DELETE FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
            while($row = mysqli_fetch_assoc($result)) {
                echo "id: " . $row["id"] . " - grade: " . $row["grade"]  . "<br>";
            }
        }elseif($row_cnt == 0){
            echo "<script>alert('无此用户')</script>";
            echo "<script type='text/javascript'>history.go(-1)</script>";   //此方法直接返回
        }

    }
    elseif ($q=='change'){
        $sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
        $result=mysqli_query($conn,$sql);
        $row_cnt=mysqli_num_rows($result);
        if($row_cnt > 0){
            $sql= "UPDATE `member` SET `grade`="."\"{$_POST['grade']}\""." WHERE `id`="."\"{$_POST['id']}\"";
                echo "id: " . $_POST["id"] . " - grade: " . $_POST["grade"]  . "<br>";
        }elseif($row_cnt == 0){
            echo "<script>alert('无此用户')</script>";
            echo "<script type='text/javascript'>history.go(-1)</script>";   //此方法直接返回
        }
    }
    elseif($q=='find'){
        $sql = "SELECT * FROM `member` WHERE `id`="."\"{$_POST['id']}\"";
        $result=mysqli_query($conn,$sql);
        $row_cnt=mysqli_num_rows($result);
        if($row_cnt == 0){
            echo "<script>alert('无此用户')</script>";
            echo "<script type='text/javascript'>history.go(-1)</script>";   //此方法直接返回
        }elseif ($row_cnt > 0){
            while($row = mysqli_fetch_assoc($result)) {
                echo "id: " . $row["id"] . " - grade: " . $row["grade"]  . "<br>";
            }
        }
    }
    $result = $conn->query($sql);
    //if ($result->num_rows > 0) {
        //while ($row = $result->fetch_assoc()) {
           //echo "Id:   " . $row["id"] . "  ";
            //echo "Grade:    " . $row["grade"] . "<br>";
        //}
    //} else {
        //echo "无数据";
    //}
}
echo 'SUCCESS!';
}
?>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Ginkgo_Login</title>
    <link rel="stylesheet" type="text/css" href="css/admin.css">
    <style>
        body{
            margin:0px;
        }
        div#container{
            width:100%;
            height:750px;
            background-color: #34495e;
        }
        div#header{
            width:100%;
            height: 30%;
            background-color: #34495e;
        }
        div#menu{
            width:60%;
            height:67%;
            background-color: #F5B041;
        }
        div#content{
            width:40%;
            height: 67%;
            background-color: white;
        }
        div#footer{
            width:100%;
            height:3%;
            background-color: gray;
        }
    </style>

</head>
<body>
<div id="container">

    <div id="header" align="middle" >
        <img src="image/MiniGoldLogo.png" width="200px" height="120px">
        <span><h1 style="color: white">Welcome,admin</h1></span>
    </div>
    <div id="menu" style="float:left;">
        <?php dosth();?>
    </div>

    <div id="content" style="float:right;">

        <form class="box" action="http://localhost/admin.php" method="post">

            <input type="submit" name="goto" value="goto">
        </form>
    </div>

    <div id="footer" style="clear:both;text-align:center;">
        ©版权所有</div>

</div>

</body>
</html>

尝试添加重复用户时

在这里插入图片描述

删除该用户

在这里插入图片描述

在这里插入图片描述

删无可删时

![nodelete])(/_posts/login/nodelete.jpg)

改

![change])(/_posts/login/change.jpg)

查

在这里插入图片描述

目前的效果是笔者相对满意的，下一步优化页面想把第二页的输入变得更加美观。加油吧

煤矿路口西_CTF小学生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习笔记之login登录
grace♥的博客
09-16 1706
第一步：前台页面 login.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <!-- 规范代码格式xmlns，以便下面使用th--> <head> <meta charset="UTF-8"> <title>登录</t...
angularjs之login登录页面
沐吾
05-23 1万+
登录页面逻辑 判断用户，用户名和密码是否正确 正确进行登录操作，错误提示信息 正确获取用户信息并保存在本地缓存 登录后跳转页面 代码部分 html页面 class="sign_div" contorller="loginCtrl"> class="form-group"> 账号： class="input-icon"> type="text" c
Login 页面
weixin_30858241的博客
07-25 242
1、jsp <script type="text/javascript"> function doLogin() { if (trim($('#username').val()) == "") { showmsg(0, "请输入用户名"); return; } if (trim($('#password').val()) == "") { ...
登录注册
G_Sun_Q的博客
12-12 941
Okhttp public class Okhttp { private Handler handler =new Handler(); private String str; private static Okhttp okhttp=null; public Okhttp(){ } public static Okhttp getInster(){
LogIn_login_
10-02
Login simple web app
jQuery中的$()
zyt1204732670的博客
07-19 121
首先看一段代码 <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-1.8.3/jquery-1.8.3.js"></script> <script> $(function(){ $("#z").attr("href","http://www.baidu.com")
$('#login_Form').form('submit', {});是什么意思
weixin_39793752的博客
06-28 1万+
是EasyUI Form 表单表单（form）提供多种方法来执行带有表单字段的动作，比如 ajax 提交、加载、清除，等等。当提交表单时，调用 'validate' 方法来检查表单是否有效。用法 创建一个简单的 HTML 表单。构建表单并给 id、action、method 赋值。&lt;form id="login_Form" method="post"&gt; &lt;...
@RequestMapping("${adminPath}/login")的作用
美好的未来在于把握今天
05-28 1万+
全局变量，为了区分管理员和用户登录的路径的——一般写在properties文件中。获取的话，将properties文件加载到当前环境中，然后取值！
$.ajax和java后台实现用户登录的功能
热门推荐
shuhaith的博客
03-03 4万+
$.ajax代码：<script src="../js/jquery.mobile-1.4.5.min.js"></script> <script language="javascript"> function login(loginform){//传入表单参数 if(loginform.username.value==""){ //验证用户名是否为空 alert
Jeesite Login 登录 分析
weixin_33882452的博客
02-21 547
为什么80%的码农都做不了架构师？>>> ...
【JavaScript】`${SERVER_URL}/login`这是什么写法？
'Ablaze 的专栏
04-11 1487
昨晚在阅读大佬源码时看到了这样一段 login(values: any): Observable&lt;any&gt; { return this.httpClient.post(`${SERVER_URL}/login`, values, {responseType: 'text'}) .pipe(tap(jwt =&gt; this.handleJwtResponse...
Login登录页面
Major_S的博客
03-22 1万+
Login登录页面Login登录页面Login登录页面 Login <template> <div class="login-container"> <el-row > <el-col :span="4" :offset="10"> <h1 class="page-title">AI系统</h1> <el-form ref="loginForm" :model="lo
Vue 登录login例子
Auto
11-03 1万+
文章目录login#0 GitHub#1 环境#2 实现功能#3 iView login #0 GitHub https://github.com/Coxhuang/iView-login #1 环境 "vue": "^2.5.2", "axios": "^0.19.0", "vue-axios": "^2.1.4", "vue-router": "^3.0.1", "view-design": ...
基于qt5+KDchart开发的任务计划甘特图
最新发布
06-24
基于qt5+KDchart开发的任务计划甘特图 1。可以根据任务类型、开始时间、结束时间展示任务执行长度。 2.可以动态编辑任务调整时间； 3.支持年、月、日、小时等时间缩放显示。
NAPI篇4-NAPI应用点亮一个LED
06-23
NAPI篇4-NAPI应用点亮一个LED
iging.zip_kriging 优化_优化kriging_克里金 matlab_普通克里金
06-23
iging.zip_kriging 优化_优化kriging_克里金 matlab_普通克里金_遗传算法克里金模型 改进的粒子群优化克里金模型，普通的克里金模型MATLAB数据包与遗传算法的结合2
banner login
04-21
Banner login是一种在计算机系统中显示欢迎信息和登录提示的功能。当用户登录到系统时，系统会显示一个称为"banner"的信息，通常包含系统名称、版本号、版权信息等。这个功能可以用于提醒用户使用规则、法律声明或者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值