项目-新闻列表

新闻列表

1.在前端写相应的js代码：

$(function () {
  // 新闻列表功能
  let $newsLi = $(".news-nav ul li");
  let iPage = 1;  //默认第1页
  let iTotalPage = 1; //默认总页数为1
  let sCurrentTagId = 0; //默认分类标签为0
  let bIsLoadData = true;   // 是否正在向后台加载数据

  fn_load_content();

  $newsLi.click(function () {
    // 点击分类标签，则为点击的标签加上一个class属性为active
    // 并移除其它兄弟元素的上的，值为active的class属性
    $(this).addClass('active').siblings('li').removeClass('active');
    // 获取绑定在当前选中分类上的data-id属性值
    let sClickTagId = $(this).children('a').attr('data-id');

    if (sClickTagId !== sCurrentTagId) {
            sCurrentTagId = sClickTagId;  // 记录当前分类id
            // 重置分页参数
            iPage = 1;
            iTotalPage = 1;
            fn_load_content()
        }
  });

  //页面滚动加载相关
  $(window).scroll(function () {
    // 浏览器窗口高度
    let showHeight = $(window).height();

    // 整个网页的高度
    let pageHeight = $(document).height();

    // 页面可以滚动的距离
    let canScrollHeight = pageHeight - showHeight;

    // 页面滚动了多少,这个是随着页面滚动实时变化的
    let nowScroll = $(document).scrollTop();

    if ((canScrollHeight - nowScroll) < 100) {
      // 判断页数，去更新新闻数据
      if (!bIsLoadData) {
        bIsLoadData = true;
        // 如果当前页数据如果小于总页数，那么才去加载数据
        if (iPage < iTotalPage) {
          iPage += 1;
          $(".btn-more").remove();  // 删除标签
          // 去加载数据
          fn_load_content()
        } else {
          message.showInfo('已全部加载，没有更多内容！');
          $(".btn-more").remove();  // 删除标签
          $(".news-list").append($('<a href="javascript:void(0);" class="btn-more">已全部加载，没有更多内容！</a>'))
        }
      }
    }
  });


  // 定义向后端获取新闻列表数据的请求
  function fn_load_content() {
    // let sCurrentTagId = $('.active a').attr('data-id');

    // 创建请求参数
    let sDataParams = {
      "tag_id": sCurrentTagId,
      "page": iPage
    };

    // 创建ajax请求
    $.ajax({
      // 请求地址
      url: "/news/",  // url尾部需要添加/
      // 请求方式
      type: "GET",
      data: sDataParams,
      // 响应数据的格式（后端返回给前端的格式）
      dataType: "json",
    })
      .done(function (res) {
        if (res.errno === "0") {
          iTotalPage = res.data.total_pages;  // 后端传过来的总页数
          if (iPage === 1) {
            $(".news-list").html("")
          }

          res.data.news.forEach(function (one_news) {
            let content = `
              <li class="news-item">
                 <a href="#" class="news-thumbnail" target="_blank">
                    <img src="${one_news.image_url}" alt="${one_news.title}" title="${one_news.title}">
                 </a>
                 <div class="news-content">
                    <h4 class="news-title"><a href="#">${one_news.title}</a></h4>
                    <p class="news-details">${one_news.digest}</p>
                    <div class="news-other">
                      <span class="news-type">${one_news.tag_name}</span>
                      <span class="news-time">${one_news.update_time}</span>
                      <span class="news-author">${one_news.author}</span>
                    </div>
                 </div>
              </li>`;
            $(".news-list").append(content)
          });

          $(".news-list").append($('<a href="javascript:void(0);" class="btn-more">滚动加载更多</a>'));
          // 数据加载完毕，设置正在加载数据的变量为false，表示当前没有在加载数据
          bIsLoadData = false;

        } else {
          // 登录失败，打印错误信息
          message.showError(res.errmsg);
        }
      })
      .fail(function () {
        message.showError('服务器超时，请重试！');
      });
  }

});

2.在视图中配置视图函数

#创建新闻列表的类视图
class NewlistView(View):
    #get方法
    def get(self,request):
        #获取前台获得的tag和page标签
        try:
            tag=int(request.GET.get('tag_id',0));
        except Exception as e:
            logger.error('页面错误{}'.format(e))
            tag=0;
        try:
            page=int(request.GET.get('page',1));
        except Exception as e:
            logger.error('页码错误{}'.format(e))
            page=1;
        #查询数据库中的数据,关联查询
        new_list=News.objects.values('title','digest','image_url',
                                     'update_time','id').annotate(tag_name=F('tag__name'),author=F('author__username'))
        new_info=new_list.filter(delete_is=False,tag_id=tag) or new_list.filter(delete_is=False)

        #获取完数据后进行分页
        pages=Paginator(new_info,5);
        try:
            news=pages.page(page);#获取当前页的数据
        except Exception as e:
            logger.error(e);
            news=pages.page(pages.num_pages)
        data={
            'news':list(news),
            'total_pages':pages.num_pages
        }
        return to_json_data(data=data)

4.图片配置

1.在项目中创建一个media文件夹，用来临时存放图片

2.然后在settings中配置

#配置media文件
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

3.最后在主项目中配置路由