【本节目标】使用ElementUI 美化首页其他部分 首先是顶部：我的计划是做个搜索框，功能以后再完善，先把样子做出来。...首先打开最终的public / index.html ,添加如下样式： 然后往里找，下一个就是app.vue了： 然后继续往里，就到了我们的首页了： 改好之后，保存看看效果： 本节课到此结束，我们下一节课
在我们的主页上写一个elementUI的输入框看看：(下面的是elementui的输入框，上面的是原生的做对比用) 效果如下： 到此，证明我们引入成功了，所以可以删掉这俩个测试用的输入框了，然后来思考我们的首页工具列表怎么设计了...我的初步计划是，做个左侧的菜单，右侧是首页的工具列表。 具体实现欢迎追更下一节
好，虽然绝大多数同学还未追上最新进度进行投票，但是已投情况来看，大部分还是支持首页做成接口快速调试功能。 那么本节课就开始吧，首先我们打开我们的首页：home.html。...首先我们依从postman的风格，整个首页大概分为左右俩部分，左边是请求历史记录，右边是接口调试的具体模版。当我们点击左侧的任意请求记录的时候，右侧则迅速把各个输入框的值变为这次记录存储的数据即可。...具体数据由用户进入首页时 由后端带进来。 如上图代码所示：这个超链接，点击的话我们定义了一个js函数，用来把请求数据显示到右侧。...这个表存放的基本和接口仓库的接口表一样，但是不需要项目id,因为首页调试的接口不属于任何项目，但是额外需要用户id，因为这些接口属于用户，我们也是靠用户id 来区分开。
【本期目标】实现首页顶部搜索功能 预期效果：输入工具名称关键字，点击搜索按钮，下列即可刷新对应结果。...此时给搜索按钮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...好的，具体到目前首页前端先这样吧~ 下节课预告，搜索页面，也就是展开后的第一个页面~
【本节目的】完成首页(工具列表)-前端 【所需技术】vue-cli + elementUI 打开我们的项目，观察现在的文件结构： 我们现在要做一个首页的前端部分，这个页面的内容主要是我们的工具列表...好，让我们回归开发主线，现在去views下新建一个 ToolList.vue ，从名字上看就是工具列表，也会作为我们的首页。...根据成对原则，这些内容正好是三部分： template ：dom层元素 script: vue的bom层函数 style : 页面的样式 我们先测试一下，在这个template中写一个div，并在内部写上一个标题...我们在之前测试过，点开后打开的是： 这并不是我们想要的页面，那么怎么来转到我们的 ToolList.vue 呢？...结果如下： 看到127.0.0.1:8000 直接对应并且展示了我们的首页，就算成功~ 本节到此结束，欢迎大家追更下一节哦~
【本节目标】首页结构布局 一个页面，是由很多小部分组成的，比如左侧，顶部，右侧，底部这种不同的区域。...我的首页设计就是这样的： 左侧Aside是菜单，Header做成搜索框，Main做成工具列表，Footer做成统计图。...现在还是来美化下首页的前端把~ 欢迎继续收看下一节
这里自然放的都是一些菜单，在elementUI中的菜单其实很简单，代码如下：
标签内放的是这个页面的标头，我们可以随便改一下中间的白字：Title ，改成：首页。 然后已浏览器模式打开这个页面，看看 首页俩个字 出现在了哪？ 如何用浏览器打开？...好了，现在我们已经成功打开这个页面，我们看看 我们写的title:首页，在哪吧？ 好的，原来就在这个上面。
当接口请求体为空的时候 我们运行调试send和异常测试，会报错。 定位错误的窍门就是 先看最后一句，是一个json解析错误。然后找具体哪行时候，我们直接看我们自己写的py文件就好，其他的忽略。...然后我们测试发现可以正常处理返回错误结果了： 但是还有新的问题，当header 不为空，但是也不符合字典/json的格式时候。我们要怎么处理呢？...现在开始正式本节内容，一直被吐槽最多的就是这个首页。难看且无用。 这是因为我们最开始只是单纯的给大家当作一个草纸进行练手，现在练的差不多了，可以用现在的功力重新做一个首页了。...做成接口测试平台专业化的工具- 首页调试 接口测试平台的定位其实是一个综合体，并不是单纯的挑战替代某一种主流工具，只是整合而已。...为了成功整合postman的方便，我们需要在首页引入快捷调试功能，调试满意的接口可以保存到项目中，且有历史回放功能。
本节继续开发首页右侧的显示效果，可能有的同学觉得这里节奏太慢了，不怕，咱养肥再看。...注意我把$.get()的url后面加了个_home,来表示这个请求是首页发出去的，并不是项目管理中接口库发出的。...代码如下，直接复制即可： # 首页发送请求 def Api_send_home(request): # 提取所有数据 print('qwe') ts_method = request.GET
首先，我们打开上节课的首页-ToolList.vue ： 思考：如果要构造一个展示工具名称的列表，那么需要什么？
按照最近俩天 小伙伴的反馈激烈程度，本节课准备把首页添加一个非常有用户黏性的一个功能。公司内的各个超链接传送门！ 新来的公司的小伙伴经常会因为找不到各个平台/文档的地址而发懵。...打开models.py: 创建类：DB_home_href 作为我们首页的超链接传送门表 然后运行那俩个最常用的同步/生效表结构命令： 然后别忘了去admin.py中注册该表，以便我们可以在后台进行增删改查...不信我们print一下看看： 然后浏览器等待后台自动重启后，刷新首页 ： 我们现在知道，用户进入的是Home.html页面。...以便我们调试显示效果： 然后我们回去直接刷新首页看看，注意操作admin后台后不需要等待服务重启，是纯在线修改数据。直接刷新首页就可看到效果： 好，现在成功显示了。...我们可以自行测试一下，看看是否可以跳转成功。 好本节课到此结束，下节课我们来优化这个超链接显示效果。 一直追的小伙伴别忘了分享啊～留言板
本节我们接着开发首页， 主要内容是 让左侧的请求记录和右侧的请求模块 联动起来。...但是左侧的记录显示逻辑目前是，进入首页后自动获取展示，并没有实时刷新功能，也就是我们请求完之后，需要刷新页面才能在左侧看到记录，但是刷新的话右侧的返回体什么的也烟消云散了。...还有我们要加上一个调用这个函数的代码，才能调试： 好让我们重启服务，打开浏览器控制台的-console，刷新首页看看输出吧： 看来是获取成功了。
上节说到，首页我们可以成功打开了。本节就说说，如何设计主页吧～ 美化设计： 关于设计这点，老实说，我是没有什么话语权的，因为我做的东西不好看。...2.hao123风格 特点：满屏的超链接，花里胡哨，但是很实用，全都是常用网址，设计公司内测试平台的话也可以用各种内部常用链接作为首页，这样做更容易让同事保存成书签。...低调奢华有内涵，但是不太适合作为一个测试平台使用 5.主要工具实用类 特点：就相当于 没有主页了。用户进来的第一个页面 就是一个最常用的工具页面，给人感觉是比较务实，但是失去了仪式感。...所以我们把welcome.html的title改成测试平台： 这样我们后续进入的各种页面都会显示这个了 好的，让我们打开新建的home.html开始开发： 然后在浏览器打开看看效果： 接着设计,...现在让我们打开网址：127.0.0.1:8000/home/ 来看看刚刚开发的首页！
在本节开始之前，让我们来处理上节课小伙伴反馈的一个现象级问题： 就是进入首页后，这个接口测试平台的欢迎语能不能别删，不然都不知道这是干啥的平台， 这里却是我之前疏忽了，所以本节我们先加上...大家先不要着急看代码 作者先自己试着测试了一下： 现在看着 点击左侧记录，右侧就会自动变更了！ 但是出乎作者意外的是，这个操作同时也带来了严重的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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
