博客类网站源码企业网站优化工具
搭建网站我使用的是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.phpfetch('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.phpfetch('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();
?>
然后我们将他们全都放在网站根目录下
登录
在小皮里打开网站，在登录表单这儿输入账号666密码666，显示登录失败，因为还没有注册，数据库里没有信息
在注册表单里输入666/666，注册成功
我们在phpmyadmin里看见，数据库里增加了对应的用户名和密码
然后登录
网站搭建成功！！！