bootstrap flask登录页面编写实例
作者:lijiao 发布时间:2024-04-16 08:49:19
标签:bootstrap,flask,登录
本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助。
Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。在一般应用或个人开发中,可以很容易的写出应用。本篇就结合bootstrap,写一个简单的login界面。
一、效果图
无图无真像,先上效果图:
flask-bootstrap
flask-login
二、目录结构
该代码写时采用动静分离的方法进行编写,目录树如下:
[root@jb51 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://www.aspxhome.com/" target="_blank">运维之路</a></p></div>
</body>
</html>
index.html
index.html 模板中内容如下:
<h1>welcome to www.aspxhome.com/ <h1>
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程Bootstrap实战教程
0
投稿
猜你喜欢
- 前言:在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告(从而发送测试报告邮件),经常要对大量
- MySQL的Explain命令用于查看执行效果。虽然这个命令只能搭配select类型语句使用,如果你想查看update,delete类型语句
- 摘要:在python的使用过程中,难免会遇到要移除列表中对象的要求。这时可以使用remove函数。对于python中的remove()函数,
- 中间件Django中的中间件是一个轻量级、底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出。中间件的设
- Oracle sql语句执行日志查询在Oracle数据中,我们经常编写sql语句,有时我们会编写一些特别长的sql语句,而有一些意外导致sq
- 方法1:使用dataframe.loc[]函数通过这个方法,我们可以用一个条件或一个布尔数组来访问一组行或列。如果我们可以访问它,我们也可以
- 背景为了更好的发展自身的测试技能,应对测试行业以及互联网行业的迭代变化。自学python以及自动化测试。虽然在2017年已经开始接触了sel
- 今天接到一个小需求,就是想在windows环境下,上传压缩文件到linux指定的目录位置并且解压出来,然后我想了一下,这个可以用python
- enumerate函数用于遍历序列中的元素以及它们的下标。enumerate函数说明:enumerate()是python的内置函数enum
- 上一篇我们写了Django基于类如何增删改数据的方法,方法虽然简单,但新手可能对其原理不是很清楚,那么我们这次就用Django提供的Mode
- 环境 django 1.10.6缘起今天接到一个任务——解决终端满屏日志中的无用错误。 django 会尽可能给你准确报出错误位置,但是一些
- 一、连接MYSQL:格式: mysql -h主机地址 -u用户名 -p用户密码1、例1:连接到本机上的MYSQL。首先在打开DOS窗口,然后
- *args与**kwarsg及闭包和装饰器过程先理解闭包,再理解装饰器,不要忘了不定长参数def func():
- 一、增强的可扩展性 Oracle9i Real Application Clusters是Oracle的下一代并行服务器系列产品。Oracl
- Css tranistions允许元素的属性在单位时间内发生平滑的过渡,在阅读完《CSS Transitions Module Level
- 本文实例为大家分享了vue中使用svg封装全局消息提示组件的具体代码,供大家参考,具体内容如下先看效果图一、首先安装下载需要用到的svg相关
- 相对于Firefox2来说,Firefox3除了采用全新的Gecko 1.9引擎外,在性能、稳定性和安全性方面进行许多改进,在我们最关心的对
- Python是一个非常实用、流行的解释型编程语言,其优势之一就是可以借助其交互的shell进行探索式地编程。你可以试着输入一些代码,然后马上
- 目录Django 和 MongoDB 设置安装:创建:激活:使用 PyMongo 连接 Django 和 MongoDB使用 MongoEn
- 使用Matplotlib绘制的图表的默认坐标轴是在左下角的,这样对于一些函数的显示不是非常方便,要改变坐标轴的默认显示方式主要要使用gca(