html div分钟刷新一次啊代码_接口测试平台代码实现57首页重构5
本节我们接着开发首页,
主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。
具体联动需求:
右侧请求一次之后,左侧生成记录
点击左侧记录,右侧则会显示这次记录的请求数据
我们本节课的内容是想办法实现1-生成记录。
我们知道,左侧的记录是存在于我们数据库的记录表中,所以右侧请求模块只要请求,就顺便把这些请求数据+用户id 存储到记录表中即可。但是左侧的记录显示逻辑目前是,进入首页后自动获取展示,并没有实时刷新功能,也就是我们请求完之后,需要刷新页面才能在左侧看到记录,但是刷新的话右侧的返回体什么的也烟消云散了。那么我们就要重新设计这个左侧记录的展示逻辑,做成主动刷新。
一开始进到home的展示我们不用删除了,只做后续请求成功后的刷新吧
打开home.html,新建立一个js函数:
这个函数要做的事有两个:
1.清空已显示的记录
2.从数据库获取最新的记录生成展示
我们现在先去架设好获取最新记录的 urls.py:
然后去写views.py:
这里要特别说一下为什么这样写,我们只从数据库拿出id,method,host,url四个字段,其他的不要拿,因为都拿的话肯定数据太大超出了。我们只拿这几样需要显示的即可。等用户真的去点击某个记录的时候,我们在用这个记录的id单独去后台数据库获取全部请求数据就行。
然后我们回过头,打开home.html,输出一下ret,看看对不对。
还有我们要加上一个调用这个函数的代码,才能调试:
好让我们重启服务,打开浏览器控制台的-console,刷新首页看看输出吧:
看来是获取成功了。
接下来就是生成:
我们要用js代码,实现这个html语言的循环。
代码如下:
log_refersh()function log_refersh() { //清空 div = document.getElementById('home_log_plan'); div.innerHTML = ''; // 生成新的 $.get('/get_home_log/',{ },function (ret) { //ret 应该就是我们获取到的记录列表数组 的字符串形式 // 这里写生成展示的代码 console.log(ret); var res = eval(ret); var all_logs = res.all_logs; for(var i=0; i var a =document.createElement('a') ;//创建a标签 a.href="javascript:home_log_show()" ; // 点击函数 a.style="text-decoration: none" ; a.class = 'log'; var s = document.createElement('span'); //声明显示请求体类型的span s.style = "font-size: large;color: black"; s.innerText = all_logs[i].api_method+' - '; //设定这个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')); } })}
看看效果:
还是可以接受的。
接下来就是我们要在右侧进行请求后,把请求数据存放到数据记录表中,然后再调用一下这个刷新log函数即可:
打开views.py,找到Api_send_home(),加入下图红框内容,位置别弄错了。
然后在home.html中 的函数最后获取到返回结果的时候 加入调用记录刷新函数log_refersh,注意之前我们为了方便调试的那个一进页面就刷新的调用代码行可以删掉了。
然后重启服务刷新页面 ,随便请求点什么 看看效果。
看来这个是成功了。但是还有瑕疵,比如新显示的应该在最上面,顺序反了。我们在后台函数,首次进入和send请求的俩个位置逆转即可:
views.py中修改:
好了,这样顺序就方便了。到这就完成了今天的内容。
小伙伴可以在自行修饰。
欢迎关注和分享~ 你们的饭饭
html div分钟刷新一次啊代码_接口测试平台代码实现57首页重构5相关推荐
- html留言板代码_接口测试平台代码实现19.首页优化
按照最近俩天 小伙伴的反馈激烈程度,本节课准备把首页添加一个非常有用户黏性的一个功能.公司内的各个超链接传送门! 新来的公司的小伙伴经常会因为找不到各个平台/文档的地址而发懵.老员工跨部门工作的时候也 ...
- js代码自动排版_接口测试平台代码实现9:菜单常显
上节我们说到了一个问题:就是如何让菜单出现在每个页面的左侧. 比如我们刚研发好的home.html,配上菜单看才会更好看. 这里有三个方法: 把菜单的html代码复制粘贴到 其他各个页面 特点:完全不 ...
- 请求到后台百分号被删除原因_接口测试平台代码实现85: 全局请求头1
本节开始要制作一些次要功能,但是也是非常实用的.比如项目内的全局请求头. 首先看我们的前端页面,这个全局请求头的按钮: 我的设计是呢,点击后,出现一个弹层,这个弹层里除了保存/取消按钮 标题外.要有一 ...
- unittest 多个测试文件只开一次浏览器_接口测试平台代码实现75: 多接口用例15
根据我们上一节最后的投票. 引入unittest框架 碾压了第一种.其实我个人也偏向这个.因为我尝试过很多,但是唯独没有引入unittest在接口测试平台中.所以借此机会,也想挑战一下,涨点经验. 请 ...
- html调后台接口_接口测试平台代码实现62: 多接口用例2
好了,最近水了好多期,终于要写点代码了. 本节内容,我们搞定这个多接口的大用例 列表相关吧,难度基本为0,都是我们之前用到过的. 出现bug或者建议的 小伙伴可以直接留言或进微信群,但是可惜的是微信群 ...
- ride上点击用例不能显示edit信息_接口测试平台代码实现61: 多接口用例1
终于又序更上了,原谅最近作者几天事情不断. 按照我们之前的计划,需要迅速开启很重要的核心多用例接口. 首先,我们要确定,这个功能的大体设计. 就放在在我们的页面 用例库 中: 所以也就是我们很久之前就 ...
- 播放失败246106异常代码_燃气壁挂炉故障代码,这个必须得收藏了!
再好的产品也有可能会出现故障, 如果家里的壁挂炉出现故障了, 显示了一些字母代码, 你知道这些字母代码是什么意思吗? 又该采取什么措施去解决呢? 下面小编总结了一些品牌壁挂炉的故障代码, 供大家参考. ...
- 回滚master代码_[转]Git 代码撤销、回滚到任意版本(当误提代码到本地或master分支时)...
两种情况(场景) 情况一 代码还只在本地,未push到运程仓库,想把代码还原到上一次commit的代码,此时操作为代码撤销 解决方案: 情况二 代码已经push到运程仓库,想把代码还原到上一次提交,此 ...
- 收藏本站html,加入收藏代码_加入收藏代码 -收藏本站的代码
摘要 腾兴网为您分享:加入收藏代码 -收藏本站的代码,追书神器,智慧医疗,云端学习,央视影音等软件知识,以及workflow,电脑管家2017,自动考勤表,双录系统,国泰君安富易,佳缘佳信,谷歌浏览器 ...
最新文章
- 区块链隐私:交易还是计算?
- lucene源码分析的一些资料
- 3分钟配置好静态路由
- 加sql查询语句导出_搞不懂这些查询语句,SQL简单查询也无法从入门到熟练
- 三地警察抓兔子[转]
- 单元测试基本路径覆盖法(转)
- 主要知识产权(专利权,著作权,商标权)的申请与保护
- (PHP 4, PHP 5) isset — 检测变量是否设置
- 为什么Android项目mainactivity中有一个变量R_安卓4:第一个安卓程序 AS 安卓项目结构解析 手机运行app 模拟器运行app...
- edem合成运动教程
- 省考计算机专业课考什么,计算机考研专业课考什么
- 【flash】 水果忍者
- 冯诺依曼结构和现代计算机结构模型
- 书单 | 带你轻松度假的10本好书!
- 怎么给自己的电脑连接打印机
- Linux jstack命令
- 【Linux】修改文件或文件夹权限的命令
- 好记性不如烂笔头之Java基础复习笔记
- linux mandatory
- 大学生读书计划800字计算机专业,大学生读书计划范文3篇
热门文章
- java 内部thread_Java代码质量改进之:使用ThreadLocal维护线程内部变量
- java socket编程聊天室_Java Socket通信之聊天室功能
- centos安装无线网卡驱动_CentOS下显卡驱动安装的相关思考
- python注入点查找_sqlmap常用注入点检测爆破命令
- Android实现圆角照片和圆形照片
- UML类图与类间六种关系表示
- 修改场景默认pawn的方法
- unicode字符大全可复制_说说Excel不可见字符的那些事
- $_server['php_self'] 漏洞,Discuz! $_SERVER['PHP_SELF'] XSS Vulnerability
- sklearn 绘制roc曲线_如何用Tensorflow和scikit-learn绘制ROC曲线?