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

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

今天開始我們講講Flask Web實踐專案開發中的檢視詳情功能是如何實現的。

Step1：html 部分

 1  
 2 lists +="<tr>"+ //拼湊一段html片段
 3           "<td style='word-wrap:break-word;word-break:break-all; '><input type='checkbox' id='itemid' name='testid' value='
 
"+item.id+"'>"+item.id+"</td>"+
 4           "<td style='word-wrap:break-word;word-break:break-all; '>"+item.pms_name+"</td>"+
 5           "<td style='word-wrap:break-word;word-break:break-all; '>"+item.content+"</td>"+
 6           "<td style='word-wrap:break-word;word-break:break-all; '>
 
"+item.status+"</td>"+
 7           "<td style='word-wrap:break-word;word-break:break-all; '>"+item.mark+"</td>"+
 8           "<td style='word-wrap:break-word;word-break:break-all; '>"+item.create_time+"</td>"+
 9           "<td style='word-wrap:break-word;word-break:break-all; '>
 
" +
10           "<button class='btn btn-info' id='update' align='center' onclick='update($(this))'>修改</button>&nbsp&nbsp"+
11           "<button class='btn btn-warning' id='updateother' align='center' onclick='detail($(this))'>檢視詳情</button>" +
12           "</td>"
13       "</tr>"
14 });

Step2：javascript部分

 1  
 2 function detail(td) {
 3         document.getElementById("pageid").style.display="none"
 4         var tr=td.parent().parent()
 5         console.log(tr);
 6         var tdlist=tr.find("td");
 7         console.log(tdlist);
 8         var id=$(tdlist[0]).find('input').val()
 9         $.ajax({
10                 url: '/getOne/'+id,
11                 type: 'GET',
12                 dataType: 'json',
13                 timeout: 1000,
14                 cache: false,
15                 beforeSend: function () {
16                     $("#mainbody").html('載入中...');
17                 }, //載入執行方法
18                 error: function () {
19                     alert("資料載入失敗!!!");
20                 },  //錯誤執行方法
21                 success: function (data) {
22                     $("#mainbody").html('');
23                     lists=""
24                     var jsons=data ? data : [];
25                     $.each(jsons, function (index, item) {//迴圈獲取資料
26                         lists +=
27                             name+" : <span>"+item.pms_name+"</span><br />"+
28                         content+" : <span>"+item.content+"</span><br />"+
29                         status+" : <span>"+item.status+"</span><br />"+
30                         remark+" : <span>"+item.mark+"</span><br />"
31                      });
32                     $("#mainbody").html(lists);
33                 }
34             })
35 }

Step3：Python+Flask 部分

1 @app.route('/getOne/<id>',methods=['GET'])
2 def getapi(id):
3     sql="select id,pms_name,content,status,mark,create_time from flask_info where id="+id
4     api = get_data(sql)
5     return jsonify(api)

Step4: db部分

 1 def get_data(sql1):#獲取sql返回記錄數
 2     db = sqlite3.connect('test_flask.db')
 3     cur = db.cursor()
 4     print(sql1)
 5     cur.execute(sql1)
 6     results=cur.fetchall()
 7     cloumn=get_table_colum()
 8     res = {}
 9     reslist = []
10     print(results)
11     for r in range(len(list(results))):
12      for m in range(len(list(cloumn))):
13          res[str(list(cloumn)[m])] = str(list(results)[r][m])
14          reslist.append(res)
15      res = {}
16      print(reslist)
17      cur.close()
18      db.close()
19      return reslist

查詢後得到的資料顯示效果如下圖所示：

總結：本篇文章主要就是點選每一行資料後面的操作列表裡面的【檢視詳情】按鈕，當按鈕被點選時$this（也就是當前這一行td標準單元格）會被當成一個引數傳入，然後經過javascript 獲取到當前這一行資料的id資訊，最後將id作為sql裡面的where查詢條件進行資料查詢並返回查詢結果進行頁面渲染。

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

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