Echarts自定义Legend按钮实现以及Demo

前段时间,一个朋友问能不能做出这样的Echarts图,大概是这样:

他有个需求,有4条线分别代表:缓存100时方案A的曲线,缓存200时方案A的曲线,缓存100时方案B的曲线,缓存200时方案B的曲线,按常规模式这个时候Echarts的Legend会有4个按钮(缓存100方案A,缓存200方案A,缓存100方案B,缓存200方案B),它们分别控制一条线,但是他不想这样,他想要这样的4个按钮:缓存100,缓存200,方案A,方案B,每个按钮可以关闭对应的两条线。相当于他想要的展示维度和Echarts不一样,他的展示效果在分类上更合理。

当时之前我也没有做过,我也不知道能不能实现,直到后面有一天突然看到Echarts3.0的API,发现Echarts是提供了Legend点击事件方法的!然后马上去翻看2.0的,结果发现在用户手册上方一点的位置也明确写了的,只是从来没有注意到罢了…(-_-|||),不仅如此,Echarts还提供了线条开关的API!

既然这样,那这个需求就有可能实现了,可以自定义4个Legend按钮,然后在自己写方法来控制曲线,于是,没过多久,就有了这篇文章,先看看DEMO。下面开始解释代码:

继续阅读

Maven构建SpringMVC环境报错“java.lang.ClassNotFoundException: org.springframework.web.servlet. DispatcherServlet”

今天朋友发了个maven项目给我看,问我为什么启动不了。说实话,一直用Jfinal都快不会用spring了… 还是决定看看。

接收了文件,是maven构建的,打开eclipse,导入maven项目,然后部署到tomcat,启动tomcat,就报错了:“java.lang.ClassNotFoundException: org.springframework.web. servlet.DispatcherServlet”,错误信息如下图:

java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet

java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet

很明显的第一反应就是没有SpringMVC的包,于是检查pom.xml,发现没有问题,spring web mvc包是正确引入了的,查看Maven Dependencies,发现也是正常的,打开jar包,也没有问题,web.xml配置也没有问题…

我去,难道jar包版本问题,于是部署了更高版本的jar包,并且还试过配置更高的JDK版本,依然报错,不能启动…

于是google,发现大部分人都是说没有导入jar包,没有部署成功,可是jar包我导入了,也配置正确了。

就在这时,突然看到有个人说tomcat是否部署成功,于是立刻查看网站部署的文件夹,发现WEB-INF下根本没有lib文件夹… 继续阅读

Eclipse导出javadoc报错“编码GBK的不可映射字符”解决办法

状态

前几天导出javadoc,报错“编码GBK的不可映射字符”,其实我知道是字符集没有设置正确,但是不知道哪里设置…

这种情况最恼火,于是百度之,找到了方法:

在导出javadoc的对话框中,一路Next,直到最后一个对话框界面,会看到上面有行文字:

VM options (prefixed with ‘-J’, e.g. -J-Xmx180m for larger heap space):

就在这句话下面的输入框中输入:

-encoding UTF-8 -charset UTF-8

这样点击Finish之后,就可以正常生成javadoc了。

Echarts长图全图打印方案以及Demo

前面使用echarts做统计图表,做出来的echarts图横向宽度挺大的,都超出页面了,然后我设置了一个横向滚动条。

然后!需求要求有打印按钮,要将图表打印出来(突然好想砍掉需求方)… 然后悲催的发现,图表滚动条所到的地方才能被打印出来,然后其他的地方就被遮住了,就像下面那个样子…

有滚动条的echarts图打印不全

有滚动条的echarts图打印不全

怎么办呢?突然想到echarts可以转换成图片的,于是想到了可以在打印前将echarts转换为图片放在页面,然后缩放到指定宽度,然后再打印,打印完成后再切换回来!于是开始试验,最后发现方案可行,就有了下面的代码。

继续阅读

https部署折腾(五):修改function.php设置wordpress文章中链接的http为https

当站点部署为https后,原来的文章中很多地方还是引用的http的链接,怎么办呢?其实可以不用管的,但是觉得很不爽,强迫症嘛,理解一下。另外,如果链接是资源文件,比如js啊,iframe的src链接啊什么的,可能还会造成浏览器网址栏前面的绿色小锁消失,并提示“您与此网站建立的是私密链接,但网络上的某些用户也许能更改此网页的外观”,差不多就是这个提示了。这个听起来是比较严重,是因为页面上有些东西并没有通过https加密,所以从服务器到浏览器的过程中可能被篡改,这时浏览器就会认为不是绝对安全的,但是who care,小博客,没用户,没流量,谁吃饱了撑着会改呢?

下面还是说说怎么修改吧…可以通过修改主题中的function.php文件达到目的,找到function.php文件,在末尾的“?>”前加上如下代码(如果没有“?>”,那么下面的代码就加在最后),然后将我的网址juwends.com替换成自己的:

//=== 替换内容中http链接为https ===//
function my_content_manipulator($content){
 if( is_ssl() ){
 $content = str_replace('https://www.juwends.com', 'https://www.juwends.com', $content);
 $content = str_replace('https://www.juwends.com', 'https://www.juwends.com', $content);
 }
 return $content;
}
add_filter('the_content', 'my_content_manipulator');

加上这段代码后,就可以实现文章中的链接的http变成https了。

注意,这里只是修改了页面的展示,并没有修改数据库中的内容。

https部署折腾(四):修改wp-config.php设置wordpress的https访问

本文中所说的站点部署https是利用阿里云的CDN部署的https,我的理解是CDN上面的站点(缓存页面)是https访问,而部署在阿里云空间上的原始网站并不是https,还是http,这个http站点也就是CDN的回源站点。上述是我的理解,但是是否正确还需要再深入研究才能窥其真理。

因此,wordpress配置https就不能简单的在后台的设置里面将主页设置为https,因为这个站点其实是http的,如果配置成https,那么当访问https的时候,会先访问CDN,而CDN会回源,也就是会去找http的站点,这时回源站点又被设置为了https,那么又会被重定向到CDN,这样就出现了访问CDN的无限重定向,导致网页无法打开,或者某些文件无法加载的问题。

所以使用CDN部署的https必须将wordpress的后台主页设置为http。

然后设置https访问通过修改wp-config.php文件实现,找到这个文件,打开后在开头的“<?”下面添加如下代码即可(“//”后面的注释可以不用加,习惯加上注释,才知道是做什么的)

//=== 将用户界面与主页相关的http链接替换为https,后台不用更改主页地址 ===//
define('WP_HOME', 'https://'.$_SERVER['HTTP_HOST']);
define('WP_SITEURL', 'https://'.$_SERVER['HTTP_HOST']);
//=== 设置https为开启 ===//
$_SERVER['HTTPS'] = 'ON';

保存后就可以通过https访问了,到这里,就设置完毕了。那么,再总结下:

1,wordpress主页在后台依然设置为http
2,在wp-config.php中添加代码实现https访问

MySQL联表删除语法

之前写到联表更新,那么有没有联表删除呢?

答案也是有的,下面将是代码记录:

假设有2张表:
1,user表,字段为:id,user_name
2,user_role表,字段为:id,role_name,user_id
关联关系是 user.id = user_role.user_id

现要删除某一条user表的数据以及该user对应的user_role表中的数据,那么用下面的sql就可以实现这个目的了:

delete u, u_r from user u, user_role u_r 
where u.id = ? and u.id = u.user_id

上述sql中,u是user的别名,u_r是user_role的别名,from语句前面要附上别名,这个别名是用于指定删除哪张表数据的,如果只有u或者u_r,那么仅删除对应的那张表上的数据。

MySQL联表更新语法

之前写代码操作数据库,如果遇到需要同时更新两张表时,我会采用在同一个事务中使用2句sql语句分别进行更新。其实,这种需要发送2句sql语句的方法效率相对来说是比较低的,有没有只用1句sql语句就可以完成这个操作的呢?

答案是有的,下面将是代码记录:

假设有2张表:
1,user表,字段为:id,user_name
2,user_role表,字段为:id,role_name,user_id
关联关系是 user.id = user_role.user_id

现要更改某一条user表的数据的的user_name字段以及该user对应的user_role表中的数据的role_name字段,那么用下面的sql就可以实现这个目的了:

update user, user_role set 
	user.user_name = ?, user_role.role_name = ?  
where user.id = ? and user.id = user_role.user_id

Win10配置IIS网站后图标旁出现红色小叉无法访问网站的解决方法

Window上,在本地搭建html访问平台怎么最快,当然是Windows自带的IIS最快,控制面板->管理工具->IIS管理器,创建一个网站,然后简单的配置一下,再把html文件拷进去,浏览器就可以直接访问了,杠杠的。

可是就在不久前,我就这么玩儿,但是创建的网站的图标旁边有个小红叉,并且启动网站后也无法访问,于是网上查了下,网上千奇百怪的答案都有,有的人并不懂,但也要出来凑凑热闹,天朝的群众就是多,什么都要去凑凑,对需要解决问题的人来说完全就是干扰嘛,所以说并不是所有的答案都是正确的,只有一个个的试,最后发现原来是IIS主键配置不正确。下面将正确的配置方法记录下来:

1,控制面板->程序和功能->启用或关闭windows组件

2,按照下图找到对应的选项并勾上,然后点击确定

继续阅读

Filter和HttpServletRequest代理类实现Request参数值更改

前几日写代码,发现没有过滤搜索框输入的特殊字符,比如输入“_”会导致所有数据都被搜索出来(数据库为MySQL),这显然是不正确的,所以决定将搜索关键词中的“_”替换成”\_”,但是我突然想到个问题,这个搜索值获取是在每个Controller中获取的,我必须要找到所有的Controller中获取该参数的代码位置,然后进行修改,然而我并不想这么做…

我想到将request中该参数的值在被Controller获取前更改,然后就不用修改之前的代码就可以实现,但是后面我发现ServletRequest并没有提供修改参数值的方法… 后面经过思考,想到可以制造一个ServletRequest代理类,在代理类中将getParameter重写,即返回需要的值,再将代理类的实例传给Controller使用,这个方法最后验证是可行的。

下面将记录代码,这里使用到Filter,作为请求到达Controller前的拦截器,对request进行代理:

继续阅读

https部署折腾(三):StartSSL申请免费SSL证书的方法

2017.5.4 juwends.com通告:2016年10月21日之后在StartSSL上申请的免费证书已经被谷歌浏览器认为无效了,所以没有必要再在StartSSL上申请免费证书了,下面的文字看了也没有用了,请看这里转投阿里云下,文中的教程连接传授可以免费申请到有效的赛门铁克1年有效期的DV证书的方法!!!本着不坑大家的宗旨特此通告…

之前有个网站可以申请免费的ssl证书,后来不知道为啥不提供免费证书的颁发了。不过后来又找到一个网站可以颁发免费证书,这个网站的域名是startssl.com,不用想都知道,这个网站是全英文的,所以这里做一个介绍,如何在startssl上申请ssl免费证书。

要申请ssl证书需要3样东西,分别是域名、域名的注册邮箱,以及证书申请文件(csr文件,由私钥生成)。不知道怎么生成csr文件看《OpenSSL通过PEM格式私钥生成用于申请SSL证书的CSR文件》,里面有一些公钥私钥的介绍,以及csr生成的方法。

如果上述3样东西都准备齐全,那么让我们先打开startssl吧。然后按下面步骤操作:

操作流程大概是:注册StartSSL用户 -> 验证域名所有权 -> 提交申请证书的资料 -> 下载证书,下面就开始吧:

1,点击首页那个巨幅图片右边的大于符号图标,出现下面那个样子的图,然后点击右边那个椭圆条,“Start Now for Free SSL Certificate”。

startssl申请免费ssl证书的方法

startssl注册入口

继续阅读

https部署折腾(二):OpenSSL通过PEM格式私钥生成用于申请SSL证书的CSR文件

CSR,全称Certificate Signing Request,译为证书签发请求,就是用于申请证书的,放在文本文件中的,一串字符,获取方式通过私钥生成。

既然要使用SSL加密,那么需要了解非对称加密,这个其实比较理论,就大概介绍一下。

有种算法叫做RSA非对称算法,通过这个算法可以获得两个密钥,一个叫公钥,用于加密数据,一个叫私钥,用于解密数据,这两个密钥是不同的,所以叫做非对称加密,好处是只用把公钥给加密方,一旦加密后只有私钥才能打开,而私钥是不会公开的,所以相对安全,即比对称加密安全(加解密的密钥相同)。而SSL就是利用了非对称加密(当然,也使用到了对称加密,这里只说非对称加密),如果要使用SSL,首先需要一对密钥,即公钥和私钥。那么密钥和CSR以及SSL证书有什么关系呢?其实简单来说SSL证书就是公钥,而CSR用于向证书颁发商申请SSL证书,而CSR是通过私钥生成的,大概就是:私钥 -> CSR -> SSL证书(公钥+站点信息等其他信息),这样一说整个线路就连贯起来了吧。

那么为什么要使用SSL证书呢,既然我们可以自行生成私钥和公钥(证书),为什么不直接使用呢?就是因为证书没有经过认证,是可以随意篡改的,如果在数据传输环节,有人更改了证书,即更改了公钥,那么数据落入他人之手后,就可以利用生成伪造证书的私钥进行解密,这样根本就是不安全的,而如果证书认证过,就无法被篡改,因为一旦篡改,浏览器就会提示证书不安全了。所以,要使用认证的证书。

(好吧,理论还是不在行,上面的话看看就好,具体的请百度)

下面来说说怎么生成私钥对,以及如何生成CSR文件:

继续阅读

WordPress文章转载版权信息添加(第二篇):添加编辑面板

昨天写了一篇文章《WordPress添加文章转载版权信息(第一篇):自定义栏目(字段)来实现》,文中说到使用自定义字段来实现转载版权信息的添加,但是这个方法依然显得有些麻烦,所以今天这篇文章就准备说说如何改进(如果没有看上一篇文章,建议看一遍,因为下文用到了上文的参数和值)。

自定义的转载版权信息面板

我们可以使用自定义面板来完成这个工作,先来看看我自定义的面板样子(右图),这个面板就位于文章编辑栏的右侧,“版权类型”默认就是“原创可以被转载”,即reprint为pr,下面两栏分别对应info和src。

添加面板相对来说要简单一些了,仅仅是更改代码而已,所有代码都在主题的function.php中添加,添加到文档末尾的?>上面(如果没有?>,那就添加到末尾即可),由于代码比较长,我拆成了几块,挨个贴进文件即可:

继续阅读

WordPress添加文章转载版权信息(第一篇):自定义栏目(字段)来实现

开篇还是有必要说说这篇文章要讲什么的好,这篇文章主要说说怎么给每篇文章底部添加转载版权信息,就比如有的博客底部会写像“本文转载请注明出处”类似的话(Juwend’s也有写哦)。那么方法可以有很多:

一般人首先想到的肯定是手动添加,那如果选择手动为每一篇文章添加这个信息,不仅麻烦,还不方便管理,比如要改变这句话的内容,不说几百篇,几十篇文章也会改疯掉的,如果会sql还好一点,不会就惨了,所以手动为每一篇文章添加的确不是一个好办法。

第二种呢,更改主题模版,让这句话固化到代码中,比如固化到single.php中,在调用了the_content()方法后添加这句话,这样每篇文章就会自动添加这句话了,但是又有个问题了,如果这篇文章是转载的呢?这就麻烦了,依然会显示这句话,不合适,所以这个办法也不是一个好办法(网上大多教程就是这样做的)。

按照套路,肯定是有第三种方法的,没错,那就是在编辑文章时,设置一个值,当该值为不同时,就可以自动显示不同的信息了,而这些信息依然固化在代码中,每次显示都从这个地方取,这样修改起来也可以达到修改一初改变所有的目的。下面就来说说怎么做:

如何才能添加一个值呢,这时想到了wordpress的自定义栏目,习惯叫自定义字段,这个字段的作用就是可以添加一些附加信息到文章里面,但是和文章的内容是独立开来的。现在来添加一个自定义字段:

继续阅读

https部署折腾(提纲):利用阿里云CDN将阿里云虚拟主机上的WordPress博客部署为https

这篇文章大体上是个提纲性的文章,将罗列我把Juwend’s部署为https的步骤,每一步都有直达教程的链接(如果没有就是还没有写…呵呵),下面我们就开始罗列:

  1. 申请startssl免费证书,包括:
    1. 安装openssl,制作私钥key和证书申请文件csr(教程:https部署折腾(二):OpenSSL通过PEM格式私钥生成用于申请SSL证书的CSR文件》)
    2. 注册startssl和申请证书(教程:https部署折腾(三):StartSSL申请免费SSL证书的方法》)
  2. 购买阿里云的CDN,配置阿里云的CDN(以下简称CDN)的https加速(教程待更新)
  3. 修改wordpress的文件,主要是下面两个文件:
  4. 修改.htaccess文件。部署CDN后,需要设置 带www的域名 的 CNAME 到阿里云CDN 上,其实就是将用户对网站的访问重定向到CDN的主机上,这里我只能设置 带www的域名,所以 没有www的域名 是不经过CDN的,所以要把 没有www的域名 的访问重定向到 有www的地址。
    修改.htaccess文件教程:https部署折腾(一):.htaccess配置重定向参数RewriteCond和RewriteRule解释

继续阅读

站点部署CDN

日志

部署阿里云CDN!

前几日使用阿里云的CDN部署了https,其实https只是阿里云CDN的一个附属功能,CDN最重要的功能是为了缓存站点页面,达到访问时极速加载页面的效果,当然,我不能错过这个折腾机会。

结果就是,被虐了一次又一次,最终还是成功的将站点部署到了CDN上,其实部署CDN操作很简单,只用在CDN上设置缓存的文件后缀或目录即可。

但是CDN有个问题,当wordpress使用伪静态并将网址结尾设置为“.html”时,如果CDN设置后缀为html的文件要缓存,那么部署成功后,在这些页面写评论后就会出现不显示刚写的评论的问题,这个是CDN的通病… 原理具体可以了解下CDN,概括起来就是CDN去获取源站点的数据,然后缓存在自己服务器,这样相当于一个快照,后面的更新自然就不会显示了。

此时,我采用了一个方法来解决,就是动态加载评论,专业点就叫AJAX加载评论,因为AJAX访问的是php页面,是没有设置缓存的,这样就可以解决这个问题了。但是问题又出现了,原生的评论是,当游客在wordpress评论后,应该会出现这条评论,并且显示“正在等待审核”的字样,而现行网上能找到的教程大多无法还原这个功能,后面,我也是经过几番琢磨,终于搞定了,当然也被虐的不要不要的… 其实最大的问题主要还是不懂PHP,SO卖个关子,先提示一个,待审核的评论是根据cookie中存储的用户邮箱来筛选数据并加载的,哈哈,就酱,这个教程就下回分解啦!