唐诗分析之可视化

技术选型

1. 前端渲染工具–echarts

需要对数据库中的数据进行分析，那么我们就不可避免的面临分析工具的选择。我们要对数据库中的诗人的作诗量进行统计。那么图表展示是最好的，x轴（诗人）和y轴（作诗量）。
这里我们选择第三方库echarts，最主要的是它是一个开源免费的javascript可视化库，并且可以很方便的在其网站上可以进行实时调试（可以边改代码实时查看更新的效果，得到自己想要的效果）。
只要对js有了解相信很快就上手。我们就选择了echarts进行绘制！

官方网站：echarts

2. 数据库访问–（MysqlConnectionPoolDataSource）

使用单例模式中的懒汉保证程序只创建一个连接池。节省系统资源。

/**
     * 利用单例模式中的懒汉模式保证创建的线程池是线程安全的
     */
    private static MysqlConnectionPoolDataSource getDataSource() {
        if(dataSource == null){
            synchronized (DBUtil.class){
                if(dataSource == null){
                    dataSource = new MysqlConnectionPoolDataSource();
                    dataSource.setServerName(host);
                    dataSource.setDatabaseName(databaseName);
                    dataSource.setUser(username);
                    dataSource.setPassword(password);
                    dataSource.setPort(port);
                    dataSource.setUseSSL(false);
                    dataSource.setCharacterEncoding(encoding);
                }
            }
        }
        return dataSource;
    }

3. 前后端交互–JQuery

利用JQuery进行异步提交更新数据。

4. 缓存提高访问效率–redis

我们考虑到古诗是爬取下来的数据。并且从古到今也就那么多，数据也是最稳定的。这不是最理想的不可变数据吗？所以干脆直接利用缓存来提高访问效率。当然，也不能全部存到redis数据库中，虽然数据不变，但是有的操作是变化的。
比如，这里我实现的一个功能:输入一个区间，查询出作诗量在这个区间的诗人和其作诗量！
数据库中的作诗量最高的是杜甫，他做了39首诗，也就是区间范围可以是[0,39]
那么将这个区间排列组合一下，最多可能有780种。如果都将这个存入也就不太适合了。
所以这种情况，我们就不进行缓存处理。
进行redis处理的模块有，词云展示。
学习懒加载的思想，当用户不查询或者不点击对应诗人的数据时，我们不存储。当用户第一次点击后，先去数据库中查询，之后存在redis中，当下一次访问时就可以高效的访问了！

功能实现

• 输入区间查询作诗量在区间内的诗人柱状图显示
  
• 查询所有诗人的用词或指定诗人的用词，以词云形式展示
  
  

测试

功能测试
①能够正确查询出诗人的作诗量并用柱状图展示
②能够正确查询出诗人的用词并以词云展示
③点击下拉列表中的诗人姓名也可以起到查询其词云的效果
④输入的区间正确性校验
⑤输入的诗人姓名必须是汉字检验

对输入测试用例的编写：
1、诗人姓名
诗人姓名由汉字和连接符号•组成，不能出现数字，英文字母，下划线以及其他特殊符号（空格等）

2、输入区间
输入[0,99]之间的数字，左闭，右闭

设计测试用例：

1. 诗人姓名
   
2. 输入区间
   

兼容性测试
界面：
布局：
在IE，Firefox，Google浏览器和移动端进行界面进行了兼容性测试。发现浏览器显示正常，移动端较小分辨率下不太美观。经过调整后，有了改观！
显示：echarts.worldcloud4在IE浏览器下随机生成的彩色没有显示出来！经过修改echarts版本解决。

功能：
①柱状图显示在所以客户端都完美展示
②词云展示在Google浏览器依旧完美兼容，在其他客户端都是显示不太及时（有时候可能会出现不显示的情况）。

原因：这是因为根据图片来绘制词云形状要运行的js脚本较多。导致延迟，后来经过调整，将图片改为Base64码，效果仍然不是很好！（在寻找解决办法）

性能测试
针对数据爬取模块的测试：
数据爬取有两个版本单线程和多线程！
通过计数器计时，发现单线程比多线程慢了25秒！
这里多线程的优势就出来了！

遇到的Bug

说到Bug就是心疼，不过遇到的越多以后就不怕了。

• 首当其冲，字符集问题

从前端页面提交上去的数据，如果是post默认编码为IOS-8859-1，所以导致数据查不到，反映出来就是没反应！
解决：后台利用String类的构造方法可以转换编码方式。

String s = new String(req.getParameter("name").getBytes("ISO-8859-1"),"UTF-8");

• 提交按钮忘记改为button,默认submit导致全局刷新，不是异步提交

• js的数据比较（若不处理，12 < 4 js比较的是 1 和 4）

   对代码进行排查发现了js比较数字的会出现小意外。
   js里比较数字的时候可能会得到我们不想要的数据。
   比如，12 和 4比较 ，js 是拿1 和 4比较的，返回的是true。
   这也就导致了区间输入错误还能提交成功的Bug。
   解决：对比较的数据调用eval()方法
   eval(12) > eval(4)
  

• 下拉列表点击诗人名字无反应

 拼接字符串失策。

优化

优化的有以下几点：

1. 数据访问速度（数据库连接池+redis缓存）
2. 词云形状按图片进行打印（可以打印出伞形，树形等等）
3. 由于图片的加载过慢，将其转换为Base64码提高效率。
   2和3点的实现放在了这个版本：
   美观版，这里添加了伞形和树形
   但有不如意的地方就是IE中有时会显示不出来。（仍在改进。。。）

兼容版本：唐诗小分析

唐诗分析爬取数据