Python Flask框架基础(七)留言板

本章示例程序是一个非常简单的留言板程序SayHello,涉及的知识完全是前面六个章节的内容 。这一章会基于这个程序介绍一种组织代码的形式,并了解Web程序开发流程,对前面六章的知识进行简单的回顾复习。

在具体的开发中,代码编写主要分为前端页面和后端程序。前端开发的主要流程:
1)根据功能规格书画页面草图
2)根据草图做交互式原型图
3)根据原型图开发前端页面(HTML、CSS、JavaScript)

后端开发的主要流程:
1)数据库建模
2)编写表单类
3)编写视图函数和相关的处理函数
4)在页面中使用Jinja2替换虚拟数据

本章的示例程序SayHello非常简单,就是在表单中输入姓名和留言,按下提交按钮后,就可以将留言加入到页面的消息列表中。

程序主页设计如图:

请添加图片描述

前几章的示例程序都采用单脚本的形式存储代码,随着项目的增大,把所有代码都放在app.py会导致可读性降低,不方便管理。更好地组织方式是将单一的模块升级为包(Package),把不同的代码分模块存放。

在Python中,每一个有效的Python 文件(.py)都是模块。每一个包含__init__.py 文件的文件夹都被视作包,包让你可以使用文件夹来组织模块。__init__.py 文件通常被称作构造文件,文件可以为空,也可以用来放置包的初始化代码。当包或包内的模块被导入时,构造文件将被自动执行。

SayHello程序的核心组件都放到一个包中,包的名称通常使用程序名称,除了程序代码,Flask项目还包括其他必要的组件,如下说明

组件说明
sayhello/__init__.py构造文件,包含程序实例
sayhello/templates/模板
sayhello/static/静态文件,其中又包含js和css文件夹
sayhello/views.py视图函数
sayhello/forms.py表单
sayhello/errors.py错误处理
sayhello/models.py数据库模型
sayhello/commands.py自定义flask命令
sayhello/settings.py配置文件

和前面几章不同的是,配置不仅可以通过config对象直接写入,还可以写在单独的文件中,配置文件的内容主要是配置变量 = 值

在创建程序实例后,使用config对象的form_pyfile()方法即可加载配置,传入配置模块的文件名作为参数:

...
app = Flask(__name__)
app.config.form_pyfile('settings.py')

创建程序实例

使用包组织程序代码后,创建程序实例、初始化扩展等操作可以在程序包的构造文件(__init__.py)中实现。

# 文件__init__.py
from flask import Flask
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from flask_sqlalchemy import SQLAlchemy

app = Flask('sayhello')
app.config.from_pyfile('settings.py')
app.jinja_env.trim_blocks = True
app.jinja_env.lstrip_blocks = True

db = SQLAlchemy(app)
bootstrap = Bootstrap(app)
moment = Moment(app)

from sayhello import views, errors, commands

当程序启动时,最先被执行的是包含程序实例的脚本,在本例中也就是构造文件(__init__.py)。

虽然本例中,程序实例化在构造文件中,但注册在实例上的各种处理函数都在其他脚本文件中(例如views.py、errors.py等),为了将处理函数与程序实例关联起来,我们可以在构造文件中导入这些模块,也可以在这些模块中导入构造文件。但是在构造文件中导入这些模块会在构造文件执行时,将构造函数和错误处理函数一并注册到程序中,保障程序可以正常执行,因此我们选用在构造文件中导入这些模块,如代码中最后一行。

后端程序开发

1、数据库建模

在程序设计阶段就确定了需要使用哪些表来存储数据,表中存储哪些字段以及各个表的关系。因此我们首先进行数据库建模。

在本例中用于保存留言的Message模型如代码所示:

# 文件models.py
from datetime import datetime
from sayhello import db

class Message(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(20))
    body = db.Column(db.String(200))
    timestamp = db.Column(db.DateTime, default=datetime.now, index=True)
2、创建表单类

留言表单由表单类HelloForm表示,表单中使用了文本区域字段TextAreaField。

#文件forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, TextAreaField
from wtforms.validators import DataRequired, Length

class HelloForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired(), Length(1, 20)])
    body = TextAreaField('Message', validators=[DataRequired(), Length(1, 200)])
    submit = SubmitField()
3、编写视图函数

视图函数主要存在两个文件中,一个是正常逻辑的处理views.py,另一个是错误处理errors.py。

正常逻辑的处理:
1)处理GET请求,从数据库中查询所有的消息记录,返回渲染后的包含消息列表的主页模板index.html。
2)处理POST请求,问候表单提交后,验证表单数据,通过验证后将数据保存在数据库中,使用flash()函数显示一条提示,然后重定向到index视图,渲染页面。

#文件views.py
from flask import flash, redirect, url_for, render_template
from sayhello import app, db
from sayhello.forms import HelloForm
from sayhello.models import Message

@app.route('/', methods=['GET', 'POST'])
def index():
    form = HelloForm()
    if form.validate_on_submit():
        name = form.name.data
        body = form.body.data
        message = Message(body=body, name=name)
        db.session.add(message)
        db.session.commit()
        flash('Your message have been recorded!')
        return redirect(url_for('index'))

    messages = Message.query.order_by(Message.timestamp.desc()).all()
    return render_template('index.html', form=form, messages=messages)

order_by(Message.timestamp.desc())的意思是根据Message模型的timestamp字段排序,字段上的排序使用降序。

#文件errors.py
from flask import render_template
from sayhello import app

@app.errorhandler(404)
def page_not_found(e):
    return render_template('errors/404.html'), 404

@app.errorhandler(500)
def internal_server_error(e):
    return render_template('errors/500.html'), 500
4、编写模板

将index.html和404.html以及500.html中的共有部分抽出合并为基模板base.html。基模板包含一个完整的HTML结构。

base.html模板如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}Say Hello!{% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
</head>
<body>
<main class="container">
    <header>
        <h1 class="text-center display-4">
            <a href="{{ url_for('index') }}" class="text-success"><strong>Say Hello</strong></a>
            <small class="text-muted sub-title">to the world</small>
        </h1>
    </header>
    {% for message in get_flashed_messages() %}
        <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ message }}
        </div>
    {% endfor %}
    {% block content %}{% endblock %}
    <footer class="text-center">
        {% block footer %}
            <small> &copy; 2018 <a href="http://greyli.com" title="Written by Grey Li">Grey Li</a> /
                <a href="https://github.com/greyli/sayhello" title="Fork me on GitHub">GitHub</a> /
                <a href="http://helloflask.com" title="A HelloFlask project">HelloFlask</a>
            </small>
            <p><a id="bottom" href="#" title="Go Top">&uarr;</a></p>
        {% endblock %}
    </footer>
</main>

<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.2.1.slim.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>
{{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.min.js')) }}
</body>
</html>

在head和body标签内,我们引入了bootstrap所需的CSS和JavaScript文件,以及自定义的style.css和script.js文件。

在主页模版index.html中,使用form_field()宏渲染表单,然后迭代传入的messages变量,渲染消息列表。
index.html文件如下:

{% extends 'base.html' %}
{% from 'bootstrap/form.html' import render_form %}

{% block content %}
    <div class="hello-form">
        <form method='post'>
        	{{ form.csrf_token }}
        	<div class="form-group required">
        		{{ form_field(form.name,class='form-control') }}
        	</div>
        	<div class="form-group required">
        		{{ form_field(form.body,class='form-control') }}
        	</div>
        	{{ form.submit(class='btn btn-secondary') }}
        </form>
    </div>
    <h5>{{ messages|length }} messages
        <small class="float-right">
            <a href="#bottom" title="Go Bottom">&darr;</a>
        </small>
    </h5>
    <div class="list-group">
        {% for message in messages %}
            <a class="list-group-item list-group-item-action flex-column">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1 text-success">{{ message.name }}
                        <small class="text-muted"> #{{ loop.revindex }}</small>
                    </h5>
                    <small>
                        {{ message.timestamp.strftime('%Y/%m/%d %H:%M') }}
                    </small>
                </div>
                <p class="mb-1">{{ message.body }}</p>
            </a>
        {% endfor %}
    </div>
{% endblock %}
5、生成虚拟数据

创建虚拟数据是编写Web程序时的常见需求,流行的Python虚拟数据生成工具有Mimesis和Faker。Faker内置了20多类虚拟数据,包括姓名、地址、网络账号、信用卡、时间、职位、公司名称、python数据等。faker的使用示例如下,每次调用都会获得不同的随机结果。

>>> from faker import Faker
>>> fake = Faker()

>>> fake.name()
'Lucy Cechtelar'

>>> fake.address()
426 Jordy lodge
Cartwrightshire,SC 88120-6700

本例利用Faker实现了一个生成虚拟留言数据的命令函数forge,forge函数代码详见commands.py文件。

import click
from sayhello import app, db
from sayhello.models import Message

@app.cli.command()
@click.option('--count', default=20, help='Quantity of messages, default is 20.')
def forge(count):
    """Generate fake messages."""
    from faker import Faker

    db.drop_all()
    db.create_all()

    fake = Faker()
    click.echo('Working...')

    for i in range(count):
        message = Message(
            name=fake.name(),
            body=fake.sentence(),
            timestamp=fake.date_time_this_year()
        )
        db.session.add(message)

    db.session.commit()
    click.echo('Created %d fake messages.' % count)

本例的运行:

$ cd sayhello
$ pipenv install --dev --pypi-mirror https://pypi.doubanio.com/simple
$ pipenv shell 

$ flask forge #生成虚拟数据
$ flask run #运行程序

参考资料:《Flask Web开发实战入门、进阶与原理解析》李辉 著

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/705004.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI大模型探索之路-实战篇:智能化IT领域搜索引擎之GLM-4大模型技术的实践探索

系列篇章&#x1f4a5; No.文章1AI大模型探索之路-实战篇&#xff1a;智能化IT领域搜索引擎的构建与初步实践2AI大模型探索之路-实战篇&#xff1a;智能化IT领域搜索引擎之GLM-4大模型技术的实践探索3AI大模型探索之路-实战篇&#xff1a;智能化IT领域搜索引擎之知乎网站数据获…

【计算机毕业设计】257基于大学生社团活动管理的微信小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

二分+ST表+递推,Cf 1237D - Balanced Playlist

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1237D - Codeforces 二、解题报告 1、思路分析 case3提示我们一件事情&#xff1a;如果存在某个位置永远不停止&#xff0c;那么所有位置都满足永远不停止 很容易证明 随着下标右移&#xff0c…

YOLOv10原理与实战训练自己的数据集

课程链接&#xff1a;YOLOv10原理与实战训练自己的数据集_在线视频教程-CSDN程序员研修院 YOLOv10是最近提出的YOLO的改进版本。在后处理方面&#xff0c;提出了一致性双重分配策略用于无NMS训练&#xff0c;从而实现了高效的端到端检测。在模型架构方面&#xff0c;引入了全面…

Ubuntu安装opendaylight控制器

目录 实验任务 实验环境 安装过程&#xff1a; 将opendaylight添加到环境变量中 实验任务 在虚拟机1中安装opendaylight控制器并安装相应的组件在虚拟机2中使用mininet创建一个测试拓扑并将控制器的地址指向虚拟机1在虚拟机1中的opendaylight的web界面可以查看到创建的拓扑将…

实践分享:鸿蒙跨平台开发实例

先来理解什么是跨平台 提到跨平台&#xff0c;要先理解什么是“平台”&#xff0c;这里的平台&#xff0c;就是指应用程序的运行环境&#xff0c;例如操作系统&#xff0c;或者是Web浏览器&#xff0c;具体的像HarmonyOS、Android、iOS、或者浏览器&#xff0c;都可以叫做平台…

[vue2]深入理解路由

本节目标 单页应用程序路由概念VueRouter基本使用组件分类存放路由模块封装声明式导航其他路由配置路由模式编程式导航案例-面经基础版 单页应用程序 单页应用程序(SPA): 所有的功能都在一个HTML页面上实现 网易云音乐: 网易云音乐 多页应用程序(MPA): 不同功能通过切换不同…

透平油氧化安定性检测 发动机油运动粘度40℃检测

透平油氧化安定性检测 透平油&#xff0c;也称为涡轮机油或汽轮机油&#xff0c;是专门用于汽轮机的润滑油。它具有良好的抗氧化安定性和抗乳化性能&#xff0c;主要用于发电厂蒸气轮机、水电站水轮发电机以及其他需要深度精细润滑的场合。透平油的氧化安定性是衡量其在高温条件…

CentOs7 安装mysql5.7

1.卸载原系统中的mariadb…… 首先执行命令rpm -qa|grep mariadb查看是否有mariadb的安装包&#xff0c;没有可以不管 接下来&#xff0c;执行 rpm -e --nodeps mariadb-libs #删除掉下载mysql5.7安装包 1.前往官方网站复制yum源链接Mysql官网 然后鼠标右键粘贴 wget 执行…

极限网关助力好未来 Elasticsearch 容器化升级

极限网关在好未来的最佳实践案例&#xff0c;轻松扛住日增百 TB 数据的流量&#xff0c;助力 ES 从物理机到云原生架构的改造&#xff0c;实现了流控、请求分析、安全管理、无缝迁移等场景。一次完美的客户体验~ 背景 物理机架构时代 2022 年&#xff0c;好未来整个日志 Elas…

【云计算】Docker部署Nextcloud网盘并实现随地公网远程访问

配置文件 切换root权限&#xff0c;新建一个nextcloud的文件夹&#xff0c;进入该目录&#xff0c;创建docker-compose.yml [cpslocalhost ~]$ su root Password: 666666 [rootlocalhost cps]# ls Desktop Documents Downloads Music Pictures Public Templates Vide…

为CAP面板添加简单的Authentication登录验证功能 C#|.net

终于搞定了CAP Dashboard的登录验证功能! 因为网上找不到简单的CAP Dashboard的登录验证功能,所以这个功能摸索着开发了好久。 这个Authentication认证功能,不仅适用于CAP面板,也适用于懒得开发登录页面,但是又需要简单用户名密码登录的网页。 做过后端的比较熟悉,CAP面…

Science Advances|全溶液工艺制备超柔性有机光电器件(柔性电子/柔性传感/可穿戴电子/电子皮肤/有机光电器件)

2024年4月10日,日本东京大学Takao Someya和日本理化学研究所(RIKEN)Kenjiro Fukuda课题组,在《Science Advances》上发布了一篇题为“All-solution-processed ultraflexible wearable sensor enabled with universal trilayer structure for organic optoelectronic device…

TiKV 源码分析之 PointGet

作者&#xff1a;来自 vivo 互联网存储研发团队-Guo Xiang 本文介绍了TiDB中最基本的PointGet算子在存储层TiKV中的执行流程。 一、背景介绍 TiDB是一款具有HTAP能力(同时支持在线事务处理与在线分析处理 )的融合型分布式数据库产品&#xff0c;具备水平扩容或者缩容等重要特…

计算机网络知识点(三)

目录 一、简述TCP连接和关闭的状态转移 二、简述TCP慢启动 三、简述TCP如何保证有序 四、简述TCP常见的拥塞控制算法 五、简述TCP超时重传 一、简述TCP连接和关闭的状态转移 状态转移图 图中上半部分是TCP的三次握手过程的状态变迁&#xff0c;下半部分是TCP四次挥手过程的…

Three.js动效(第17辑):可视化大屏中炫酷的例子效果,如何实现

Hi&#xff0c;前几天分享了一些炫酷的例子动画背景图&#xff0c;很多老铁在评论区问我是如何实现的&#xff0c;10经验的前端开发和UI设计老司机→贝格前端工场&#xff0c;为您分享。 之前的文章&#xff1a;背景图的动效&#xff0c;非常的炫酷&#xff0c;非一般的感觉。…

el-table有横向滚动条时,最后一行数据被横向滚动条遮挡,且不出现纵向滚动条;只有当鼠标移到fixed列才能纵向滚动,移到非fixed列无法纵向滚动。

问题背景 项目使用的vue2&#xff0c;el-table有横向滚动条时&#xff0c;最后一行数据被横向滚动条遮挡&#xff0c;且不出现纵向滚动条&#xff1b;只有当鼠标移到fixed列才能纵向滚动&#xff0c;移到非fixed列无法纵向滚动。 见下图&#xff1a;最后一行被遮挡住了一部分…

R语言ggHoriPlot包绘制地平线图

数据和代码获取&#xff1a;请查看主页个人信息&#xff01;&#xff01;&#xff01; 关键词“地平线图” 1. 数据读取与处理 首先&#xff0c;从TSV文件中读取数据&#xff0c;并进行数据清洗和处理。 rm(listls()) pacman::p_load(tidyverse,ggalt,ggHoriPlot,hrbrthemes…

python接入汇率换算工具提高网站/小程序日活度

实时汇率换算工具可以帮助用户快速准确地计算不同货币之间最新的汇兑比例。无论是金融从业者或者是人们日常生活出行都会使用到&#xff0c;广泛用于国际结算、银行汇率查询应用、开展跨国贸易、投资等参考场景。 我们可以通过在网站或者小程序中接入这样一个小工具&#xff0…

【个人博客搭建】(23)购买服务器、域名、备案

1、服务器主要是为了有一个公网的IP地址&#xff0c;方便我们可以通过网络随时访问 2、域名是对IP地址的一个替代。简单说IP地址可能不方便记忆&#xff0c;但是自己配置的域名会简单些&#xff0c;另外暴露IP地址也不安全。(虽然也能通过域名找到IP) 3、备案。这是政策。简单所…