大作业--搭建一个可以实现注册登录的网站

最新推荐文章于 2024-04-12 23:01:06 发布

是小航呀～

最新推荐文章于 2024-04-12 23:01:06 发布

阅读量1.5k

点赞数 33

文章标签：课程设计 php html web

本文链接：https://blog.csdn.net/qq_75120258/article/details/136415931

版权

搭建网站我使用的是PHPstudy

创建数据库

写前端后端之前，我们需要先创建一个数据库，打开小皮，启动Apache，FTP,MYSQL三个套件

然后在软件管理里下载所需要的软件

然后我们打开phpMyAdmin,输入账号密码（就是数据库这儿的账号密码）

点击数据库，然后输入数据库名，点击创建

然后输入想要创建的表名（表名不能为中文，不然后面连接不上），点击执行

添加用户名和密码，类型我选的是INT，只能为数字，长度设置为255，保存

这是我之前创建的数据库，现在数据库就创建完成了

搭建网站

接着我们就要搭建网站了，打开小皮，在网站这儿点击创建网站，域名尽量和自己的数据一样，后面好弄，记住根目录要在WWW目录下

这是我创建好了的

接着打开网站的根目录，之后写的前端和后端就放在这个文件里就行了

记住网站首页要更改为自己写的前端html文件

前端

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册和登录界面</title>
<link rel="stylesheet" href="styles.css">
<style>
         /* 设置背景样式 */
        body {
                  background-image:url('Hang.jpg');
                  background-size:cover;
                  background-repeat:no-pepeat;
}
/*  设置容器样式*/
.container{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
/* 设置表单容器样式*/
.form-container{
margin:20px;
padding:20px;
border:1px solid #ccc;
width:300px;
}
/* 设置输入框样式*/
input{
margin-bottom:10px;
width:100%;
}
/* 设置按钮样式*/
button{
width:100%;
}
</style>
</head>
<div class="container">
<!-- 注册表单 -->
  <div class="form-container">
    <h2>注册</h2>
    <form id="registerForm">
      <input type="text" name="username" placeholder="username" required>
      <input type="password" name="password" placeholder="password" required>
      <button type="submit">注册</button>
    </form>
  </div>

<!-- 登录表单 -->
  <div class="form-container">
    <h2>登录</h2>
    <form id="loginForm">
      <input type="text" name="username" placeholder="username" required>
      <input type="password" name="password" placeholder="password" required>
      <button type="submit">登录</button>
    </form>
  </div>
</div>

<script>
//注册表单提交事件监听
document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();//阻止默认提交行为
  
  let formData = new FormData(this);//获取表单数据
  
//发送POST请求到zhuce.php
  fetch('zhuce.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())//将响应转换为文本格式
  .then(data => {
    alert("注册成功，你可以登录了");//提示注册成功
  });
});

//登录表单提交事件监听
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();//阻止默认提交行为
  
  let formData = new FormData(this);//获取表单数据
  
// 发送POST请求到denglu.php
  fetch('denglu.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())//将响应转换为文本格式
  .then(data => {
    alert(data);//提示返回的数据
    if(data ==='登录成功') {
          window.location.href = 'welcome.php';//重定向到welcome.php页面
}
  });
});
</script>
</body>
</html>

这是我设计的前端页面

登录成功后的welcome.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<style>
    body {
        background-image: url('beijing.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        color: white; 
        text-align: center; 
    }

    h1 {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.5); 
    }

    p {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5); 
    }
</style>
</head>
<body>
<h1>欢迎来到你自己的空间!</h1>
<p>在这儿你可以拥有自己的秘密</p>
</body>
</html>

这个就是登录成功后跳转的界面

后端

因为要实现的功能很少，就实现登录和注册，所以代码也很少

zhuce.php

<?php
// 连接数据库
$servername = "localhost";// 服务器名，这儿添自己服务器的名字
$username = "root";// 添自己登录phpmyadmin的用户名
$password = "123456";// 添自己登录phpmyadmin的密码
$dbname = "Hang";// 数据库名，添自己创建的数据库名

$conn = new mysqli($servername, $username, $password, $dbname);

// 处理注册表单提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = $_POST['password'];

    // 插入用户信息到数据库
    $sql = "INSERT INTO sign (username, password) VALUES ('$username',  '$password')";
                        // sign是自己创建的表名

    if ($conn->query($sql) === TRUE) {
        echo "注册成功";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

$conn->close();
?>

denglu.php

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "Hang";

$conn = new mysqli($servername, $username, $password, $dbname);

// 处理登录表单提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = $_POST['password'];

    // 查询用户信息
    $sql = "SELECT * FROM sign WHERE username='$username' AND password='$password'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        echo "登录成功";
    } else {
        echo "登录失败";
    }
}

$conn->close();
?>

然后我们将他们全都放在网站根目录下