Flask is a lightweight WEB application framework written using Python. Its WSGI Toolbox uses Werkzeug, and the template engine uses JINJA2. In general applications or personal development, it is easy to write applications. This article combines bootstrap to write a simple login interface.
One, the effect chart
No picture no true image, first on the effect chart:
Second, the directory structure
The code is written using static and dynamic separation of the method to write, the directory tree is as follows:
[Root@361way login]# Tree
.
├──run.py
├──static
│└──css
│├──bootstrap.min.css
│└──style.css
└──templates
├──index.html
└──login.html
Third, the entry run file
Dynamic code has only one run.py file, and the code is as follows:
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)
In practical applications, you can turn off the debug test if you need to.
Four, static module
There are two module files under Templates, respectively, login.html and index.html.
Login.html
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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-Response Login Interface Template </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 ')}} ' >
<body>
<div class= "box" >
<div class= "Login-box" >
<div class= "Login-title text-center" >
</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= "username" >
</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= "password" >
</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> Login </button>
</div>
</div>
<div class= "Form-group" >
<div class= "col-xs-6 link" >
<p class= "Text-center remove-margin" ><small> forgot password? </small> <a href= "javascript:void (0)" ><small> get back </small></a>
</p>
</div>
<div class= "col-xs-6 link" >
<p class= "Text-center remove-margin" ><small> not registered?</small> <a href= "javascript:void (0)" > <small> Registration </small></a>
</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div style= "Text-align:center;" ><p> Source: <a href= "http://www.111cn.net/" target= "_blank" > Yun-Wei Road </a></p></div>
</body>
Index.html
The contents of the index.html template are as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
