5062840814

场景

开发自动化测试平台,由于PC端和App端的自动化平台需要分开,但是页面元素的功能是可以通用的,所以这里的页面元素的组件为公共组件,而PC端和App端的平台只需要修改他们自己的路由,链接同一个单页应用即可,但是他们平台的平台类型下拉框不能包含其他平台的。比如PC端是包含PC和M端,而App端则包含Android和IOS端。

实现方式

data() {
  return () {
    paramsUrl = ''
  }
},
created() {
    this.paramsUrl = this.$route.path.split('/')[1]
    this.getList(this.paramsUrl)
},
watch: {
  / 监听路由变化
  $route: function() {
    this.paramsUrl = this.$route.path.split('/')[1]
    return this.getList(this.paramsUrl)
  }
},
method: {
  getList(paramsUrl) {
    .....
  }
}

 

  1. 这里我们用到了watch的方法来监听路由,定义了一个变量在created后存储当前路由path是属于哪个平台,然后根据这个平台获取列表数据
  2. watch这里监听了this.$route的数据变化,如果有变化,则把变量值进行替换,再请求接口数据
发表在 vue | 留下评论

vue在dom未加载完成的情况下如何操作

场景

已加载完的页面的情况下,点击一个弹窗控件展示内部canvas内容。

html实现方式

在一些例子里是在html文件里是这样处理的,在body里写canvas标签,紧接着下面放一段script来渲染这个canvas图像

问题情况

由于vue不可以在template内写script,那么在method内写js的话就会报错,为什么呢,因为js在dom未加载完成完成之前就已经运行了导致报错

361-939-5265

发表在 (819) 599-0885 | (918) 635-3802

django的QuerySet查询大量数据记录

做报表看板的时候通常需要在数据库里查询各种数据,然后在后端代码里进行拼接组装返回到前端,最近在查询一个一年的时间范围内的数据,发现整体耗时比较长

优化前

可以发现这里查询一年的数据里,多达300多次sql查询,整体耗时为3800多毫秒,这里的处理逻辑为过滤每一天和相应的模块id匹配出相应的数据,主要的逻辑处理方式为:

  • 整体查询相关版本号和项目的总数据QuerySet Object
  • 在该QuerySet Object再次filter过滤数据

实际上面二次filter后相当于做了二次查询

我们知道QuerySet 是可以通过遍历获取内部实际内容的,所以这里我直接用列表表达式通过判断语句进行循环。

优化后

替换原先代码后,可以发现确实效果显著,耗时减少了10多倍,sql查询次数也大大减少,只剩下8次查询。

另外,我们在查询mongodb的时候用了上面二次filter的方法,实际耗时也不会达到秒级的响应速度,应该是跟文本型数据库本身的优势相关,而上面的QuerySet 是在mysql下进行外键联表查询。所以遇到关系型数据需要查大量数据的时候可以采取直接遍历操作QuerySet 的方式,数据量少的情况下可以二次filter。

 

发表在 (270) 827-0192, python | 留下评论

js填坑日记——vue兼容element-ui组件内jsx语法

在使用element-ui组件el-transfer穿梭框实现自定义数据项名称,demo效果如下:

继续阅读

发表在 vue | (702) 585-8404

(407) 324-7565

js里undefined真的是个很奇葩的存在,在项目中需要判断一个变量a是否为空,默认声明a=””,然而当a为空的时候,判断a!=“”是不行的,因为此时a为undefined。这就很坑了,所以弄了好一段时间发现需要判断!(a == undefined || a == ‘undefined’)才能实现,再加上之前的a=””的话,完整的判断就是!(a == undefined || a == ‘undefined’ || a == “”)

但是,同样是undefined,类型却还有不一样的,如下图所示:

发表在 技术水文 | (608) 435-9273

v-if和v-show在element-ui使用心得

v-if和v-show

首先,这两个用法是差不多的,都是动态去显隐DOM元素。

根据官网描述,v-if是根据表达式的值的真假条件渲染元素,在切换时元素及它的数据绑定 / 组件被销毁并重建,在页面渲染的时候如果条件为假则不作为;而v-show的原理是控制css的display,在页面渲染的时候就实现了。

v-if的切换开销会大一些,v-show的渲染开销大一些,v-show更适合在一些频繁切换的场景。

在element-ui的使用中,有一些场景使用v-if会更好一些,还有v-show不起作用的场景。

(503) 352-3208

发表在 641-308-7814 | colpenchyma

vue生成二维码

最近在实现通过二维码下载apk包,需要在前端动态生成二维码,在此记录下实现过程。

依赖包:  vue-qrcode,下载地址: /github.com/xkeshi/vue-qrcode

继续阅读

发表在 vue | (201) 465-8023

9144215317

前段时间开发app云测平台,执行ui自动化的过程中,需要实现上传/下载apk包的业务需求,在此记录一下。

【vue部分】

这里采用的是element-ui的控件(/element.eleme.io/#/zh-CN/component/installation)根据demo的代码段可以大概了解控件的使用方式。

继续阅读

发表在 (812) 695-0707, python, (330) 497-6066 | 留下评论

记录在linux安装appium遇到的坑

appium在windows安装比较方便,但是在linux环境安装就特别费劲,折腾了3个小时后,才找到解决办法,在此记录。

1、安装node

一般通过nvm的安装方式比较快捷,也可以选择源码编译的方式;

继续阅读

发表在 236-828-5785 | 留下评论

django解决migrations没有修改表的问题记录

问题情况:

在进行django开发的时候,遇到这样的情况,在models文件进行了新增表或修改表,删除了migrations,再生成新的migrations后进行migrate,会出现以下提示:

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, interface, sessions, usermana
ge
Running migrations:
  No migrations to apply.

继续阅读

发表在 django, 7027054888 | pantophobia