Vue:切换class模拟实现tab

实现个切换

其实就是翻译了jQuery的removeClass和addClass,只是在Vue里面使用了变量去切换.

vuejs logo

运行效果

vuejs tab 运行效果

源码

源码比较简单,引用了bootcss的cdn服务.

JdbcTemplate:实现分页功能

实现分页

在数据多的时候,不分页JVM就会挂掉.由于是用的JdbcTemplate,所以就研究了下JdbcTemplate的分页.记录如下.

java

源码

部分代码,后面看时间更新为完整.

分页实体类:

生成分页的SQL语句:

InterSystems Cache 数据库的分页工具类(下面有MySQL的):

分页查询组件:

MySQL分页实现:

Oracle分页实现:

Maven:No compiler is provided in this environment

问题

在执行maven install的时候,提示如下错误:

No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?

maven logo

解决

解决办法是:
1.多project clear几次项目,project clear之后不要运行maven clear;
2.在maven的conf/settings.xml中,添加如下代码即可(依照版本来,我这里是jdk 1.8就写1.8):

Java 8:Stream的使用

记录

开始在工作中接触一些Java 8 的内容,也开始使用Stream处理集合.下面是一些代码,有的是自己写的,有的来源于网上.

java标志

源码

Element-UI:缓存Tabs打开的页签

竟然不缓存?

在使用Element ui 的时候,发现Tabs挺好用,于是做了这样一个页面:左侧是菜单,右侧顶部是Tabs,右侧下方是iframe.一切就绪,问题出现,就是每次点菜单的时候,Tabs就会新增一个页签,这导致iframe增加不少.于是想了个办法,来解决这个问题.

  1. 在menu菜单中,index直接为页面的名称;
  2. 在Select事件中,拿到index就可以请求页面了;
  3. 请求页面的时候,先判断页面是否已经存在于缓存中.如果存在则直接激活该页签,不存在就先添加到Tabs,然后激活,并放入缓存中.
  4. over……

但这样,存在另外一个问题:如果有几十个菜单,会堆叠几十个iframe.侧面一想,如果共用一个iframe,那么会出现另外一个问题,就是可能在上一个页面只输入了一部分文本,还没处理就切换页签,会丢失上个页面的数据.

于是,在菜单量不多的情况下,还是每个页签一个单独的iframe.便于处理.

html

源码

只有main.html是有实质内容的,其余html都是为了演示数据.

代码可以直接在本地运行,可以保存成文件,进行运行.

main.html

roleList.html

userAdd.html

userList.html

roleAdd.html