加入mysql数据库实现完整的登录注册功能
功能简介:
用户有用户名(user),手机号(mobile),邮箱(email),密码(password).
user为主键,mobile唯一保证一个手机号只能注册一个用户,邮箱不唯一并且可为空.故这里用户可以使用user和mobile登录,mobile还可以用找回密码,email仅用于找回密码
在注册页面,输入手机号和密码注册用户,若手机号已被注册则显示"该手机号已注册",否则注册成功并跳转到登陆页面,并显示"注册成功请登录"
在登陆页面,输入用户名(或手机号)和密码,有错误则显示"用户不存在"或"密码错误",无误则进入主页
未登录但直接通过主页链接直接访问主页,会被传送到登陆界面;登录后通过主页链接访问主页会进入主页
未完善功能:
找回密码功能;手机号验证功能,注册时验证手机号真实性(即发送验证码)
页面展示:
登录页面
注册页面
用户协议页面
主页
代码部分:
python flask部分的代码web_login.py
(在用户注册的函数register()中偷了个懒,将手机号暂且同时作为用户名)
查看代码
from flask import Flask, render_template, request, redirect, url_for, session, flash
from sql_op import SQL
sql=SQL()
app = Flask(__name__)
app.secret_key='QWERTYUIOP'#对用户信息加密(使用session的前提)
@app.route('/login', methods=['GET', 'POST'])
def login():
#如果是get请求，跳转到登录网址
if request.method == 'GET':
return render_template('登录css.html')
#获取post信息
#print(request.form)
username = request.form.get('username')
user_set = sql.sql_select(username=username)
password = request.form.get('password')
#判断用户是否存在
if user_set == None:
print('用户不存在')
return render_template('登录css.html',msg='用户不存在')
#判断密码是否正确
elif user_set['password'] != password:
print('密码错误')
return render_template('登录css.html',msg='密码错误')
#username 这个变量的值存储到会话对象 session 的 'user_info' 键下。这样做的目的是为了跨请求保持用户信息
session['user_info']=username
return redirect('/home')
@app.route('/register', methods=['GET', 'POST'])
def register():
#如果是get请求，跳转到注册网址
if request.method == 'GET':
return render_template('注册css.html')
#获取post信息
#print(request.form)
mobile = request.form.get('mobile')
user_set = sql.sql_select(mobile=mobile)
if user_set != None:
print('该手机号已注册')
return render_template('注册css.html',msg='该手机号已注册')
password = request.form.get('password')
#插入数据库
sql.sql_insert(username=mobile,password=password,mobile=mobile)
return render_template('登录css.html',msg2='注册成功请登录')
@app.route('/用户协议.html', methods=['GET', 'POST'])
def user_agreement():
return render_template('用户协议.html')
@app.route('/home', methods=['GET', 'POST'])
def home():
user_info=session.get('user_info')
if not user_info:
print('请先登录')
return redirect('/login')
return '欢迎登录成功来到主页'
@app.route('/', methods=['GET', 'POST'])
def default():
return redirect('/login')
if __name__ == '__main__':
#app.secret_key = 'super secret key'
app.run(debug=True)python 封装SQL类代码sql_op.py
查看代码
import pymysql
class SQL:
def __init__(self):
#链接数据库
self.conn = pymysql.connect(host='127.0.0.1',port=3306, user='root', password='mysql', db='graduate_pj', charset='utf8')
self.cursor = self.conn.cursor(cursor=pymysql.cursors.DictCursor)
def sql_insert(self,username,password,mobile,email=''):
#执行插入sql语句
self.cursor.execute('insert into user_table values(%s,%s,%s,%s)',[username,mobile,email,password])
self.conn.commit()
def sql_select(self,username='',mobile=''):
#执行查询sql语句
self.cursor.execute('select * from user_table where user = %s or mobile = %s',[username,mobile])
#获取查询结果
result = self.cursor.fetchone()
return result
if __name__ == '__main__':
sql = SQL()
#sql.sql_insert('2233','13020616145','2337519167@qq.com','123qwe')
sql.sql_select('2233')登录css.html代码
查看代码
<!--该界面由bootstrap3.4的css样式的表单为主体修改而来-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的登录页面</title>
<!--flask项目中引入的css文件的(flask项目的css文件的路径为在static目录下)-->
<link rel="stylesheet"
href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.account{
/*宽度和高度*/
width: 500px;
/*边框*/
border: 1px solid rgb(102, 97, 97);
/*左右居中*/
margin-left: auto;
margin-right: auto;
/*上边距*/
margin-top: 100px;
/*内边距*/
padding: 20px 40px;
/*阴影 水平方向 垂直方向 模糊距离*/
box-shadow: 5px 5px 5px rgba(88, 88, 88, 0.5);
}
.account h3{
/*文本居中*/
text-align: center;
/*加粗*/
font-weight: bold;
}
#error{
color: red;
margin: 10px
}
#great{
color: rgb(0, 255, 0);
margin: 10px
}
</style>
</head>
<body>
<div class="account">
<!--form表单-->
<form action="/login" method="post" onsubmit="return validateForm2()">
<h3>用户登录</h3>
<!-- 用户名输入框 -->
<div class="form-group">
<label>用户名</label>
<input class="form-control" id="Username"
placeholder="请输入用户名/手机号" name="username">
</div>
<!-- 密码输入框 -->
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control"
id="Password" placeholder="请输入密码"
name="password">
</div>
<!-- 协议及同意复选框 -->
<div class="checkbox">
<a href="用户协议.html">《某某协议》</a>
<label>
<input type="checkbox" name="agree" id="agreementCheckbox">我已详细阅读此协议
</label>
</div>
<div id="error">{{msg}}</div>
<div id="great">{{msg2}}</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary">登 录</button>
</form>
<!--注册页面-->
<a href="/register">去注册</a>
</div>
<script>
function validateForm2() {
// 验证用户名和密码是否为空
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
var error = document.getElementById("error");
if (!username || !password) {
error.innerHTML = "用户名和密码不能为空";
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
error.innerHTML = '请先同意用户协议';
return false;
}
// 通过所有验证，允许提交表单
return true;
}
function validateForm() {
// 验证用户名和密码是否为空
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
if (!username || !password) {
alert('用户名和密码不能为空');
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
alert('请先同意用户协议');
return false;
}
// 通过所有验证，允许提交表单
return true;
}
</script>
</body>
</html>注册css.html代码
查看代码
<!--该界面由bootstrap3.4的css样式的表单为主体修改而来-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的注册页面</title>
<!--flask项目中引入的css文件的(flask项目的css文件的路径为在static目录下)-->
<link rel="stylesheet"
href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.account{
/*宽度和高度*/
width: 500px;
/*边框*/
border: 1px solid rgb(102, 97, 97);
/*左右居中*/
margin-left: auto;
margin-right: auto;
/*上边距*/
margin-top: 100px;
/*内边距*/
padding: 20px 40px;
/*阴影 水平方向 垂直方向 模糊距离*/
box-shadow: 5px 5px 5px rgba(88, 88, 88, 0.5);
}
.account h3{
/*文本居中*/
text-align: center;
/*加粗*/
font-weight: bold;
}
#error{
color: red;
margin: 10px
}
</style>
</head>
<body>
<div class="account">
<!--form表单-->
<form action="/register" method="post" onsubmit="return validateForm2()">
<h3>用户注册</h3>
<!-- 用户名输入框 -->
<div class="form-group">
<label>手机号</label>
<input class="form-control" id="Mobile"
placeholder="请输入手机号" name="mobile">
</div>
<!-- 密码输入框 -->
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control"
id="Password" placeholder="请输入密码"
name="password">
</div>
<!-- 协议及同意复选框 -->
<div class="checkbox">
<a href="用户协议.html">《某某注册协议》</a>
<label>
<input type="checkbox" name="agree" id="agreementCheckbox">我已详细阅读此协议
</label>
</div>
<div id="error">{{msg}}</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary">注 册</button>
</form>
<!--登录页面-->
<a href="/login">去登录</a>
</div>
<script>
function validateForm2() {
// 验证用户名和密码是否为空
var mobile = document.getElementById("Mobile").value;
var password = document.getElementById("Password").value;
var error = document.getElementById("error");
if (!mobile || !password) {
error.innerHTML = "用户名和密码不能为空";
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
error.innerHTML = '请先同意用户协议';
return false;
}
// 通过所有验证，允许提交表单
return true;
}
</script>
</body>
</html>用户协议.html代码
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户协议</title>
</head>
<body>
<!--用户协议内容-->
<h1>用户协议</h1>
<p>您的手机号暂时作为用户名(暂时就这些)</p>
</body>
</html>sql数据库创建表格
Create table user_table ( user VARCHAR(255) PRIMARY KEY, mobile VARCHAR(15) UNIQUE NOT NULL, email VARCHAR(255), password VARCHAR(18) NOT NULL );
