运维人

flask+bootstrap写登录页面

最近有些需求、想法,毕竟devops的风还是很强烈的啊,所以就跟风学学dev方面的东西;

flask是一个很小巧很方便的webframe,听朋友说起django非常的重,于是我就在还有点python基础的能力下选择flask学学;准备用这个框架开发新的平台,首先就要有用户登录页面,用flask可以这样实现:

代码结构:

flasky
├── run.py
├── static
│   ├── av1.jpg
│   ├── av2.jpg
│   ├── av3.jpg
│   ├── bootstrap.min.css
│   ├── bootstrap.min.js
│   ├── bootstrap-responsive.min.css
│   ├── excanvas.min.js
│   ├── fullcalendar.css
│   ├── fullcalendar.min.js
│   ├── glyphicons-halflings.png
│   ├── GNU-Linux-Logo-Penguin-SVG.png
│   ├── jquery.flot.min.js
│   ├── jquery.flot.resize.min.js
│   ├── jquery.min.js
│   ├── jquery.peity.min.js
│   ├── jquery.ui.custom.js
│   ├── logo.png
│   ├── Tux.jpg
│   ├── unicorn.dashboard.js
│   ├── unicorn.grey.css
│   ├── unicorn.js
│   ├── unicorn.login.css
│   ├── unicorn.login.js
│   └── unicorn.main.css
└── templates
    ├── base.html
    ├── check.html
    ├── index.html
    ├── login.html
    └── upload.html

 

前端就用bootstrap展示,login.html

{% extends "base.html" %}
{% block title %} Dachen FTP {% endblock %}
</style></head>
{% block body %}
    <body>


       <div id="logo">
            <img src="{{url_for('static',filename='GNU-Linux-Logo-Penguin-SVG.png')}}" alt="">
        </div>
        <div id="loginbox">
            <form id="loginform" class="form-vertical" action="" method="post">
                                <p>Sing in to blog.sctux.com</p>
                <!--<div class="control-group"> -->
                <div class="form-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <input name="username" value="{{request.form.username}}" placeholder="Username">
  </div>
                    </div>
                </div>
               <!-- <div class="control-group"> -->
                <div class="form-group">
                    <div class="controls">
                        <div class="input-prepend">
                          <input name="pass" placeholder="Password ">
                        </div>
                    </div>
                </div>
  <div class="form-group">
    <div class="col-md-90 col-md-offset-12">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
      {% if error %}
	<p><font color="red">{{ error }}</font></p>
      {% endif %}
  </div>
            </form>
        {% endblock %}
</body>

 

run.py内容:

# coding:utf-8
from flask.ext.wtf import Form
from flask import render_template, redirect, url_for

app = Flask(__name__)

@app.route('/login',methods=['POST','GET'])
def login():
  error=False
  if request.method == 'POST':
    if request.form['username'] != 'user1' or request.form['pass'] != 'user1@1qaz':
      error="username or password error !"
    else:
      return redirect(url_for('index'))
  return render_template('login.html',error=error)

@app.route('/index')
def index():
  return render_template('index.html',result=result)

@app.route('/upload',methods=['GET','POST'])
def upload():
  return render_template('upload.html')

@app.route('/check',methods=['POST','GET'])
def check():
  return render_template('check.html')

@app.route('/logout')
def logout():
  return redirect(url_for('login'))

if __name__=="__main__":
   app.run(debug=True,host='xxxxxxxxx',port=4000)

启动 python run.py 访问 http://xxxxxxxxx:4000/

login page

登录主页的效果:
index

好啦,一个简单的登录页面就写好啦;flask 值得你拥有!

    分享到:
码字很辛苦,转载请注明来自运维人《flask+bootstrap写登录页面》

评论

  1. 蒂欧娜 #1

    来看看,学习学习!!

    回复
    2016-10-16
  2. QQ-20988582 #2

    学习带来乐趣,谢谢博主!

    回复
    2016-10-21
  3. 张毅乐 #3

    大神,你这个base.html的内容是什么呀?

    回复
    2017-05-26
  4. zero #4

    模版继承用的66的

    回复
    2017-06-19
    • OutMan

      有么,哈哈 感觉自己写的就像一坨翔。

      回复
      2017-06-20