美文网首页
django与前端相结合

django与前端相结合

作者: xgz_pmx | 来源:发表于2018-10-17 22:35 被阅读0次

个人博客:http://pmx-xiguazi.com
上次创建了前端模板以及配置好了django静态文件,所以今天填充模板

1.在django中获取数据

def index(request):
    movie_list = MvMovie.objects.all()
    context = {'movie_list':movie_list}
    return render(request, 'templates/movie/movie_maintain.html',context)

2.填充模板

{% if movie_list %}
  {% for movie in movie_list %}
    <div class="cbp-item graphic">
      <div class="cbp-caption">
        <div class="cbp-caption-defaultWrap">
          <img src="{{ movie.image }}" alt="{{ movie.title }}" style="width: 318px;height: 400px;" onerror="{% static 'images/gloabl_img.jpg' %}"> 
        </div>
        <div class="cbp-caption-activeWrap">
          <div class="cbp-l-caption-alignCenter">
            <div class="cbp-l-caption-body">
              <a href="../assets/global/plugins/cubeportfolio/ajax/project1.html" class="cbp-singlePage cbp-l-caption-buttonLeft btn red uppercase btn red uppercase" rel="nofollow">详细信息</a>
              <a href="{{ movie.image }}" class="cbp-lightbox cbp-l-caption-buttonRight btn red uppercase btn red uppercase" data-title="{{ movie.title }}<br>类型:{{ movie.genres }}">查看大图</a>
            </div>
          </div>
        </div>
      </div>
      <div class="cbp-l-grid-projects-title uppercase text-center uppercase text-center">{{ movie.title }}</div>
      <div class="cbp-l-grid-projects-desc uppercase text-center uppercase text-center">{{ movie.original_title }} / {{ movie.year }}</div>
    </div>
  {% endfor %}
{% else %}
  <strong>没有数据</strong>
{% endif %}

##注意点

##注意点
1.html页面顶部添加{% load staticfiles %}
2.“{{ }}”来展示数据

最终效果:


image.png

相关文章

网友评论

      本文标题:django与前端相结合

      本文链接:https://www.haomeiwen.com/subject/czsdzftx.html