在我们的主页上写一个elementUI的输入框看看:(下面的是elementui的输入框,上面的是原生的做对比用) 效果如下: 到此,证明我们引入成功了,所以可以删掉这俩个测试用的输入框了,然后来思考我们的首页工具列表怎么设计了...我的初步计划是,做个左侧的菜单,右侧是首页的工具列表。 具体实现欢迎追更下一节
好,虽然绝大多数同学还未追上最新进度进行投票,但是已投情况来看,大部分还是支持首页做成接口快速调试功能。 那么本节课就开始吧,首先我们打开我们的首页:home.html。...首先我们依从postman的风格,整个首页大概分为左右俩部分,左边是请求历史记录,右边是接口调试的具体模版。当我们点击左侧的任意请求记录的时候,右侧则迅速把各个输入框的值变为这次记录存储的数据即可。...具体数据由用户进入首页时 由后端带进来。 如上图代码所示:这个超链接,点击的话我们定义了一个js函数,用来把请求数据显示到右侧。...这个表存放的基本和接口仓库的接口表一样,但是不需要项目id,因为首页调试的接口不属于任何项目,但是额外需要用户id,因为这些接口属于用户,我们也是靠用户id 来区分开。
【本节目标】使用ElementUI 美化首页其他部分 首先是顶部:我的计划是做个搜索框,功能以后再完善,先把样子做出来。...首先打开最终的public / index.html ,添加如下样式: 然后往里找,下一个就是app.vue了: 然后继续往里,就到了我们的首页了: 改好之后,保存看看效果: 本节课到此结束,我们下一节课
【本期目标】实现首页顶部搜索功能 预期效果:输入工具名称关键字,点击搜索按钮,下列即可刷新对应结果。...此时给搜索按钮el-button增加一个点击事件,即把变量内容发送给后台,后台接收到后返回对应结果的列表,前端再把最新结果同步给vue变量tool_list,再次借助vue自动渲染效果,让首页的项目列表真的展示成最新搜索结果...这里涉及到以下几个知识点: request.GET.get(参数名,取不到时候的默认值) if None 的值为假 .filter(name__contains=keys) 表示name中包含关键字keys 结果测试
接着上节继续来做: 先来回顾一下,上节课我们基本就是清空来首页,并且划了一条竖线,把首页分为左右俩部分。 左边放我们请求记录,请求记录我们的数据层已经初步架设好。...所以我们找到后台中进入首页的函数home 但是因我们包装了一层,所有的页面都是通过嵌入到welcome.html中来展现的,所以我们真正要添加这个请求记录的地方不在home里,而是应该在child_json
今天继续开始做这个平台,上节课我们已经成功搬运了信封样式的漂亮前端,本节课就来设计第一个页面:首页。...目前来说,首页的功能上并没有什么重要的,无非就是展开信封,数据统计等 Part1先去掉那些下载的英文信息等。...所以打开的项目并非是django项目,而是其内部的vue项目:v_love 然后在终端输入启动命令:npm run serve 打开首页看看目前是什么样子,注意此时是用vue启动前端项目,所以端口是8080...好的,具体到目前首页前端先这样吧~ 下节课预告,搜索页面,也就是展开后的第一个页面~
【本节目标】首页结构布局 一个页面,是由很多小部分组成的,比如左侧,顶部,右侧,底部这种不同的区域。...我的首页设计就是这样的: 左侧Aside是菜单,Header做成搜索框,Main做成工具列表,Footer做成统计图。...现在还是来美化下首页的前端把~ 欢迎继续收看下一节
【本节目的】完成首页(工具列表)-前端 【所需技术】vue-cli + elementUI 打开我们的项目,观察现在的文件结构: 我们现在要做一个首页的前端部分,这个页面的内容主要是我们的工具列表...好,让我们回归开发主线,现在去views下新建一个 ToolList.vue ,从名字上看就是工具列表,也会作为我们的首页。...根据成对原则,这些内容正好是三部分: template :dom层元素 script: vue的bom层函数 style : 页面的样式 我们先测试一下,在这个template中写一个div,并在内部写上一个标题...我们在之前测试过,点开后打开的是: 这并不是我们想要的页面,那么怎么来转到我们的 ToolList.vue 呢?...结果如下: 看到127.0.0.1:8000 直接对应并且展示了我们的首页,就算成功~ 本节到此结束,欢迎大家追更下一节哦~
这里自然放的都是一些菜单,在elementUI中的菜单其实很简单,代码如下:
标签内放的是这个页面的标头,我们可以随便改一下中间的白字:Title ,改成:首页。 然后已浏览器模式打开这个页面,看看 首页俩个字 出现在了哪? 如何用浏览器打开?...好了,现在我们已经成功打开这个页面,我们看看 我们写的title:首页,在哪吧? 好的,原来就在这个上面。
当接口请求体为空的时候 我们运行调试send和异常测试,会报错。 定位错误的窍门就是 先看最后一句,是一个json解析错误。然后找具体哪行时候,我们直接看我们自己写的py文件就好,其他的忽略。...然后我们测试发现可以正常处理返回错误结果了: 但是还有新的问题,当header 不为空,但是也不符合字典/json的格式时候。我们要怎么处理呢?...现在开始正式本节内容,一直被吐槽最多的就是这个首页。难看且无用。 这是因为我们最开始只是单纯的给大家当作一个草纸进行练手,现在练的差不多了,可以用现在的功力重新做一个首页了。...做成接口测试平台专业化的工具- 首页调试 接口测试平台的定位其实是一个综合体,并不是单纯的挑战替代某一种主流工具,只是整合而已。...为了成功整合postman的方便,我们需要在首页引入快捷调试功能,调试满意的接口可以保存到项目中,且有历史回放功能。
首先,我们打开上节课的首页-ToolList.vue : 思考:如果要构造一个展示工具名称的列表,那么需要什么?
本节继续开发首页右侧的显示效果,可能有的同学觉得这里节奏太慢了,不怕,咱养肥再看。...注意我把$.get()的url后面加了个_home,来表示这个请求是首页发出去的,并不是项目管理中接口库发出的。...代码如下,直接复制即可: # 首页发送请求 def Api_send_home(request): # 提取所有数据 print('qwe') ts_method = request.GET
按照最近俩天 小伙伴的反馈激烈程度,本节课准备把首页添加一个非常有用户黏性的一个功能。公司内的各个超链接传送门! 新来的公司的小伙伴经常会因为找不到各个平台/文档的地址而发懵。...打开models.py: 创建类:DB_home_href 作为我们首页的超链接传送门表 然后运行那俩个最常用的同步/生效表结构命令: 然后别忘了去admin.py中注册该表,以便我们可以在后台进行增删改查...不信我们print一下看看: 然后浏览器等待后台自动重启后,刷新首页 : 我们现在知道,用户进入的是Home.html页面。...以便我们调试显示效果: 然后我们回去直接刷新首页看看,注意操作admin后台后不需要等待服务重启,是纯在线修改数据。直接刷新首页就可看到效果: 好,现在成功显示了。...我们可以自行测试一下,看看是否可以跳转成功。 好本节课到此结束,下节课我们来优化这个超链接显示效果。 一直追的小伙伴别忘了分享啊~留言板
上节说到,首页我们可以成功打开了。本节就说说,如何设计主页吧~ 美化设计: 关于设计这点,老实说,我是没有什么话语权的,因为我做的东西不好看。...2.hao123风格 特点:满屏的超链接,花里胡哨,但是很实用,全都是常用网址,设计公司内测试平台的话也可以用各种内部常用链接作为首页,这样做更容易让同事保存成书签。...低调奢华有内涵,但是不太适合作为一个测试平台使用 5.主要工具实用类 特点:就相当于 没有主页了。用户进来的第一个页面 就是一个最常用的工具页面,给人感觉是比较务实,但是失去了仪式感。...所以我们把welcome.html的title改成测试平台: 这样我们后续进入的各种页面都会显示这个了 好的,让我们打开新建的home.html开始开发: 然后在浏览器打开看看效果: 接着设计,...现在让我们打开网址:127.0.0.1:8000/home/ 来看看刚刚开发的首页!
本节我们接着开发首页, 主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。...但是左侧的记录显示逻辑目前是,进入首页后自动获取展示,并没有实时刷新功能,也就是我们请求完之后,需要刷新页面才能在左侧看到记录,但是刷新的话右侧的返回体什么的也烟消云散了。...还有我们要加上一个调用这个函数的代码,才能调试: 好让我们重启服务,打开浏览器控制台的-console,刷新首页看看输出吧: 看来是获取成功了。
在本节开始之前,让我们来处理上节课小伙伴反馈的一个现象级问题: 就是进入首页后,这个接口测试平台的欢迎语能不能别删,不然都不知道这是干啥的平台, 这里却是我之前疏忽了,所以本节我们先加上...大家先不要着急看代码 作者先自己试着测试了一下: 现在看着 点击左侧记录,右侧就会自动变更了! 但是出乎作者意外的是,这个操作同时也带来了严重的bug。...而是改成先去请求一个url,带上这个记录id,然后这个url调用一个类似我们进入home首页的函数,只是要多了一个记录id,这个函数根据记录id从数据库拿到完整请求数据再给用户返回这个welcome.html...改成: 这样,我们正常进入首页时候,log_id是空的。当我们点击某记录方式进入首页的时候,log_id就有了。
document.getElementById('add2').click() } } } } 好了我们现在可以刷新页面测试了...经过测试,发现除了form-data/x-www...之外的 记录都可以正常刷新并显示出来。...首页明天才是最后一节课,会解决几个小bug,异常处理,还有稍微美化一下。(什么?开头不是说了本节就是最后一节了?不不不,仔细看我说的是基本是最后一节)
【本节目标】首页的细微样式调整等 本节内容较轻松,大家可以放松浏览。 先来看看我们的首页目前长啥样来着: 虽然看起来简洁大方,但是仍然有很多可优化的地方。...制作一个艺术字logo,可以在百度搜索【在线logo艺术字】logo文案建议写平台名称【造数平台】我这里用的是【测试开发干货】 二。
还要优秀,但是它的默认设置让我不是很舒服,尤其是默认打开浏览器时,固定展示MSN的页面,打开新标签页也是这样,信息十分杂乱,经过一番设置之后,我终于解决了这个问题,本篇文章就跟大家一起分享一下如何修改首页以及新标签页的设置...首页设置打开edge浏览器,就给我展示很多标题党新闻,让我感觉眼睛受到了污染,我循着之前设置浏览器的经验,打开了浏览器的设置,如下图:在设置中,我们可以看到开始,主页和新建标签页的选项,点击它,启动edge...我们可以将启动时打开的页面设置为新标签页,或者上一次的关闭页,也可以设置成一个特定网页,比如百度,这里我们以打开浏览器默认访问百度为例进行设置,点击右侧三个点,进行编辑,输入百度的网址,点击保存即可:我们重新打开浏览器,就会打开百度首页...新标签页设置设置完浏览器首页之后,我们还可以对新标签页进行设置,新标签页的右上方有个齿轮状的设置按键,点击它,如下图:然后我们找到最下方的可见内容下拉框,选择内容关闭即可,如下图:完成之后,新标签页内容将会清空...,如下图:当然,如果我们想留一些门户网站留在新标签页便于访问的话,我们也可以设置保留网站导航,如下图:总结本文主要介绍了edge浏览器首页以及新标签页的设置方法,经过设置之后,浏览器的页面更加简洁,提高了我们的使用体验
领取专属 10元无门槛券
手把手带您无忧上云