人生苦短,我用Python(六)—通过Flask结合Bootstrap框架快速搭建Web应用(实现前后台联动)-3

本文主要是介绍人生苦短,我用Python(六)—通过Flask结合Bootstrap框架快速搭建Web应用(实现前后台联动)-3,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

写在前面:

这篇文章,写的比较仓促,先在此致歉。具体情况,可以直接看总结部分。

Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架。Werkzeug用来处理Socket服务,其在Flask中被用于接受和处理http请求;Jinja2被用来对模板进行处理,将模板和数据进行渲染,返回给用户的浏览器。

Bootstrap是由Twitter推出的一个用于前端开发的开源工具包,给予HTML、CSS、JavaScriot,提供简洁、直观、强悍的前端开发框架,是目前最受环境的前端框架。

前面一篇文章已经讲到了,如何通过flask结合Bootstrap框架构建我们想要的html前端页面。

那么下面我们来讲讲,如何实现html页面与后台应用程序的联动,这包括以下三个部分:

  1. 前台数据如何提交到后台

  2. 后台数据如何在前端显示

  3. 按钮功能对应后台程序功能实现的一些方法

由于博主不是专门做这个的,所以下面的内容只是博主的一些理解和实际使用过程中的一些方法,并不能保证完全正确。


开始动手

1.如何将前台页面提交的数据传递到后台

也就是说我们希望实现在html页面中填写的数据被后台flask程序所获取到

在这里,我们使用的是在前台通过表单提交数据,后台获取数据的方法来实现该功能

前台HTML页面如下:

{% extends "bootstrap/base.html" %}
{%- block head %}
<title>表单测试页</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
{% block body -%}
<form role="form" method="POST">
<div class="form-group">
<label for="name">名称</label>
<input type="text" id="name" name="name" placeholder="请输入名称">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
{%- endblock body %}

实现页面如下:

后台程序如下:

@app.route('/form',methods = ['GET','POST'])
def hello_form():
if request.method == 'POST':
name=request.form.get('name')
print(name)
return render_template('form.html')
else:
return render_template('form.html')

这段程序实现的功能是,一开始浏览器请求/form这个相对URL时,采用的request method为get,此时返回form.html模板。

当在前台页面,点击提交按钮时,触发按钮submit,进而触发form定义的post提交数据的方法,这样浏览器再次request /form这个相对URL时,采用的request method为POST,采用request.form.get()方法获取与html文本中name字段对应的值。此时我们可以看到在python程序的输出中,name这个变量当前的值被打印了出来。   

WARNING: Do not use the development server in a production environment.Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [18/Nov/2018 01:11:16] "GET /form HTTP/1.1" 200 -
self_ip
127.0.0.1 - - [18/Nov/2018 01:11:19] "POST /form HTTP/1.1" 200 -
bbtest
127.0.0.1 - - [18/Nov/2018 01:16:39] "POST /form HTTP/1.1" 200 -

2.后台数据如何在前端显示

这个功能,也就是要求我们能够将flask主程序,或其他python程序中,运行的变量,显示在前台的html页面中

我们对之前的页面,稍加修改

前台代码如下:

修改后台程序

@app.route('/form',methods = ['GET','POST'])
def hello_form():
if request.method == 'POST':
name=request.form.get('name')
print(name)
return render_template('form.html',name=name)
else:
return render_template('form.html')

让我们尝试一下,当我们在名称的输入栏中输入bb时,页面返回

可见,我们从前台提交的数据,在被后台获取后,又通过前台显示了出来。实现了将后台数据前台展示的功能。

3.按钮功能对应后台程序功能实现的一些方法

我们继续对我们的程序进行修改,修改如下:

def run():
print('Run!!!')@app.route('/form',methods = ['GET','POST'])
def hello_form():
if request.method == 'POST':
name=request.form.get('name')
print(name)
return render_template('form.html',name=name,run=run())
else:
return render_template('form.html')

修改前台页面,增加一个运行按钮:

前台页面呈现如下:

我们点击运行试一下,看一下flask输出的结果:

* Environment: productionWARNING: Do not use the development server in a production environment.Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [18/Nov/2018 01:37:23] "GET /form HTTP/1.1" 200 -Run!!!127.0.0.1 - - [18/Nov/2018 01:37:25] "POST /form HTTP/1.1" 200 -

可见,通过点击“运行”按钮,实现了后台对应程序的执行,满足我们提出的要求。


总结

这篇文章,算是匆匆交差,一来是对每周一篇技术类博文更新这个承诺的兑现,二来也是给这一系列《flask结合bootstrap快速搭建web应用》文章的一个首尾。

最近博主在自主开发一个项目,在项目开发的过程中,越来越感觉到个人前台相关技术能力的缺失。应付自己的需求尚不能满足,要想满足其他人的需求更是十分困难。一些功能虽然能够勉强实现,但始终不是最优的解决方案。一些明明是可以在前台就完成的功能,却需要到后台来,通过重新请求页面来完成。尤其是Ajax,JavaScript等技术能力的确实,这对我理解一些问题的解决办法时造成了很大的障碍。

由于以上种种原因,《flask结合bootstrap快速搭建web应用》文章暂时不再更新了,再更新下去也难免误人子弟。

博主会争取抽出时间,沉下心来学习前端所需的相关知识。等真的完全具备前端开发的能力,再来和大家讲讲~

这篇关于人生苦短,我用Python(六)—通过Flask结合Bootstrap框架快速搭建Web应用(实现前后台联动)-3的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/508592

相关文章

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,:本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释?示例:三、单行注释语法:以 China编程# 开头,后面的内容为注释内容示例:示例:四

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

python常用的正则表达式及作用

《python常用的正则表达式及作用》正则表达式是处理字符串的强大工具,Python通过re模块提供正则表达式支持,本文给大家介绍python常用的正则表达式及作用详解,感兴趣的朋友跟随小编一起看看吧... 目录python常用正则表达式及作用基本匹配模式常用正则表达式示例常用量词边界匹配分组和捕获常用re