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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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+oracle 分页类
2006/10/09 PHP
php date()日期时间函数详解
2010/05/16 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中logging实例讲解
2019/01/17 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python中如何设置代码自动提示
2020/07/15 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
初中物理教学反思
2014/01/14 职场文书
民生工作实施方案
2014/05/31 职场文书
管理标语大全
2014/06/24 职场文书
奠基仪式致辞
2015/07/30 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS