定义一个表单界面,分为账户名和密码登录,后端视图函数对表单上输入的信息进行比对, 账户名为admin密码为123456若正确利用消息闪现提示登陆正确并跳转界面, 将用户名和密码存入session中 若不正确用消息闪现提示用户名或密码错误
时间: 2024-09-23 11:09:09 浏览: 35
在创建一个简单的前端表单界面用于账号登录时,通常涉及HTML、CSS和JavaScript结合后端技术如Python的Django或Flask。以下是步骤概述:
**前端部分 (HTML/CSS/JavaScript):**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<form id="loginForm">
<label for="username">账户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">登录</button>
</form>
<div id="message"></div>
<script src="scripts.js"></script>
</body>
</html>
```
**后端部分 (例如Python-Django):**
```python
from django.shortcuts import render, redirect, HttpResponse
from django.contrib.auth import authenticate, login
def login_view(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
user = authenticate(request, username=username, password=password)
if user is not None and user.is_active:
login(request, user)
# 存储在session中
request.session['username'] = username
return redirect('success_page') # 跳转到成功页面
else:
message = "用户名或密码错误"
return render(request, 'login.html', {'message': message})
else:
return render(request, 'login.html')
```
**前端JavaScript (验证和显示消息):**
```javascript
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 检查并发送Ajax请求到后端
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
})
.then(response => response.json())
.then(data => {
if (data.success) {
// 显示成功消息并跳转
alert('登录成功');
window.location.href = '/success';
} else {
// 显示错误消息
document.getElementById('message').innerText = data.message;
}
})
.catch(error => console.error('Error:', error));
});
```