Flask 之旅 (二)：表单

最新推荐文章于 2025-04-14 19:39:02 发布

原创

最新推荐文章于 2025-04-14 19:39:02 发布 · 2.4k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#flask #python #后端

本文介绍了如何在Flask项目中使用模板继承减少代码重复，以及利用url_for动态生成URL。还展示了如何使用Flask-WTF创建和验证表单，实现环境配置详情查看和创建功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

上一篇帖子我们使用 Flask 创建了最基本的 web 服务。使用 bootstrap 对页面进行装点，使用 JQuery Ajax 实现了在页面上实时显示 log 的功能。趁着周末，我继续开始学习更多的东西以满足这个 web 服务的需求。

模板继承

之前我们有了首页，有显示 log 的页面。之后我们还需要查看配置详情和创建新配置的页面。那么我们会在页面中有很多重复的东西。例如我们所有的页面都有导航页，所有页面都要加载 JQuery。我们希望写页面的时候可以像写 python 一样可以使用对象的继承功能以减少重复的代码。所以我们用 Flask 的模板继承功能来写页面。现在我们创建一个 base.html。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <script type=text/javascript src="{
  
  { url_for('static', filename='jquery.js') }}"></script>
    <script type=text/javascript>
    $SCRIPT_ROOT = {
  
  { request.script_root|tojson|safe }};
</script>
</head>

<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="nav nav-tabs">
                <li>
                    <a href="{
  
  { url_for('index') }}">当前环境</a>
                </li>
                <li>
                    <a href="{
  
  { url_for('create_config') }}">创建环境</a>
                </li>
                <li class="disabled">
                    <a href="#">其他</a>
                </li>

            </ul>
        </div>
    </div>
     {% block content %}{% endblock %}
</div>
</body>
</html>

我们看上面的代码，这是我们所有页面的父页面。它很普通，跟其他页面貌似是一样的。但我们看到代码的底部，有这样一段的代码：

{% block content %}{% endblock %}

这段代码的意思是告诉继承它的子页面。子页面所有的内容将会添加到这里来。所以我们再看看子页面怎么写的。如下：

{% extends "base.htm

最低0.47元/天解锁文章

200万优质内容无限畅学