bootstrap flask登录页面编写实例


Posted in Javascript onNovember 01, 2016

本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助。

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

一、效果图

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

 bootstrap flask登录页面编写实例

flask-bootstrap

bootstrap flask登录页面编写实例

flask-login

二、目录结构

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

[root@3water 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="https://3water.com/" target="_blank">运维之路</a></p></div>
</body>
</html>

index.html
index.html 模板中内容如下:

<h1>welcome to 3water.com/ <h1>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 #Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 #Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 #Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 #Javascript
jQuery动态生成Bootstrap表格
Nov 01 #Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 #Javascript
jQuery双向列表选择器select版
Nov 01 #Javascript
You might like
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
jquery操作select大全
2014/04/25 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
Python编程入门的一些基本知识
2015/05/13 Python
python实现画圆功能
2018/01/25 Python
如何在Django项目中引入静态文件
2019/07/26 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
企业年会主持词
2014/03/27 职场文书
遗嘱继承公证书
2014/04/09 职场文书
百日安全活动总结
2014/05/04 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
个人先进事迹材料
2014/12/29 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript