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