实训12：影视作品详情页“作品概览”模块的实现【附完整代码】

在本实训中，将根据项目中的影视作品详情信息的示例数据文件（项目根目录下的static/jsons/video/vid_changzheng_ds.json）中的相关信息，实例化一个影视作品详情类的对象，然后将该对象通过render_template()方法传递给影视作品详情页的模板中，最终将影视作品详情数据呈现到页面中。具体步骤如下：

1. 修改cz_video.py文件(位于项目根目录下的views子目录下)，在原有代码的基础上，添加如图1所示的代码：

   from flask import Blueprint, render_template
   
   from models.video_models import Video
   from utils.load_data import load_data_from_json_file
   
   video = Blueprint('video', __name__, url_prefix='/video')  # 创建名为”video“的蓝图
   
   
   @video.route('/video_list')
   def video_list_page():
       target_file = r"static/jsons/cz_video.json"  # 构造示例数据文件的路径字符串
       # 调用 utils.load_data块下的load_data_from_json_file方法，从json文件加载数据
       video_list = load_data_from_json_file(target=target_file)
   
       # 利用render_template方法，将相关数据渲染到模板文件中
       return render_template("/video/cz_video_list.html", video_list=video_list)
   
   
    @video.route('/video_detail')
    def video_detail_page():
        target_file = r"static\jsons\video\vid_changzheng_ds.json"
        # 调用utils.load_data模块下的load_data_from_json_file方法，从json文件加载数据
        video_detail = load_data_from_json_file(target=target_file)
        vd = Video(**video_detail[0])
   
        # 利用render_template方法，将相关数据消染到板文件中
        return render_template("/video/cz_video_detail.html", video=vd)

   在图1中的第3-4行代码处，导入前面实训中创建的models包中的video_models模块下的Video类及to_snap_case()函数、utils包中的load_data模块的load_data_from_json_file()函数。第19-27行代码定义了一个新的视图函数video_detail_page(),在函数中，先从影视作品祥情的示例文件中加载数据，并实例化一个Video类对象，最后通过render_template()方法将Video对象传递给影视作品详情页的模板。

2. 在项目根目录下的templates/video子目录，创建一个html模板文件：cz_video_detail.html，编写“影视作品•作品概览”模块的实现代码，如图2所示：

   {% extends "/cz_base.html" %}
   {% block title %}{{ video.video_name }}{% endblock %}
   {% block main %}
   <!--影视作品·作品概览-->
   <section class="mt-1">
       <div class="container pt-4">
           <div class="block-title-w">
               <h2 class="block-title">{{ video.video_name }}·作品概览</h2>
               <span class="icon-title">
                   <span></span><img src="{{ url_for('static', filename='images/star.png') }}" width="30" height="30">
               </span>
           </div>
           <div class="row">
               <div class="col-md-4 col-sm-6 col-xs-12">
                   <img class="img-fluid rounded" src="{{ url_for('static', filename=video.kwargs.video_pic) }}">
               </div>
               <div class="col-md-8 col-sm-6 col-xs-12">
                   <h2 class="m-1 text-danger fw-bolder">剧名:{{ video.video_name }}</h2>
                   <div class="fs-4 m-2 fw-bold">
                       <a href="#"><span>出品方:{{ video.kwargs.video_publisher }}</span></a>
                       <span class="px-5">创作时间：{{ video.kwargs.video_year }}年</span>
                       <span>地区:{{ video.kwargs.video_origin }}</span>
                   </div>
                   <div class="fs-4 m-2 fw-bold">
                   编剧: {% for w in video.kwargs.video_writer %}<a href="#"><span class="px-3">{{ w }}</span></a>{% endfor %}
                   <span class="px-5">导演：
                   {% for d in video.kwargs.video_director %}<a href="#"><span class="px-3">{{ d }}</span></a>{% endfor %}
                   </span>
                   </div>
                   <div class="fs-4 m-2 fw-bold">
                   主演: {% for s in video.kwargs.video_stars %}<a href="#"><span class="px-3">{{ s }}</span></a>{% endfor %}
                   </div>
                   <div class="fs-4 m-2 fw-normal">
                       <span>题材分类：{{ video.kwargs.video_catg }}</span>
                       <span class="px-5">语言:{{ video.kwargs.video_language }}</span>
                   </div>
                   <div class="fs-4 m-2 fw-normal">
                       <span>首映时间:{{ video.kwargs.video_first_play_time }}</span>
                       <span class="px-5">剧集数:{{ video.kwargs.video_sets_num }}</span>
                   </div>
                   <h4 class="my-4">{{ video.kwargs.video_description }}</h4>
               </div>
           </div>
       </div>
   </section>
   
   {% endblock %}

3. 完成视图函数及模板文件的代码编写后，保存相关文档，重启或刷新应用后，在浏览器地址栏输入URL：http://127.0.0.1:19999/video/video_detail，页面加载完成的呈现内容如图3所示。