首次完成数据库登录，注册验证。首次完成，migrate_manager.py迁移多个数据库
This commit is contained in:
Jay
Binary file not shown.
Binary file not shown.
Binary file not shown.
+18
@@ -0,0 +1,18 @@
|
||||
from flask import Flask
|
||||
import config
|
||||
from model import db
|
||||
from route import public, auth, admin
|
||||
|
||||
app = Flask(__name__)
|
||||
app.config.from_object(config)
|
||||
db.init_app(app)
|
||||
|
||||
app.register_blueprint(public)
|
||||
app.register_blueprint(auth)
|
||||
app.register_blueprint(admin)
|
||||
|
||||
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True,port=8000)
|
||||
@@ -0,0 +1,18 @@
|
||||
SECRET_KEY = 'dev-secret-key'
|
||||
SQLALCHEMY_TRACK_MODIFICATIONS = False
|
||||
|
||||
|
||||
'''仅开发使用'''
|
||||
ADMIN = 'admin'
|
||||
ADMIN_PASSWORD = 'admin'
|
||||
|
||||
'''ORM'''
|
||||
DB_DRIVER = 'mysqldb'
|
||||
DB_USER = 'test'
|
||||
DB_PASSWORD = 'test'
|
||||
DB_HOST = '127.0.0.1'
|
||||
DB_PORT = 3306
|
||||
DB_NAME = 'test'
|
||||
SQLALCHEMY_DATABASE_URI = (
|
||||
f'mysql+{DB_DRIVER}://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}'
|
||||
)
|
||||
@@ -0,0 +1,6 @@
|
||||
from model.db import db
|
||||
from sqlalchemy.orm import mapped_column
|
||||
|
||||
class Card(db.Model):
|
||||
__tablename__ = 'card'
|
||||
id = mapped_column(db.Integer, primary_key=True)
|
||||
@@ -0,0 +1,9 @@
|
||||
from model.db import db
|
||||
from sqlalchemy.orm import mapped_column
|
||||
|
||||
class User(db.Model):
|
||||
__tablename__ = 'user'
|
||||
id = mapped_column(db.Integer, primary_key=True,autoincrement=True)
|
||||
username = mapped_column(db.String(80), unique=True, nullable=False)
|
||||
email = mapped_column(db.String(120), unique=True, nullable=True)
|
||||
password = mapped_column(db.String(200), unique=True, nullable=False)
|
||||
@@ -0,0 +1,6 @@
|
||||
from model.db import db
|
||||
from model.User import User
|
||||
from model.Card import Card
|
||||
|
||||
|
||||
__all__ = ['db','User','Card']
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,13 @@
|
||||
from sqlalchemy.orm import DeclarativeBase
|
||||
from flask_sqlalchemy import SQLAlchemy
|
||||
from sqlalchemy import MetaData
|
||||
class DataBase(DeclarativeBase):
|
||||
meta = MetaData(naming_convention={
|
||||
"ix": "ix_%(column_0_label)s",
|
||||
"uq": "uq_%(table_name)s_%(column_0_name)s",
|
||||
"ck": "ck_%(table_name)s_%(column_0_name)s",
|
||||
"fk": "fk_%(table_name)s_%(column_0_name)s",
|
||||
"pk": "pk_%(table_name)s"
|
||||
})
|
||||
|
||||
db = SQLAlchemy()
|
||||
@@ -0,0 +1,5 @@
|
||||
from route.public import public
|
||||
from route.auth import auth
|
||||
from route.admin import admin
|
||||
|
||||
__all__ = ['public', 'auth', 'admin']
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,11 @@
|
||||
from flask import Blueprint, request, render_template
|
||||
|
||||
admin = Blueprint('admin', __name__, url_prefix='/admin')
|
||||
|
||||
|
||||
@admin.route('/', methods=['GET', 'POST'])
|
||||
def admin_index():
|
||||
if request.method == "POST":
|
||||
username = request.form["username"]
|
||||
password = request.form["password"]
|
||||
return render_template("admin/admin_index.html")
|
||||
@@ -0,0 +1,34 @@
|
||||
from flask import Blueprint, request, render_template
|
||||
from model.db import db
|
||||
from model.User import User
|
||||
|
||||
auth = Blueprint('auth', __name__)
|
||||
|
||||
|
||||
@auth.route('/login', methods=['GET', 'POST'])
|
||||
def login():
|
||||
if request.method == "POST":
|
||||
username = request.form["username"]
|
||||
password = request.form["password"]
|
||||
user = db.session.execute(db.select(User).where(User.username == username)).scalar()
|
||||
if user is None:
|
||||
return "Username or Password is incorrect"
|
||||
if user.password != password:
|
||||
return "Username or Password is incorrect"
|
||||
# 登录成功
|
||||
return f"Login Successful {username}:{password}"
|
||||
|
||||
return render_template("public/user/login.html")
|
||||
|
||||
|
||||
@auth.route('/register', methods=["POST", "GET"])
|
||||
def register():
|
||||
if request.method == "POST":
|
||||
username = request.form["username"]
|
||||
password = request.form["password"]
|
||||
email = request.form["email"]
|
||||
# return f"Register Successful {username}:{password}:{email}"
|
||||
new_user = User(username=username, password=password, email=email)
|
||||
db.session.add(new_user)
|
||||
db.session.commit()
|
||||
return render_template("public/user/register.html")
|
||||
@@ -0,0 +1,21 @@
|
||||
from flask import Blueprint, render_template
|
||||
|
||||
public = Blueprint('public', __name__)
|
||||
|
||||
|
||||
@public.route('/')
|
||||
def index():
|
||||
return render_template("public/index.html")
|
||||
|
||||
|
||||
@public.route('/about')
|
||||
def about():
|
||||
return render_template("public/about.html")
|
||||
|
||||
@public.route("/terms")
|
||||
def terms():
|
||||
return "terms Page"
|
||||
|
||||
@public.route("/privacy")
|
||||
def privacy():
|
||||
return "privacy Page"
|
||||
@@ -0,0 +1,260 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", "Microsoft YaHei", -apple-system, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 65%);
|
||||
color: #e2e8f0;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
padding: 40px 36px 30px;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.shield-badge {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
|
||||
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
|
||||
}
|
||||
|
||||
.shield-badge svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.admin-header .subtitle {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-wrap input {
|
||||
width: 100%;
|
||||
padding: 12px 44px 12px 14px;
|
||||
font-size: 15px;
|
||||
color: #f1f5f9;
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.input-wrap input::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.input-wrap input:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.toggle-pwd {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.toggle-pwd:hover {
|
||||
color: #cbd5e1;
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.toggle-pwd svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.capslock-hint {
|
||||
display: none;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.capslock-hint.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
display: none;
|
||||
background: rgba(220, 38, 38, 0.14);
|
||||
border: 1px solid rgba(220, 38, 38, 0.4);
|
||||
color: #fca5a5;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 4px;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.submit-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.demo-tip {
|
||||
margin-top: 22px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px dashed rgba(148, 163, 184, 0.2);
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.success-panel {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.success-panel .check-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0 auto 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
border: 2px solid rgba(34, 197, 94, 0.5);
|
||||
}
|
||||
|
||||
.success-panel .check-icon svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
stroke: #22c55e;
|
||||
stroke-width: 3;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.success-panel h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.success-panel p {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-top: 24px;
|
||||
padding: 10px 28px;
|
||||
font-size: 14px;
|
||||
color: #cbd5e1;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.admin-card {
|
||||
padding: 32px 22px 24px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", "Microsoft YaHei", -apple-system, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
display: none;
|
||||
background: #fdecea;
|
||||
color: #c0392b;
|
||||
font-size: 13px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px 32px;
|
||||
}
|
||||
|
||||
.login-card h1 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.login-card .subtitle {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-options label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-options a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.form-options a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.register-link a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.register-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.register-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px 32px;
|
||||
}
|
||||
|
||||
.register-card h1 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.register-card .subtitle {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.form-group .hint {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.agreement input {
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.agreement a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.agreement a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-link {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.login-link a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
var form = document.getElementById('adminLoginForm');
|
||||
var errorBox = document.getElementById('errorBox');
|
||||
var submitBtn = document.getElementById('submitBtn');
|
||||
var successPanel = document.getElementById('successPanel');
|
||||
var passwordInput = document.getElementById('password');
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var username = document.getElementById('username').value.trim();
|
||||
var password = passwordInput.value;
|
||||
var errors = [];
|
||||
|
||||
if (!username) {
|
||||
errors.push('用户名不能为空');
|
||||
}
|
||||
if (!password) {
|
||||
errors.push('密码不能为空');
|
||||
} else if (password.length < 6) {
|
||||
errors.push('密码长度至少为 6 位');
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
errorBox.textContent = errors.join('；');
|
||||
errorBox.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
errorBox.style.display = 'none';
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = '登录中…';
|
||||
|
||||
setTimeout(function () {
|
||||
form.style.display = 'none';
|
||||
document.getElementById('welcomeName').textContent = username;
|
||||
successPanel.style.display = 'block';
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = '登 录';
|
||||
}, 900);
|
||||
});
|
||||
|
||||
document.getElementById('togglePwd').addEventListener('click', function () {
|
||||
var isHidden = passwordInput.type === 'password';
|
||||
passwordInput.type = isHidden ? 'text' : 'password';
|
||||
this.setAttribute('aria-label', isHidden ? '隐藏密码' : '显示密码');
|
||||
this.style.color = isHidden ? '#3b82f6' : '';
|
||||
});
|
||||
|
||||
function updateCapslockHint(e) {
|
||||
var hint = document.getElementById('capslockHint');
|
||||
var capsOn = e.getModifierState && e.getModifierState('CapsLock');
|
||||
hint.classList.toggle('show', !!capsOn);
|
||||
}
|
||||
passwordInput.addEventListener('keydown', updateCapslockHint);
|
||||
passwordInput.addEventListener('keyup', updateCapslockHint);
|
||||
|
||||
document.getElementById('backBtn').addEventListener('click', function () {
|
||||
successPanel.style.display = 'none';
|
||||
form.style.display = 'block';
|
||||
form.reset();
|
||||
document.getElementById('username').focus();
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
document.getElementById('loginForm').addEventListener('submit', function (e) {
|
||||
var errorBox = document.getElementById('errorBox');
|
||||
var username = document.getElementById('username').value.trim();
|
||||
var password = document.getElementById('password').value;
|
||||
var errors = [];
|
||||
|
||||
if (!username) {
|
||||
errors.push('用户名不能为空');
|
||||
}
|
||||
if (!password) {
|
||||
errors.push('密码不能为空');
|
||||
} else if (password.length < 6) {
|
||||
errors.push('密码长度至少为 6 位');
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
e.preventDefault();
|
||||
errorBox.textContent = errors.join('；');
|
||||
errorBox.style.display = 'block';
|
||||
} else {
|
||||
errorBox.style.display = 'none';
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
document.getElementById('registerForm').addEventListener('submit', function (e) {
|
||||
var errorBox = document.getElementById('errorBox');
|
||||
var username = document.getElementById('username').value.trim();
|
||||
var email = document.getElementById('email').value.trim();
|
||||
var password = document.getElementById('password').value;
|
||||
var confirmPassword = document.getElementById('confirmPassword').value;
|
||||
var agree = document.getElementById('agree').checked;
|
||||
var errors = [];
|
||||
|
||||
if (!username) {
|
||||
errors.push('用户名不能为空');
|
||||
} else if (username.length < 3 || username.length > 20) {
|
||||
errors.push('用户名长度需在 3-20 个字符之间');
|
||||
}
|
||||
|
||||
if (!email) {
|
||||
errors.push('邮箱不能为空');
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
errors.push('邮箱格式不正确');
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
errors.push('密码不能为空');
|
||||
} else if (password.length < 6) {
|
||||
errors.push('密码长度至少为 6 位');
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
errors.push('两次输入的密码不一致');
|
||||
}
|
||||
|
||||
if (!agree) {
|
||||
errors.push('请先阅读并同意服务条款和隐私政策');
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
e.preventDefault();
|
||||
errorBox.textContent = errors.join('；');
|
||||
errorBox.style.display = 'block';
|
||||
} else {
|
||||
errorBox.style.display = 'none';
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<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='css/admin.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main class="admin-card">
|
||||
<header class="admin-header">
|
||||
<div class="shield-badge" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2 4 5v6c0 5.25 3.4 10.15 8 11 4.6-.85 8-5.75 8-11V5l-8-3zm-1 14.5-3.5-3.5 1.41-1.41L11 13.67l4.59-4.58L17 10.5l-6 6z"/></svg>
|
||||
</div>
|
||||
<h1>后台管理系统</h1>
|
||||
<p class="subtitle">ADMIN CONSOLE</p>
|
||||
</header>
|
||||
|
||||
<div id="errorBox" class="error-msg" role="alert"></div>
|
||||
|
||||
<form id="adminLoginForm" method="post" action="/admin/login" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<div class="input-wrap">
|
||||
<input type="text" id="username" name="username"
|
||||
placeholder="请输入管理员用户名"
|
||||
autocomplete="username" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<div class="input-wrap">
|
||||
<input type="password" id="password" name="password"
|
||||
placeholder="请输入密码（至少 6 位）"
|
||||
autocomplete="current-password" required
|
||||
minlength="6">
|
||||
<button type="button" class="toggle-pwd" id="togglePwd" aria-label="切换密码可见性">
|
||||
<svg id="eyeIcon" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="capslock-hint" id="capslockHint">提示：大写锁定（Caps Lock）已开启</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn" id="submitBtn" data-primary-action>登 录</button>
|
||||
</form>
|
||||
|
||||
<section class="success-panel" id="successPanel">
|
||||
<div class="check-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="4 12.5 9.5 18 20 6.5"/></svg>
|
||||
</div>
|
||||
<h2>登录成功</h2>
|
||||
<p>欢迎，<span id="welcomeName">管理员</span>！<br>本页面为前端登录演示，未连接真实账号系统。</p>
|
||||
<button type="button" class="back-btn" id="backBtn">返回登录</button>
|
||||
</section>
|
||||
|
||||
<p class="demo-tip">演示提示：输入任意用户名和 6 位以上密码即可体验完整登录流程。<br>接入真实后端时，将表单 action 替换为实际登录接口地址，并移除脚本中的演示拦截逻辑即可。</p>
|
||||
</main>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>关于我 | About Me</title>
|
||||
<!-- 引入 GitHub 风格的图标库 (Octicons) -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-light.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/@primer/octicons/19.8.0/octicons.min.css">
|
||||
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<!-- 模拟头像 -->
|
||||
<div class="avatar">
|
||||
<!-- 使用 Octicon 中的 MarkGithub 图标 -->
|
||||
<svg aria-hidden="true" height="48" viewBox="0 0 16 16" version="1.1" width="48" data-view-component="true" class="octicon octicon-mark-github">
|
||||
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1>关于作者</h1>
|
||||
|
||||
<!-- 按钮链接 -->
|
||||
<a href="https://www.github.com" target="_blank" class="btn btn-github">
|
||||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon">
|
||||
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
|
||||
</svg>
|
||||
GitHub Profile
|
||||
</a>
|
||||
|
||||
<a href="mailto:yourname@example.com" class="btn btn-email">
|
||||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-mail">
|
||||
<path d="M1.75 2A1.75 1.75 0 0 0 0 3.75v.736c0 .14.068.271.182.352l7.061 4.967a1.75 1.75 0 0 0 2.014 0l7.061-4.967A.438.438 0 0 0 16.5 4.486V3.75A1.75 1.75 0 0 0 14.75 2H1.75Zm13 3.384-6.47 4.544a.25.25 0 0 1-.288 0L1.5 5.385v2.865A1.75 1.75 0 0 0 3.25 10h10a1.75 1.75 0 0 0 1.75-1.75V5.384Z"></path>
|
||||
</svg>
|
||||
发送邮件
|
||||
</a>
|
||||
|
||||
<!-- 创作经历内容 -->
|
||||
<div class="content">
|
||||
<h3>创作经历</h3>
|
||||
<p>
|
||||
我是一名热爱开源的开发者，长期活跃于 GitHub 社区。
|
||||
在这里，我分享我的代码片段、开源项目以及技术学习笔记。
|
||||
我相信代码可以改变世界，也希望通过我的项目能为社区带来一些微小的价值。
|
||||
</p>
|
||||
<p>
|
||||
<strong>主要技术栈：</strong> Python, Flask, HTML/CSS, JavaScript
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
Index
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<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='css/auth.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main class="login-card">
|
||||
<h1>欢迎登录</h1>
|
||||
<p class="subtitle">请输入您的账号信息</p>
|
||||
|
||||
<div id="errorBox" class="error-msg" role="alert"></div>
|
||||
|
||||
<form id="loginForm" method="post" action="/login" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" name="username"
|
||||
placeholder="请输入用户名"
|
||||
autocomplete="username" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" name="password"
|
||||
placeholder="请输入密码"
|
||||
autocomplete="current-password" required
|
||||
minlength="6">
|
||||
</div>
|
||||
|
||||
<div class="form-options">
|
||||
<label>
|
||||
<input type="checkbox" name="remember"> 记住我
|
||||
</label>
|
||||
<a href="/forgot-password">忘记密码？</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">登 录</button>
|
||||
</form>
|
||||
|
||||
<p class="register-link">还没有账号？<a href="/register">立即注册</a></p>
|
||||
</main>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/login.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>个人主页</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<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='css/auth.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/register.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main class="register-card">
|
||||
<h1>创建账号</h1>
|
||||
<p class="subtitle">填写以下信息完成注册</p>
|
||||
|
||||
<div id="errorBox" class="error-msg" role="alert"></div>
|
||||
|
||||
<form id="registerForm" method="post" action="/register" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" name="username"
|
||||
placeholder="3-20 个字符"
|
||||
autocomplete="username" required
|
||||
minlength="3" maxlength="20">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input type="email" id="email" name="email"
|
||||
placeholder="请输入邮箱地址"
|
||||
autocomplete="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" name="password"
|
||||
placeholder="至少 6 位"
|
||||
autocomplete="new-password" required
|
||||
minlength="6">
|
||||
<p class="hint">建议使用字母、数字和符号的组合，提高安全性</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword">确认密码</label>
|
||||
<input type="password" id="confirmPassword" name="confirmPassword"
|
||||
placeholder="请再次输入密码"
|
||||
autocomplete="new-password" required
|
||||
minlength="6">
|
||||
</div>
|
||||
|
||||
<label class="agreement">
|
||||
<input type="checkbox" id="agree" name="agree" required>
|
||||
<span>我已阅读并同意 <a href="/terms">服务条款</a> 和 <a href="/privacy">隐私政策</a></span>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="submit-btn">注 册</button>
|
||||
</form>
|
||||
|
||||
<p class="login-link">已有账号？<a href="/login">去登录</a></p>
|
||||
</main>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/register.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user