资讯专栏INFORMATION COLUMN

从零开始用 Flask 搭建一个网站(三)

mykurisu / 2357人阅读

摘要:从零开始用搭建一个网站二介绍了有关于数据库的运用,接下来我们在完善一下数据在前端以及前端到后端之间的交互。在中有和两个函数,分别是请求成功和失败的回调函数。作者极光为极光团队账号,欢迎关注原文从零开始用搭建一个网站三知乎专栏极光日报

从零开始用 Flask 搭建一个网站(二) 介绍了有关于数据库的运用,接下来我们在完善一下数据在前端以及前端到后端之间的交互。本节涉及到前端,因此也会讲解一下 jinja2 模板、 jQuery 、 ajax 等用法。

下面我们来创建两个界面,一个可以新建 channel ,并显示,另一个可以创建 integration ,并且可以绑定一个之前创建的 channel 。

post2channel.html

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}    
{{ super() }}    
    
    
    
    

{% endblock %}

{% block title %}极光宝盒-创建集成{% endblock %}
{% block navbar %}    
    
{{ super() }}
{% endblock %}

...

我们从第一行开始来讲解一下这个模板,第一句

{% extends "base.html" %}

从字面上可以明白这个模板继承了 base.html 模板,使用 {% %} 是 jinja2 模板的语法,表示语句块,还有一种分隔符 {{ }} ,表示变量,通常用来在模板上显示。接下来是

{% block head %}

可以看到也是比较容易理解的语法, block 后接一个 block name ,表示一个块开始的声明,结束的时候用 {% end %} 即可。在块中可以使用普通的 HTML 语法。{{ super() }} 表示继承父模板的块声明,这里指继承 base.html 中声明的 head 块。接下来是 css 和 js 文件的引用。此页面使用了 toastr 来显示通知,类似于 Android 中的 Toast ,有兴趣的可以了解一下它的详细用法。

接下来是 HTML 代码,有一个下拉输入框和按钮。


以上代码就是下拉输入框中的数据来源,用了一个 for 循环来遍历 channels 列表,并且用 li 包裹每个元素,这也是模板常见的用法。 channels 是在视图函数中传过来的。

auth/views.py

@auth.route("/new/post_to_channel", methods=["GET"])
def post_to_channel():    
  developer = get_developer()    
  dev_key = developer.dev_key    
  channels = get_channel_list()    
  return render_template("auth/new/post2channel.html", **locals())

remder_template 的第二个参数表明,渲染这个 post2channel.html 页面的时候,把以上所有的变量都传递到页面中,这样就可以使用 {{ }} 模板语法拿到。接下来回到 post2channel.html , 看到部分:

$("#create_integration_btn").click(function () {    
  var channel = $("#selected_channel").val();   
  console.log("create integration, channel: " + channel);    
  if (channel != "") {        
    $.ajax({            
    type: "POST",            
    contentType: "application/json; charset=utf-8",            
    url: "../../v1/developers/{{ dev_key }}/integrations",            
    data: JSON.stringify({channel: channel}),            
    success: function (data) {                
      if (data != undefined) {                    
        if (data["token"]) {                       
          window.location.href = "/auth/manage/create_integration/" + data["integration_id"] + "/" + data["token"] + "/" + channel                    
        }                
      } else {                    
        toastr.error("服务器异常");                
      }            
    },            
      error: function (error) {                
        console.log(error);                
        toastr.error("创建失败");            
      },            
      dataType: "json"        
    })    
  }
})

这是创建集成按钮的逻辑,用 jQuery 的 ajax 发送 post 请求,以 json 格式将输入框中的 channel 值传到 url 表明的视图函数。这里的 url 是相对路径。在 ajax 中有 success 和 error 两个函数,分别是请求成功和失败的回调函数。下面看到这个请求的视图函数,我们来看看视图函数是如何处理从页面传过来的数据。

api_1_0/developers.py

# 添加一个集成,并返回 integration_id ,如果 channel 已存在,直接绑定该 channel , 否则新建一个 channel@api.route("/developers//integrations", methods=["POST"])
def create_integrations(dev_key):
# 先判断一下传过来的 json 数据是否符合要求
  if not request.json or not "channel" in request.json:    
    print("request json error")    
    abort(400)
#从数据库得到 developer
  developer = Developer.query.filter_by(dev_key=dev_key).first()
  if developer is None:    
    print("developer not found")    
    abort(400)
  #以下省略
  ...
  #最后返回相关数据
  return jsonify({"integration_id": new_integration_id,                
                  "token": token.decode("utf-8")}), 201

以上代码创建成功后也返回了一个 json ,这样在 success 的回调函数中就能得到这个数据,用于在跳转到其他界面的时候做一些初始化操作。即以下代码:

if (data != undefined) { 
  if (data["token"]) { 
    window.location.href = "/auth/manage/create_integration/" + data["integration_id"] + "/" + data["token"] + "/" + channel 
  } 
}

这里将参数放到 url 中,调用了对应的视图函数:

auth/views.py

@auth.route("/manage/create_integration///", methods=["GET", "POST"])
def create_integration(integration_id, token, channel):    
  integration = Integration.query.filter_by(integration_id=integration_id).first()    
  channels = get_channel_list()    
  developer = get_developer()    
  dev_key = developer.dev_key    
  return render_template("auth/create.html", **locals())

可以看到上面的参数就是从 post2channel 页面传过来的,并且还从数据库中查询到对应的 integration ,然后将相关数据传到 create.html ,让后者渲染页面。

我们通过一个例子看到数据在前端和后端、前端之间的交互。总结一下,无非就是在前端页面中发送请求,然后在视图函数中操作数据库,并且返回相关数据,回调到前端页面中,最后在回调中调用另一个视图函数,在跳转页面时利用得到的数据渲染页面。一切就是这么简单,没什么黑魔法!源码在 github 上。下一节介绍一下 flask_oauthlib 的用法,学习一下如何使用 oath2 第三方授权登录以及调用提供方的相关 API 。


作者: KenChoi - 极光( JPush 为极光团队账号,欢迎关注)

原文:从零开始用 Flask 搭建一个网站(三)

知乎专栏:极光日报

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/8963.html

相关文章

  • 从零开始 Flask 搭建一个网站(四)

    摘要:前言从零开始用搭建一个网站三介绍了网页前端与后端前端与前端之间数据的交流。作者极光为极光团队账号,欢迎关注原文从零开始用搭建一个网站四知乎专栏极光日报 前言 从零开始用 Flask 搭建一个网站(三) 介绍了网页前端与后端、前端与前端之间数据的交流。本节主要介绍一下如何应用 Flask-OAuthlib, 使用 Flask-OAuthlib 就可以轻松地请求第三方应用提供的 API 。...

    CarterLi 评论0 收藏0
  • 从零开始 Flask 搭建一个网站(二)

    摘要:从零开始用搭建一个网站一介绍了如何搭建环境,以及应用基本项目结构。我们要搭建的网站是管理第三方集成的控制台,类似于。我们先定义一个用户模型然后在文件夹下创建一个文件。 从零开始用 Flask 搭建一个网站(一) 介绍了如何搭建 Python 环境,以及 Flask 应用基本项目结构。我们要搭建的网站是管理第三方集成的控制台,类似于 Slack。 本篇主要讲解数据如何在 Flask 应用...

    Coly 评论0 收藏0
  • 从零开始搭建论坛():Flask框架简单介绍

    摘要:我们的论坛项目就使用了该框架。此外,麦子学院也有一个入门视频教程,一共小时的视频教程,涵盖开发的方方面面,包括环境的搭建,语法介绍,项目结构的组织,全球化,单元测试等内容。博客地址更多阅读的机制三个框架的对比 前面两篇文章中我们已经了解 Web(HTTP)服务器,Web应用程序,Web框架,WSGI这些 Python Web 开发中的概念。我们知道,Web框架通过将不同Web应用程序中...

    Alan 评论0 收藏0
  • 从零开始搭建论坛(一):Web服务器与Web框架

    摘要:服务器通过协议与客户端通信,因此也被称为服务器。本文标题为从零开始搭建论坛一服务器与框架本文链接为更多阅读自己动手开发网络服务器一自己动手开发网络服务器二自己动手开发网络服务器三服务器网关接口实现原理分析最佳实践指南应用浅谈框架编程简介 之前用 Django 做过一个小的站点,感觉Django太过笨重,于是就准备换一个比较轻量级的 Web 框架来玩玩。Web.py 作者已经挂掉,项目好...

    dantezhao 评论0 收藏0
  • 从零开始搭建论坛(二):Web服务器网关接口

    摘要:在从零开始搭建论坛一服务器与框架中我们弄清楚了服务器应用程序框架的概念。框架应用生成状态码以及响应报头,然后将二者传递至,等待服务器保存。添加响应头,状态码返回响应信息创建一个服务器实例目前支持的成熟服务器有很多,是相当不错的一个。 在 从零开始搭建论坛(一):Web服务器与Web框架 中我们弄清楚了Web 服务器、Web 应用程序、Web框架的概念。对于 Python 来说,越来越多...

    Astrian 评论0 收藏0

发表评论

0条评论

mykurisu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<