1.2首頁重新整理以及點選排行
阿新 • • 發佈：2020-11-02
首先完成首頁重新整理的功能
就像下圖一樣能做到滑鼠滑輪一直向下滑，頁面能夠刷新出來同時不重新整理頁面，新的新聞資料也能加載出來的效果
1、以下是後端的程式碼
1 @index_blue.route("/news_list") 2 def news_list(): 3 #接收引數 4 cid = request.args.get("cid",1) 5 page = request.args.get("page",1) 6 per_page = request.args.get("per_age",10) 7 #檢測異常 8 try: 9 cid = int(cid) 10 page = int(page) 11 per_page = int(per_page) 12 except Exception as e: 13 current_app.logger.error(e) 14 #判斷接收來的cid的值是否等於1 15 if cid == 1: 16 #在資料庫中查詢新聞並且以建立時間排序，用paginate函式接收 17 paginate = News.query.order_by(News.create_time.desc())\18 .paginate(page=page,per_page=per_page) 19 else: 20 #如果不是，就查詢與前端接收到的cid相同的id的新聞 21 paginate = News.query.filter(News.category_id==cid).\ 22 order_by(News.create_time.desc()).\ 23 paginate(page=page,per_page=per_page) 24 25 # 獲取所有 26 newList = paginate.items27 # 獲取總頁數 28 totalpage = paginate.pages 29 # 獲取當前頁數 30 currentPage = paginate.page 31 new_newList = [] 32 #for迴圈遍歷，用to_basic_dict()函式轉換成字典型別 33 for new in newList: 34 new_newList.append(new.to_basic_dict()) 35 36 #傳遞上下文 37 context = { 38 "newList": new_newList, 39 "totalPage": totalpage, 40 "currentPage":currentPage 41 } 42 return jsonify(errno=RET.OK,errmsg="新聞獲取成功" ,context=context)
2、下面是js的程式碼
1 var currentCid = 1; // 當前分類 id 2 var cur_page = 1; // 當前頁 3 var total_page = 1; // 總頁數 4 var data_querying = true; // 是否正在向後臺獲取資料:如果為ture表示正在載入資料；反之，沒有載入資料 5 6 7 $(function () { 8 9 // 當主頁載入完成之後，立即重新整理主頁的分頁資料 10 // 預設載入第一頁 11 updateNewsData(); 12 13 // 首頁分類切換 14 $('.menu li').click(function () { 15 var clickCid = $(this).attr('data-cid') 16 $('.menu li').each(function () { 17 $(this).removeClass('active') 18 }) 19 $(this).addClass('active') 20 21 if (clickCid != currentCid) { 22 // 記錄當前分類id 23 currentCid = clickCid; 24 25 // 重置分頁引數 26 cur_page = 1; 27 total_page = 1; 28 updateNewsData() 29 } 30 }); 31 32 //頁面滾動載入相關 33 $(window).scroll(function () { 34 35 // 瀏覽器視窗高度 36 var showHeight = $(window).height(); 37 38 // 整個網頁的高度 39 var pageHeight = $(document).height(); 40 41 // 頁面可以滾動的距離 42 var canScrollHeight = pageHeight - showHeight; 43 44 // 頁面滾動了多少,這個是隨著頁面滾動實時變化的 45 var nowScroll = $(document).scrollTop(); 46 47 if ((canScrollHeight - nowScroll) < 100) { 48 // TODO 判斷頁數，去更新新聞資料 49 if (!data_querying) { 50 // 表示正在載入資料 51 data_querying = true; 52 53 // 計算當前在第幾頁 54 cur_page += 1; 55 56 if (cur_page < total_page) { 57 // 載入指定頁碼的新聞資料 58 updateNewsData(); 59 } 60 } 61 } 62 }) 63 }); 64 65 function updateNewsData() { 66 // TODO 更新新聞資料 67 var params = { 68 'cid':currentCid, 69 'page':cur_page 70 // 每頁多少條不用傳，預設10條 71 }; 72 73 $.get('/news_list', params, function (response) { 74 // 得到響應後，表示一次載入資料結束了 75 data_querying = false; 76 77 if (response.errno == '0') { 78 // 記錄總頁數 79 total_page = response.context.totalPage; 80 81 if (cur_page == 1) { 82 $(".list_con").html(""); 83 } 84 85 for (var i=0;i<response.context.newList.length;i++) { 86 var news = response.context.newList[i] 87 var content = '<li>' 88 content += '<a href="/news/detail/'+news.id+'" class="news_pic fl"><img src="' + news.index_image_url + '?imageView2/1/w/170/h/170"></a>' 89 content += '<a href="/news/detail/'+news.id+'" class="news_title fl">' + news.title + '</a>' 90 content += '<a href="/news/detail/'+news.id+'" class="news_detail fl">' + news.digest + '</a>' 91 content += '<div class="author_info fl">' 92 content += '<div class="source fl">來源：' + news.source + '</div>' 93 content += '<div class="time fl">' + news.create_time + '</div>' 94 content += '</div>' 95 content += '</li>' 96 $(".list_con").append(content); 97 } 98 } else { 99 alert(response.errmsg); 100 } 101 }); 102 }
3、然後就是點選排行的設定和程式碼 了
1 <div class="conter_con"> 2 <ul class="list_con fl"> 3 4 </ul> 5 <div class="rank_con fr"> 6 <div class="rank_title"> 7 <h3>點選排行</h3> 8 </div> 9 <ul class="rank_list"> 10 {% for new in context.click_news %} 11 <li><span class="{{ loop.index|rank }}">{{ loop.index }}</span> 12 <a href="#">{{ new.title }}</a></li> 13 {% endfor %} 14 </ul> 15 </div> 16 </div>
在11行中我們用了重定向，定向了我們自己在tools中建立的do_rank函式，這裡rank是我們用了別名。
1 def do_rank(index): 2 if index == 1: 3 return "first" 4 elif index == 2: 5 return "second" 6 elif index == 3: 7 return "third" 8 else: 9 return ""