JavaScript全局修改代码修饰器CSS 网站添加prettify代码高亮教程

 不同主题高亮不统一问题本站由于之前曾用不同编辑器插件编辑文章,因此代码高亮区域的CSS都点不同,不同主题之间对<pre>标签的处理也都不一样,造成每个主题都有不同的代码高亮形式。之前我的解决方法是改插件的CSS实现CSS内容统一,但这样面临两个问题:操作麻烦 需要手动修改CSS源文件破坏插件CSS 当插件更新时会修改可能会被覆盖恢复    感叹之前想得太麻烦,其实很简单解决这个问题,首先引入相关js、css代码(没有可在商店下载):<link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     <script src="/zb_users/plugin/FY_Prettify/prettify.js"></script>然后通过js遍历标签节点强制更改pre标签为指定样式:    <script type="application/javascript"> var tags= document.getElementsByTagName("pre"); for (let s of tags) { s.setAttribute("class","fy-prettyprint linenums"); } </script>最后将这段代码放在主题设置的统计代码中即可,即以下:代码高亮代码<link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     <script src="/zb_users/plugin/FY_Prettify/prettify.js"></script><script type="application/JavaScript"> var tags= document.getElementsByTagName("pre"); for (let s of tags) { s.setAttribute("class","fy-prettyprint linenums"); } prettyPrint();</script>其中本站已在prettify.js中调用了prettyPrint()方法,因此可以删除prettyPrint()避免重复调用。但是鄙人发现调用后还是没效果,发现可能是jq版本造成的错误,原错误代码:/*初始化prettyPrint*/jQuery(window).load(function(){    jQuery("pre").addClass("prettyprint");     prettyPrint();})改成下列即可/*初始化prettyPrint*/$(window).on('load',function(){    jQuery("pre").addClass("prettyprint");     prettyPrint();})代码复制功能代码复制引用相关js即可。Z-Blog用户可在应用商店搜索“复制代码”<script src="/zb_users/plugin/copycode/clipboard.min.js"></script><script src="/zb_users/plugin/copycode/copycode.js" type="text/javascript" /></script>将如下代码放在网站任意共通页面中即可。文章页面编辑功能给每篇文章页面添加编辑功能,很简单,在文章显示页的PHP主题模板文件中添加:<span>{if $user.ID>0}<i class="fi fi-edit"></i><a href="{$host}zb_system/cmd.php?act=ArticleEdt&id={$article.ID}" rel="nofollow">Edit &nbsp;</a>{/if}</span>当然最简单是将上述封装成js文件直接引用就行,可以省去修改PHP模板的困扰,也减少代码侵入:var tags = document.getElementsByTagName("pre");for (let s of tags) { s.setAttribute("class", "fy-prettyprint linenums");}function getCookie(cookieName) { var cookieValue = ""; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i]; if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") { cookieValue = cookie.substring(cookieName.length + 2, cookie.length); break; } } } return cookieValue;}if (getCookie('username')) { var pathName = window.location.pathname; if (pathName.indexOf('post/') > -1) { var endNum = pathName.length - 5; var articleNo = pathName.substring(6, endNum); if (!$('.article-info .fr .edits').html()) { var editStr = '<span><i class="fi fi-edit"></i> <a href="/zb_system/cmd.php?act=ArticleEdt&id='+articleNo+'"rel="nofollow">Edit &nbsp;</a></span> '; $('.article-info .fr').prepend(editStr); } }}以上代码思路也很简单,判断当前cookie中是否有用户名字段,有就在页面指定位置添加编辑按钮,这里编辑按钮的articleNo是根据当前页面Url来的,你的页面伪静态策略可能不一样,因此根据实际需求修改吧,关于编辑框插入位置的css选择器也根据实际情况进行修改即可。

国产开源精品工具包HuTool

简介:Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以“甜甜的”。Hutool中的工具方法来自于每个用户的精雕细琢,它涵盖了Java开发底层代码中的方方面面,它既是大型项目开发中解决小问题的利器,也是小型项目中的效率担当;Hutool是项目中“util”包友好的替代,它节省了开发人员对项目中公用类和公用工具方法的封装时间,使开发专注于业务,同时可以最大限度的避免封装不完善带来的bug。官方文档:https://hutool.cn/docs/#/详细用法官方已经讲得很详尽了,在此就不再赘述了。模块介绍hutool-aopJDK动态代理封装,提供非IOC下的切面支持hutool-bloomFilter布隆过滤,提供一些Hash算法的布隆过滤hutool-cache简单缓存实现hutool-core核心,包括Bean操作、日期、各种Util等hutool-cron定时任务模块,提供类Crontab表达式的定时任务hutool-crypto加密解密模块,提供对称、非对称和摘要算法封装hutool-dbJDBC封装后的数据操作,基于ActiveRecord思想hutool-dfa基于DFA模型的多关键字查找hutool-extra扩展模块,对第三方封装(模板引擎、邮件、Servlet、二维码、Emoji、FTP、分词等)hutool-http基于HttpUrlConnection的Http客户端封装hutool-log自动识别日志实现的日志门面hutool-script脚本执行封装,例如Javascripthutool-setting功能更强大的Setting配置文件和Properties封装hutool-system系统参数调用封装(JVM信息等)hutool-jsonJSON实现hutool-captcha图片验证码实现hutool-poi针对POI中Excel的封装hutool-socket基于Java的NIO和AIO的Socket封装

国产精品开源框架Nutz及相官工具类简介

Nutz官网: http://nutzam.com 简介: Nutz 是国产的精品开源框架,它全无依赖,只以1兆多的身材,就可以实现SSH全部功能的90%以上。内容主要涵盖了:Ioc、Aop、MVC、Dao、Json等WEB开发的方方面面。 因此它并非简简单单一个工具包,甚至可用它来做一个项目。相关工具类(其他内容请参见官网,此处仅选其中几工具类)Http 类//get方式请求Response resp = Http.get("http://www.baidu.com");    if (resp.isOK()) {        System.out.println(resp.getContent());    }//post方式Map<String, Object> params = new HashMap<String, Object>();params.put("name", "root");params.put("pwd", "123456");int timeout = 60 * 1000; // 单位毫秒String apiRet = Http.post("http://api.xxx.com/login", params, timeout);System.out.println(apiRet);使用代理定制http Header、Cookie文件上传设置请求超时时间… 更多内容可自行探索 org.nutz.http 包。Tasks 类Tasks.scheduleAtFixedRate(new Runnable(){    public void run()    {        System.out.println("task runing...");    }}, 10);Lang.quiteSleep(60 * 1000);在指定的延时之后开始以固定的频率来运行任务在指定的时间点开始以固定的频率运行任务两次任务间保持固定的时间间隔返回Future做更高级的任务控制返回定时任务线程池,可做更高级的应用 更多内容可自行探索 org.nutz.lang.Tasks 类Conf 加载PropertiesProxy property = new PropertiesProxy(“/conf/", “/db.properties”));String redisIp = property.get("redis.ip");Int redisPort = property.getInt("redis.port");SocketsSockets.localListenOneAndStop(9099, "reload", new SocketAction(){        @Override        public void run(SocketContext context) {            System.out.println("重新加载配置文件");            context.writeLine("success");        }    });现在你只需 telnet 172.0.0.1 9090 然后输入 reload,就能重新加载项目中的配置文件了。而且原生的,它支持客户端输入 “close|stop|bye|exit” 来结束服务端的本地监听。  上边只是演示了添加一个动作(SocketAction),其实可以向它放入多个SocketAction来实现各种命令操作。另高级的,服务器端还能支持接收json串,实现更多的参数传入。  更多内容可自行探索 org.nutz.lang.socket 包。NutMapNutMap map = new NutMap();map.put("name", "bushi");map.put("age", 63);map.put("sex", true);map.put("time", new Date());                  System.out.println(map.getString("name"));System.out.println(map.getInt("age"));System.out.println(map.getBoolean("sex"));System.out.println(map.getTime("time"));//另外addv亦可添加支持链式NutMap nutMap = new NutMap();nutMap.put("1",1);nutMap.put("2","2");nutMap.addv("3",3).addv2("4",4);System.out.println(nutMap);//输出 {1=1, 2=2, 3=3, 4=[4]}代码统计Nutz中还隐藏了一个代码统计工具。它可以对程序源码进行详细的统计,可以准确的分析出程序中代码行、注释行、空白行和导入行为多少等等。  项目快结束了,统计下项目中代码行数,可以满足下自己的虚荣心,同时也好向老板交差。  使用方法非常简单:File file = new File("E:/qinerg_github/nutz/src/");CodeStatisticsResult statisticsResult = Code.countingCode(file, "java", true, null);System.out.println("源码数:" + statisticsResult.getFileCount());System.out.println("总行数:" + statisticsResult.getTotalLines());System.out.println("代码行:" + statisticsResult.getNormalLines());System.out.println("注释行:" + statisticsResult.getCommentLines());System.out.println("导入行:" + statisticsResult.getImportLines());System.out.println("空白行:" + statisticsResult.getWhiteLines());参考来源: https://my.oschina.net/qinerg/blog/164278

Splashtop让iPad成为Windows10电脑副屏幕 拓展屏幕

所需软件:Splashtop_Wired_XDisplay_Agent(PC端)XDisplay(在苹果商城搜索下载 蓝色图标)下载URL:https://www.splashtop.com/wiredxdisplay使用:在PC端打开Splashtop Wired XDisplay Agent与在iPad上打开XDisplay运行,然后用数据线将iPad连电脑即可。点Windows10右下角按钮,选“投影”,选择合适投影方式即可。使用感受比较方便不需要流量,无缝将电脑屏幕拓展到iPad上,只是iPad屏幕还是有点小,凑合吧。投影后的iPad屏幕支持触屏操作,但不支持按键操作。若需按键操作可下载同公司下的另一款软件:Splashtop(iPad上下载),Splashtop Streamer(PC上下载)下载URL:https://www.splashtop.com/downloadstart?platform=auto安卓平板/手机下载URL:https://a.app.qq.com/o/simple.jsp?pkgname=com.splashtop.xdisplay.wired.pro&g_f=undefined

Splashtop让iPad成为Windows10电脑副屏幕 拓展屏幕

MarkDown编辑器真好用!!

MarkDown编辑器,对程序员来说贴代码炒鸡方便。推荐Typora.下列带来typora官网介绍:可读可写Typora给您既是读者又是作家的无缝体验。它删除了预览窗口,模式切换器,降价源代码的语法符号以及所有其他不必要的干扰。相反,它提供了真正的实时预览功能,可帮助您专注于内容本身。简单而强大,支持图片,标题,列表,表格,代码高亮,数学,图示,内联样式等等。并且支持更换主题与目录显示,文件树显示。 免打扰 无缝实时预览 所见即所得Typora官网下载地址:https://www.typora.io/

MarkDown编辑器真好用!!

Lamada学习小记

Lamada函数式接口概念:有且仅有一个抽象方法的接口由于只有一个抽象方法 Lamada才能顺利推导@FunctionalInterface放在该接口上强制检查接口是否只有一个抽象方法 否则保存当然符合有且仅有一个抽象方法也不用加该注解Lamada示例接口中public abstract可以省略@FunctionalInterfacepublic interface MyFunctionalInterface {    public abstract void myMethod(String s);}个人理解为调用接口时重写抽象方法有返回值示例-定义接口@FunctionalInterfacepublic interface Sumable {    int sum(int a, int b);}定义处理方法private static void showSum(int x, int y, Sumable sumCalculator) {    System.out.println(sumCalculator.sum(x, y));}在Main方法中调用showSum(10, 20, (m,n)->m + n);不写处理方法直接写匿名内部类形式比较容易理解Sumable sumable = new Sumable() {    @Override    public int sum(int a, int b) {        return a + b;    }};System.out.println(sumable.sum(20, 30));后一种改成Lamada形式Sumable sumable = (a, b) -> a + b;System.out.println(sumable.sum(20, 30));函数式编程Lambda延迟加载性能浪费实例public class Demo01Logger{    private static void log(int level, String msg)    {        if (level == 1)        {            System.out.println(msg);        }    }    public static void main(String[] args)    {        String msgA = "Hello";        String msgB = "World";        String msgC = "Java";        log(1, msgA + msgB + msgC);    }}原因调用方法时候优先拼接了字符串无论条件是否符合都拼接了解决改Lamada形式定义接口@FunctionalInterface public interface MessageBuilder { String buildMessage(); }改造方法public class Demo02LoggerLambda{    private static void log(int level, MessageBuilder builder)    {        if (level == 1)        {            System.out.println(builder.buildMessage());        }    }    public static void main(String[] args)    {        String msgA = "Hello";        String msgB = "World";        String msgC = "Java";        log(1, () ‐ > msgA + msgB + msgC );    }}类似:SLF4J会在满足日志级别时进行字符串拼接LOGGER.debug("变量{}的取值为{}。", "os", "macOS")Lamada作参数与返回值

IntelliJ IDEA debug调试时查看所有断点

快捷键ctrl+shift+f8打开断点窗口也可以在idea的调试界面点左下角的双球图标进入断点展示界面,在该界面可以取消断点或点“-”号删除断点。按钮图示如下:

IntelliJ IDEA debug调试时查看所有断点

map转指定类型实体类map

用于转换成符合实体类属性的mappublic Map<String, Object> convertMapToBeanMap(Map<String, Object> params, Class clazz) throws IntrospectionException {    Map<String, Object> finalMap = new HashMap<>();    BeanInfo beanInfo = Introspector.getBeanInfo(clazz);    PropertyDescriptor[] propertyDescriptors = beanInfo.getPropertyDescriptors();    for (int i = 0; i < propertyDescriptors.length; i++) {        PropertyDescriptor descriptor = propertyDescriptors[i];        String propertyName = descriptor.getName();        if (!propertyName.equals("class")) {            if (params.containsKey(propertyName)) {                finalMap.put(propertyName, params.get(propertyName));            }        }    }    return finalMap;}

LayUI获取下拉框选择的值

前台渲染下拉框例如:$("select[name='sex']").empty();var optionD = '<option value = "">请选择...</option>';optionD += '<option value = "1">男</option>';optionD += '<option value = "0">女</option>';$("select[name='sex']").append(optionD);layui.form.render("select");HTML内容(以下是渲染后的内容)<div class="layui-inline">  <label class="layui-form-label">性别:</label>  <div class="layui-input-inline">    <select name="sex" lay-filter="sex" class="selectop">      <option value="">        请选择...      </option>      <option value="0">        男      </option>      <option value="1">        女      </option>    </select>    <div class="layui-unselect layui-form-select layui-form-selected">      <div class="layui-select-title">        <input type="text" placeholder="请选择..." value="" readonly="readonly" class="layui-input layui-unselect" /><i class="layui-edge"></i>      </div>      <dl class="layui-anim layui-anim-upbit" style="">        <dd lay-value="" class="layui-select-tips layui-this" style="">请选择...</dd>        <dd lay-value="0" class="">男</dd>        <dd lay-value="1" class="">女</dd>      </dl>    </div>  </div></div>获取下拉框所选值sex = $("select[name='sex'] option:selected").val(),// 获取下拉框值也可以使用form监控获取值    //    获取select下拉框的值    form.on('select(sex)', function (data) {        sex= data.value;        params.sex = sex;    })封装查询的实体function getSearchParam() {    var params = {};    var matkl = $("input[name='name']").val(),        labor = $("select[name='sex'] option:selected").val();// 获取下拉框值      if (name) {        params.name = name;    }    if (sex) {        params.sex = sex;    }    return params;}好处:第一种简单,需要在下拉框点击查询的时候才获取下拉框值;第二种用form.on监控select组件,只要选择值变动即能获取下拉框值。

前端上传文件相关HTML

场景,点选择文件,能在输入框显示所上传的文件名,第一想到的是原生的表单元素,如下:<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script>    $(function() {        $("#wenjian").change(function() {            $("#text").val($("#wenjian").val());        });         $("#browser").click(function() {            $("#wenjian").click();        });     });</script><input type="text" id="text" /><input type="file" id="wenjian" class="file" style="display: none;" /><input type='button' class='btn' value='浏览...' id="browser" />原生文件输入框“选择文件”按钮后会显示“未选择任何文件”等的文字,这因浏览器而异。于是只能隐藏而使用额外按钮去调用上传文件按钮,原生上传按钮隐藏,以上为jq版本,下方为js版本。<div class="button operating-button" id="fileUpdate-button">从Excel中批量导入</div><form action="" id ="fileUpdate-form">    <input type="file" name="filename" id="fileUpdate-input" style="display: none" /></form><script type="text/javascript">    //上传文件处理    var fileUpdate_button = document.getElementById("fileUpdate-button");    var fileUpdate_input = document.getElementById("fileUpdate-input");    var fileUpdate_form = document.getElementById("fileUpdate-form");    fileUpdate_button.onclick = function () {        fileUpdate_input.click();    }    fileUpdate_input.onchange = function () {        fileUpdate_form.submit();    }</script>另一种,通过CSS控制,让文件输入框隐藏,但是作用范围变大,即隐藏在文本输入框与按钮下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定义input type="file" 的样式</title> <style type="text/css"> body { font-size: 14px; } input { vertical-align: middle; margin: 0; padding: 0 } .file-box { position: relative; width: 340px } .txt { height: 22px; border: 1px solid #cdcdcd; width: 180px; } .btn { background-color: #FFF; border: 1px solid #CDCDCD; height: 24px; width: 70px; } .file { position: absolute; top: 0; right: 80px; height: 24px; filter: alpha(opacity:0); opacity: 0; width: 260px } </style> </head> <body> <div class="file-box"> <form action="" method="post" enctype="multipart/form-data"> <input type='text' name='textfield' id='textfield' class='txt' /> <input type='button' class='btn' value='浏览...' /> <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="上传" /> </form> </div> </body>