编写一个登陆界面,再编写一个欢迎登陆的界面,在欢迎登陆界面中对密码进行判断,如果密码等于123456,则显示欢迎,否则告知密码错误。
时间: 2024-09-29 14:09:33 浏览: 44
编写一个简单的登录界面和欢迎界面通常涉及到前端用户界面设计和后端逻辑处理。这里是一个基本的伪代码示例,展示如何在JavaScript(假设在一个web应用中)和后端语言如Python(假设使用Flask框架)来实现这个功能:
**前端HTML(登录界面)**
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<button type="submit">Login</button>
</form>
<!-- 欢迎页面将通过JavaScript跳转 -->
<div id="welcome" style="display:none;">
<p id="greeting"></p>
</div>
<script src="login.js"></script>
</body>
</html>
```
**前端JavaScript (login.js)**
```javascript
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
fetch('/check_password', {
method: 'POST',
body: JSON.stringify({ username, password }),
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.text())
.then(data => {
if (data === 'success') {
showWelcome();
} else {
alert('Incorrect password');
}
});
});
function showWelcome() {
document.getElementById('welcome').style.display = 'block';
document.getElementById('greeting').innerText = 'Welcome!';
}
```
**后端Python (Flask)**
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/check_password', methods=['POST'])
def check_password():
received_data = request.get_json()
username = received_data['username']
expected_password = '123456'
if username == 'expected_username' and received_data['password'] == expected_password:
return jsonify({'status': 'success'})
else:
return jsonify({'status': 'error'})
if __name__ == '__main__':
app.run(debug=True)
```
在这个例子中,当用户输入正确的用户名(通常是硬编码在这里或从数据库获取)和密码(此处为123456),后端API会返回一个成功响应,前端JavaScript会隐藏登录界面并显示欢迎信息;如果密码错误,会弹出错误提示。
阅读全文