登录注册页面

已于 2022-09-17 14:57:57 修改
阅读量336 收藏 1
点赞数 3
分类专栏： 前后端结合并连接数据库 文章标签： 数据库 mysql
于 2021-07-25 00:02:55 首次发布
本文链接：https://blog.csdn.net/weixin_51267249/article/details/119064688
版权
这篇博客介绍了如何创建登录注册页面，通过前后端结合，连接MySQL数据库进行数据交互。主要内容包括注册和登录的PHP代码，数据库表的建立，以及在测试过程中遇到的错误提示，如密码不一致、密码错误和输入为空的处理。文章提供了实现登录注册功能的基本思路。
摘要由CSDN通过智能技术生成

登录注册页面

前后端结合，连接数据库

1.注册页面：

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="charset=UTF-8">
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(7-14.png) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        } 
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }a
         
        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }
         
        #name_trip {
            margin-left: 50px;
            color: red;
        }
         
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }
         
        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
           background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
         
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }   
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>$(document).ready(function () {
        $('#btn').click(function () {
            var mz = $('#mz').val();
            var ps = $('#ps').val();
            var ps4= $('#ps3').val();

            if(mz==''||ps==''||ps4==''){
            alert("输入不可为空！");
            return false;
        }
        else if((mz.indexOf(" ")>=0||mz==null)||(ps.indexOf(" ")>=0||ps==null)||(ps4.indexOf(" ")>=0||ps4==null)){
           alert("不可输入为空格或null!")
           return false;
        }
        else if(ps!=ps4){
           alert("密码不一致！");
          return false;
}
            $.ajax({
                type: "POST",
                url: "JQ2.php",
                dataType: "TEXT",
                async: false,
                data: {
                    username: mz, password: ps
                },
                success: function (data) {
                    alert(data);
                    
                }  
            }
            );   
        }
        )
    }
    )
    </script>
</head>
<body>
    <div id="loginDiv">
        <form action="" method="POST">
            <h1 style="text-align: center;color: aliceblue;">注册</h1>
            <p>username:<input type="text" name="username" id='mz'>
            <label name="username"></label>
            </p>
            <p>password:<input  type="password" name="password" id='ps'>
            <label name="password" ></label>
            </p>
            <p>Confirm password:<input  type="password" name="password" id='ps3'>
            <label name="password" ></label>
            </p>
             <div style="text-align: center;margin-top: 30px;">
                <input type="reset" class="button" id='btn' value="确认注册" style="text-align: center;">
                <a href="JQ1.html" target="_blank"><input type="button" value="前往登录" class="button"></a>
            </div>
        </form>
    </div>
</body>
<ml>

注册对应的php：

<?php
header("content-type:text/html;charset=utf-8");
$con=mysqli_connect("127.0.0.1","root","root","jq");//第个root为数据库名，第二个为数据库的密码，最后为新建的数据库表
$program_char="utf-8";
mysqli_set_charset($con,$program_char);
      $con=mysqli_connect("127.0.0.1","root","root","jq");
    if (!$con) {
        die("连接失败: " . mysqli_connect_error());
    }
    @$mz=$_POST['username'];
    @$ps=$_POST['password'];
    $sql1="select * from jq1 where mz1 ='$mz'";
    $re1=mysqli_query($con,$sql1);
    $row=mysqli_num_rows($re1);
    if(!$row){
        $sql="INSERT INTO jq1 (mz1,ps1) VALUES('$mz','$ps')";
        $re=mysqli_query($con,$sql);
        if($re){
        echo "注册成功";
        }else{
        echo "注册失败";}
    }
    else{
        echo "用户名已存在";
    }
	?>

2.登录页面



<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="charset=UTF-8">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(7-14.png) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        a #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>$(document).ready(function () {
    $('#btn').click(function () {
        var mz = $('#mz').val();//取到输入用户名的值
        var ps = $('#ps').val();//取到第一次输入密码的值
        var ps4= $('#ps3').val();//取到第二次输入的密码的值



        if(mz==''||ps==''||ps4==''){
            alert("输入不可为空！");
            return false;
        }
        else if((mz.indexOf(" ")>=0||mz==null)||(ps.indexOf(" ")>=0||ps==null)||(ps4.indexOf(" ")>=0||ps4==null)){
           alert("不可输入为空格或null!")
           return false;
        }
        else if(ps!=ps4){
           alert("密码不一致！");
          return false;
}


        $.ajax({
            type: "POST",//利用post方式进行传到后端
            url: "JQ1.php",//前后端连接，使该前端页面连接到后端对应的php页面
            dataType: "TEXT",
            async: false,
            data: {
                username: mz, password: ps
            },
            success: function (data) {
                alert(data);
            }
        }
        );
    }
    )
}
)
</script>
<body>
    <div id="loginDiv">
        <form action="" method="POST">
            <h1 style="text-align: center;color: aliceblue;">登录</h1>
            <p>username:<input type="text" id='mz'><!-- mz输入框 -->
            <label name="username"></label>
            </p>
            <p>password: <input type="password" id='ps' name="password"><!-- ps输入框 -->
            <label  name="password"></label>
           </p>
           <p>Confirm password:<input  type="password" name="password" id='ps3'>
            <label name="password" ></label>
            </p>
            <div style="text-align: center;margin-top: 30px;"><!-- 该div是下面两个按钮的布局块 -->
            <input type="submit" class="button" value=" 确认登录"id="btn"><!-- 该按钮的id是btn，所以点击该按钮触发的就是上面的js-->
            <a href="JQ2.html" target="_blank"><input type="button" value="前往注册" class="button" style="text-align: center;"></a>
            </div>
        </form>
    </div>
</body>
<ml>

登录对应的php:

<?php
 header("content-type:text/html;charset=utf-8");
 $con=mysqli_connect("127.0.0.1","root","root","jq");//第个root为数据库名，第二个为数据库的密码，最后为新建的数据库表
 $program_char="utf8";
 mysqli_set_charset($con,$program_char);
 if (!$con) {
     die("连接失败: " . mysqli_connect_error());
 }
 @$mz=$_POST['username'];
 @$ps=$_POST['password'];
     $sql1="select * from jq1 where  mz1 ='$mz' AND  ps1='$ps'";
     $sql2="select * from jq1 where mz1 ='$mz' AND ps1!='$ps'";
     $re1=mysqli_query($con,$sql1);
     $row1=mysqli_num_rows($re1);
     $re2=mysqli_query($con,$sql2);
     $row2=mysqli_num_rows($re2);
     if($row1){
         echo "登录成功";
         exit;
     }
     else if($row2){
         echo "密码错误";
        exit;
     }
      else{
        echo "用户不存在";
     }
     mysqli_close($con)
?>

在这里插入图片描述

在这里插入图片描述

下面简述一下连接数据的步骤：
1.首先确保下图app打开
在这里插入图片描述
如果出现下图样式证明已经打开
在这里插入图片描述
2.打开数据库
在这入图片描述
然后建一个如下的数据库表
（可以任意建表但是必须保证起的表名必须和上面php里面的代码对应，否则会报错）

例如下表表示在root表中建一个jq的数据库，在jq的数据库中建一个jq1表
在这里插入图片描述

在登录页面中：
在这里插入图片描述

对应的php核心代码：
在这里插入图片描述
前端获取了输入的用户名和密码值，然后传到下面的后端中，之后将传到后端的值传到数据库表中

还需注意的是该文件路径中不可以出现中文名，并且必须放在WWW文件夹下（例如上述代码均放在WWW文件中的index文件夹下）
在这里插入图片描述

其中访问页面要使用如下路径：
（其实127.0.0.1和localhost是一样的效果，他们后面放的路径就是WWW下的路径）
在这里插入图片描述

下面进行测试阶段：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

如果登录输入两次密码不一致时会弹出如下的窗口：
在这里插入图片描述

如果登录输入的密码和注册时不同则会弹出如下的窗口：
在这里插入图片描述
如果登录输入为空格或为空时会弹出如下的页面：
在这里插入图片描述
在这里插入图片描述
上述只是进行测试，提供大概的思路哦
如果需要完整的登录注册系统可以私信我呀.

OK啦，该篇博文over喽！
在这里插入图片描述

IWSXQY
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
web登录注册页面
m0_67391518的博客
06-18 1万+
项目地址：https://download.csdn.net/download/qq_41505957/14938383 存储实体类,属性有，，三个属性，与数据库中对应。 UserMapper.java 是类在数据库中的操作的接口，这里我直接用注解完成了。 IndexServlet.java IndexServlet.java是对index.jsp中登录按钮进行处理。判断用户的用户名和密码是否正确，如果正确，显示登录成功，如果错误则显示登录失败。 RegisterServlet.java RegisterS
登录注册的页面制作
zhanfu2905的博客
03-30 1346
下面来做一个超简易的登录注册 先来说注册 得先写个大标题证明是注册页面，然后再就是文本框填内容，在注册这里建三个文本框，用户名，密码，还有姓名，最后还有一个注册的按钮，用来跳转页面 分析好了之后，先建注册页面的第一个网页 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
简单登陆注册页面
05-30
新手初学者看得懂的 登陆注册页面，注册有用正则表达式来表单验证。希望小白能从我的代码里了解学习到一些
JavaWeb登录注册页面
08-02
JavaWeb登录注册页面是Web应用开发中的基础模块，主要用于用户的身份验证和信息管理。这个项目集成了验证码生成与验证、记住账号密码的功能，并且利用了Filter进行请求拦截，以提高系统的安全性和用户体验。同时，该...
仿钉钉网登录注册页面静态html模板
12-04
【标题】"仿钉钉网登录注册页面静态html模板"涉及到的是网页设计和前端开发的知识点，特别是关于用户界面(UI)的设计以及HTML、CSS技术的应用。这个模板是为创建一个与钉钉应用类似的登录和注册界面而设计的，旨在...
web登录注册页面模板150款(效果图+源码)
06-10
在IT行业中，前端开发是构建Web应用程序的重要组成部分，而登录注册页面则是用户与网站交互的初始界面。"web登录注册页面模板150款(效果图+源码)"这个资源为前端开发者提供了一大批预设计的界面元素，帮助他们快速...
登录注册页面html
06-15
基于html css jq的登录注册页面，含validate手机号码验证,简单易懂，仅供学习使用，路啦啦啦啦啦啦啦
用户注册登录页面
02-10
用户注册登录的网站，包含页面跳转的功能，以及div弹出框。 页面风格用CSS搭建。
登录注册界面（HTML）
12-20
注册界面可判断密码为空、前后密码是否一致、账号名是否与数据库的重复；登陆界面错误提示淡入动画出现，界面清新整洁，有动态背景图 HTML注册登录
用户注册登录界面设计+代码
10-12
简单的用户注册登录界面设计+源代码，采用DIV+CSS结构，简洁
基于vue element-ui的登录注册页面源码.rar
05-07
在"基于vue element-ui的登录注册页面源码.rar"这个压缩包中，我们可以预见到包含了一个使用Vue.js和Element-UI构建的登录和注册页面的源代码。这为我们提供了一个学习和参考的实例，以便于我们理解和应用这两个技术...
简单登录注册页面（HTML5、CSS、JS）
03-24
在这个登录注册页面中，CSS可能被用来设置背景颜色、字体样式、边框、内边距、外边距等视觉效果。使用CSS可以实现响应式设计，使页面在不同设备和屏幕尺寸上都能良好显示。CSS3还引入了许多新特性，如伪类选择器、...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值