bootstrap+flask写登录页面

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。在一般应用或个人开发中,可以很容易的写出应用。本篇就结合bootstrap,写一个简单的login界面。

一、效果图

无图无真像,先上效果图:



<a href="https://www.361way.com/wp-content/uploads/2015/05/flask-bootstrap.png"><img src="https://www.361way.com/wp-content/uploads/2015/05/flask-bootstrap.png" alt="flask-bootstrap" width="488" height="363" class="alignnone size-full wp-image-4451" /></a>



<a href="https://www.361way.com/wp-content/uploads/2015/05/flask-login.png"><img src="https://www.361way.com/wp-content/uploads/2015/05/flask-login.png" alt="flask-login" width="397" height="105" class="alignnone size-full wp-image-4452" /></a>



<br />

二、目录结构

该代码写时采用动静分离的方法进行编写,目录树如下:



<br />
[root@361way login]# tree
.
├── run.py
├── static
│   └── css
│       ├── bootstrap.min.css
│       └── style.css
└── templates
    ├── index.html
    └── login.html

三、入口run文件

动态代码只有一个run.py文件,代码如下:



<br />
from flask import *
app = Flask(__name__,static_url_path='/static')
@app.route("/login",methods=['POST','GET'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != 'admin' or request.form['password'] != 'admin123':
                error= "sorry"
        else:
            return redirect(url_for('index'))
    return render_template('login.html',error=error)
@app.route("/index")
def index():
    return render_template('index.html')
if __name__ == "__main__":
    app.run(
        host="0.0.0.0",
        port=80,
        debug=True)
实际应用中,根据需要,可以关闭debug模试。

四、静态模块

templates下有两个模块文件分别是login.html和index.html&nbsp;



<strong>login.html</strong>



<br />





Bootstrap响应式登录界面模板




来源:运维之路

<strong>index.html&nbsp;</strong>



index.html 模板中内容如下:

welcome to www.361way.com

注:bootstrap样式文件由于较多,这里不再提供,有兴趣的,可以到我的github站上去取---&nbsp;<a href="https://github.com/361way/python/tree/master/flask/login" target="_blank" rel="noopener">https://github.com/361way/python/tree/master/flask/login </a>。



参考页面:<a href="http://dormousehole.readthedocs.org/en/latest/quickstart.html#sessions" target="_blank" rel="noopener">flask 手册会话页面</a>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注