新建static/js/news/index.js文件 ，主要用於向後臺發送請求，

// 新建static/js/news/index.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("")
          }

          // 顯示新聞
          // for (let i = 0; i < res.data.news.length; i++) {
          //   let one_news = res.data.news[i];
          //   let content = ‘<li class="news-item">‘;
          //   content += ‘<a href="‘ + one_news.image_url + ‘" class="news-thumbnail" target="_blank">‘ +
          //     ‘<img src="‘ + one_news.image_url + ‘" alt="‘ + one_news.title + ‘" title="‘ + one_news.title + ‘"></a>‘;
          //   content += ‘<div class="news-content">‘ +
          //     ‘<h4 class="news-title"><a href="#">‘ + one_news.title + ‘</a></h4>‘ +
          //     ‘<p class="news-details">‘ + one_news.digest + ‘</p>‘;
          //   content += ‘<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)
          // }

          res.data.news.forEach(function (one_news) {
            let content = `
              <li class="news-item">
                 <a href="https://www.shiguangkey.com/course/2432" 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(‘服務器超時，請重試！‘);
      });
  }

});

在 index.html 文件中引入該 js 文件

註釋掉測試代碼

導入圖片到 media 文件夾中

輪播圖實現

對數據庫進行改善，限制循環範圍

導入測試數據

url

在 constants 中 定義個常量 SHOW_BANNER_COUNT=6

潭州課堂25班：Ph201805201 django 項目 第二十二課 文章主頁 新聞列表頁面滾動加載，輪播圖後臺實現 (課堂筆記）