Bootstrap Flask Login page to write examples _javascript tips

This article to introduce you to a python example, this is the Bootstrap+flask login page example, I hope the article can help you.

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:

Flask-bootstrap

Flask-login

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@jb51 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 R equest.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 ">  

Index.html
The contents of the index.html template are as follows:

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.