????本節(jié)我們接著開(kāi)發(fā)首頁(yè)，

主要內(nèi)容是 讓左側(cè)的請(qǐng)求記錄和右側(cè)的請(qǐng)求模塊 聯(lián)動(dòng)起來(lái)。

具體聯(lián)動(dòng)需求：

?右側(cè)請(qǐng)求一次之后，左側(cè)生成記錄

點(diǎn)擊左側(cè)記錄，右側(cè)則會(huì)顯示這次記錄的請(qǐng)求數(shù)據(jù)

我們本節(jié)課的內(nèi)容是想辦法實(shí)現(xiàn)1-生成記錄。

????我們知道，左側(cè)的記錄是存在于我們數(shù)據(jù)庫(kù)的記錄表中，所以右側(cè)請(qǐng)求模塊只要請(qǐng)求，就順便把這些請(qǐng)求數(shù)據(jù)+用戶id 存儲(chǔ)到記錄表中即可。但是左側(cè)的記錄顯示邏輯目前是，進(jìn)入首頁(yè)后自動(dòng)獲取展示，并沒(méi)有實(shí)時(shí)刷新功能，也就是我們請(qǐng)求完之后，需要刷新頁(yè)面才能在左側(cè)看到記錄，但是刷新的話右側(cè)的返回體什么的也煙消云散了。那么我們就要重新設(shè)計(jì)這個(gè)左側(cè)記錄的展示邏輯，做成主動(dòng)刷新。

????一開(kāi)始進(jìn)到home的展示我們不用刪除了，只做后續(xù)請(qǐng)求成功后的刷新吧

打開(kāi)home.html,新建立一個(gè)js函數(shù)：

????這個(gè)函數(shù)要做的事有兩個(gè)：

1.清空已顯示的記錄

2.從數(shù)據(jù)庫(kù)獲取最新的記錄生成展示

我們現(xiàn)在先去架設(shè)好獲取最新記錄的 urls.py：

然后去寫(xiě)views.py：

????這里要特別說(shuō)一下為什么這樣寫(xiě)，我們只從數(shù)據(jù)庫(kù)拿出id,method，host,url四個(gè)字段，其他的不要拿，因?yàn)槎寄玫脑捒隙〝?shù)據(jù)太大超出了。我們只拿這幾樣需要顯示的即可。等用戶真的去點(diǎn)擊某個(gè)記錄的時(shí)候，我們?cè)谟眠@個(gè)記錄的id單獨(dú)去后臺(tái)數(shù)據(jù)庫(kù)獲取全部請(qǐng)求數(shù)據(jù)就行。

????然后我們回過(guò)頭，打開(kāi)home.html,輸出一下ret，看看對(duì)不對(duì)。

還有我們要加上一個(gè)調(diào)用這個(gè)函數(shù)的代碼，才能調(diào)試：

好讓我們重啟服務(wù)，打開(kāi)瀏覽器控制臺(tái)的-console，刷新首頁(yè)看看輸出吧：

看來(lái)是獲取成功了。

接下來(lái)就是生成：

我們要用js代碼，實(shí)現(xiàn)這個(gè)html語(yǔ)言的循環(huán)。

代碼如下：

log_refersh()function log_refersh() { //清空 div = document.getElementById('home_log_plan'); div.innerHTML = ''; // 生成新的 $.get('/get_home_log/',{ },function (ret) { //ret 應(yīng)該就是我們獲取到的記錄列表數(shù)組 的字符串形式 // 這里寫(xiě)生成展示的代碼 console.log(ret); var res = eval(ret); var all_logs = res.all_logs; for(var i=0; i var a =document.createElement('a') ;//創(chuàng)建a標(biāo)簽 a.href="javascript:home_log_show()" ; // 點(diǎn)擊函數(shù) a.style="text-decoration: none" ; a.class = 'log'; var s = document.createElement('span'); //聲明顯示請(qǐng)求體類(lèi)型的span s.style = "font-size: large;color: black"; s.innerText = all_logs[i].api_method+' - '; //設(shè)定這個(gè)method; var s2 = document.createElement('span'); // 聲明存放host+url的span s2.innerText = all_logs[i].api_host+all_logs[i].api_url; a.appendChild(s); a.appendChild(s2); div.appendChild(a); div.appendChild(document.createElement('br')); } })}

看看效果：

還是可以接受的。

接下來(lái)就是我們要在右側(cè)進(jìn)行請(qǐng)求后，把請(qǐng)求數(shù)據(jù)存放到數(shù)據(jù)記錄表中，然后再調(diào)用一下這個(gè)刷新log函數(shù)即可：

打開(kāi)views.py，找到Api_send_home()，加入下圖紅框內(nèi)容，位置別弄錯(cuò)了。

然后在home.html中?的函數(shù)最后獲取到返回結(jié)果的時(shí)候 加入調(diào)用記錄刷新函數(shù)log_refersh，注意之前我們?yōu)榱朔奖阏{(diào)試的那個(gè)一進(jìn)頁(yè)面就刷新的調(diào)用代碼行可以刪掉了。

????然后重啟服務(wù)刷新頁(yè)面 ，隨便請(qǐng)求點(diǎn)什么 看看效果。

看來(lái)這個(gè)是成功了。但是還有瑕疵，比如新顯示的應(yīng)該在最上面，順序反了。我們?cè)诤笈_(tái)函數(shù)，首次進(jìn)入和send請(qǐng)求的倆個(gè)位置逆轉(zhuǎn)即可：

views.py中修改：

好了，這樣順序就方便了。到這就完成了今天的內(nèi)容。

小伙伴可以在自行修飾。

歡迎關(guān)注和分享～ 你們的飯飯

總結(jié)

以上是生活随笔為你收集整理的html div分钟刷新一次啊代码_接口测试平台代码实现57首页重构5的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。