一、代码解析
完整的代码与文件夹应该这样放置：
1、文件解释
（1）data文件夹是数据库文件夹，可以在python中通过sqlite访问数据库，里边存放着账号与密码。
（2）static里边存放的是HTML的规范文件（以css为后缀的文件），以及静态页面跳转文件（以js结尾的文件。）
（3）templtes里边存放html文件
（4）app.py为后端连接的代码。
二、完整代码
完整代码在：代码链接
1、app.py
from flask import Flask, render_template, request, redirect, url_for, session
import sqlite3
# render_template：用于渲染HTML模板
# request:用于处理HTTP请求
# redirect：用于重定向到其他路由
# url_for：用于生成URL
# session：用于管理用户会话
# sqlite3：用于与SQLite数据库进行交互
app = Flask(__name__) # 创建一个Flask使用实例
app.secret_key = 'your_secret_key' # 设置一个密钥用于session
@app.route('/', methods=['GET', 'POST']) # 定义一个路由，处理'\'路径的GET和POST请求
def index():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
action = request.form['action']
print("username = ", username)
if action == 'login':
print("开始登录")
with sqlite3.connect('data/users.db') as conn:
cursor = conn.cursor()
cursor.execute('SELECT * FROM users WHERE username=? AND password=?', (username, password))
user = cursor.fetchone()
if user:
# 如果获得的username与password匹配，将其保存到session中，并渲染success.html模板
session['username'] = username
# return redirect(url_for('success'))
return render_template("success.html", username=username)
else:
return '登录失败: 用户名或密码错误'
elif action == 'register':
print("开始注册！")
with sqlite3.connect('data/users.db') as conn:
cursor = conn.cursor()
try:
cursor.execute('INSERT INTO users (username, password) VALUES (?, ?)', (username, password))
conn.commit()
return redirect(url_for('index'))
except sqlite3.IntegrityError:
return '注册失败: 用户名已存在'
return render_template('index.html') # 如果是GET请求，渲染“index.html”模板
@app.route('/success') # 定义一个路由，处理'/success'路径的GET请求。
def success():
if 'username' in session:
# 如果username存在，那么就渲染success.html模板，并传递用户名
username = session['username']
return render_template('success.html', username=username)
return redirect(url_for('index'))
@app.route('/submit', methods=['POST'])
def submit():
if 'username' not in session:
return redirect(url_for('index')) # 确保用户已登录
employee_id = request.form['employeeId']
factory_area = request.form['factoryArea']
# 将输入的数据传递回模板
return render_template('success.html', username=session['username'], employee_id=employee_id,
factory_area=factory_area)
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True, port=7000)
2、index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<div class="form-container" id="login-form">
<h2>登录</h2>
<form action="/" method="POST">
<input type="hidden" name="action" value="login">
<label for="login-username">用户名:</label>
<input type="text" id="login-username" name="username" required>
<label for="login-password">密码:</label>
<input type="password" id="login-password" name="password" required>
<button type="submit">登录</button>
<p>还没有账号？ <a href="#" id="switchToRegister">注册</a></p>
</form>
</div>
<div class="form-container hidden" id="register-form">
<h2>注册</h2>
<form action="/" method="POST">
<input type="hidden" name="action" value="register">
<label for="register-username">username:</label>
<input type="text" id="register-username" name="username" required>
<label for="register-password">密码:</label>
<input type="password" id="register-password" name="password" required>
<button type="submit">注册</button>
<p>已有账号？ <a href="#" id="switchToLogin">登录</a></p>
</form>
</div>
</div>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
3、style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column; /* 确保flex-direction为column */
}
.container {
width: 300px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.form-container {
display: flex;
flex-direction: column;
}
.hidden {
display: none;
}
h2 {
margin-top: 0;
}
label {
display: block; /* 确保label为块级元素 */
margin-top: 10px;
}
input {
margin-top: 5px;
padding: 8px;
font-size: 14px;
width: 100%; /* 确保input占满容器宽度 */
box-sizing: border-box; /* 确保padding和border不会影响宽度 */
}
button {
margin-top: 15px;
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%; /* 确保button占满容器宽度 */
}
button:hover {
background-color: #0056b3;
}
p {
margin-top: 10px;
font-size: 14px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
4、styles1.css
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
/* 容器样式 */
.container {
max-width: 1000px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 标题样式 */
.input_title {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: 30px;
}
.output_title {
text-align: left;
color: #333;
margin-bottom: 10px;
font-size: 30px;
}
/* 输入框样式 */
.input-container {
margin-bottom: 20px;
}
.input-group {
display: flex; /* 使用 Flexbox */
align-items: center; /* 垂直居中对齐 */
margin-bottom: 10px; /* 每组输入框之间的间距 */
}
.label {
margin-right: 10px; /* 标签与输入框之间的间距 */
font-weight: bold;
color: #555;
}
.input-field {
flex: 1; /* 输入框占据剩余空间 */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
/* 提交按钮样式 */
.submit-button {
width: 50%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-button:hover {
background-color: #0056b3;
}
/* 输出框样式 */
.output-field {
width: 100%; /* 设置宽度为100% */
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 4px; /* 圆角 */
box-sizing: border-box; /* 包含内边距和边框在内的宽度 */
font-size: 16px; /* 字体大小 */
color: #333; /* 字体颜色 */
background-color: #f9f9f9; /* 背景颜色 */
resize: none; /* 禁止调整大小（如果是 textarea） */
}
5、script.js
document.addEventListener('DOMContentLoaded', () => {
console.log("DOMContentLoaded event fired");
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
const switchToRegister = document.getElementById('switchToRegister');
const switchToLogin = document.getElementById('switchToLogin');
// 检查元素是否存在
if (!loginForm || !registerForm || !switchToRegister || !switchToLogin) {
console.error("One or more elements not found");
return;
}
console.log("Register link clicked")
console.log("loginForm:", loginForm);
console.log("registerForm:", registerForm);
console.log("switchToRegister:", switchToRegister);
console.log("switchToLogin:", switchToLogin);
// 给"注册"链接添加点击事件监听器
switchToRegister.addEventListener('click', (e) => {
console.log("Register link clicked");
e.preventDefault();
loginForm.classList.add('hidden');
registerForm.classList.remove('hidden');
});
// 给登录链接添加点击事件监听器
switchToLogin.addEventListener('click', (e) => {
console.log("Login link clicked");
e.preventDefault();
registerForm.classList.add('hidden'); // 隐藏注册表单
loginForm.classList.remove('hidden');
});
});
扫一扫
1085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
