今天開始我們講講Flask Web實踐項目開發中的查看詳情功能是如何實現的。

Step1：html 部分

lists +="<tr>"+ //拼湊一段html片段 "<td style='word-wrap:break-word;word-break:break-all; '><input type='checkbox' id='itemid' name='testid' value='"+item.id+"'>"+item.id+"td>"+ "<td style='word-wrap:break-word;word-break:break-all; '>"+item.pms_name+"td>"+ "<td style='word-wrap:break-word;word-break:break-all; '>"+item.content+"td>"+ "<td style='word-wrap:break-word;word-break:break-all; '>"+item.status+"td>"+ "<td style='word-wrap:break-word;word-break:break-all; '>"+item.mark+"td>"+ "<td style='word-wrap:break-word;word-break:break-all; '>"+item.create_time+"td>"+ "<td style='word-wrap:break-word;word-break:break-all; '>" + "<button class='btn btn-info' id='update' align='center' onclick='update($(this))'>修改button>&nbsp&nbsp"+ "<button class='btn btn-warning' id='updateother' align='center' onclick='detail($(this))'>查看詳情button>" + "td>" "tr>"});

Step2：javascript部分

function detail(td) { document.getElementById("pageid").style.display="none" var tr=td.parent().parent() console.log(tr); var tdlist=tr.find("td"); console.log(tdlist); var id=$(tdlist[0]).find('input').val() $.ajax({ url: '/getOne/'+id, type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: function () { $("#mainbody").html('加載中...'); }, //加載執行方法 error: function () { alert("數據加載失敗!!!"); }, //錯誤執行方法 success: function (data) { $("#mainbody").html(''); lists="" var jsons=data ? data : []; $.each(jsons, function (index, item) {//循環獲取數據 lists += name+" : "+item.pms_name+"
"+ content+" : "+item.content+"
"+ status+" : "+item.status+"
"+ remark+" : "+item.mark+"
" }); $("#mainbody").html(lists); } })}

Step3：Python+Flask 部分

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

Step4: db部分

def get_data(sql1):#獲取sql返回記錄數????db?=?sqlite3.connect('test_flask.db')????cur?=?db.cursor() print(sql1) cur.execute(sql1) results=cur.fetchall() cloumn=get_table_colum() res = {} reslist = [] print(results)????for?r?in?range(len(list(results))): for m in range(len(list(cloumn))): res[str(list(cloumn)[m])] = str(list(results)[r][m]) reslist.append(res) res = {} print(reslist) cur.close() db.close() return reslist

查詢后得到的數據顯示效果如下圖所示：

總結：本篇文章主要就是點擊每一行數據后面的操作列表里面的【查看詳情】按鈕，當按鈕被點擊時$this(也就是當前這一行td標準單元格)會被當成一個參數傳入，然后經過javascript 獲取到當前這一行數據的id信息，最后將id作為sql里面的where查詢條件進行數據查詢并返回查詢結果進行頁面渲染。

友情提示：“無量測試之道”原創著作，歡迎關注交流，禁止第三方不顯示文章來源時轉載。更多原創文章請掃碼關注查看，交流與合作請聯系：loadkernel@126.com。

QQ技術交流群：41564936

Shell 編程核心技術《一》

Shell 編程核心技術《二》

Pytest 可視化測試報告之 Allure

python+Appium之APP自動化測試

Python+appium框架原生代碼實現App自動化測試

AirTest-selenium基于Web實現UI自動化測試

Python API自動化測試實操

Python 測試框架之 Unittest & Pytest

Python + Flask 項目開發實踐系列《一》

Python + Flask 項目開發實踐系列《二》

Python + Flask 項目開發實踐系列《三》

Python + Flask 項目開發實踐系列《四》

Python + Flask 項目開發實踐系列《五》

總結

以上是生活随笔為你收集整理的flask python web开发 可视化开发_Python + Flask 项目开发实践系列六的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。