登录注册页面的编写涉及前端和后端的开发。以下是一个简单的示例,展示如何编写一个基本的登录注册页面。请注意,这只是一个基本的示例,实际的页面可能会更复杂并包含更多的功能。
前端(HTML + CSS):
<!DOCTYPE html>
<html>
<head>
<title>登录注册页面</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
font-size: 16px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>登录</h2>
<form action="/login" method="post"> <!-- 登录表单提交到后端登录接口 -->
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="登录"> <!-- 登录按钮 -->
</form> <!-- 登录表单结束 -->
</div> <!-- 登录容器结束 -->
<!-- 注册部分 -->
<div class="container"> <!-- 注册容器 -->
<h2>注册</h2> <!-- 注册标题 --> <!-- 注册表单提交到后端注册接口 --> <!-- 注册表单结束 --> <!-- 注册容器结束 --> <!-- 注册按钮 --> <!-- 注册按钮结束 --> <!-- 注册部分结束 --> <!-- 登录注册页面结束 --> <!-- 页脚等其他内容可以添加在这里 --> </body> </html> ``后端(以Python Flask为例):后端代码会处理前端提交的表单数据,并进行相应的逻辑处理,这里以Python Flask为例展示一个简单的后端代码示例,这只是一个简单的示例,实际的后端代码可能需要更多的逻辑和安全性措施。
``pythonfrom flask import Flask, request, render_templatefrom flask_sqlalchemy import SQLAlchemyfrom flask_login import UserMixinfrom werkzeug.security import generate_password_hash, check_password_hashimport osapp = Flask(__name__)app.config[’SQLALCHEMY_DATABASE_URI’] = ’sqlite:////tmp/test.db’db = SQLAlchemy(app)class User(UserMixin, db.Model):id = db.Column(db.Integer, primary_key=True)username = db.Column(db.String(80), unique=True)password_hash = db.Column(db.String(128))@app.route(’/login’, methods=[’POST’])def login():username = request.form[’username’]password = request.form[’password’]user = User.query.filter_by(username=username).first()if user and check_password_hash(user.password_hash, password):return render_template(’success.html’)else:return ’登录失败’ @app.route(’/register’, methods=[’POST’])def register():username = request.form[’username’]password = request.form[’password’]hashed_password = generate_password_hash(password)new_user = User(username=username, password_hash=hashed_password)db.session.add(new_user)db.session.commit()return ’注册成功’@app.route(’/’)def index():return ’’’ <form action="/login" method="post"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <input type="submit" value="登录"> </form> <form action="/register" method="post"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <input type="submit" value="注册"> </form> ’’’if **name