一个web应用的诞生(3)

2024-04-30 17:18
文章标签 应用 web 诞生

本文主要是介绍一个web应用的诞生(3)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

经过上一章的内容，其实就页面层来说已结可以很轻松的实现功能了，但是很明显美观上还有很大的欠缺，现在有一些很好的前端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"]=usernamereturn 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"]=usernamereturn 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)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/949458。

相关文章

SpringShell命令行之交互式Shell应用开发方式

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定
阅读更多...
SpringBoot应用中出现的Full GC问题的场景与解决

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F
阅读更多...
MySQL 分区与分库分表策略应用小结

MySQL 分区与分库分表策略应用小结

《MySQL分区与分库分表策略应用小结》在大数据量、复杂查询和高并发的应用场景下,单一数据库往往难以满足性能和扩展性的要求,本文将详细介绍这两种策略的基本概念、实现方法及优缺点,并通过实际案例展示如... 目录mysql 分区与分库分表策略1. 数据库水平拆分的背景2. MySQL 分区策略2.1 分区概念
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
C语言函数递归实际应用举例详解

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,：本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例（一）求 n 的阶乘（二）顺序打印
阅读更多...
JSON Web Token在登陆中的使用过程

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》：本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录，生成 JWT2. 自定义过滤
阅读更多...
Python中随机休眠技术原理与应用详解

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2
阅读更多...
一文教你如何将maven项目转成web项目

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一：修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加
阅读更多...
Python Dash框架在数据可视化仪表板中的应用与实践记录

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash？1.1
阅读更多...
Android Kotlin 高阶函数详解及其在协程中的应用小结

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民（First-ClassCitizen）,使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数？3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2