前期准备
采集肯德基门店的poi信息数据(在主页面部分需要数据)
https://blog.csdn.net/weixin_48913697/article/details/134937076
img1.jpg(登录、注册页面的背景图)
1.建立user表
2. 连接mysql数据库
db.py
import pymysql
def get_connec(): #建立连接
db = pymysql.connect(host='请输入主机地址', user='请输入用户名', password='请输入密码', database='请输入数据库名', port='请输入端口号')
cursor = db.cursor()
return db, cursor
def close_connec(db, cursor): #关闭连接
if cursor:
cursor.close()
if db:
db.close()3.登录
auth.py(查询已注册用户)
from flask import Flask, render_template, request, redirect, flash, session
from werkzeug.security import check_password_hash, generate_password_hash
from db import get_connec, close_connec
app = Flask(__name__)
app.config['SECRET_KEY'] = 'dev'
user_info = []
@app.route('/login', methods=('GET', 'POST'))
def login():
# 增加会话保护机制(未登陆前login的session值为空)
session['login'] = None
if request.method == 'POST':
username = request.form['username'] # 接收form表单传参
password = request.form['password']
if not username:
flash('请输入用户名和密码!', '1')
elif not password:
flash('请输入用户名和密码!', '1')
else:
db, cursor = get_connec()
sql = 'SELECT user_id, password FROM user WHERE binary username=%s' #binary区分用户名大小写
cursor.execute(sql, (username))
user = cursor.fetchone()
if user:
if check_password_hash(user[1], password):
user_info.append(username)
session['login'] = 'OK'
return redirect('/index')
else:
flash('密码输入错误!', '1')
else:
flash('用户名输入错误或不存在!', '1')
close_connec(db, cursor)
return render_template('login.html')login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登陆界面</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style1.css') }}">
</head>
<body>
<div id="maxbox">
<h1>登陆界面</h1>
<h2>请登录</h2>
<div class="inputbox">
<form action="/login" method="post">
<div class="inputText">
<input class="username" type="text" placeholder="用户名" name="username" style="color:white" />
</div>
<div class="inputText">
<input type="password" placeholder="密码" name="password" style="color:white" />
</div>
<input class="inputButton" type="submit" value="登录" />
<p style="color: white">没有账号？<a href="./register" style="color: rgba(22,180,166,0.58)">注册</a></p>
{% for message in get_flashed_messages(category_filter=['1']) %}
<div class="flash" style="color: red">{{ message }}</div>
{% endfor %}
</form>
</div>
</div>
</body>
</html>style1.css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-image: url('img1.jpg');
/* background-image: url(/static/img/1.jpg); */
background-repeat: no-repeat;
/*这里的100% auto 表示将背景图片的长度100%显示，高度自适应*/
background-size: 100% auto;
}
#maxbox {
margin: 0 auto;
margin-top: 200px;
padding: 20px;
/*这里的90表示以不透明度90%显示*/
background-color: #00000090;
text-align: center;
width: 600px;
height: 400px;
border-radius: 10px;
}
#maxbox h1 {
padding: 0;
padding-top: 60px;
color: white;
font-size: 30px;
padding-bottom: 4px;
border-bottom: solid 1px white;
}
#maxbox h2 {
font-weight: 700;
color:white;
}
#maxbox .inputbox {
margin-top: 30px;
}
#maxbox .inputText {
margin-top: 20px;
}
#maxbox .inputText span {
color: white;
font-size: 12px;
}
#maxbox .inputText input {
border: 0;
padding: 6px;
border-bottom: 1px solid white;
/*这里的00表示不透明度为0，即透明显示*/
background-color: #FFFFFF00;
color: white;
}
#maxbox .inputbox .inputButton {
margin: 0;
border: 0;
margin-top: 20px;
width: 145px;
height: 25px;
/*给这个按钮变为圆角边角*/
border-radius: 25px;
color: white;
background-color: #3498db;
}
#sign_up {
margin-top: 50px;
color: white;
font-size: 17px;
}
#sign_up a {
color: #3498db;
}登录页面显示
4.注册
auth.py(插入新注册用户)
@app.route('/register', methods=('GET', 'POST'))
def register():
if request.method == 'POST':
username = request.form['username'] # 接收form表单传参
password = request.form['password']
if not username:
flash('请输入用户名和密码!', '2')
elif not password:
flash('请输入用户名和密码!', '2')
else:
db, cursor = get_connec()
sql1 = 'SELECT user_id, password FROM user WHERE binary username=%s'
cursor.execute(sql1, (username))
user = cursor.fetchone()
if user:
flash('用户名已存在!', '2')
else:
sql2 = 'INSERT INTO user (username, password) VALUES (%s, %s)'
cursor.execute(sql2, (username, generate_password_hash(password)))
db.commit()
flash('注册成功!', '2')
return redirect('/login')
close_connec(db, cursor)
return render_template('register.html')register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册界面</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style1.css') }}">
<script type="text/javascript">
function validate(){
var reg1 = new RegExp("^\\w+$");
var reg2 = new RegExp("^([A-Za-z]+)([0-9]+)$");
var username = document.getElementsByClassName("username");
var password = document.getElementsByClassName("password");
if(!reg1.test(username[0].value)){
document.getElementById('msg1').innerHTML = '用户名由数字、26个英文字母或者下划线组成';
return false;
}
if(!reg2.test(password[0].value)){
document.getElementById('msg2').innerHTML = '密码由数字和26个英文字母组成的字符串';
return false;
}
return true;
}
</script>
</head>
<body>
<div id="maxbox">
<h1>注册界面</h1>
<h2>请注册</h2>
<div class="inputbox">
<form action="/register" method="post" onsubmit="return validate()">
<div class="inputText">
<input class="username" type="text" placeholder="用户名" name="username" style="color:white" />
<br>
<span id="msg1" style="color: red;"></span>
</div>
<div class="inputText">
<input class="password" type="password" placeholder="密码" name="password" style="color:white" />
<br>
<span id="msg2" style="color: red;"></span>
</div>
<input class="inputButton" type="submit" value="注册" />
{% for message in get_flashed_messages(category_filter=['2']) %}
<div class="flash" style="color: red">{{ message }}</div>
{% endfor %}
</form>
</div>
</div>
</body>
</html>注册页面显示
5.主页面
auth.py
@app.route('/index', methods=('GET', 'POST'))
def index():
if session.get('login', None) == None: #判断用户是否登录
return redirect('/login') #若login session值为空，则重定向到登录页面
if user_info:
for i in user_info:
user_ = i # 当用户登陆时显示用户名
else:
user_ = ''
results = ''
if request.method == 'POST':
select = request.form['selected_one'] # 接收form表单传参
query = request.form['query']
db, cursor = get_connec()
if select == '省份':
sql1 = "SELECT name, address, pname, cityname, adname FROM poi WHERE pname=%s"
cursor.execute(sql1, (query))
results = cursor.fetchall()
if results:
flash('查询成功!', '3')
else:
flash('查询失败!', '3')
if select == '城市':
sql2 = "SELECT name, address, pname, cityname, adname FROM poi WHERE cityname=%s"
cursor.execute(sql2, (query))
results = cursor.fetchall()
if results:
flash('查询成功!', '3')
else:
flash('查询失败!', '3')
if select == '区域':
sql3 = "SELECT name, address, pname, cityname, adname FROM poi WHERE adname=%s"
cursor.execute(sql3, (query))
results = cursor.fetchall()
if results:
flash('查询成功!', '3')
else:
flash('查询失败!', '3')
close_connec(db, cursor)
return render_template('index.html', user_info=user_, results=results)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>肯德基</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style2.css') }}"/>
</head>
<body>
<div class="header">
<span class="left">肯 德 基 门 店 查 询</span>
<span class="right">你 好，{{user_info}}!</span>
<span class="right_right"><a href="/login">退出登陆</a></span>
</div>
<div class="container">
<div class="leftside">
<ul>
<li><a href="/data_img1">数据分布图</a></li>
<li><a href ="/data_img2">数据统计图</a></li>
<li class="first"><a href="#">肯德基门店查询</a></li>
</ul>
</div>
<div class="container-fluid">
<h1 class="sub-header">肯 德 基 门 店 查 询 系 统</h1>
<hr>
<div class="table-responsive">
<table class="table-one">
<tbody>
<tr class="one">
<form action="" method="post">
<td><label for="#">请选择查询的方式:(省份/城市/区域)</label> </td>
<td><select name="selected_one">
<option value="省份" selected="selected">省份</option>
<option value="城市">城市</option>
<option value="区域">区域</option>
</select></td>
<td><input class="long" type="text" name="query"></td>
<td><input class="last" type="submit" value="查询" /></td>
{% for query_result in get_flashed_messages(category_filter=['3']) %}
<td><span>查询结果:{{query_result}}</span></td>
{% endfor %}
</form>
</tr>
</tbody>
</table>
<table class="table-two">
<tr class="two">
<td>门店</td>
<td>地址</td>
<td>省份</td>
<td>城市</td>
<td>区域</td>
</tr>
{% for result in results %}
<tr class="three">
<td>{{result[0]}}</td>
<td>{{result[1]}}</td>
<td>{{result[2]}}</td>
<td>{{result[3]}}</td>
<td>{{result[4]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>style2.css
.container {
position: absolute;
width: 100%;
height: 100%;
display: flex;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
.header {
position: relative;
width: 100%;
height: 55px;
background-color: black;
}
.left {
position: absolute;
left: 20px;
font-size: 20px;
line-height: 55px;
color: white;
text-align: center;
}
.right {
position: absolute;
right: 160px;
line-height: 55px;
color: white;
text-align: center;
}
.right_right {
position: absolute;
right: 24px;
line-height: 55px;
color: white;
text-align: center;
}
.leftside {
justify-content: flex-start;
background-color: rgb(245, 245, 245);
/* height: 663px; */
width: 230px;
}
.leftside ul {
height: 663px;
}
.leftside .first {
background-color: rgb(66, 139, 202);
margin-top: 25px;
}
.leftside .first a {
color: white;
}
.leftside {
justify-content: flex-start;
width: 200px;
height: 100%;
}
.leftside ul li {
border-bottom: 0.2px solid white;
font-size: 20px;
height: 60px;
line-height: 60px;
width: 100%;
text-align: center;
}
.container-fluid {
justify-content: flex-end;
width: 100%;
height: 100%;
}
.table-responsive {
margin-top: 10px;
}
.table-one, .table-two
{
width:100%;
}
td
{
text-align:left;
}
.table-two tr.two, .table-two tr.three
{
font-size:1.1em;
text-align:left;
height:20px;
}主页面显示(数据分布图、数据统计图正在开发中，后续会发布)
6.启动程序
auth.py
if __name__ == '__main__':
app.run(debug=True) # 启动应用程序，其中debug=True表示处于调试状态7.目录
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
