Spring Boot + Echarts 实现用户访问地图可视化（附源码）

最新推荐文章于 2024-09-18 18:46:18 发布

原创最新推荐文章于 2024-09-18 18:46:18 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#spring #java

springboot 同时被 2 个专栏收录

8 篇文章

订阅专栏

spring

8 篇文章

订阅专栏

本文介绍如何利用Spring Boot结合Echarts，通过获取并解析用户IP，实现用户访问地点的地图可视化。通过自定义拦截器记录访问城市并计数，实际生产环境中建议使用Redis存储计数，并通过REST接口定时更新前端数据。

在这里插入图片描述
首先需要获取用户请求的ip地址，我们对该方法进行简单封装：

public class IPUtil {
    public static String getIpAddress(HttpServletRequest request) {
        String ip = request.getHeader("x-forwarded-for");
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("Proxy-Client-IP");
        }
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("WL-Proxy-Client-IP");
        }
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("HTTP_CLIENT_IP");
        }
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("HTTP_X_FORWARDED_FOR");
        }
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getRemoteAddr();
        }
        return ip;
    }
}

封装纯真ip的解析工具，根据ip获取请求地址所在城市，github有大量实现版本，我们这里不做赘述，具体代码见文末源码
//篇幅较长，截取的主要方法，详细在源码地址查看

public IPZone findIP(final String ip) {
        final long ipNum = toNumericIP(ip);
        final QIndex idx = searchIndex(ipNum);
        if (idx == null) {
            return new IPZone(ip);
        }
        return readIP(ip, idx);
}

自定义拦截器，对用户的登录请求进行拦截，在此处判断请求ip所在城市，并进行计数。我们这里只是简单逻辑的说明，在生产上时应该用redis来存放计数，并且专门提供一个rest接口来推送当前各城市访问数量情况，再由前端配合，隔一段时间发起一次请求，例如隔一小时请求一次该rest接口，从而进行前端数据的展示。
/**

登录拦截器
*/

@Slf4j
public class MyLoginInterceptor implements HandlerInterceptor {
    private static final String LOGIN_PATH = "/user/login";
    private static Map<String, AtomicInteger> visitCount;
    private static final QQWry qqWry;
    static {
        visitCount = new HashMap<>(31);
        qqWry = new QQWry();
    }

//展示访问数量不是精确指标，如果要做到完全正确需要使用锁，防止计数存在并发问题

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        log.info("【MyLoginInterceptor】调用了:{}", request.getRequestURI());
        if (request.getRequestURI().equals(LOGIN_PATH)) {
            String ipAddress = IPUtil.getIpAddress(request);
            String province = qqWry.findIP(ipAddress).getMainInfo();
            if (visitCount.containsKey(province)) {
                visitCount.put(province,new AtomicInteger(visitCount.get(province).incrementAndGet()));
            } else {
                visitCount.put(province,new AtomicInteger());
            }
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response,
                           Object handler, ModelAndView modelAndView) throws Exception {}

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
                                Object handler, Exception ex){}
}

注册自定义的拦截器

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new MyLoginInterceptor());
    }
}

登录controller模拟逻辑，注意：如果想看效果图需要自己写线程用不同的虚拟ip进行访问url，从而达到在不同城市访问接口的效果。

@RestController("user")
public class LoginController {

    @GetMapping("login")
    public String login() {
        //登录逻辑
        return "success";
    }
}