使用python,MySQL,HTML,css,JavaScript等编程语言,完成一个注册登录界面
时间: 2024-05-12 16:13:08 浏览: 165
all lessons in ebay
好的,以下是一个简单的注册登录界面的示例代码,使用Python Flask框架、MySQL数据库和HTML/CSS/JavaScript编程语言:
1. 创建MySQL数据库
首先需要在MySQL中创建一个名为“users”的数据库,并在其中创建一个名为“users”的表,表格包含以下字段:
- id:自增长的整数类型,作为主键。
- username:varchar类型,用户名。
- password:varchar类型,密码。
可以使用以下SQL语句在MySQL中创建该表:
```
CREATE DATABASE users;
USE users;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(50) NOT NULL
);
```
2. 创建Python Flask应用
安装Python Flask框架和MySQL连接模块pymysql:
```
pip install flask pymysql
```
在Python中编写以下代码,创建一个简单的Flask应用:
```python
from flask import Flask, render_template, request, session, redirect
import pymysql
app = Flask(__name__)
app.secret_key = 'secret_key'
# MySQL数据库配置
db = pymysql.connect(
host='localhost',
user='root',
password='',
db='users',
charset='utf8mb4',
cursorclass=pymysql.cursors.DictCursor
)
# 首页
@app.route('/')
def index():
if 'username' in session:
return 'Hello, ' + session['username'] + '!<br><a href="/logout">Logout</a>'
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 = db.cursor()
cursor.execute('SELECT * FROM users WHERE username=%s AND password=%s', (username, password))
user = cursor.fetchone()
if user:
session['username'] = user['username']
return redirect('/')
else:
return render_template('login.html', error='Invalid username or password!')
else:
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']
cursor = db.cursor()
cursor.execute('SELECT * FROM users WHERE username=%s', (username,))
user = cursor.fetchone()
if user:
return render_template('register.html', error='Username already exists!')
else:
cursor.execute('INSERT INTO users (username, password) VALUES (%s, %s)', (username, password))
db.commit()
session['username'] = username
return redirect('/')
else:
return render_template('register.html')
# 注销
@app.route('/logout')
def logout():
session.pop('username', None)
return redirect('/login')
if __name__ == '__main__':
app.run(debug=True)
```
3. 创建HTML/CSS/JavaScript页面
在templates文件夹下创建login.html和register.html两个页面。
login.html页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
form {
margin: 50px auto;
width: 300px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
display: block;
margin-top: 20px;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<form method="post">
<h1>Login</h1>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</body>
</html>
```
register.html页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
form {
margin: 50px auto;
width: 300px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
display: block;
margin-top: 20px;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
.error {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<form method="post">
<h1>Register</h1>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Register">
</form>
</body>
</html>
```
4. 运行应用
在命令行中运行以下命令启动应用:
```
python app.py
```
在浏览器中访问http://localhost:5000/即可看到登录页面,点击注册按钮即可进入注册页面。注册成功后即可返回首页并显示用户的用户名,点击注销可以退出登录。
阅读全文