flask之jinjia模板语法，拉取omdb api

本文介绍: Dja n go就可以啊，或者其他python 项目，pycharm 识别到没有安装的包，自动会弹出安装的按钮来，超方便的。不知道 flask 为什么不触发。还要有一个，flask 启动后，修改代码，刷新浏览器并未有任何改变，必须要重启 flask 项目，这是为什么啊？因为继承母版的页面是在templates 目录里，以app.py 里面加载的模板为出发点，来定位其他路径。免费申请 api 接口后，可以使用搜索关键词和电影 id两种方式，搜索结果是个列表，电影 id 获取的是电影的详细信息。模板主要的语法就是继承母版，集成模块。

模板主要的语法就是继承母版，集成模块。

继承母版的语法是：

{% extend s “common/home.html” %}

母版里集成模块的语法是：

    {% block head %}
        {% include './common/header.html' %}
    {% endblock %}

拉取电影资源，网址是：OMDb API – The Open Movie Database

免费申请 api 接口后，可以使用搜索关键词和电影 id两种方式，搜索结果是个列表，电影 id 获取的是电影的详细信息。

http://www.omdbapi.com/?apikey=[yourkey]&amp;s=搜索词

http://www.omdbapi.com/?apikey=[yourkey]&amp;i=电影id

app.py:

from flask import Flask, render_template
import requests

app = Flask(__name__)


@app.route('/')
def main():
    # Here is your key:    
    rawData = requests.get("http://www.omdbapi.com/?apikey=你的key&amp;s=batman&amp;page=1")
    movies = rawData.json()
    return render_template("index.html", movies=movies)


@app.route('/&lt;imdbID&gt;')
def movie_by_title(imdbID):   
    rawData = requests.get(f"http://www.omdbapi.com/?apikey=你的key&amp;i={imdbID}")
    movie = rawData.json()
    return render_template("movie.html", movie=movie)


if __name__ == '__main__':
    app.run(debug=True)

common/header.html:

&lt;meta charset="UTF-8"&gt;
<title&gt;母版</title&gt;
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"&gt;

common/footer.html

<div class="mt-3">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
</div>

common/nav.html

<div class="">
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">电影</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

common/home.html

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
        {% include './common/header.html' %}
    {% endblock %}
</head>
<body>
{% block nav %}
    {% include './common/nav.html' %}
{% endblock %}
<div class="container mt-3">
    <div class="row align-items-start">
        {% block content %}
        {% endblock %}
    </div>
</div>
{% block footer %}
    {% include './common/footer.html' %}
{% endblock %}
</body>
</html>

母版 home.html里的inclu de，路径是从templates开始的，为什么呢？因为继承母版的页面是在templates 目录里，以app.py里面加载的模板为出发点，来定位其他路径。

index.html

{% extends "common/home.html" %}

{% block content %}
    {% for movie in movies.Search %}
        <div class="col text-center mt-3">
            <div class="card" style="width: 18rem;">
                <img src="{{ movie.Poster }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{ movie.Title }}</h5>
                    <p class="card-text">{{ movie.Year }}</p>
                    <a href="/{{ movie.imdbID }}" target="_blank" class="btn btn-primary">详情</a>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}

movie.html

{% extends "common/home.html" %}

{% block content %}
    <div class="card mb-3" style="max-width: 1080px;">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="{{ movie.Poster }}" class="img-fluid rounded-start" alt="...">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">{{ movie.Title }}</h5>
                    <p class="card-text">Year:{{ movie.Year }}</p>
                    <p class="card-text">Runtime:{{ movie.Runtime }}</p>
                    <p class="card-text">Actors:{{ movie.Actors }}</p>
                    <p class="card-text">{{ movie.Actors }}</p>
                    <p class="card-text">{{ movie.Year }}</p>
                    <p class="card-text"><small class="text-body-secondary">{{ movie.Plot }}</small></p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}