网站开发

Document

php+mysql 网站设计(含源码)(源码目录)(个人博客)

php mysql 网站设计

详细内容请看[04_数据库_03_增删改查-中_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1jZ4y1z72A?spm_id_from=333.788.videopod.episodes&vd_source=3c698999df936104ec7131f1874ca56e&p=17)中的课程 这里将本人认为重要的芝士点记录了下来！！！

+++

拓展

为什么Php连接数据库要分面向对象和面向过程 甚至还有面向对象预处理

面向过程:
  • 如果用户输入username或者password中包含恶意的sql代码 ，这个代码就可能被执行，导致sql注入攻击
  • 代码比较简单 但是容易出错 尤其当查询变得复杂时候
面向对象:(oop)
  • 防止SQL注入 通过:username 和 :password绑定参数 用户输入不会直接拼接入SQL查询语句中
  • 错误处理使用try-catch，当发生错误能够捕获并优雅处理.
  • 面向对象的核心概念之一就是封装和继承 ， 意味着你可以把与数据库相关的操作封装到一个类中，其他部分的代码之需要调用类的函数， 而不需要重复写相同的数据库操作代码
  • 如果你有多个数据库操作，使用类可以让你更方便管理和复用代码，而不是每个地方都写重复的数据库连接代码

更清晰的代码结构：

  • 面向对象有明确的结构，比如类和对象，可以让代码更清晰，便于理解和维护。特别是在团队开发时，每个人都可以基于相同的类进行开发，减少了开发中的混乱。
  • 当你的项目变得越来越复杂时，面向对象能让你更容易管理和维护代码。

更强的错误处理能力：

  • 面向对象方式允许你使用 异常处理（Exception Handling），这使得你能够在出现错误时优雅地捕获和处理，避免程序直接崩溃。
  • 比如，如果数据库连接失败或查询出错，你可以通过 try-catch 捕获异常，并根据不同的错误进行处理。
预处理语句
  • 预处理语句是一种数据库操作方式，他通过预先编译SQL语句并且绑定参数，避免直接在sql查询中拼接用户输入的数据 ，从而有效防止SQL注入
  • 预处理的使用和是否 面向对象 还是 面向过程 没有直接关系，你可以在两者的代码中都使用预处理语句

+++

前端进阶_UI框架 Bootstrap

https://getbootstrap.com/docs/4.6/components/alerts/

  • 这里推荐v4.6 版本 比较完善
  • 里面有很多css 和 js 的好看的框架的源代码 可以省去很多麻烦事！！！

+++

源代码！！(目录)

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

Php:

login.php

<?php
// 1. 开始会话
session_start();

// 2. 连接到数据库
$host = 'localhost';  // 数据库主机
$username = 'root';   // 数据库用户名
$password = 'zjw12345';       // 数据库密码
$dbname = 'shizhandenglu'; // 数据库名称

// 创建数据库连接（使用面向对象方式）
$mysqli = new mysqli($host, $username, $password, $dbname);

// 检查数据库连接是否成功
if ($mysqli->connect_errno) {
    die('数据库连接失败: ' . $mysqli->connect_error);
}

$mysqli->set_charset('utf8');

// 读取用户并显示
getUserList($mysqli);
$mysqli->close();

// 编写 SQL 查询语句
function getUserList($mysqli)
{
    // 修改 SQL 查询语句以匹配表中的字段名称
    $sql = "SELECT uid, username, age, gender FROM user WHERE username=? and passwd=?";
    
    // 检查 SQL 语句是否成功准备
    if ($mysqli_stmt = $mysqli->prepare($sql)) {
        // 定义要存值的变量名
        $username = $_POST['username'];
        $passwd = $_POST['passwd'];
        $mysqli_stmt->bind_param('ss', $username, $passwd);

        if ($mysqli_stmt->execute()) {
            // 绑定结果集
            $mysqli_stmt->bind_result($user_id, $username, $age, $gender);
            
            // 如果有匹配的记录，登录成功
            if ($mysqli_stmt->fetch()) {
                // 设置用户 session
                $_SESSION['user_id'] = $user_id;  // 存储用户的 ID
                
                // 登录成功，跳转到个人页面
                echo "<script>alert('恭喜你！登录成功!');window.location.href='../../view/user/person.html';</script>";
            } else {
                echo "没有找到符合条件的用户。";
            }
        } else {
            echo "查询执行失败，请重试。";
        }

        // 关闭预处理语句
        $mysqli_stmt->free_result();
        $mysqli_stmt->close();
    } else {
        // 输出 SQL 错误
        echo "SQL 语句准备失败: " . $mysqli->error;
    }
}
?>

post.php

<?php
session_start();

$host = 'localhost';
$username = 'root';
$password = 'zjw12345';
$dbname = 'shizhandenglu';

$mysqli = new mysqli($host, $username, $password, $dbname);
if ($mysqli->connect_errno) {
    die('数据库连接失败: ' . $mysqli->connect_error);
}

$mysqli->set_charset('utf8');

// 检查用户是否登录
if (!isset($_SESSION['user_id'])) {
    echo "<script>alert('请先登录');window.location.href='login.php';</script>";
    exit; // 确保在未登录时不继续执行后续代码
}

// 调试输出 id 是否正确传递
$post_id = isset($_GET['id']) ? $_GET['id'] : 0;
echo "文章 ID: " . $post_id . "<br>";  // 输出调试信息

if ($post_id == 0) {
    echo "无效的文章 ID，请检查 URL 是否正确";
    exit;
}

// 获取文章详情
$sql = "SELECT posts.id, posts.title, posts.content, posts.created_at, users.username 
        FROM posts 
        INNER JOIN users ON posts.user_id = users.uid WHERE posts.id = ?";
$stmt = $mysqli->prepare($sql);
$stmt->bind_param('i', $post_id);
$stmt->execute();
$result = $stmt->get_result();
$post = $result->fetch_assoc();

if ($post) {
    echo "<h2>" . $post['title'] . "</h2>";
    echo "<p>作者: " . $post['username'] . " | 发布时间: " . $post['created_at'] . "</p>";
    echo "<p>" . $post['content'] . "</p>";

    // 评论部分
    echo "<h3>评论</h3>";

    // 获取评论
    $comment_sql = "SELECT comments.content, users.username, comments.created_at 
                    FROM comments 
                    INNER JOIN users ON comments.user_id = users.uid 
                    WHERE comments.post_id = ?";
    $comment_stmt = $mysqli->prepare($comment_sql);
    $comment_stmt->bind_param('i', $post_id);
    $comment_stmt->execute();
    $comments = $comment_stmt->get_result();

    while ($comment = $comments->fetch_assoc()) {
        echo "<div><p>" . $comment['username'] . " 评论: " . $comment['content'] . " | 时间: " . $comment['created_at'] . "</p></div>";
    }

    // 提交评论
    if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['comment_content'])) {
        $comment_content = $_POST['comment_content'];
        $user_id = $_SESSION['user_id']; // 获取当前登录用户的 ID

        // 插入评论
        $comment_sql = "INSERT INTO comments (post_id, user_id, content) VALUES (?, ?, ?)";
        $comment_stmt = $mysqli->prepare($comment_sql);
        $comment_stmt->bind_param('iis', $post_id, $user_id, $comment_content);
        if ($comment_stmt->execute()) {
            echo "<script>alert('评论成功!');window.location.href='view_post.php?id=" . $post_id . "';</script>";
        } else {
            echo "评论失败，请重试。";
        }
    }

    echo "<form action='view_post.php?id=" . $post_id . "' method='POST'>
            <textarea name='comment_content' rows='4' required></textarea><br>
            <button type='submit'>提交评论</button>
          </form>";
} else {
    echo "文章未找到。";
}

// 点赞部分
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['like'])) {
    $user_id = $_SESSION['user_id'];

    // 检查是否已经点赞
    $check_like_sql = "SELECT * FROM likes WHERE post_id = ? AND user_id = ?";
    $check_stmt = $mysqli->prepare($check_like_sql);
    $check_stmt->bind_param('ii', $post_id, $user_id);
    $check_stmt->execute();
    $check_result = $check_stmt->get_result();

    if ($check_result->num_rows == 0) {
        // 没有点赞，插入新的点赞记录
        $like_sql = "INSERT INTO likes (post_id, user_id) VALUES (?, ?)";
        $like_stmt = $mysqli->prepare($like_sql);
        $like_stmt->bind_param('ii', $post_id, $user_id);
        if ($like_stmt->execute()) {
            echo "<script>alert('点赞成功!');window.location.href='view_post.php?id=" . $post_id . "';</script>";
        } else {
            echo "点赞失败，请重试。";
        }
    } else {
        echo "<script>alert('您已经点赞过此文章了。');</script>";
    }
}
?>

register.php

<?php
// 1. 连接到数据库
$host = 'localhost';  // 数据库主机
$username = 'root';   // 数据库用户名
$password = 'zjw12345';       // 数据库密码
$dbname = 'shizhandenglu'; // 数据库名称

// 创建数据库连接（使用面向对象方式）
$mysqli = new mysqli($host, $username, $password, $dbname);

// 检查数据库连接是否成功
if ($mysqli->connect_errno) {
    die('数据库连接失败: ' . $mysqli->connect_error);
}
$mysqli->set_charset('utf8');



register($mysqli);
$mysqli->close();


//用户注册 插入新的数据
function register($mysqli)
{
$sql = "INSERT INTO user(username, passwd) VALUES(?, ?)";

$mysqli_stmt = $mysqli ->prepare($sql);  

//获取前端用户输入的值
$username = $_POST["username"];
$passwd = $_POST['passwd'];

$mysqli_stmt->bind_param('ss',$username,$passwd);
 
//执行预处理语句
if($mysqli_stmt->execute()){
    echo $mysqli_stmt->insert_id;  //程序成功 返回插入数据表的行id
    echo PHP_EOL;
    echo "<script>alert('恭喜你！注册成功!');window.location.href='../../view/office/login1.html'</script>";

    echo $mysqli_stmt->error; //执行失败 错误信息
}
// 关闭预处理语句和数据库连接
$mysqli_stmt->free_result();
$mysqli_stmt->close();
$myslqi->close;
}



?>

upload.php

<?php
// 允许上传的图片后缀
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
echo $_FILES["file"]["size"];
$extension = end($temp); // 获取文件后缀名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 804800) // 小于 200 kb
&& in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"] > 0)
{
echo "错误：: " . $_FILES["file"]["error"] . "<br>";
}
else
{
echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
// 判断当期目录下的 upload 目录是否存在该文件
// 如果没有 upload 目录，你需要创建它，upload 目录权限为 777
if (file_exists("upload/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " 文件已经存在。 ";
}
else
{
// 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" .
$_FILES["file"]["name"]);
echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];
}
}
}
else
{
echo "非法的文件格式";
}

HTML:

index.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="../../static/pkg/bootstrap-4.6.2-dist/css/bootstrap.min.css"> <!-- 这里引入了bootstrap中的css文件可以让页面顶部出现导航栏-->
<script src="../../static/pkg/jquery3.7.1/jquery-3.7.1.js"></script>
<link rel="stylesheet" href="../../static/css/office/index.css">




</head>
<body>
    <!--导航栏-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">你点点看有没有用</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">点啊 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
          </ul>
          <a href="../office/login1.html" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">登录</a>
          &nbsp;
          &nbsp;
          <a href="../office/register.html" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">注册</a>
          
        </div>
      </nav>





      <!--流动的-->
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="carousel-img"src="../../static/assets/img/common/penhuo.jpeg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img class="carousel-img"src="../../static/assets/img/common/kuangye.jpeg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img class="carousel-img"src="../../static/assets/img/common/zhongxin.jpeg" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>


   <script src="../../static/pkg/bootstrap-4.6.2-dist/js/bootstrap.min.js"> </script>
   
   
   

   <!--图片社区-->
   <!--移动端f12之后可以拉伸-->
   <div class="container">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
      <div class="col"><div class="card" style="width: 18rem;">
        <img src="../../static/assets/img/common/yanzu.jpg" class="card-img-top" alt="">
        <div class="card-body">
          <p class="card-text">这是逗比学长.</p>
        </div>
      </div></div>
      <div class="col"><div class="card" style="width: 18rem;">
        <img src="../../static/assets/img/common/yanzu2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">这是老李学长.</p>
        </div>
      </div></div>
      <div class="col"><div class="card" style="width: 18rem;">
        <img src="../../static/assets/img/common/xuanjv.jpeg" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">这是侯哥.</p>
        </div>
      </div></div>
      <div class="col"><div class="card" style="width: 18rem;">
        <img src="../../static/assets/img/common/baiquan.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">这是所有同门.</p>
        </div>
      </div></div>  
    </div>
  </div>
   <script>
    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
        )}
   </script>



   <!--页脚-->
   <footer>
    <div class="alert alert-danger" role="alert">
  这是张嘉玮的网安个人博客!
</div>
    
    </footer>





</body>
</html>

login1.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>           /* 这里我的p标签*/
         p {
            text-align: center; /* 文字居中 */
            font-size: 48px; /* 放大文字 */
            background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变色 */
            -webkit-background-clip: text; /* 背景剪裁为文字形状 */
            color: transparent; /* 文字变为透明 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 阴影效果 */
            animation: colorChange 3s infinite; /* 动画效果：颜色渐变 */
        }

        @keyframes colorChange {
            0% { color: red; }
            50% { color: blue; }
            100% { color: green; }
        }           <!-- 这是我从gpt哪里搞来的渐变色 -->
    </style>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云图登录页</title>
    <link rel="stylesheet" href="../../static/css/office/login.css">
</head>
<body>
    <p> 欢迎来到张嘉玮的个人网站</p>
    <div class="loginCard"> <!-- 类名叫做loginCard-->
        <div class="logo">
            <img src="../../static/assets/img/elonmask rose.jpg" alt="" srcset="">
        </div>
    <form action="../../controllers/office/login.php" method="POST"> <!-- 这里让我的前端页面可以接入后端-->
        <label for="username" >昵称:</label>    <!--这会在名称框子前显示"昵称"-->
        <input type ="text" name="username" id="username" placeholder="请输入您的用户名称">    
        <br>
        <br>
        <label for="passwd" >密码:</label>   
        <input type ="passwd" name="passwd" id="passwd" placeholder="请输入您的密码">    
        <br>
        <br>
        <button type = "submit" >登录</button>  <!-- 提交按钮 -->
        <a href="./register.html"> 没账号，我选择注册</a>

    </form>
</div>
</body>
</html>

register.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>           /* 这里我的p标签*/
         p {
            text-align: center; /* 文字居中 */
            font-size: 48px; /* 放大文字 */
            background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变色 */
            -webkit-background-clip: text; /* 背景剪裁为文字形状 */
            color: transparent; /* 文字变为透明 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 阴影效果 */
            animation: colorChange 3s infinite; /* 动画效果：颜色渐变 */
        }

        @keyframes colorChange {
            0% { color: red; }
            50% { color: blue; }
            100% { color: green; }
        }           <!-- 这是我从gpt哪里搞来的渐变色 -->
    </style>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云图注册页</title>
    <link rel="stylesheet" href="../../static/css/office/register.css">

</head>
<body>
    <p> 欢迎来到张嘉玮的个人网站</p>
    <div class="loginCard"> <!-- 类名叫做loginCard-->
        <div class="logo">
            <img src="../../static/assets/img/elonmask rose.jpg" alt="" srcset="">
        </div>
    <form action="../../controllers/office/register.php" method="POST"> <!-- 这里让我的前端页面可以接入后端-->
        <label for="username" >昵称:</label>    <!--这会在名称框子前显示"昵称"-->
        <input type ="text" name="username" id="username" placeholder="请输入您的用户名称">    
        <br>
        <br>
        <label for="passwd" >密码:</label>   
        <input type ="passwd" name="passwd" id="passwd" placeholder="请输入您的密码">    
        <br>
        <br>
        <button type = "submit" >注册</button>  <!-- 提交按钮 -->
        <a href="./login1.html"> 有账号，我选择登录</a>

    </form>
</div>
</body>
</html>

person.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="../../static/pkg/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/office/user/person.css">
</head>
<body class="bg-light">

<div class="container mt-5">
    <!-- 用户信息卡片 -->
    <div class="card mx-auto" style="width: 18rem; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
        <div class="card-body text-center">
            <img class="touxiang mb-3" src="../../upload/touxiang/guanjun.jpg" alt="头像" onclick="Person.func.uploadAvatar()">
            <h5 class="card-title">姓名</h5>
            <h6 class="card-subtitle mb-2 text-muted">张嘉玮</h6>
            <p class="card-text">请您留言（畅所欲言！）</p>
            <a href="https://blog.csdn.net/2401_87576048" class="card-link">我的 CSDN</a>
        </div>
    </div>

    <!-- 发布文章表单 -->
    <div class="mt-4">
        <h2 class="text-center">发布新文章</h2>
        <form action="../../controllers/office/post.php" method="POST">
            <div class="form-group">
                <label for="title">文章标题</label>
                <input type="text" class="form-control" name="title" id="title" required>
            </div>
            <div class="form-group">
                <label for="content">文章内容</label>
                <textarea class="form-control" name="content" id="content" rows="5" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary btn-block">发布文章</button>
        </form>
    </div>

    <!-- 点赞按钮 -->
    <div class="mt-4 text-center">
        <form action="view_post.php?id=<?php echo $post_id; ?>" method="POST">
            <button type="submit" name="like" class="btn btn-success">点赞</button>
        </form>
    </div>
</div>

<script src="../../static/pkg/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
</body>
</html>

CSS:

index.css

.carousel-img{
    width:100%;
    height:450px;
}
@media screen and(max-width:500px) {
    .carousel-img
    {
        width:unset !important;
        margin: 8px auto;
    }

}

login.css

body
{
    /*height:100vh;*/   
    background-image: url('../../assets/img/huojianfashe.jpg');
    /*background-size: 100% 100%;*//* 有时候可以防止背景图片出现重复*/
    /*background-repeat: no-repeat;*/
}




.loginCard{  
           width: fit-content;  
           padding:28px 40px;  
           margin:250px auto;  /* 外边距 让他居中 上下随便定义 左右是auto*/
           border:1px solid red; /* 边框 */
           border-radius:20%;    /* 不喜欢四边形的直角哦让他变圆润一点*/
           box-shadow:2px 2px 14px 1px#300202;
           background-color: #340909(rgb(28, 3, 23,0.8));
}


.loginCard .logo{   /* 这里注意要空一格 不然连logo这个图片都找不到*/
    margin:0 auto;   /* 让mask自己对齐*/
    width: 85px;
    height: 85px;
    border:1px solid rgb(28, 3, 23);
    transform: translateY(-60px); /*从中间往上头一点转换y轴*/
    
    border-radius: 10%;   
    background-color: #340909;
    box-shadow:2px 2px 14px 1px#6e2020; /* 出现一点阴影 有层次感觉*/
}

.loginCard .logo img{
    width:100%;          /* 这里是与顶上的边框 百分百对其 */

}

register.css

body
{
    /*height:100vh;*/   
    background-image: url('../../assets/img/huojianfashe.jpg');
    /*background-size: 100% 100%;*//* 有时候可以防止背景图片出现重复*/
    /*background-repeat: no-repeat;*/
}




.loginCard{  
           width: fit-content;  
           padding:28px 40px;  
           margin:250px auto;  /* 外边距 让他居中 上下随便定义 左右是auto*/
           border:1px solid red; /* 边框 */
           border-radius:15%;    /* 不喜欢四边形的直角哦让他变圆润一点*/
           box-shadow:2px 2px 14px 1px#300202;
           background-color: rgba(28, 3, 23, 0.8);  /* 背景色带透明度 */

}


.loginCard .logo{   /* 这里注意要空一格 不然连logo这个图片都找不到*/
    margin:0 auto ;   /* 让mask自己对齐*/
    width: 100px;
    height: 85px;
    border:1px solid #300202(28, 3, 23);
    transform: translateY(-60px); /*从中间往上头一点转换y轴*/
    
    border-radius: 50%;   
    background-color: #340909;
    box-shadow:2px 2px 14px 1px#6e2020; /* 出现一点阴影 有层次感觉*/
}

.loginCard .logo img{
    width:100%;          /* 这里是与顶上的边框 百分百对其 */

}

person.css

/* 修饰头像样式 */
.touxiang {
    width: 35%;
    border-radius: 50%;  /* 圆形头像 */
    margin: 0 auto;
    border: 3px solid #ddd; /* 头像边框 */
    padding: 5px;  /* 给头像添加一点内边距 */
}

/* 卡片样式 */
.card {
    border: none; /* 去掉默认边框 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    background-color: #fff; /* 白色背景 */
}

/* 表单样式 */
.form-group label {
    font-weight: bold;
}

button {
    font-size: 16px;
    font-weight: bold;
}

.btn {
    border-radius: 50px; /* 使按钮更圆 */
    padding: 10px 20px;
}

/* 页面的背景 */
body {
    background-color: #f8f9fa; /* 淡灰色背景 */
}

/* 页面间距 */
.container {
    max-width: 900px;
}

Bootstrap-4.6.2-dist

其中的css js 文件大家可以直接下载到你的分类目录之下

Jquery3.7.1

大家可以直接下载

Popper

大家可以直接下载

（详细图片链接大家可以自主修改 根据我的上述代码分类目录）

+++

补充：云图登录页与后端的交互

先将login.php的绝对路径直接复制粘贴到url中

url中将www(包括)以及之前的东西全部改成localhost

并且将最后的login.php->login.html

http://localhost/www.hanjialianxi/xiangmu/login/login1.html

法一:连接数据库 (phpmyadmin)(mysqli-面向过程)

  • 直接Phpstudy中打开Phpmyadmin 注意数据路中的localhost php版本不可以低于5.4 否则一些语句语法会错误

新建

这里我首先建立了一个名为user的数据库 之后再新建属性分别为

uid username gender brief
数字 varchar 数字 varchar

增删查改

增

INSERT INTO user(uid , username , gender , brief)VALUES(0001,"嘉玮",1,"这是一位帅哥，本网站的创始人");

这里为了防止之后还可以插入uid 为1的序列顶替掉原本的值

可以在 uid->更多->主键 将uid 设为逐渐这样就可以防止顶替了

删

DELECT FROM user WHERE(uid=2);

编辑

UPDATE user SET 'username' = "蔡徐坤" WHERE uid=1;
UPDATE user SET 'username' = "蔡徐坤",gender=0 WHERE 'uid'=1;

查

SELECT * FROM user;     //这里是查询所有的表
SELECT * FROM user WHERE gender = 0;  //查询性别为女的
SELECT *user.username FROM user WHERE gender = 0;

+++

php操作数据库

这里新建文件夹 建立文件conn.php

源代码如下:

<?php
$severname = "localhost"; $username = "自己设置的"; $password = "自己设置的"; //创建连接
$conn = mysqli_connect($severname, $username, $password); //测试连接
if(!$conn){
    die("Connection failed: " . mysqli_connect_error());

}
echo "连接成功";
mysqli_close($conn);//关闭连接

?>

浏览器打开:

地址(复制相对路径之后将包括www以及之前的路径都改为localhost)

http://localhost/www.hanjialianxi/mysql/conn.php

显示连接成功即成功!!!

+++

法二：面向对象预处理

预处理语句原理：

预处理语句将 SQL 查询和用户输入 分开处理，它不会把用户输入的数据直接拼接到 SQL 中。

果使用预处理语句，数据库会把这个用户输入的 ' OR 1=1 -- 当作 普通的字符串数据，而不会执行它。

浏览器地址:

http://localhost/www.hanjialianxi/shizhandenglu/index.php

源代码:

<?php
// 1. 连接到数据库
$host = 'localhost';  // 数据库主机
$username = 'root';   // 数据库用户名
$password = 'zjw12345';       // 数据库密码
$dbname = 'shizhandenglu'; // 数据库名称

// 创建数据库连接（使用面向对象方式）
$mysqli = new mysqli($host, $username, $password, $dbname);

// 检查数据库连接是否成功
if ($mysqli->connect_error) {
    die('数据库连接失败: ' . $mysqli->connect_error);
}
$mysqli->set_charset('utf8');

// 编写 SQL 查询语句
$sql = "SELECT username,age,gender FROM demo WHERE uid = ?";
$mysqli_stmt = $mysqli->prepare($sql);

$uid = 5;
$mysqli_stmt->bind_param('i',$uid);

if($mysqli_stmt->execute()){
    //bind_result（）绑定结果集中的值到变量
    $mysqli_stmt->bind_result($uid,$age,$gender);
    //便利结果集
    while($mysqli_stmt->fetch()){
        echo'姓名:'. $uid;
        echo'<br/>年龄:'.$age;
        echo'<br/>性别:';
        echo'<br/>性别:'.$gender==1 ? '男' : '女';
    }

} else {
    echo "没有找到符合条件的用户。";
}

// 关闭预处理语句和数据库连接
$mysqli_stmt->free_result();
$mysqli_stmt->close();
$mysqli->close();
?>

逐个分析

$mysqli_stmt = $mysqli->prepare($sql);

将你写的SQL查询语句交给数据库处理 但是没有立即执行 只是准备好 等待执行；

$mysqli_stmt->bind_param('i', $uid);

将变量uid替换掉SQL查询语句中的占位符(?); i表明绑定的是一个整数类型的变量，

$mysqli_stmt->bind_result($uid, $age, $gender);

将SQL查询语句的列绑定到PHP变量uid age gender ，

while($mysqli_stmt->fetch()) {
}

if ($mysqli->connect_error) {
die('数据库连接失败: ’ . $mysqli->connect_error);
}
$mysqli->set_charset(‘utf8’);

// 编写 SQL 查询语句
$sql = “SELECT username,age,gender FROM demo WHERE uid = ?”;
$mysqli_stmt = m y s q l i − > p r e p a r e ( mysqli->prepare( mysqli−>prepare(sql);

$uid = 5;
m y s q l i s t m t − > b i n d p a r a m ( ′ i ′ , mysqli_stmt->bind_param('i', mysqlis​tmt−>bindp​aram(′i′,uid);

if($mysqli_stmt->execute()){
//bind_result（）绑定结果集中的值到变量
m y s q l i s t m t − > b i n d r e s u l t ( mysqli_stmt->bind_result( mysqlis​tmt−>bindr​esult(uid, a g e , age, age,gender);
//便利结果集
while($mysqli_stmt->fetch()){
echo’姓名:‘. u i d ; e c h o ′ < b r / > 年龄 : ′ . uid; echo'<br/>年龄:'. uid;echo′<br/>年龄:′.age;
echo’
性别:‘;
echo’
性别:'.$gender==1 ? ‘男’ : ‘女’;
}

} else {
echo “没有找到符合条件的用户。”;
}

// 关闭预处理语句和数据库连接
$mysqli_stmt->free_result();
$mysqli_stmt->close();
$mysqli->close();
?>




逐个分析

$mysqli_stmt = m y s q l i − > p r e p a r e ( mysqli->prepare( mysqli−>prepare(sql);


将你写的SQL查询语句交给数据库处理 但是没有立即执行 只是准备好 等待执行；

$mysqli_stmt->bind_param(‘i’, $uid);


将变量`uid`替换掉SQL查询语句中的占位符(?); **i**表明绑定的是一个整数类型的变量，

m y s q l i s t m t − > b i n d r e s u l t ( mysqli_stmt->bind_result( mysqlis​tmt−>bindr​esult(uid, $age, $gender);


将SQL查询语句的列绑定到PHP变量`uid age gender` ，

while($mysqli_stmt->fetch()) {
}