写一个登录的前端和后端
时间: 2024-01-31 16:01:57 浏览: 28
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="text-center mb-4">Login Form</h2>
<form>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<button type="button" class="btn btn-primary" onclick="login()">Login</button>
</form>
<div class="text-center mt-3">
<p>Don't have an account? <a href="#">Sign Up</a></p>
</div>
</div>
</div>
</div>
<script>
function login() {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "POST",
url: "login.php",
data: {username: username, password: password},
success: function(data) {
if (data == "success") {
window.location.href = "home.php";
} else {
alert("Invalid username or password!");
}
}
});
}
</script>
</body>
</html>
```
后端代码:
```php
<?php
$username = $_POST["username"];
$password = $_POST["password"];
$servername = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "mydb";
$conn = mysqli_connect($servername, $dbusername, $dbpassword, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
echo "success";
} else {
echo "failure";
}
mysqli_close($conn);
?>
```
这是一个简单的登录系统,前端使用了Bootstrap框架进行美化,后端使用了PHP和MySQL进行验证。当用户输入用户名和密码并点击登录按钮时,前端会将数据发送给后端,后端会查询数据库中是否存在该用户,并返回相应的结果。如果验证成功,则跳转到主页,否则弹出错误提示框。