養(yǎng)殖場(chǎng)網(wǎng)站源碼平臺(tái)軟件定制開(kāi)發(fā)
搭建網(wǎng)站我使用的是PHPstudy
創(chuàng)建數(shù)據(jù)庫(kù)
寫(xiě)前端后端之前，我們需要先創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)，打開(kāi)小皮，啟動(dòng)Apache，FTP,MYSQL三個(gè)套件
然后在軟件管理里下載所需要的軟件
然后我們打開(kāi)phpMyAdmin,輸入賬號(hào)密碼（就是數(shù)據(jù)庫(kù)這兒的賬號(hào)密碼）
點(diǎn)擊數(shù)據(jù)庫(kù)，然后輸入數(shù)據(jù)庫(kù)名，點(diǎn)擊創(chuàng)建
然后輸入想要?jiǎng)?chuàng)建的表名（表名不能為中文，不然后面連接不上），點(diǎn)擊執(zhí)行
添加用戶名和密碼，類型我選的是INT，只能為數(shù)字，長(zhǎng)度設(shè)置為255，保存
這是我之前創(chuàng)建的數(shù)據(jù)庫(kù)，現(xiàn)在數(shù)據(jù)庫(kù)就創(chuàng)建完成了
搭建網(wǎng)站
接著我們就要搭建網(wǎng)站了，打開(kāi)小皮，在網(wǎng)站這兒點(diǎn)擊創(chuàng)建網(wǎng)站，域名盡量和自己的數(shù)據(jù)一樣，后面好弄，記住根目錄要在WWW目錄下
這是我創(chuàng)建好了的
接著打開(kāi)網(wǎng)站的根目錄，之后寫(xiě)的前端和后端就放在這個(gè)文件里就行了
記住網(wǎng)站首頁(yè)要更改為自己寫(xiě)的前端html文件
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注冊(cè)和登錄界面</title>
<link rel="stylesheet" href="styles.css">
<style>/* 設(shè)置背景樣式 */body {background-image:url('Hang.jpg');background-size:cover;background-repeat:no-pepeat;
}
/* 設(shè)置容器樣式*/
.container{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
/* 設(shè)置表單容器樣式*/
.form-container{
margin:20px;
padding:20px;
border:1px solid #ccc;
width:300px;
}
/* 設(shè)置輸入框樣式*/
input{
margin-bottom:10px;
width:100%;
}
/* 設(shè)置按鈕樣式*/
button{
width:100%;
}
</style>
</head>
<div class="container">
<!-- 注冊(cè)表單 --><div class="form-container"><h2>注冊(cè)</h2><form id="registerForm"><input type="text" name="username" placeholder="username" required><input type="password" name="password" placeholder="password" required><button type="submit">注冊(cè)</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>
//注冊(cè)表單提交事件監(jiān)聽(tīng)
document.getElementById('registerForm').addEventListener('submit', function(e) {e.preventDefault();//阻止默認(rèn)提交行為let formData = new FormData(this);//獲取表單數(shù)據(jù)//發(fā)送POST請(qǐng)求到zhuce.phpfetch('zhuce.php', {method: 'POST',body: formData}).then(response => response.text())//將響應(yīng)轉(zhuǎn)換為文本格式.then(data => {alert("注冊(cè)成功，你可以登錄了");//提示注冊(cè)成功});
});//登錄表單提交事件監(jiān)聽(tīng)
document.getElementById('loginForm').addEventListener('submit', function(e) {e.preventDefault();//阻止默認(rèn)提交行為let formData = new FormData(this);//獲取表單數(shù)據(jù)// 發(fā)送POST請(qǐng)求到denglu.phpfetch('denglu.php', {method: 'POST',body: formData}).then(response => response.text())//將響應(yīng)轉(zhuǎn)換為文本格式.then(data => {alert(data);//提示返回的數(shù)據(jù)if(data ==='登錄成功') {window.location.href = 'welcome.php';//重定向到welcome.php頁(yè)面
}});
});
</script>
</body>
</html>
這是我設(shè)計(jì)的前端頁(yè)面
登錄成功后的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>歡迎來(lái)到你自己的空間!</h1>
<p>在這兒你可以擁有自己的秘密</p>
</body>
</html>
這個(gè)就是登錄成功后跳轉(zhuǎn)的界面
后端
因?yàn)橐獙?shí)現(xiàn)的功能很少，就實(shí)現(xiàn)登錄和注冊(cè)，所以代碼也很少
zhuce.php
<?php
// 連接數(shù)據(jù)庫(kù)
$servername = "localhost";// 服務(wù)器名，這兒添自己服務(wù)器的名字
$username = "root";// 添自己登錄phpmyadmin的用戶名
$password = "123456";// 添自己登錄phpmyadmin的密碼
$dbname = "Hang";// 數(shù)據(jù)庫(kù)名，添自己創(chuàng)建的數(shù)據(jù)庫(kù)名$conn = new mysqli($servername, $username, $password, $dbname);// 處理注冊(cè)表單提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {$username = $_POST['username'];$password = $_POST['password'];// 插入用戶信息到數(shù)據(jù)庫(kù)$sql = "INSERT INTO sign (username, password) VALUES ('$username', '$password')";// sign是自己創(chuàng)建的表名if ($conn->query($sql) === TRUE) {echo "注冊(cè)成功";} else {echo "Error: " . $sql . "<br>" . $conn->error;}
}$conn->close();
?>
denglu.php
<?php
// 連接數(shù)據(jù)庫(kù)
$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();
?>
然后我們將他們?nèi)挤旁诰W(wǎng)站根目錄下
登錄
在小皮里打開(kāi)網(wǎng)站，在登錄表單這兒輸入賬號(hào)666密碼666，顯示登錄失敗，因?yàn)檫€沒(méi)有注冊(cè)，數(shù)據(jù)庫(kù)里沒(méi)有信息
在注冊(cè)表單里輸入666/666，注冊(cè)成功
我們?cè)趐hpmyadmin里看見(jiàn)，數(shù)據(jù)庫(kù)里增加了對(duì)應(yīng)的用戶名和密碼
然后登錄
網(wǎng)站搭建成功！！！