当前位置：首页 > 资讯 > 技术文档

bootstrap flask登录页面编写实例

时间：2020-09-14 22:34 编辑：来源：阅读：
扫一扫，手机访问

摘要：bootstrap flask登录页面编写实例

本文章来为各位介绍一个python的例子，这个就是bootstrap+flask写登录页面的例子，希望文章能够对各位有所帮助。 Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。在一般应用或个人开发中，可以很容易的写出应用。本篇就结合bootstrap，写一个简单的login界面。 [b]一、效果图 [/b] 无图无真像，先上效果图： [img]http://files.jb51.net/file_images/article/201611/2016111151541638.jpg?2016101151553[/img] flask-bootstrap [img]http://files.jb51.net/file_images/article/201611/2016111151604346.jpg?2016101151610[/img] flask-login [b]二、目录结构 [/b] 该代码写时采用动静分离的方法进行编写，目录树如下： [b][root@jb51 login]# tree [i]. ├── run.py ├── static │ └── css │ ├── bootstrap.min.css │ └── style.css └── templates ├── index.html └── login.html [/i][/b] [b]三、入口run文件 [/b] 动态代码只有一个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模试。 [b]四、静态模块 [/b] 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.1sucai.cn/" target="_blank">运维之路</a></p></div>
</body>
</html>

index.html index.html 模板中内容如下： <h1>welcome to [url=http://www.1sucai.cn/]www.1sucai.cn/[/url] <h1> 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JS实现六边形3D拖拽翻转效果的方法
下一篇：对js中回调函数的一些看法

资讯排行榜
更多>>