经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的bootstrap框架

安装框架

在模板中直接引用bootstrap的CDN或者本地路径外,还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装:

pip3.6 install flask-bootstrap

这是一个flask的扩展包,flask的所有扩展包默认默认的包名都为flask.ext打头,同样bootstrap也是如此,首先在default的文件的头部导入包:

from flask.ext.bootstrap import Bootstrap

然后对bootstrap进行初始化,修改代码:

bootstrap=Bootstrap(app)

初始化之后,就可以使用Jinja2的继承方式使用此包中的包含的一系列的针对Bootstrap的基模板。基模板中直接引用了一系列的bootstrap中的元素。

还记得如何在jinja2中使用模板继承吧,下面在使用之前,首先看看基模板的结构:

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
<head>
{%- block head %}
<title>{% block title %}{{title|default}}{% endblock title %}</title> {%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %} {%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %} {% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
{%- endblock body %}
</body>
{%- endblock html %}
</html>
{% endblock doc -%}

从源码中可以看出,这个基模板定义了12个block,分别对应了整个文档(doc),html属性(html_attribs),整个html(html),整个head部分(head),title部分(title),meta代码部分(metas),css样式(styles),body属性(body_attribs),body部分(body),导航(navbar),

页面内容(content),js(scripts)

并且title,meta,css,和js均有默认的内容,所以使用的时候需要加入{{super()}}

好,根据这个基模板的结构,修改login.html中的代码为:

{% extends "bootstrap/base.html"%}

{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->

{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<div class="container">
<div class="container">
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
{% endblock %}

运行程序,现在的显示结果为:

比刚刚漂亮多了,这时生成的html代码为:

<!DOCTYPE html>
<html>
<head>
<title>牛博客 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
<!--具体内容-->
<div class="container">
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

注意这几个cdn的地址,这个地址有时候会被挡在墙外,这时怎么办呢?

修改的方式为在python的安装目录下找到Lib\site-packages\flask_bootstrap文件夹,文件夹下有__init__.py文件,打开后看到如下代码:



进行修改,顺便提一下,我比较常使用bootcdn这个cdn服务器

下面使用土法进行一下测试,输入test和123后的结果为:

显示的还是之前的测试登录成功页,这显然是不对的,一般来说,bbs或blog都是跳到登录前的页面或者首页,现在为了方便起见,都跳转到首页,同时,如果用户名或密码错误,也要在登录页进行提示,修改default.py代码如下:

from flask import session #导入session对象

@app.route("/login",methods=["POST"])
def loginPost():
username=request.form.get("username","")
password=request.form.get("password","")
if username=="test" and password=="123" :
session["user"]=username
return render_template("/index.html",name=username,site_name='myblog')
else:
return "登录失败"

登录成功后的源码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myblog</title>
</head>
<body>
<h1>这个站点的名字为 myblog </h1>
</body>
</html>

哦,对了,没有引用bootstrap的基模板,修改index.html的模板代码,将第一行的

{% extends "base.html" %}

修改为

{% extends "bootstrap/base.html" %}

刷新为:

<!DOCTYPE html>
<html>
<head>
<title>blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>这个站点的名字为 myblog </h1>
</body>
</html>

看到已经成功引用了bootstrap框架,但是导航部分全部都没有,这时当然不能在写一遍导航,直接修改自定义的基模板,然后让其他模板引用即可,修改基模板为:

{%extends "bootstrap/base.html "%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签--> {% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<div class="container">
</div>
{% endblock %}

然后修改首页代码:

{% extends "base.html" %}

{% block content %}
<h1>这个站点的名字为 {{site_name}} </h1>
{% endblock %}

修改登录页代码为:

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<div class="container">
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
{% endblock %}

下面登录成功页的显示结果为:



页面风格与登录页保持了一致,但是,目前还是如果用户名密码错误(即输入的不是test和123),那么除了和刚刚一样返回一个登录错误的字符串之外,用户是无法获悉的,就需要一个反应用户状态的方法,这一点,flask提供了flash函数,下面继续修改default.py文件:

from flask import flash

@app.route("/login",methods=["POST"])
def loginPost():
username=request.form.get("username","")
password=request.form.get("password","")
if username=="test" and password=="123" :
session["user"]=username
return render_template("/index.html",name=username,site_name='myblog')
else:
flash("您输入的用户名或密码错误")
return render_template("/login.html") #返回的仍为登录页

修改login.html模板:

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<div class="container"> {% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alter">&times</button>
{{message}}
</div>
{% endfor %} <form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
{% endblock %}

好下面输入test和1234,显示结果为:

状态很完美的显示出来。

继续美化

登录的页面和控制器的基本功能都已经完成,但是仅仅就现在这个页面来说,没有登录框占整个屏幕的,一般来说,都是居中的一部分,这块不涉及flask的部分,轮到bootstrap的栅格系统登场了。

栅格系统简单说就是将一个container或container-fluid中分为12个列,每个列都可以合并或偏移,与html中的table类似,并且支持响应式,通过xs,sm,md,lg来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改:

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<div class="container">
<div class="row"></div>
<div class="row">
<#-- col-md-4表示合并4列,col-md-offset-4表示偏移4列 sm意思相同 --#>
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
<div class="page-header">
<h1>欢迎您登陆</h1>
</div>
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alter">&times</button>
{{message}}
</div>
{% endfor %} <form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
</div>
{% endblock %}

显示结果如下:

毕竟不是专业美工,没有经过设计,但至少比刚刚美观多了,但登录的用户名和密码写成固定值肯定是不行的,数据库是必不可少的,将在下一章让flask和mysql进行互联。

春节假期很快就过去了,这篇文章磕磕巴巴的至少更新了三章,再次感到对不起语文老师。明天开始要带小公举进行魔都迪士尼四日游,然后回北京也要开始找工作了,这个系列的更新可能会不如之前的稳定(但发现也没什么人看(┳_┳)... ,但扣除魔都游的四天,至少要保证一周一更吧,也是对自己的一个鞭策,感谢所有的朋友)

一个web应用的诞生(3)--美化一下的更多相关文章

  1. 一个web应用的诞生(1)--初识flask

    基于flask的web应用的诞生 Flask是一个非常优秀的web框架,它最大的特点就是保持一个简单而易于扩展的小核心,其他的都有用户自己掌握,并且方便替换,甚至,你可以在社区看到众多开源的,可直接用 ...

  2. 一个web应用的诞生--美化一下

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  3. 一个web应用的诞生--使用模板

    经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法: @app.route("/login",methods=[&qu ...

  4. 一个web应用的诞生(2)--使用模板

    经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法: @app.route("/login",methods=[&qu ...

  5. 一个web应用的诞生(3)

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  6. 一个web应用的诞生--数据存储

    上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,这就需要提供一个把这些值存储到数据库的能力. 当前的主流数据 ...

  7. 一个web应用的诞生--数据表单

    下面把角色分为两种,普通用户和管理员用户,至少对于普通用户来说,直接修改DB是不可取的,要有用户注册的功能,下面就开始进行用户注册的开发. 用户表 首先要想好用户注册的时候需要提供什么信息:用户名.密 ...

  8. 一个web应用的诞生(6)--用户账户

    之前登录注册的功能都已经完成,但是登录成功回到首页发现还是白茫茫的一片,对的,title一直都写得博客,那么最终目的也是写出一个轻博客来,但是,在发表文章之前是不是要先记录一下登录状态呢? 用户登录 ...

  9. 一个web应用的诞生(7)--结构调整

    现在所有的Py代码均写在default.py文件中,很明显这种方法下,一旦程序变的负责,那么无论对于开发和维护来说,都会带来很多问题. Flask框架并不强制要求项目使用特定的组织结构,所以这里使用的 ...

随机推荐

  1. Sql server中的 nvarchar(max) 到底有多大?(转载)

    问题: SQL server中的nvarchar(max)最大的长度是4000个字吗? 如果字段的内容超过4000个字时用什么类型呢?text 还是binary?他们的最大长度是多少?比如字段放的是长 ...

  2. python基础学习8----文件基本操作

    一.文件的打开,open函数 f = open(file_name,mode)#创建文件对象 打开模式有很多种 1. 'r': 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. 2. ...

  3. Linux 基本概念 & 命令

    0. Linux 理解 Linux 是一种操作系统,主要应用于服务器. Linux 性能稳定,其中的许多版本不收费(如CentOS),占用资源较少. 1. 命令行的状态 在 Linux 命令行下以上分 ...

  4. SQL SERVER解析Json

    外包的项目,有很多信息存储在JSON中,无论是查询还是修改信息都十分麻烦.找了一些实用的SQL Function去解析,并附修改例子. 使用过程: 1. 需要在SQL新建自定义类型 table: Hi ...

  5. ArcGIS pro2.3中添加天地图底图

    应用背景: 很多时候,我们需要使用网络上的遥感影像或者百度地图.天地图等在线地图做一些矢量化工作或者其他. 笔者见过很多人都是把百度地图截图,然后把图片导如Arcmap或者Arcgis pro中,然后 ...

  6. Android MaterialDesign之水波点击效果的几种实现方法

    什么是水波点击的效果? 下面是几种不同的实现方法的效果图以及实现方法   Video_2016-08-31_003846 如何实现? 方法一 使用官方提供的RippleDrawable类 优点:使用方 ...

  7. Maven配置本地库加载ojdbc14-10.2.0.4.0.jar文件

    因为ojdbc14-10.2.0.4.0.jar是要收费的,所以Maven的远程库里没有这个资源,只能通过配置本地库来加载到J2EE工程里,做法如下:   第一步:在网上下载ojdbc14.jar,然 ...

  8. 深入C#学习系列一:序列化(Serialize)、反序列化(Deserialize)

    序列化概述: 序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读取或反序列化对象 ...

  9. Ubuntu16.04 kaldi的简单配置

    1.什么是kaldi kaldi是使用c++写的语音识别的工具,apache 授予了v2.0的证书(果真应验,apache旗下无弱将).kaldi旨在供语音识别研究员使用.kaldi在目标和范围上和H ...

  10. Python 函数(三)

    Python 3 函数 (闭包.装饰器.递归.高阶函数) 一.闭包 内部函数可以引用外部函数的参数和局部变量,当外部函数返回内部函数时,相关参数和变量 都保存在返回的函数中,简单的说,这种内部函数可以 ...