歡迎關注【無量測試之道】公眾號，回覆【領取資源】,
Python程式設計學習資源乾貨、
Python+Appium框架APP的UI自動化、
Python+Selenium框架Web的UI自動化、
Python+Unittest框架API自動化、

資源和程式碼 免費送啦~
文章下方有公眾號二維碼，可直接微信掃一掃關注即可。

對於 Python + Flask 這種靈活的web開發框架，在前面的六個系列文章中詳細的進行了說明，主要講到了頁面的首頁載入時的頁面渲染，增加功能，刪除功能，修改功能，查詢功能，查詢詳情功能等一些頁面常見的功能操作。

今天的文章是對之前的六篇文章未涉及到的一些技術點進行解釋說明，有利於大家可以更加全面的瞭解這個資訊管理專案是如何執行的。

1.翻頁功能

1.1 在頁面上我們定義了一個div的元素，是用來承載翻頁功能的，如下：

<div class="page" id="pageid"></div>  #前面系列有全部的html內容

1.2 Python程式碼在處理時有返回db查詢出來的頁數資訊，如下：

1 content=get_data(sql1)
2 pagedict={}
3 pagedict['content']=content
4 pagedict['pageNum']=page //表示初始頁數
5 pagedict['pages']=All_page 
6 pagedict['amount
 
']=All_Record
7 return jsonify(pagedict)
8 上面返回了一個字典，字典裡面有配置好的翻頁需要的資訊。

1.3 javascript程式碼裡面有針對html 定義的div元素的替換渲染，如下：

1 // 分頁處理
2              $("#pageid").pager({ //分頁功能
3                pagenumber: jsons.pageNum,//表示初始頁數
4                pagecount: jsons.pages,//表示總頁數
5                totalcount: jsons.amount,//
 
表示總記錄數
6                buttonClickCallback: callback//表示點選分頁數按鈕呼叫的方法
7  });

翻頁頁面載入後展示如下：

2.對查詢的資料進行渲染後的排序展示

這裡需要大家懂一些前端的內容，如：在 js 裡面獲取某一個id值所對應輸入內容時是如何做到的，我們可以這樣來獲取：

var contents=$('#contents').val();

這裡的查詢功能需要將 id=contents 的文字內容傳入到後端進行模糊匹配。

還有一些 js 的處理邏輯，這裡不展開來說，以本專案中涉及到的為示例簡單介紹：

1 var tr=td.parent().parent()#這是在獲取td的上一級的上一級元素賦值給變數tr
2 console.log(tr); #這是在瀏覽器控制檯輸出，檢查是否符合取值要求
3 var tdlist=tr.find("td");#在元素tr裡面找到td的元素並賦值為tdlist變數
4 console.log(tdlist);#這是在瀏覽器控制檯輸出，檢查是否符合取值要求
5 var id=$(tdlist[0]).find('input').val()#從tdlist裡面獲取id的值

3.頁面上一些常用樣式說明
對於做一些web端的技術開發，我們可能不是非常熟悉前端的開發所有技術，但是可以通過一些比較成熟的前端元件來幫我們完成，這裡使用的是：bootstrap.min.css（這是在本專案中引入進來的樣式檔案）

這裡使用兩個截圖來說明一下引用的示例。

1.Bootstrap 的 button 樣式全是拿來直接使用的。

2.就是Bootstrap 網格的基本結構。如下圖所示。

備註：上面兩個截圖示例是摘取於bootstrap 教程，因為在本專案中也是這樣去引用的，大家有興趣的可以多去學習，這將為你做出好看的web端效果樣式有非常大的幫助。

4.做一個系列文章的總結
通過本系列文章的分享，以及這個小的專案其實我們就可以去整體理解到更大更復雜的專案,他們無外乎就是更多的更復雜的業務邏輯處理、內部多系統間的呼叫、第三方中介軟體的使用、第三方的介面呼叫、回撥等邏輯的處理。

備註：我的個人公眾號已正式開通，致力於測試技術的分享，包含：大資料測試、功能測試，測試開發，API介面自動化、測試運維、UI自動化測試等，微信搜尋公眾號：“無量測試之道”，或掃描下方二維碼：

新增關注，讓我們一起共同成長！