一个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

相关文章

Java逻辑运算符之&&、|| 与&、 |的区别及应用

《Java逻辑运算符之&&、||与&、|的区别及应用》:本文主要介绍Java逻辑运算符之&&、||与&、|的区别及应用的相关资料,分别是&&、||与&、|,并探讨了它们在不同应用场景中... 目录前言一、基本概念与运算符介绍二、短路与与非短路与:&& 与 & 的区别1. &&:短路与(AND)2. &:非短

Spring AI集成DeepSeek三步搞定Java智能应用的详细过程

《SpringAI集成DeepSeek三步搞定Java智能应用的详细过程》本文介绍了如何使用SpringAI集成DeepSeek,一个国内顶尖的多模态大模型,SpringAI提供了一套统一的接口,简... 目录DeepSeek 介绍Spring AI 是什么?Spring AI 的主要功能包括1、环境准备2

Spring AI与DeepSeek实战一之快速打造智能对话应用

《SpringAI与DeepSeek实战一之快速打造智能对话应用》本文详细介绍了如何通过SpringAI框架集成DeepSeek大模型,实现普通对话和流式对话功能,步骤包括申请API-KEY、项目搭... 目录一、概述二、申请DeepSeek的API-KEY三、项目搭建3.1. 开发环境要求3.2. mav

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

MobaXterm远程登录工具功能与应用小结

《MobaXterm远程登录工具功能与应用小结》MobaXterm是一款功能强大的远程终端软件,主要支持SSH登录,拥有多种远程协议,实现跨平台访问,它包括多会话管理、本地命令行执行、图形化界面集成和... 目录1. 远程终端软件概述1.1 远程终端软件的定义与用途1.2 远程终端软件的关键特性2. 支持的

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

5分钟获取deepseek api并搭建简易问答应用

《5分钟获取deepseekapi并搭建简易问答应用》本文主要介绍了5分钟获取deepseekapi并搭建简易问答应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需... 目录1、获取api2、获取base_url和chat_model3、配置模型参数方法一:终端中临时将加

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为

Python调用另一个py文件并传递参数常见的方法及其应用场景

《Python调用另一个py文件并传递参数常见的方法及其应用场景》:本文主要介绍在Python中调用另一个py文件并传递参数的几种常见方法,包括使用import语句、exec函数、subproce... 目录前言1. 使用import语句1.1 基本用法1.2 导入特定函数1.3 处理文件路径2. 使用ex