本文使用创作助手。
以下是一个使用Python和Flask框架实现的简单网站代码，用于处理用户的注册和登录逻辑，并将注册信息保存在SQLite数据库中：
from flask import Flask, render_template, request, redirect, session, flash
import re
import sqlite3
app = Flask(__name__)
app.secret_key = 'secret_key'
# 创建数据库连接
conn = sqlite3.connect('users.db')
cursor = conn.cursor()
cursor.execute('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, password TEXT)')
conn.commit()
@app.route('/')
def index():
if 'username' in session:
return redirect('/shopping-website')
else:
return redirect('/login')
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
# 在数据库中查找匹配的用户名和密码
cursor.execute('SELECT * FROM users WHERE username=? AND password=?', (username, password))
user = cursor.fetchone()
if user:
session['username'] = username
return redirect('/shopping-website')
else:
flash('登录失败，请检查用户名和密码')
return render_template('login.html')
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
# 使用正则表达式验证用户名和密码格式
username_pattern = re.compile(r'^[a-zA-Z0-9_-]{3,16}$')
password_pattern = re.compile(r'^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$')
if not username_pattern.match(username):
flash('用户名格式错误，请输入3到16位的字母、数字、下划线或破折号')
elif not password_pattern.match(password):
flash('密码格式错误，请输入至少8位的包含至少一个大写字母、一个小写字母和一个数字的密码')
else:
# 将注册信息插入数据库
cursor.execute('INSERT INTO users (username, password) VALUES (?, ?)', (username, password))
conn.commit()
flash('注册成功，请登录')
return redirect('/login')
return render_template('register.html')
@app.route('/shopping-website')
def shopping_website():
if 'username' in session:
return render_template('shopping_website.html')
else:
return redirect('/login')
@app.route('/logout')
def logout():
session.pop('username', None)
flash('已退出登录')
return redirect('/login')
if __name__ == '__main__':
app.run(debug=True)
在上述代码中，我们使用Flask框架创建了一个简单的应用，并使用SQLite数据库来存储用户注册信息。页面模板被放置在templates文件夹中（需要创建该文件夹并将页面模板放入其中）。在/login和/register路由中，我们使用正则表达式验证用户名和密码的格式。如果验证通过，将用户信息插入数据库；否则，显示相应的错误消息。在/shopping-website路由中，只有在用户登录后才能访问购物网站的内容。可以使用{{ session.username }}在页面模板中显示当前登录的用户名。
注意：在实际环境中，为了更好的安全性，建议使用哈希算法对用户密码进行加密存储。此示例仅为演示目的，未进行加密处理。
以下是更新的index.html文件，添加了用于储存用户注册信息的文本文档，并使用正则表达式验证用户名和密码的格式：
<!DOCTYPE html>
<html>
<head>
<title>登录/注册</title>
<style>
body {
background-color: #f1f1f1;
padding: 20px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.menu {
background-color: #333;
padding: 10px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu ul li {
float: left;
margin-right: 10px;
}
.menu ul li a {
color: #fff;
text-decoration: none;
padding: 5px;
}
.menu ul li a:hover {
background-color: #555;
}
.login-container,
.register-container {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.form-group input[type="text"],
.form-group input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-group input[type="submit"]:hover {
background-color: #45a049;
}
.shopping-website {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
display: none;
}
.shopping-website h2 {
color: #333;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商店</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div id="login-container" class="login-container">
<h1>登录</h1>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
</div>
<div class="form-group">
<input type="button" value="登录" onclick="login()">
</div>
</form>
</div>
<div id="register-container" class="register-container">
<h1>注册</h1>
<form>
<div class="form-group">
<label for="reg_username">用户名</label>
<input type="text" id="reg_username" name="reg_username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="reg_password">密码</label>
<input type="password" id="reg_password" name="reg_password" placeholder="请输入密码">
</div>
<div class="form-group">
<input type="button" value="注册" onclick="register()">
</div>
</form>
</div>
<div id="shopping-website" class="shopping-website">
<h2>购物网站</h2>
<!-- 在这里放置购物网站的内容 -->
</div>
<script>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 读取注册信息文本文档并比对
fetch('users.txt')
.then(response => response.text())
.then(data => {
var users = data.split('\n');
var validUser = false;
for (var i = 0; i < users.length; i++) {
var user = users[i].split(',');
if (user[0] === username && user[1] === password) {
validUser = true;
break;
}
}
if (validUser) {
showShoppingWebsite();
} else {
alert("登录失败，请检查用户名和密码");
}
})
.catch(error => alert("登录失败，请稍后再试"));
}
function register() {
var username = document.getElementById("reg_username").value;
var password = document.getElementById("reg_password").value;
// 使用正则表达式验证用户名和密码格式
var usernamePattern = /^[a-zA-Z0-9_-]{3,16}$/;
var passwordPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
if (!usernamePattern.test(username)) {
alert("用户名格式错误，请输入3到16位的字母、数字、下划线或破折号");
return;
}
if (!passwordPattern.test(password)) {
alert("密码格式错误，请输入至少8位的包含至少一个大写字母、一个小写字母和一个数字的密码");
return;
}
// 将注册信息储存至文本文档
fetch('users.txt', {
method: 'POST',
headers: {
'Content-Type': 'text/plain'
},
body: username + ',' + password + '\n'
})
.then(response => {
if (response.ok) {
alert("注册成功，请登录");
clearRegisterForm();
} else {
alert("注册失败，请稍后再试");
}
})
.catch(error => alert("注册失败，请稍后再试"));
}
function showShoppingWebsite() {
document.getElementById("login-container").style.display = "none";
document.getElementById("register-container").style.display = "none";
document.getElementById("shopping-website").style.display = "block";
}
function clearRegisterForm() {
document.getElementById("reg_username").value = "";
document.getElementById("reg_password").value = "";
}
</script>
</body>
</html>
在这个示例中，我们使用fetch函数来读取文本文档中的用户注册信息，并使用正则表达式对用户名和密码的格式进行验证。如果用户名和密码符合要求，则将注册信息储存至文本文档，并提示注册成功。如果登录时输入的用户名和密码与文本文档中的信息匹配，则显示购物网站内容。
请注意，这只是一个简单的示例，实际上，您可能需要使用后端服务器来处理用户注册和登录的逻辑，并将用户信息储存在数据库中。此示例中使用的文本文档只是为了演示目的。