新闻首页实现 -- 2. 文章标签导航功能实现

2019-03-02  本文已影响0人  爱修仙的道友

1. 分析

请求方法GET

url定义/news/index/

请求参数:无

返回前端参数

return render(request, 'news/index.html', locals())

2. 数据库导入测试数据

# insert news tag data
# 导入时记得先导入tags,因为news表包含tag_id,切记切记以后多多注意这种

INSERT INTO tb_tag(name, create_time, update_time, is_delete) values
('Python基础', now(), now(), 0),
('Python高级', now(), now(), 0),
('Python函数', now(), now(), 0),
('PythonGUI', now(), now(), 0),
('Linux教程', now(), now(), 0);

3. 后端视图实现

# views.py
from django.views import View
from django.shortcuts import render


from . import models


# 新闻首页视图
class NewsIndex(View):
    """
    渲染新闻首页
        -- 新闻标签
    """
    def get(self, request):
        """

        :param request:
        :return:
        """
        # 查询所有数据
        # tags = models.Tag.objects.all()

        # 查询除逻辑删除外的数据
        # tags = models.Tag.objects.filter(is_delete=False)

        # 优化 defer和only
        tags = models.Tag.objects.only('name','id').filter(is_delete=False)

        return render(request, 'news/index.html',context={
            'tags':tags,
        })

        # 优化 当context数据非常多时
        # 在渲染时,已经进行查询动作了
        # return render(request, 'news/index.html', locals())

# urls.py
from django.urls import path
from . import views

app_name = 'news'

urlpatterns = [
    path('index/', views.NewsIndex.as_view(), name='news_index'),
]

4.前端代码实现

        <!--  news-nav start-->
          <nav class="news-nav">
              <ul class="clearfix">

                  <li class="active"><a href="javascript:void(0)" data-id="0">最新资讯</a></li>

                  {% for tag in tags %}
                    <li><a href="javascript:void(0)" data-id="{{ tag.id }}">{{ tag.name }}</a></li>
                  {% endfor %}

              </ul>
          </nav>
        <!--  news-nav end -->
上一篇 下一篇

猜你喜欢

热点阅读