博客 城市访问量统计并且通过Echarts+百度地图展示

本篇讲解一下 如何在Vue 中使用 Echarts + 百度地图 统计 博客访问量 并且通过QQWry 解析 ip 地址 利用Echarts 展示出来

效果图如下：

1.纯真Ip地址库 QQWry

这是我在github上找的 java版本的 解析 qqwry的

1.1 maven 引入 qqwry

        ​       com.github.jarod            qqwry-java  0.7.0        

引入后可以看到 该jar 包其实内部已经引入了 qqwry.dat 库了

使用教程：

QQWry qqwry = new QQWry(); // load qqwry.dat from classpath QQWry qqwry = new QQWry(Paths.get("path/to/qqwry.dat")); // load qqwry.dat from java.nio.file.Path​byte[] data = Files.readAllBytes(Paths.get("path/to/qqwry.dat"));QQWry qqwry = new QQWry(data); // create QQWry with provided data​String myIP = "127.0.0.1";IPZone ipzone = qqwry.findIP(myIP);System.out.printf("%s, %s", ipzone.getMainInfo(), ipzone.getSubInfo()); // 江苏省无锡市, 电信

1.2 QQWryUtils

用于提供 一个静态的 QQWry 加载 qqwry.dat ，并且提供根据ip 获取 IpZone

public class QQWryUtils {    private static QQWry qqWry;    static {        try {            qqWry = new QQWry();        } catch (IOException e) {            e.printStackTrace();        }    }    public static void main(String[] args) throws IOException {        QQWry qqWry = new QQWry();        IPZone ipZone = qqWry.findIP("58.214.17.66");        System.out.printf("%s, %s", ipZone.getMainInfo(), ipZone.getSubInfo());    }    public static IPZone getIpZoneByIp(String ip) {        return qqWry.findIP(ip);    }}

2.提供拦截器解析Ip并放入队列

给SpringMVC 提供一个拦截器，在拦截器中 用于获取当前的请求ip 并且通过 QQWryUtils 解析该ip ，封装成IpAccessInfo 对象 存入 linkedBlockingQueue 队列中去，这里只是简单处理下

@Slf4jpublic class AccessRecordInterceptor extends HandlerInterceptorAdapter {    /**     * 目前是 解析 ip 并且生成 IpAccessInfo 放入 linkedBlockingQueue 队列中去     *     * @param request     * @param response     * @param handler     * @return     * @throws Exception     */    @Override    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {        String ip = IpUtil.getIpAddress(request);        log.info("【请求者 ip : {} 】", ip);        IPZone ipZone = QQWryUtils.getIpZoneByIp(ip);        log.info("【解析到 城市: {}】", ipZone.getMainInfo());        IpAccessInfo ipAccessInfo = new IpAccessInfo();        ipAccessInfo.setCity(ipZone.getMainInfo());        ipAccessInfo.setIp(ip);        ipAccessInfo.setOperators(ipZone.getSubInfo());        try {            IpQueue.linkedBlockingQueue.add(ipAccessInfo);        } catch (IllegalStateException e) {            log.warn("队列已满 ");        }        return true;    }}

IpAccessInfo 我这里入库ip 信息

@Data@Entity@EntityListeners(AuditingEntityListener.class)public class IpAccessInfo {    @Id    @GeneratedValue(strategy = GenerationType.IDENTITY)    private Long id;    private String ip;    private String city;    /**     * 运营商     */    private String operators;}

3.提供线程消费队列，并且根据城市记录访问量

这里提供 线程消费 队列 并且使用redis的自增 记录每个城市的访问量，并且使用SpringBoot的 CommandLineRunner 接口，在项目启动的时候 加载初始数据

/** * @author johnny * @create 2020-08-15 下午1:56 **/@Component@Order(value = 1)@Slf4jpublic class IpQueue implements CommandLineRunner {    public static final LinkedBlockingQueue linkedBlockingQueue = new LinkedBlockingQueue(10000);    @Autowired    private ThreadPoolTaskExecutor threadPoolTaskExecutor;    @Autowired    private IpAccessInfoRepository ipAccessInfoRepository;    @Autowired    private IpAccessCountRepository ipAccessCountRepository;    @Autowired    private StringRedisTemplate redisTemplate;    @Override    public void run(String... args) throws Exception {        ipAccessCountRepository.findAll().forEach(ipAccessCount -> {            if (!redisTemplate.hasKey(ipAccessCount.getCity())) {                redisTemplate.opsForValue().set(ipAccessCount.getCity(), String.valueOf(ipAccessCount.getCount()));            } else {                log.info("【存在： {} 】", ipAccessCount.getCity());            }        });        log.info("【服务启动  --------------  监听 队列 IpQueue 】");        IpAccessThread ipAccessThread = new IpAccessThread(linkedBlockingQueue, ipAccessInfoRepository, redisTemplate);        threadPoolTaskExecutor.submit(ipAccessThread);    }    static class IpAccessThread implements Runnable {        private LinkedBlockingQueue linkedBlockingQueue;        private IpAccessInfoRepository ipAccessInfoRepository;        private RedisTemplate redisTemplate;        public IpAccessThread(LinkedBlockingQueue linkedBlockingQueue, IpAccessInfoRepository ipAccessInfoRepository, RedisTemplate redisTemplate) {            this.linkedBlockingQueue = linkedBlockingQueue;            this.ipAccessInfoRepository = ipAccessInfoRepository;            this.redisTemplate = redisTemplate;        }        @Override        public void run() {            while (true) {                try {                    System.out.println("开始获取 : ");                    IpAccessInfo accessInfo = linkedBlockingQueue.take();                    System.out.println("监听到 : " + accessInfo);                    //江苏省无锡市                    if (accessInfo.getCity().contains("省") && accessInfo.getCity().contains("市")) {                        String city = accessInfo.getCity();                        city = city.substring(city.indexOf("省") + 1, city.indexOf("市"));                        if (redisTemplate.hasKey(city)) {                            redisTemplate.opsForValue().increment(city);                        }                    } else {                        log.error("【异常 地理位置 {} 】", accessInfo.getCity());                    }                    ipAccessInfoRepository.save(accessInfo);                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        }    }}

4. Echarts + 百度地图

由于本博客前端是用Vue 编写的，所以下面的引入就是在Vue下引入的方式

4.1 在public/index.html中添加以下代码

ak密钥： 就是百度地图AK密钥，需要自己去百度地图申请，或者网上找可用的ak

53oVIOgmSIejwV7EfphPgTynOZbIiVYu 网上找的可用的密钥

4.2 在vue.config.js中添加配置

主要是 externals 部分

  configureWebpack: {    // provide the app's title in webpack's name field, so that    // it can be accessed in index.html to inject the correct title.    name: name,    resolve: {      alias: {        '@': resolve('src')      }    },    externals: {        'BMap': 'BMap',        'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'    }  },

4.3 最后在vue main.js 文件中引入

import BMap from 'BMap require('echarts/extension/bmap/bmap')

4.4 编写展示Echarts+百度地图的组件

可以参考echarts 网站https://echarts.apache.org/zh/index.html

需要注意 我这里是从后台拿的数据 ，是通过上面拦截器解析ip 后 记录每个城市对应的访问量存入 redis中的。

注意如果需要扩展其他城市，可以找到城市的经纬度，然后扩展 geoCoordMap 就行了。。

总结

本篇主要记录一下 关于如何统计网站访问量，并且利用Echarts + 百度地图 友好的展示出来

1.提供拦截器 拦截Ip 请求，获取到 对应的 城市 我这里使用 纯真qqwry，网上也有其他方法。。

2.解析后 可以根据 key = 城市 存入redis中，利用redis 的 自增操作来 统计城市的 访问量，或者也可以通过Map 等去统计，然后刷入到存储中 。。 方式很多

3.利用echarts+百度地图案例，暂时统计的数据，可以参考echarts官网

欢迎访问 我的博客网站 https://www.askajohnny.com