如题，使用css纯代码实现了的适用于手机版的菜单点击效果（带过渡动画），本代码使用hover鼠标划过来模拟点击，可以稍加修改实现点击事件。 效果如图： Html/CSS代码实现如下，vue下点击后实现相同的功能的代码详见：https://blog.terrynow.com/2021/09/05/vue-css-animated-menu-toggle-effect-code-implement/ <!doctype html> <html> <head> <style>…
如题，使用css纯代码实现了的适用于手机版的菜单点击效果（带过渡动画），本代码使用hover鼠标划过来模拟点击，可以稍加修改实现点击事件。 效果如图： Html/CSS代码实现如下，vue下点击后实现相同的功能的代码详见：https://blog.terrynow.com/2021/09/05/vue-css-animated-menu-toggle-effect-code-implement/ <!doctype html> <html> <head> <style>…
开发中经常会遇到时间段检查冲突问题，比如预约时间段检查等 判断给定的时间段是否和当前表中的时间段不重叠，只要判断给定的开始时间大于记录中的结束时间，或者给定的结束时间小于记录中的开始时间； 也就是判断重叠，给定的开始时间最小值小于记录中的结束时间最大值并且给定的结束时间最大值大于记录中的开始时间最小值，则一定重叠！ 假设数据库表t_table 存的开始时间和结束时间是start_date和end_date 两种方式： SELECT * FROM t_table WHERE (start_date > :sta…
从一串含有地址的字符串中，提取出省份或者城市，例如，从『江苏省苏州市吴中区吴中大道1188号』或者『上海市浦东新区世博大道1000号』提取出『苏州市』和『上海市』 以下JS代码以提取城市为例，如果提取省份，稍加修改便可。 /** * 从地址中提取城市 **/ function parserCityFromAddress(address) { var city = ''; if (address.indexOf('市') > 0) { var regex = /.+?(省|市)/g; var strings =…
我们使用NodeJS或者npm安装依赖包的时候，因为默认的npm安装源是国外的https://registry.npmjs.org，由于众所周知的原因，安装时候，会很慢，而且有时候，会直接安装失败。 可以将默认的源替换为国内的源，就可以加快安装速度了，在这方面，阿里云是个活雷锋，之前的文章中，有提到： Java的Maven替换为阿里云的安装源：https://blog.terrynow.com/2021/04/19/idea-change-maven-repository-to-speed-up-import/ G…
之前的旧项目是Java的Web应用程序，是底层的Servlet开发的，最近被检测出有XSS漏洞。研究了一下，主要是针对Content-Type、请求参数上做攻击，JavaWeb可以使用Filter过滤器，来对这些统一进行过滤。 首先实现安全过滤器 新建 XSSRequestWrapper.java，针对请求参数关键词做检测和过滤 import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletRequestWrap…
一些Mobile版本的网站，上面顶部菜单图标，按上去可以展开菜单，再点击，可以收回菜单，如图所示： 下面分享我项目中用到的菜单Toggle效果的代码 利用CSS画出三个横线，以及一个叉叉，然后加入动画效果 <!doctype html> <html> <head> <style> .menu-toggle .span { height: 2px; margin: 7px 0 0 0; transition: all .3s ease-out; backface-vis…
把项目的JDK升级成了JDK11后，发现原来的代码报错了，javax.annotation.Resource等地方，提示没有那个包： java: package javax.annotation does not exist 问题是Java11以后，都移除了javax.annotation，不过解决方案也简单，它只是不在标准的JDK里，还可以通过第三方jar包引入，或者利用maven引入： pom.xml <?xml version="1.0" encoding="UTF-8"?> <!-- ~ …
开发过程中，有时候需要两行文字左右（两端）都对齐，例如以下： 用户名 密码 我们预期是这样： 用户名 密 码 需要对齐，这个时候可以在『密码』中间加空格，但是有个问题，有时候空格的宽度不是我们所预期的那样，导致还是不能两端对齐 所以这里我用了个特殊的空白符，比较特殊是因为他的宽度就是和普通文字一样的宽度，而且是?看不见的~ 下面列出来，需要的话，到两个箭头中间去复制，就可以啦： 以下两个箭头中间的，默认先试试第一组箭头里面的就可以了 --> <-- --> <--
Vue开发的时候，由于本地的浏览器环境是http://localhost:8080类似这样的地址，而API地址，很可能是后端开发的，不在同一台而AXIOS导致跨域无法请求的问题。 可以利用vue的代理功能，让vue使用proxy去转发流量给API服务器，从而避免跨域问题 假设API服务器的API链接都是/api开头的，如果是开发环境，baseURL就设置为api，是相对路径，这样根据下面的vue.config.js的配置，匹配规则的都转发给proxy服务器 http.js import axios from 'ax…
SpringBoot下使用如下，spring-boot-starter-data-redis，使用RedisTemplate/StringRedisTemplate封装了Redis的操作，非常的方便了。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency…