bootstrap flask登录页面编写实例

文章目录

[隐藏]

  • 一、效果图
  • 二、目录结构
  • 三、入口run文件
  • 四、静态模块

本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助。
Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。在一般应用或个人开发中,可以很容易的写出应用。本篇就结合bootstrap,写一个简单的login界面。

一、效果图

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

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=" />  <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 >  <div >  <div >  <h4><small>登录</small></h4>  >  <div >  <div >  <form action="#" method="post">  <div >   <div >    <div >     <span ><span ></span></span>     <input type="text"  name="username"  placeholder="用户名">    >   >  >  <div >   <div >    <div >     <span ><span ></span></span>     <input type="text"  name="password"  placeholder="密码">    >   >  >  <div >   <div >    <button type="submit" ><span ></span> 登录</button>   >  >  <div >   <div >     ><small>忘记密码?</small> <a href="javascript:void(0)" ><small>找回</small></a>    >   >   <div >     ><small>还没注册?</small> <a href="javascript:void(0)" ><small>注册</small></a>    >   >  >  </form>  >  >  >  >  <div >>来源:<a href="http://www.jb51.net/" target="_blank">运维之路</a>>>  </body>  </html>  

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

<h4>welcome to www.jb51.net/ <h4>  

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持51dev开发社区。
以上就是bootstrap flask登录页面编写实例的全部内容,希望对大家的it技术学习有所帮助,希望大家多多支持技术开发者社区。

原文出处:51dev -> https://www.51dev.com/javascript/65495

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如果侵犯你的利益,请发送邮箱到 [email protected],我们会很快的为您处理。
超哥软件库 » bootstrap flask登录页面编写实例