python - 使用 Jinja2 的 HTML 模板-6ren

python - 使用 Jinja2 的 HTML 模板

转载作者：行者123 更新时间：2023-11-28 03:02:13

我的 main.py 文件需要帮助，我无法让我的 webapp 发布评论并使用用户名保存它们。

这是我的主要代码。主程序

import os
import jinja2
import webapp2

from google.appengine.ext import ndb

template_dir = os.path.join(os.path.dirname(__file__), 'templates')
jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir), autoescape = True)


DEFAULT_WALL = 'Public'

def wall_key(wall_name = DEFAULT_WALL):
    """This will create a datastore key"""
    return ndb.Key('Wall', wall_name)


class CommentContainer(ndb.Model):
    """This function contains the name, the content and date of the comments"""
    name = ndb.StringProperty(indexed=False)
    content = ndb.StringProperty(indexed=False)
    date = ndb.DateTimeProperty(auto_now_add = True)


class Handler(webapp2.RequestHandler):
    """This handler process the request, manipulates data and define a response to be returned to the client"""
    def write(self, *a, **kw):
        self.response.out.write(*a, **kw)

    def render_str(self, template, **params):
        t = jinja_env.get_template(template)
        return t.render(params)

    def render(self, template, **kw):
        self.write(self.render_str(template, **kw))


class MainPage(Handler):
    def get(self):
        wall_name = self.request.get('wall_name', DEFAULT_WALL)
        if wall_name == DEFAULT_WALL.lower(): wall_name = DEFAULT_WALL
        comments_query = CommentContainer.query(ancestor = wall_key(wall_name)).order(-CommentContainer.date)
        #comments = comments_query.fetch()
        self.render("content.html")


class Post(Handler):
    def post(self):
        wall_name = self.request.get('wall_name',DEFAULT_WALL)
        comment_container = CommentContainer(parent = wall_key(wall_name))
        comment_container.name = self.request.get('name')
        comment_container.content = self.request.get('content')
        if comment_container.content == '':
            self.redirect("/error")
        else:
            comment_container.put()
            self.redirect('/#comment_section')



class Error_Page(Handler):
    """This controls empty comments"""
    def get(self):
        self.render("error.html")


app = webapp2.WSGIApplication([
                                ("/", MainPage),
                                ("/comments", Post),
                                ("/error", Error_Page)
                                ],
                                debug = True)

这是我的模板 content.html:

{% extends "index.html" %}

<html>

{% block content %}

    <div class="container">
      <div class="row header">
        <div class="col-md-6">
          <img class="title-photo" src="images/ed.png" alt="Photo of Ed">
        </div>
        <div class="col-md-6 text-right">
          <h1>Eduardo González Robles.</h1>
          <h2>Portfolio.</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <hr>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-4">
          <h3 class="text-body"><u>Block vs Inline</u>
          </h3>
            <p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
              <span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
            </p>
        </div>
        <div class="col-md-4">
          <h3 class="text-body"><u>Selectors</u></h3>
            <p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
        </div>
        <div class="col-md-4">
          <h3 class="text-body"><u>Responsive Layout</u></h3>
          <p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-6">
          <article>
            <h3><u>The Importance of Avoiding Repetition</u></h3>
              <p class="p-text">For a better reading and understanding of the code, it is important not to repeat elements and group them with selectors. It makes it <span>easier to read</span> and understand, the code does not get longer and with that it´s easier to <span>find errors</span> in the syntax.</p> 
          </article>
        </div>2
        <div class="col-md-6">
          <h3><u>Tree like Structure</u></h3>
            <p class="p-text">All the elements in html have a <span><em>parent</em></span> element. Elements that are inside another element are called <span><em>child</em></span><br>For example, the tag <u>html</u> is the parent of all the structure, body and head are the children of html.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center">
          <img class= "tree-image" src="http://www.w3schools.com/xml/nodetree.gif" alt="Tree Like Structure"><br>
          <q class="img-quote">http://www.w3schools.com/html/html_quotation_elements.asp</q>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <hr>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center">
          <h2><span class="python"><u>Python</u></span></h2>
          <p class="p-text">The reason why we cannot write in a common language in Python is beacuse computers are "stupid" and they have to take the orders from a language they understand so they can follow the exact command and execute the function correct.</p>
        </div>
      </div>
      <div class ="row text-center">
        <div class = "col-md-4">
          <h3><span class="python"><u>Procedual Thinking</u></span></h3>
            <p class="p-text"> It refers to be capable of understand and give clear commands to a computer so this one can understand and execute them.</p>
        </div>
        <div class="col-md-4">
          <h3><span class="python"><u>Abstract Thinking</u></span></h3>
            <p class="p-text"> It means you have the abstraction ability to avoid the unnecessary repetitions in the code.
            </p>
        </div>
        <div class="col-md-4">
          <h3><span class="python"><u>Technological Empathy</u></span></h3>
            <p class="p-text">This term makes reference that you understand what is a computers, it's functions. A computer is a tool that we use to write programming languages.</p>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-6">
          <h3><span class="python"><u>System Thinking</u></span></h3>
            <p class="p-text">This refers when you break a big problem into smaller problems, it makes easier to understand the big picture. Solving problems is a part of being able to system thinking. The most difficult part of solving problems is to know where to start. The very first thing you have to do is to try to understand the problem. All computer problems have two things in common, they have inputs and desired outputs. Udacity's Pythonist Guide goes like this:</p>
              <ol class="ol-text" start = "0">
                <li><span>Don't Panic</span></li>
                <li>What are the inputs?</li>
                <li>What are the outputs?</li>
                <li>Solve the problem</li>
                <li>Simple mechanical solution</li>
                <li>Develop incrementally and test as you go</li>
              </ol>
        </div>
        <div class="col-md-6">
          <h3><span class="python"><u>Debbugging</u></span></h3>
            <p class="p-text"> Action of identifying the causes that produces errors in the code. There are many strategies to identify the errors, here are 5:<br></p>
              <ol class="ol-text">
                <li>Analize the error messages when the programs crash.</li>
                <li>Work with the example code and compare with yours.</li>
                <li>Make sure that the example code works.</li>
                <li>Check with the print statement that your code is working properly. Sometimes it doesn't crash but that doesn't mean that is working correct, so you have to make sure it's doing what you are commanding.</li>
                <li>Save and compare your old code versions so you can back and analize them if needed.</li>
              </ol>
        </div>
      </div>
      <div class ="row text-center">
        <div class="col-md-4">
          <h3><span class="python"><u>Variables</u></span></h3>
            <p class="p-text">Variable are used as a data storage that saves information like integers, decimals and characters. Variables give names to the values and you can change those values for new one if desire. Variables work because they increase the code reading when we use names that makes sense to humans.</p>
        </div>
        <div class="col-md-4">
          <h3><span class="python"><u>Strings</u></span></h3>
            <p class="p-text">The strings are one of the most common things in python, you have to put the word between quotes. If you start just with one quote the you have to finish with one too, same thing with 2 or 3 quotes.</p>
        </div>
        <div class="col-md-4">
          <h3><span class="python"><u>Procedures/Functions</u></span></h3>
            <p class="p-text">Are "commands" that takes data as input and transform them into an output. They help programmers to avoid repetition because once you define the procedure, you can use it forever and you don't have to write it again.
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-12">
          <h3><span class="python"><u>Comparatives</u></span></h3>
            <p class="p-text">They are usually Booleans so they can only mean True or False. They are used to check real vs non-real parameters.You can use them in numbers and strings. These signs are used for the comparatives: <,>,<=,>=,==,!=<br><br>If Statements are other comparatives that are involved with the conditional. The syntax in Python for an if statement is like this:<br>if [condition]:<br>[indentedStatementBlock]<br><br>There is another comparative form named IF-ELSE statement, it has two indented blocks, one for if and one for else. If activates itself when the condition is True, the else block it's activated when the condition is False. <br> if condition:<br>indentedStatementBlockForTrueCondition<br>else:<br>indentedStatementBlockForFalseCondition]<br><br>The <strong>"or"</strong> value analize one of the expressions, if the result is true, then the other expression is not evaluated.</p></p>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-4">
          <h3><span class="python"><u>Lists</u></span></h3>
            <p class="p-text">Lists can contain many objects in certain order; you can access to that list and add, modify, remove objects. The difference between <strong>Strings</strong> and <strong>Lists</strong> is that lists can contain strings and supports mutation. Lists start with a bracket and end with a bracket [LIST].</p>
        </div>
        <div class="col-md-4">
          <h3><span class="python"><u>Mutation</u></span></h3>
            <p class="p-text">Mutation allows us to modify the list after we created it. There's another term named <u>Aliasing</u> and it is  when two different names refer to the same object.</p>
        </div>
        <div class="col-md-4">
          <h3><span class="python"><u>List Operations</u></span></h3>
            <p class= "p-text">These are some examples of list operations</p>
              <ol class="ol-text">
                <li>Append.- adds new elements at the end of the list. [list].append([element]).</li>
                <li>Plus (+).- Acts similar to concatenation of strings. This one produces new lists. [list1] + [list2] (result) [list1list2].</li>
                <li>Length.- Indicates how many elements the list contain. <br>len ("Eduardo") = 7.</li>
              </ol>
        </div>
      </div>
      <div class= "row text-center">
        <div class="col-md-6">
          <h3><span class="python"><u>While Loop</u></span></h3>
            <p class="p-text">The While Loops are used to repeat codes. It has a test expression followed by a block, when the expression is true then the block executes, when the expression is false, the the code skips the True block to go to the False one. On the other hand, loops can be infinite if the expression does not correspond to False.<br><u>while</u>[test expression]:<br>[True block]<br>if [test expression]:<br>[False block]</p>
        </div>
        <div class="col-md-6">
          <h3><span class="python"><u>For Loop</u></span></h3>
            <p class="p-text">For loops are easier to use because you need to write less code than the while loops. They are written like this: <br><u>for</u> [name] <u>in</u> [list]:<br>[block]<br>The Loop goes through each element of the list and evaluates the block. In other words, for loop is used to repeat an action/sentence certain number of times within a range. We can use For Loops on list to, syntax looks like this:<br>for [name] in [list]:<br>[block]
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-4">
          <h3><span class="python"><u>Find</u></span></h3>
            <p class ="p-text"> Find is a method not an operand because it's a process created by Python. It helps you to find strings in strings. Syntax:<br>str.find(str, beg=0 end=len(string))</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <hr>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-md-12">
          <h2><span class="stage-3"><u>Stage 3: Create a Movie Website</u></span></h2>
        </div>
      </div>
      <div class = "row text-center">
        <div class = "col-md-4">
          <h3><span class="stage-3"><u>import System</u></span></h3>
            <p class = "p-text"> The import System in Python is used to bring codes to a desired file, you can import time, webbrowser, turtle, even packages outside the Pyhton Standard Library like Twilio or frameworks like fresh tomatoes</p>
        </div>
        <div class = "col-md-4">
          <h3><span class="stage-3"><u>Built-in Functions</u></span></h3>
            <p class = "p-text"> In the stage 3 of IPND we saw different types of methods like de open method that opens files inside files or websites. <br>The rename method renames files and/or directories src indicates de name of the actual file or directory, dst indicates the new name of the file or directory. <br> The translate method allows you to put 2 arguments.</p>
        </div>
          <div class = "col-md-4">
          <h3><span class="stage-3"><u>Python Class-Intances/Objects</u></span></h3>
            <p class = "p-text"> Classes in Python are like building blueprints, they contain information that creates instances. Instances or Objects are examples of a Class. Another way to describe a Class would be as a box that contains sorted files that access to different files, once a Class enter to it's files, it let us use all the functions that those files contain.</p>
        </div>
      </div>
      <div class = "row text-center">
        <div class = "col-md-3">
          <h3><span class="stage-3"><u>Constructor</u></span></h3>
            <p class = "p-text"> When we create instances, we invoke the constructor method init inside the class, it is here where all the data asociated with the instance starts.</p>
        </div>
        <div class = "col-md-3">
          <h3><span class="stage-3"><u>self</u></span></h3>
            <p class = "p-text"> The constructor uses the keyword "self" to access to the instance attribute.</p>
        </div>
          <div class = "col-md-3">
          <h3><span class="stage-3"><u> Instance Variable</u></span></h3>
            <p class = "p-text"> All the variables asociated with an specific instance  are called Instance Variables, they are unique to the object and you access to them using the kew word slef inside the class and the instance name outside the class.</p>
        </div>
        <div class = "col-md-3">
          <h3><span class="stage-3"><u> Instance Method</u></span></h3>
            <p class = "p-text"> The instance method are all the functions inside the class asociated with the with the instances and that have self as their first argument.</p>
        </div>
      </div>
      <div class="row footer">
        <div class="col-md-6 text-left">
          <p>Walnut Creek Ca.
            94596<br>
            USA.</p>
        </div>
        <div class="col-md-6 text-right">
          <a href="gonzandrobles@gamil.com">gonzandrobles@gmail.com</a>
        </div>
      </div>
  <div class="lesson"> 
    <div class="concept" id="comment_section">
      <div class="concept-title">Write your comments below thanks!!
      </div>
      <br>
      <form align="center" action="/comments" method="post">
        <label>Your name:
          <div>
            <textarea name="name" rows="1" cols="50"></textarea>
          </div>
        </label>
        <label>Your comment:
          <div>
            <textarea name="content" rows="5" cols="100"></textarea>
          </div>
        </label>
        <div>
          <input type="submit" value="Post Your Comment">
        </div>
      </form>
      <div class="part-concept">
        <div class="part-concept-title">
          Previous Comments:
        </div>  
          <br>
          {% for comment in comments %}
            {% if comment.content != '' %}
                  {% if comment.name != '' %}
                    <b>{{ comment.name }}</b> wrote:
                  {% else %}
                    <b>Anonymous</b> wrote:
                  {% endif %}
                  <blockquote>{{ comment.content }}</blockquote>  
                {% endif %}
                <div>{{ error }}</div>
            {% endfor %}        
      </div>
    </div>
  </div>

{% endblock %}

</html>

这是我的模板 error.html:

{% extends "index.html" %}

<html>

{% block content %}

<div>
    <span>Please, add a comment.</span>
    <button = onclick="goBack()">Return to comments</button>
    <script>
    function goBack() {
        window.history.back();
    }
    </script>
</div>

{% endblock %}

</html>

最后是我的 index.html:

<!DOCTYPE html>

<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Portfolio GonzandRobles</title>
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
    <body>

        {% block content %}

        {% endblock %}

    </body>
</html>

我在使用 google app engine 部署我的应用程序时也遇到了问题，它说我的应用程序名称不存在。

非常感谢。

最佳答案

您需要像这样将评论查询传递到您的模板中:

class MainPage(Handler):
    def get(self):
        wall_name = self.request.get('wall_name', DEFAULT_WALL)
        if wall_name == DEFAULT_WALL.lower(): wall_name = DEFAULT_WALL
        comments_query = CommentContainer.query(ancestor = wall_key(wall_name)).order(-CommentContainer.date)
        #comments = comments_query.fetch()
        self.render("content.html", comments = comments_query)

这使得 comments 可以像在模板中一样进行迭代。

至于你的部署问题，打开 app.yaml 并查看项目的 application: 字段。它需要与您在 Google Developer Console 中在线创建的项目 ID(项目 ID)完全相同。我猜是名称不匹配，或者您还没有在线创建应用程序。

关于python - 使用 Jinja2 的 HTML 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34305150/

文章推荐： javascript - 在浏览器选项卡上创建唯一 ID 以保留页面内容

文章推荐： javascript - Google 站点中 HTML Box 的大小

文章推荐： c# - 如何在mvc中获取网页的特定部分？

c++ - 模板的特化模板的定义
namespace std { template <> class hash{ public : size_t operator()( cons
javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板
我正在构建一个 Javascript 交互性有限的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板合并以实现相同的内容。想象一个无限滚动的页面，其中 SEO 非常重要
javascript - 外部类调用 LitElement 组件方法(传递 html 模板)，组件方法更新其 html 模板
我需要一个由游戏逻辑组成的外部类，调用 LitElement 组件，并向其传递一个 html 模板文字，该组件将使用该文字来更新其自己的 html 模板文字的一部分。在下面的代码中，您将看到组件的一
ember.js - 是否可以使用脚本标签加载 Handlebars 模板？或者在 Ember.js 中以编程方式定义 Handlebars 模板
很简单，我不想在 html 文件中定义所有 Handlebars 模板我试过了但这并没有奏效。我是否可以不以编程方式定义模板，甚至只是加载 Handlebars 文件，以便我可以重用，而且我觉得
templates - JQuery 1.5 模板 : JQuery 1. 5 未呈现我的模板。如何调用 JQuery 1.5 模板？
在此代码中，j 正确地成为对象:j.name、j.addr、j.city、j.state 和 j.zip。但是，成功函数有一个 JavaScript 错误 .tmpl() 不是函数。 {{t
Django 模板
Django模板不会？点进来，总结了模板语法传值取值、过滤器和自定义过滤器、模板标签的分类、中间件403报错如何解决、如何继承模板~👆 Django 模板模板传值取值后端传值键值对形式：{‘n
C++模板
哈喽大家好，我是鹿九丸 \color{red}{鹿九丸}鹿九丸，今天给大家带来的是C++模板。如果大家在看我的博客的过程中或者学习的过程中以及在学习方向上有什么问题或者想跟我交流的话可以加我的企
PHP 模板
我正在用 PHP 编写一个简单的模板层，但我遇到了一些困难。目前它是这样工作的: 首先，我使用 fetch_template 从数据库中加载模板内容 - 这可行(如果您有兴趣，我会在启动时收集所有模板
Django 模板
我正在制作有关模板的 Django 教程。我目前处于此代码: from django.template import Template, Context >>> person = {'name': '
Jquery 模板
我正在使用 Jquery 模板来显示传入的 JSON 数据我想将模板加载到可缓存的外部文件中。我该怎么做？更新 http://encosia.com/2010/12/02/jquery-templa
Python 模板
这是我的观点.py: from django.http import HttpResponse from django.template.loader import get_template from
JavaScript 模板
我试图说服一位同事在项目的前端使用 Mustache/Hogan，我提出了以下建议: 有一个 templates.js 文件，大致如下所示: var tpl_alert = '{{msg}}'; va
函数中的c++模板
我想创建一个通用的数组函数。在我的 API 中，我有一个通用容器，我需要将其转换为正确的类，但我想让它通用 template void UT::printArray(CCArray* arr, T t
JavaScript 模板
有谁知道是否有办法在 Genshi 中创建 javascript 模板？我的意思是，我需要一个 .js 文件，可以在其中使用等指令。等等。有什么想法吗？谢谢! 最佳答案你可以直接在html中这
HTML 模板
我想知道是否可以设置某种 HTML 模板系统，基本上我有 3 个不同的文件: - header.html - footer.html - landing.html(landing.html 是包含页面
HTML 模板
我正在尝试构建以下 HTML 模板: 这很简单，如果我使用红色容器 1-4，语法如下: 1 2 3 4 5 6 7 8 9 https://jsfi
模板的c++模板
#include "boost/numeric/ublas/matrix.hpp" using namespace boost::numeric::ublas; template class Lay
类中的c++模板
我在一个类中有一个函数，它传递了一个函数及其参数，然后将它们绑定(bind)到一个函数调用中并调用该函数等。这已经被快速组合在一起以测试我知道代码不是很好的概念。 class Profiling {
用于十进制和任意基数之间转换的c++模板
是否有一个 c++ 结构或模板(在任何库中)允许我在十进制和任何其他基数之间进行转换(很像 bitset 可以做的)？最佳答案是的，你可以使用unsigned int: unsigned int
Elixir 模板 - 遍历具有迭代器值的列表
来自其他编程语言，许多像我一样的人会感到惊讶。我有一个简单的问题。我有一个列表——比如说，用户。我想遍历用户并显示一些信息。非常简单，直到我被这个难住了: 使用一个 eex 模板，我试图这样做:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

python - 使用 Jinja2 的 HTML 模板