06前后端联动【代码练习】

# 一、登录板块

## 1、登录界面

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056732.png-101.webp )

## 2、正确账号进行登录

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056733.png-101.webp )

## 3、输入错误密码或用户名登录

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056734.png-101.webp )

## 4、输入不存在的用户名进行登录

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056735.png-101.webp )

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056736.png-101.webp )

# 二、注册板块

## 1、注册界面

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056737.png-101.webp )

## 2、进行用户注册

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056738.png-101.webp )

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056739.png-101.webp )

## 3、注册两次密码不同时

![img](https://oss.maolin101.com/202501040056740.jpg )  
![img](https://oss.maolin101.com/202501040056741.jpg )

## 4、注册已经存在的用户名时

![invalid image(图片无法加载)](https://oss.maolin101.com/202501040056742.png-101.webp )

# 三、源码

### 登录界面-index.html

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
</head>
<body>
<form action="denglu.php" method="POST">
    <h2>登录界面</h2>
    用户名：<input type="text" name="username" > <br />
    &nbsp;&nbsp;&nbsp;密码：<input type="password" name="pw"> <br />
    <input type="submit" value="登录" >
</form>

<form action="zhuce.html">
    <input type="submit" value="注册">
</form>
</body>
</html>
```

‍

### 登录后端代码-denglu.php

```php
<meta charset="utf-8">
<?php 
    $username = $_POST['username'];
    $pw = $_POST['pw'];
    // 连接数据库
    $link = mysqli_connect('127.0.0.1','root','root','test');
    $sql = "select * from users where username = '$username' and password = '$pw'";
    $res1 = mysqli_query($link,$sql);
    $arr1 = mysqli_fetch_array($res1);
    // 查询数据库是否有该用户
    $sel = "select username from users where username = '$username'";
    $res2 = mysqli_query($link,$sel);
    $arr2 = mysqli_fetch_array($res2);
    if ($arr1['username'] == $username) {
        echo "登录成功！";
    }
    elseif ($arr2['username'] != $username) {
        echo "用户名不存在,请进行注册";
    }
    else{
        echo "用户名或密码错误";
    }
 ?>
```

‍

### 注册界面-zhuce.html

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
</head>
<body>
<h2>注册用户</h2>
<form action="zhuce.php" method="POST">
    &nbsp;&nbsp;&nbsp;&nbsp;
    用户名：<input type="text" name="username"> <br />
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    密码：
    <input type="password" name="pw1"> <br />
    确认密码：
    <input type="password" name="pw2"> <br />
    <input type="submit" value="注册">
</form>
</body>
</html>
```

‍

### 注册后端代码-zhuce.php

```php
<meta charset="utf-8">
<?php 
// 接收参数
    $username = $_POST['username'];
    $pw1 = $_POST['pw1'];
    $pw2 = $_POST['pw2'];
// 比较参数
    if ($pw1 != $pw2) {
        echo "两次密码不一致，请重新输入";
    }
    else{
        // 连接数据库
        $link = mysqli_connect('127.0.0.1','root','root','test');
        // 查询用户是否存在
        $sel = "select username from users where username = '$username'";
        //插入数据
        $sql = "insert into users value ('$username','$pw1')";
        // 执行查询用户sql
        $res = mysqli_query($link,$sel);
        $arr = mysqli_fetch_array($res);
        if ($arr['username'] == $username) {
        echo "注册失败，该用户名已存在";
            }
        else{
            // 执行插入数据
            mysqli_query($link,$sql);
            // 检查数据库中是否有该用户
            $res = mysqli_query($link,$sel);
            $arr = mysqli_fetch_array($res);
            if ($arr['username'] == $username) {
                echo "注册成功";
                }
            }
        }
 ?>
```