实现从零搭建一个登录注册页面（附源代码）

如果你还不知道什么是Flask，请移步我的另一篇博文Flask详解

话不多说，开始介绍Flask框架。

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask使用 BSD 授权。Flask也被称为 “microframework” ，因为它使用简单的核心，用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具

一、工具介绍及配置

1、Flask基本结构

初始化

from flask import Flask

app = Flask(name)

Flask 类的构造函数只有一个必须指定的参数，即程序主模块或包的名字。在大多数程序中，Python 的 name 变量就是所需的值。

2、路由和视图函数

客户端（例如 Web 浏览器）把请求发送给 Web 服务器，Web 服务器再把请求发送给程序实例需要知道对每个 URL 请求运行哪些代码，所以保存了一个 URL 到 Python 函数的映射关系。处理 URL 和函数之间关系的程序称为路由。在 Flask 程序中定义路由的最简便方式，是使用程序实例提供的 app.route 修饰器，把修饰的函数注册为路由。下面的例子说明了如何使用这个修饰器声明路由：

@app.route(’/’) def index():

return ‘Hello World!’

3、run 方法启动 Flask

if name == ‘main’:

app.run(debug=True)

4、MariaDB

CentOS 6 或早期的版本中提供的是 MySQL 的服务器/客户端安装包，但 CentOS 7 已使用了 MariaDB 替代了默认的 MySQL。MariaDB数据库管理系统是MySQL的一个分支，主要由开源社区在维护，采用GPL授权许可 MariaDB的目的是完全兼容MySQL，包括API和命令行，使之能轻松成为MySQL的代替品。

5、pymysql的基本用法

conn = pymysql.connect(host=‘127.0.0.1’, port=3306, user=‘root’, passwd=’’, db=‘students’)

cursor = conn.cursor()

cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

cursor.execute(“select * from students”)

#无参数存储过程

cursor.callproc(‘Pro_Search’) #等价于cursor.execute(“call Pro_Search()”)

#有参数的形式

cursor.callproc(‘Pro_Search’, args=(1, 22, 3, 4)

事物的处理

conn.commit() #事物的提交

conn.rollback() # 事物的回滚

6、mariaDb的配置

配置过程：

yum -y install MariaDB-server MariaDB-client

查看/etc/my.cnf文件内容，其中包含一句!includedir /etc/my.cnf.d 说明在该配置文件中引入/etc/my.cnf.d 目录下的配置文件。

1）使用vi server.cnf命令编辑server.cnf文件，在[mysqld]标签下添加

init_connect=‘SET collation_connection = utf8_unicode_ci’
init_connect=‘SET NAMES utf8’
character-set-server=utf8
collation-server=utf8_unicode_ci
skip-character-set-client-handshake

如果/etc/my.cnf.d 目录下无server.cnf文件，则直接在/etc/my.cnf文件的[mysqld]标签下添加以上内容。

2）文件/etc/my.cnf.d/client.cnf

vi /etc/my.cnf.d/client.cnf

在[client]中添加

default-character-set=utf8

3）文件/etc/my.cnf.d/mysql-clients.cnf

vi /etc/my.cnf.d/mysql-clients.cnf

在[mysql]中添加

default-character-set=utf8

授权过程：

查看当前登录用户

select user();

创建用户

Create user tech;

授权添加一个人用户tech，对test库下的table_name 授权，密码为123

grant ALL PRIVILEGES on test.table_name to tech IDENTIFIED by ‘123’

配置权限：

GRANT ALL PRIVILEGES ON . TO ‘wl’@’%'IDENTIFIED BY ‘123’ WITH GRANT OPTION;

二、实验步骤

（1）将文件static、templates拖拽到编译路径下
在这里插入图片描述
（2）创建flaskest.py 输入测试代码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raZaT6TJ-1570841512555)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image004.jpg)]$

测试结果:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YO8uc5Js-1570841512555)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image006.jpg)]$

(3) 开始调试注册界面，在templates文件夹中添加register.html文件来实现界面渲染，并将注册数据导入到MariaDB中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZuItUXK-1570841512556)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image008.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o5elbt3R-1570841512556)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image010.jpg)]$

实验结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvaUxTMG-1570841512556)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image012.jpg)]$

$| | || ---- | ------------------------------------------------------------ || | [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WmE8KpP7-1570841512557)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image014.jpg)] |$

可以实现注册界面的显示

（3）同样开始调试登录界面，在templates文件夹中添加login.html文件来实现界面渲染，并对结果进行判断：若登陆成功，则跳转到index页面，若失败，提示用户输入有误

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DKmZCoxU-1570841512557)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image016.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aEEqW82u-1570841512557)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image018.jpg)]$

(4) 数据库中创建一个user表并观察实现注册后的表内容的变化

注册前：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l0vJJXj8-1570841512558)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image020.jpg)]$

注册后：
在这里插入图片描述测试成功！

（4）下面开始分别测试登录成功和失败的界面

登录成功：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NjWp2AA-1570841512559)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image026.jpg)]$

登录失败：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5Eganqo-1570841512559)(file:///C:\Users\lenovo\AppData\Local\Temp\msohtmlclip1\01\clip_image028.jpg)]$

测试完成！

三、总结

a) 从零配置并使用了MariaDB数据库，通过navicat对数据库进行操作（增删改查）

b) 了解到Python 模板–Jinja2引擎

下面附上一些本次案例中用到的html页面已经flask视图函数

student.html

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="generator" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <link href="/static/css/haiersoft.css" rel="stylesheet" type="text/css" media="screen,print"/>
    <link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/>
    <script src="/static/js/jquery-1.10.1.min.js"></script>
    <script src="/static/js/side.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
</head>

<body>


<!-- MainForm -->
<div id="MainForm">
    <div class="form_boxA">
        <h2>学生信息列表</h2>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>序号</th>
                <th>学生名称</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
            {% for stu in stus%}
            <tr>
                <td>{{stu.s_id}}</td>
                <td>{{stu.s_name}}</td>
                <td>{{stu.grade.g_name}}</td>
                <td><a href="p2.html">删除</a></td>
            </tr>
            {% endfor %}
        </table>
        <p class="msg">共找到{{paginate.total}}条匹配记录</p>
    </div>

    <ul id="PageNum">

        <li><a href="/user/student/?page=1">首页</a></li>
        {% if paginate.has_prev %}
            <li><a href="/user/student/?page={{ paginate.prev_num }}">上一页</a></li>
        {% endif %}

        {% for p  in paginate.iter_pages() %}
            <li>
                {% if p %}
                    {% if p != paginate.page %}
                    <a href="/user/student/?page={{ p }}">{{ p }}</a>
                    {% else %}
                    <span> {{ p }} </span>
                    {% endif %}
                {% else %}
                    <span>...</span>
                {% endif %}
            </li>
        {% endfor  %}

        {% if paginate.has_next %}
            <li><a href="/user/student/?page={{ paginate.next_num }}">下一页</a></li>
        {% endif %}
            <li><a href="/user/student/?page={{ paginate.pages }}">尾页</a></li>
        <span>| 共{{paginate.pages}}页 | 当前第{{paginate.page}}页</span>
    </ul>

</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册</title>
<link rel="stylesheet" type="text/css" href="/static/css/public.css" />
<link rel="stylesheet" type="text/css" href="/static/css/page.css" />
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/public.js"></script>
</head>
<body>
	<form action="" method="post">
	<!-- 登录body -->
	<div class="logDiv">
		<img class="logBanner" src="/static/img/logBanner.png" />
		<div class="logGet">
			<!-- 头部提示信息 -->
			<div class="logD logDtip">
				<p class="p1">注册</p>
				<span style="color: red">{{msg}}</span>
			</div>
			<!-- 输入框 -->
			<div class="lgD">
				<img class="img1" src="/static/img/logName.png" />
				<input type="text" placeholder="输入用户名" name="username" />
			</div>
			<div class="lgD">
				<img class="img1" src="/static/img/logPwd.png" />
				<input type="password" placeholder="输入用户密码" name="pwd1" />
			</div>
			<div class="lgD">
				<img class="img1" src="/static/img/logPwd.png" />
				<input type="password" placeholder="输入用户密码" name="pwd2" />
			</div>
			<div class="logC">
				<a href="#" target="_self">
					<button>
						<input type="submit" value="注 &nbsp;&nbsp;册" style="background: none;border: none;color: white">
					</button>
				</a>
			</div>
		</div>
	</div>
	</form>
	<!-- 登录body  end -->

	<!-- 登录页面底部 -->
	<div class="logFoot">
		<p class="p1">2018</p>
		<p class="p2">版权©</p>
	</div>
	<!-- 登录页面底部end -->
   
</body>
</html>

flask.py

    from flask import Flask, request, render_template, redirect, url_for
    import pymysql
    
    app = Flask(__name__)
    
    @app.route('/index/')
    def index():
        print('访问到我')
        return '''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学习不好的原因</title>
    </head>
    <body>
        <h2>Lucky boy</h2>
        <hr />
        <p>窗外有个挖掘机</p>
    
    </body>
    </html>
        '''
    
    # @app.route('/login/',methods=['POST','GET'])
    # def login():
    #     return render_template('login.html')
    @app.route('/login/',methods=['POST','GET'])
    def login():
        uname = ""
        pwd = ""
        if request.method == "POST":
            # print("start")
            uname = request.form['username']
            pwd = request.form['password']
            tempwd = get_pwd(uname)
            if pwd == tempwd:
                return redirect(url_for('index'))
            else:
                return render_template('login.html',msg = "Please check your name and password!")
    
        return render_template('login.html')
    
    def get_pwd(id):
        db = pymysql.connect("192.168.88.132","wl","123456","testdb")
        cur = db.cursor()
        sql = "select pwd from user where uname='"+id+"'"
        cur.execute(sql)
        dataset = cur.fetchone()
        return dataset[0]
    
    @app.route('/register/',methods=['POST','GET'])
    def register1():
        if request.method == "POST":
            username1 = request.form['username']
            password = request.form['pwd1']
            print(username1,password)
            insert_user(username1,password)
        return render_template('register.html',message = 'User cocount is created!')
    
    def insert_user(user,pwd):
        db = pymysql.connect("192.168.88.132","wl","123456","testdb")
        cursor = db.cursor()
        print(user,pwd)
        sql = "insert into user(uname,pwd) value(%s,%s)"
        res = [user,pwd]
        print(res)
        cursor.execute(sql,res)
        db.commit()
        return
    @app.route('/home/')
    def register():
        dataset = {'k1':'first','k2':'second','k3':'third'}
        return render_template('show.html',info=dataset)
    
    if __name__ == '__main__':
        app.run(debug=True)

高羊羊羊羊羊杨

发布了25 篇原创文章 · 获赞 5 · 访问量 1512

私信关注