bootstrap+flask写登录页面

2015年5月25日 发表评论 阅读评论

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

一、效果图

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

flask-bootstrap

flask-login

二、目录结构

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

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

三、入口run文件

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

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 

login.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" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
<title>Bootstrap响应式登录界面模板</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="box">
<div class="login-box">
<div class="login-title text-center">
<h1><small>登录</small></h1>
</div>
<div class="login-content ">
<div class="form">
<form action="#" method="post">
<div class="form-group">
    <div class="col-xs-12  ">
            <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" id="username" name="username" class="form-control" placeholder="用户名">
            </div>
    </div>
</div>
<div class="form-group">
    <div class="col-xs-12  ">
            <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input type="text" id="password" name="password" class="form-control" placeholder="密码">
            </div>
    </div>
</div>
<div class="form-group form-actions">
    <div class="col-xs-4 col-xs-offset-4 ">
            <button type="submit" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-off"></span> 登录</button>
    </div>
</div>
<div class="form-group">
    <div class="col-xs-6 link">
            <p class="text-center remove-margin"><small>忘记密码?</small> <a href="javascript:void(0)" ><small>找回</small></a>
            </p>
    </div>
    <div class="col-xs-6 link">
            <p class="text-center remove-margin"><small>还没注册?</small> <a href="javascript:void(0)" ><small>注册</small></a>
            </p>
    </div>
</div>
</form>
</div>
</div>
</div>
</div>
<div style="text-align:center;"><p>来源:<a href="http://www.361way.com/" target="_blank">运维之路</a></p></div>
</body>
</html>

index.html 

index.html 模板中内容如下:

<h1>welcome to www.361way.com<h1>

注:bootstrap样式文件由于较多,这里不再提供,有兴趣的,可以到我的github站上去取--- https://github.com/361way/python/tree/master/flask/login

参考页面:flask 手册会话页面




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.