三、向模板传递参数，Jinja2模板if，for写法

2018-08-24 本文已影响659人十柒年

1.介绍

在使用网站的过程中，用户在登录之后，在页面上会显示用户的姓名或者账号，昵称什么的，这个在Python里就牵扯到向页面传值，那么在Python中如何向页面传值呢，这就是这篇文章的重点要讲的内容了。开始传值之前有几个概念需要说一下

列表：和其他语言中的列表差不多。类似下面这种写法

list1=['apple','orange','banana'];
list2=['baidu',1,'google',2018];

注：列表里面的类型不用保持一致。

元组：元组和列表其实很像，不过列表在用中括号里写元素，元组是在小括号里写元素，元组里同样可以是不同类型的元素。

tup1=('apple','orange','banana');
tup2=('baidu',1,'google',2018);

字典：字典里面表示的就是键值对， key：value

dict = {'Alice': '2341', 'Beth': '9102', 'Cecil': '3258'}

集合：集合是用大括号包含元素。

basket = {'apple', 'orange', 'apple', 'pear', 'orange', 'banana'}

2.正文：

2.1传值。

好了，介绍完这些概念，可以步入咱们今天的正题了。先看一个简单的传值

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', name='张三')
if __name__ == '__main__':
    app.run(debug=True)

在这里需要先导入render_template,然后把张三放到name里传到index.html页面，那在页面里如何接收呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎你:{{ name }}</h1>
</body>
</html>

这里是引用的模板是Jinja2，添加项目的时候已经选择好的，双大括号来获取值{{name}},效果如下。

image.png
挺简单的，那再来看一下比较复杂的。看一下字典里的值如何传递到前台并接收。我们在添加一个about.html页面，在app.py在在添加一个方法。

@app.route('/about/')
def about():
    class Person(object):
        name='张三'
        age = 18
    p = Person()
    context ={
        'username':'张三',
        'gender':'男',
        'age':18,
        'Person':p,
        'website':{
            'baidu':'www.baidu.com',
            'google':'www.google.com'
        }
    }
    return render_template('about.html', **context)

这里我们先是定义了一个Person类，然后定义了一个字典context，注意字典里又包含了一个website字典。然后用**context进行参数的传递。看下about.html里如何写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是html文件中出现的文字
<p>用户名：{{ username }}</p>
<p>性别：{{ gender }}</p>
<p>年龄：{{ age }}</p>
<hr>
<p>姓名：{{ Person.name }}</p>
<p>年龄：{{ Person.age }}</p>
<hr>
<p>百度：{{ website.baidu }}</p>
<p>谷歌：{{ website.google }}</p>
</body>
</html>

对于字典里的值username等，可以直接写{{username}} 对person类里面的值在需要用Person.name,website里的值也是需要用website.baidu来调用。页面效果如下。浏览器地址加个/about/

image.png

2.2 Jinja2模板 if语句写法

@app.route('/login/<is_login>')
def login(is_login):
    if is_login== "1":
        user={
            'username':'张三',
            'age':18,
        }
        return render_template('login.html',user=user)
    else:
        return render_template('login.html')

这里在login页面让用户输入,如果用户输入1，则显示张三，注销如果不是 1，则显示登录，注册：，这是比较符合习惯的。看下login.html写法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% if user %}
    <a href="#">{{ user.username }}</a>
    <a href="#">注销</a>
    {% else %}
    <a href="#">登陆</a>
    <a href="#">注册</a>
{% endif %}
</body>
</html>

运行效果如下。

image.png

2.2 Jinja2模板 for语句写法

@app.route('/book/')
def book():
    books = [
        {
            'name': '西游记',
            'author': '吴承恩',
            'price': 109
        },
        {
            'name': '红楼梦',
            'author': '曹雪芹',
            'price': 100
        },
        {
            'name': '三国演义',
            'author': '罗贯中',
            'price': 99
        },
        {
            'name': '水浒传',
            'author': '施耐庵',
            'price': 150
        }
    ]
    return render_template('book.html',books=books)

看写book.html写法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <thead>
    <th>书名</th>
    <th>作者</th>
    <th>价格</th>
    </thead>
    <tbody>
    {% for book in books %}
    <tr>
    <td>{{ book.name }}</td>
    <td>{{ book.author }}</td>
    <td>{{ book.price }}</td>
    </tr>
    {% endfor %}

    </tbody>
</table>
</body>
</html>

看下效果。

image.png
嗯，今天就写这么多，下班了。
源码地址：链接：https://pan.baidu.com/s/18e_wOkiUB6IQkOMoKW8jvQ 密码：4sl1
Study hard and make progress every day.

更多学习资料请关注"爱游戏爱编程"。

爱游戏爱编程.jpg