当前位置： 正文

《花100块做个摸鱼小网站! 》第七篇—谁访问了我们的网站？

2024-10-10 IT技术 28

⭐️基础链接导航⭐️

服务器 → ☁️ 阿里云活动地址

看样例 → 🐟 摸鱼小网站地址

学代码 → 💻 源码库地址

一、前言

大家好呀，我是summo，最近发生了些事情(被裁员了，在找工作中)导致断更了，非常抱歉。刚被裁的时候还是有些难受，而且我还有房贷要还，有些压力，不过休息了一段时间，心态也平复了一些，打算一边找工作一边写文，如果有和我一样经历的同学，大家共勉！

《花100块做个摸鱼小网站! 》这个系列的前六篇已经大概把整体的流程写完了，从这篇起我会补充一些细节和组件，让我们的小网站更加丰富一些。这一篇呢我会介绍如何将用户的访问记录留下来，看着自己做的网站被别人访问是一件很有意思和很有成就感的事情。

对应的组件也就是我用红框标出来的那个，如下图：

解释下PV和UV的意思，如下：

  • PV：页面访问量，即PageView，用户每次对网站的访问均被记录，用户对同一页面的多次访问，访问量累计。
  • UV：独立访问用户数：即UniqueVisitor，访问网站的一台电脑客户端为一个访客。

二、用户身份标识

用于表明一个用户身份最好的做法是做登录注册，但是一旦加了这样的逻辑，就会有很多麻烦的问题要处理，比如如何做人机验证啦、接口防刷啦，等等，这些问题不处理的话网站很容易被攻击。像我们这样的小网站，我觉得这个功能没必要，我们只需要知道有多少人访问过我们的网站就可以了。

对于这样的需求，最简单的做法是根据用户的访问IP作为标识，然后根据IP解析一下地域信息，这样就已经很不错了。而目前最常用的IP解析工具就是：ip2region，如何使用这个组件我之前写过一篇文章进行介绍了，文章链接：SpringBoot整合ip2region实现使用ip监控用户访问城市。

核心代码是这段：

package com.example.springbootip.util;


import org.apache.commons.io.FileUtils;
import org.lionsoul.ip2region.xdb.Searcher;

import java.io.File;
import java.text.MessageFormat;
import java.util.Objects;

public class AddressUtil {

    
    private static final String TEMP_FILE_DIR = "/home/admin/app/";

    
    public static String getCityInfo(String ip) {
        try {
            
            String dbPath = Objects.requireNonNull(AddressUtil.class.getResource("/ip2region/ip2region.xdb")).getPath();
            File file = new File(dbPath);
            
            if (!file.exists()) {
                dbPath =    TEMP_FILE_DIR + "ip.db";
                System.out.println(MessageFormat.format("当前目录为:[{0}]", dbPath));
                file = new File(dbPath);
                FileUtils.copyInputStreamToFile(Objects.requireNonNull(AddressUtil.class.getClassLoader().getResourceAsStream("classpath:ip2region/ip2region.xdb")), file);
            }
            
            Searcher searcher = Searcher.newWithFileOnly(dbPath);
            
            return searcher.searchByStr(ip);
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return "";
    }

    public static void main(String[] args) {
        System.out.println(getCityInfo("1.2.3.4"));
    }
}

三、功能实现

为了解耦逻辑，我使用了一个注解：@VisitLog，只要将该注解放在IndexController的index方法上即可。同时为了统计用户的访问数据，我们需要设计一张访问记录表将数据存下来，并设计一个小组件用来展示这些数据，具体流程如下文。

1. 后端部分

（1）访问记录表设计

建表语句


CREATE TABLE `t_sbmy_visit_log` (
  `id` bigint(20) unsigned zerofill NOT NULL AUTO_INCREMENT COMMENT '物理主键',
  `device_type` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '设备类型，手机还是电脑',
  `ip` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '访问',
  `address` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT 'IP地址',
  `time` int DEFAULT NULL COMMENT '耗时',
  `method` varchar(2048) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '调用方法',
  `params` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci COMMENT '参数',
  `gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
  `gmt_modified` datetime DEFAULT NULL COMMENT '更新时间',
  `creator_id` bigint DEFAULT NULL COMMENT '创建人',
  `modifier_id` bigint DEFAULT NULL COMMENT '更新人',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=oDEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
DO、Mapper、Repository等文件

还记得我在第三篇介绍的那个DO生成插件吗，在config.properties改下表名和DO名，双击mybatis-generator:generate就可以生成对应的DO、Mapper、xml了。

（2）VisitLog注解

VisitLog.java
package com.summo.sbmy.aspect;


public @interface VisitLog {
}
VisitLogAspect.java
package com.summo.sbmy.aspect.visit;

import java.io.Serializable;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.summo.sbmy.common.util.AddressUtil;
import com.summo.sbmy.common.util.HttpContextUtil;
import com.summo.sbmy.common.util.IpUtil;
import com.summo.sbmy.dao.entity.SbmyVisitLogDO;
import com.summo.sbmy.dao.repository.SbmyVisitLogRepository;
import lombok.extern.slf4j.Slf4j;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Pointcut;
import org.aspectj.lang.reflect.MethodSignature;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.LocalVariableTableParameterNameDiscoverer;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import static com.summo.sbmy.common.util.DeviceUtil.isFromMobile;


@Slf4j
@Aspect
@Component
public class VisitLogAspect {

    @Autowired
    private SbmyVisitLogRepository sbmyVisitLogRepository;

    @Pointcut("@annotation(com.summo.sbmy.aspect.visit.Log)")
    public void pointcut() {
        
    }

    @Around("pointcut()")
    public Object around(ProceedingJoinPoint joinPoint) throws Throwable {
        
        HttpServletRequest request = HttpContextUtil.getHttpServletRequest();
        
        MethodSignature signature = (MethodSignature)joinPoint.getSignature();
        Method method = signature.getMethod();
        String className = joinPoint.getTarget().getClass().getName();
        
        String methodName = signature.getName();
        String ip = IpUtil.getIpAddr(request);
        String address = AddressUtil.getAddress(ip);
        SbmyVisitLogDO sbmyVisitLogDO = SbmyVisitLogDO.builder().deviceType(isFromMobile(request) ? "手机" : "电脑").method(
            className + "." + methodName + "()").ip(ip).address(AddressUtil.getAddress(address)).build();
        
        Object[] args = joinPoint.getArgs();
        
        LocalVariableTableParameterNameDiscoverer u = new LocalVariableTableParameterNameDiscoverer();
        String[] paramNames = u.getParameterNames(method);
        if (args != null && paramNames != null) {
            
            Map paramMap = new LinkedHashMap<>();
            for (int i = 0; i < paramNames.length; i++) {
                if (args[i] instanceof HttpServletRequest || args[i] instanceof HttpServletResponse) {
                    continue;
                }
                paramMap.put(paramNames[i], args[i]);
            }
            
            String paramsJson = JSON.toJSONString(paramMap);
            sbmyVisitLogDO.setParams(paramsJson);
        }
        long beginTime = System.currentTimeMillis();
        Object proceed = joinPoint.proceed();
        long end = System.currentTimeMillis();
        sbmyVisitLogDO.setTime((int)(end - beginTime));
        sbmyVisitLogRepository.save(sbmyVisitLogDO);
        return proceed;
    }

    
    private StringBuilder handleParams(StringBuilder params, Object[] args, List paramNames)
        throws JsonProcessingException {
        for (int i = 0; i < args.length; i++) {
            if (args[i] instanceof Map) {
                Set set = ((Map)args[i]).keySet();
                List list = new ArrayList<>();
                List paramList = new ArrayList<>();
                for (Object key : set) {
                    list.add(((Map)args[i]).get(key));
                    paramList.add(key);
                }
                return handleParams(params, list.toArray(), paramList);
            } else {
                if (args[i] instanceof Serializable) {
                    Class> aClass = args[i].getClass();
                    try {
                        aClass.getDeclaredMethod("toString", new Class[] {null});
                        
                        
                        params.append(" ").append(paramNames.get(i)).append(": ").append(
                            JSONObject.toJSONString(args[i]));
                    } catch (NoSuchMethodException e) {
                        params.append(" ").append(paramNames.get(i)).append(": ").append(
                            JSONObject.toJSONString(args[i].toString()));
                    }
                } else if (args[i] instanceof MultipartFile) {
                    MultipartFile file = (MultipartFile)args[i];
                    params.append(" ").append(paramNames.get(i)).append(": ").append(file.getName());
                } else {
                    params.append(" ").append(paramNames.get(i)).append(": ").append(args[i]);
                }
            }
        }
        return params;
    }
}

这里使用到了一些工具类，代码我已经上传到仓库了，大家直接down下来就行。

（3）注解使用

在IndexController.java中加入该注解即可

package com.summo.sbmy.web.controller;

import com.summo.sbmy.aspect.visit.VisitLog;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {

    @GetMapping("/")
    @VisitLog
    public String index(){
        return "index";
    }
}

2. 前端部分

（1）新建VisitorLog组件

代码如下：

<template>
  <div class="stats-card-container">
    <el-card class="stats-card-main">
      
      <div class="stats-section">
        <div class="stats-value-main">{{ statsData.todayPv }}div>
        <div class="stats-label-main">今日 PVdiv>
      div>
      
      <div class="stats-section stats-others">
        <div class="stats-item">
          <div class="stats-value-small">{{ statsData.todayUv }}div>
          <div class="stats-label-small">今日 UVdiv>
        div>
        <div class="stats-item">
          <div class="stats-value-small">{{ statsData.allPv }}div>
          <div class="stats-label-small">总 PVdiv>
        div>
        <div class="stats-item">
          <div class="stats-value-small">{{ statsData.allUv }}div>
          <div class="stats-label-small">总 UVdiv>
        div>
      div>
    el-card>
  div>
template>
<script>
import apiService from "@/config/apiService.js";
export default {
  name: "VisitorLog",
  data() {
    return {
      statsData: {
        todayPv: 0,
        todayUv: 0,
        allPv: 0,
        allUv: 0,
      },
    };
  },
  created() {
    this.fetchVisitorCount(); 
    this.startPolling(); 
  },
  beforeDestroy() {
    this.stopPolling(); 
  },
  methods: {
    fetchVisitorCount() {
      apiService
        .get("/welcome/queryVisitorCount")
        .then((res) => {
          
          this.statsData = res.data.data;
        })
        .catch((error) => {
          
          console.error(error);
        });
    },
    startPolling() {
      
      this.polling = setInterval(() => {
        this.fetchVisitorCount();
      }, 1000 * 60 * 60); 
    },
    stopPolling() {
      
      clearInterval(this.polling);
    },
  },
};
script>

<style scoped>
>>> .el-card__body{
  padding: 10px;
}
.stats-card-container {
  max-width: 400px;
  margin-bottom: 10px;
}

.stats-card-main {
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-section {
  text-align: center;
}

.stats-value-main {
  font-size: 24px;
  font-weight: bold;
  color: #0A74DA;
  margin-bottom: 4px;
}

.stats-label-main {
  font-size: 14px;
  color: #333;
}

.stats-others {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.stats-item {
  text-align: center;
}

.stats-value-small, .stats-label-small {
  font-size: 12px; 
}

.stats-value-small {
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.stats-label-small {
  color: #666;
}

@media (max-width: 400px) {
  .stats-others {
    flex-direction: column;
    align-items: center;
  }

  .stats-item {
    margin-bottom: 8px;
  }
}
style>

（2）组件使用

在App.vue组件中引入VisitorLog组件，顺便将布局重新分一下，代码如下：

<template>
  <div id="app">
    <el-row :gutter="10">
      <el-col :span="20">
        <el-row :gutter="10">
          <el-col :span="6" v-for="(board, index) in hotBoards" :key="index">
            <hot-search-board
              :title="board.title"
              :icon="board.icon"
              :fetch-url="board.fetchUrl"
              :type="board.type"
            />
          el-col>
        el-row>
      el-col>
      <el-col :span="4">
        <visitor-log />
      el-col>
    el-row>
  div>
template>

<script>
import HotSearchBoard from "@/components/HotSearchBoard.vue";
import VisitorLog from "@/components/VisitorLog.vue";
export default {
  name: "App",
  components: {
    HotSearchBoard,
    VisitorLog,
  },
  data() {
    return {
      hotBoards: [
        {
          title: "百度",
          icon: require("@/assets/icons/baidu-icon.svg"),
          type: "baidu",
        },
        {
          title: "抖音",
          icon: require("@/assets/icons/douyin-icon.svg"),
          type: "douyin",
        },
        {
          title: "知乎",
          icon: require("@/assets/icons/zhihu-icon.svg"),
          type: "zhihu",
        },
        {
          title: "B站",
          icon: require("@/assets/icons/bilibili-icon.svg"),
          type: "bilibili",
        },
        {
          title: "搜狗",
          icon: require("@/assets/icons/sougou-icon.svg"),
          type: "sougou",
        },
      ],
    };
  },
};
script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background: #f8f9fa; 
  min-height: 100vh; 
  padding: 0; 
}
style>

咱们做出来的效果就是这样的，如下：

这个小组件做起来还是简单的，主要就是监控了别人的访问IP，然后通过IP反解析出所属地域，最后将其存到数据库中。

番外：搜狗热搜爬虫

1. 爬虫方案评估

搜狗的热搜接口返回的一串JSON格式数据，这就很简单了，省的我们去解析dom，访问链接是：go.ie.sogou.com/hot_ranks

2. 网页解析代码

SougouHotSearchJob.java
package com.summo.sbmy.job.sougou;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.google.common.collect.Lists;
import com.summo.sbmy.common.model.dto.HotSearchDetailDTO;
import com.summo.sbmy.dao.entity.SbmyHotSearchDO;
import com.summo.sbmy.service.SbmyHotSearchService;
import com.summo.sbmy.service.convert.HotSearchConvert;
import com.xxl.job.core.biz.model.ReturnT;
import com.xxl.job.core.handler.annotation.XxlJob;
import lombok.extern.slf4j.Slf4j;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import org.apache.commons.collections4.CollectionUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.Calendar;
import java.util.List;
import java.util.Random;
import java.util.UUID;
import java.util.stream.Collectors;

import static com.summo.sbmy.common.cache.SbmyHotSearchCache.CACHE_MAP;
import static com.summo.sbmy.common.enums.HotSearchEnum.DOUYIN;
import static com.summo.sbmy.common.enums.HotSearchEnum.SOUGOU;


@Component
@Slf4j
public class SougouHotSearchJob {

    @Autowired
    private SbmyHotSearchService sbmyHotSearchService;

    @XxlJob("sougouHotSearchJob")
    public ReturnT hotSearch(String param) throws IOException {
        log.info("搜狗热搜爬虫任务开始");
        try {
            
            OkHttpClient client = new OkHttpClient().newBuilder().build();
            Request request = new Request.Builder().url("https://go.ie.sogou.com/hot_ranks").method("GET", null)
                    .build();
            Response response = client.newCall(request).execute();
            JSONObject jsonObject = JSONObject.parseObject(response.body().string());
            JSONArray array = jsonObject.getJSONArray("data");
            List sbmyHotSearchDOList = Lists.newArrayList();
            for (int i = 0, len = array.size(); i < len; i++) {
                
                JSONObject object = (JSONObject)array.get(i);
                
                SbmyHotSearchDO sbmyHotSearchDO = SbmyHotSearchDO.builder().hotSearchResource(SOUGOU.getCode()).build();
                
                sbmyHotSearchDO.setHotSearchId(object.getString("id"));
                
                sbmyHotSearchDO.setHotSearchTitle(object.getJSONObject("attributes").getString("title"));
                
                sbmyHotSearchDO.setHotSearchUrl(
                        "https://www.sogou.com/web?ie=utf8&query=" + sbmyHotSearchDO.getHotSearchTitle());
                
                sbmyHotSearchDO.setHotSearchHeat(object.getJSONObject("attributes").getString("num"));
                
                sbmyHotSearchDO.setHotSearchOrder(i + 1);
                sbmyHotSearchDOList.add(sbmyHotSearchDO);
            }
            if (CollectionUtils.isEmpty(sbmyHotSearchDOList)) {
                return ReturnT.SUCCESS;
            }
            
            CACHE_MAP.put(SOUGOU.getCode(), HotSearchDetailDTO.builder()
                
                .hotSearchDTOList(
                    sbmyHotSearchDOList.stream().map(HotSearchConvert::toDTOWhenQuery).collect(Collectors.toList()))
                
                .updateTime(Calendar.getInstance().getTime()).build());
            
            sbmyHotSearchService.saveCache2DB(sbmyHotSearchDOList);
            log.info("搜狗热搜爬虫任务结束");
        } catch (IOException e) {
            log.error("获取搜狗数据异常", e);
        }
        return ReturnT.SUCCESS;
    }
}

代码逻辑还是老一套，不难，嫌麻烦复制粘贴即可。

阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21237，转载请注明出处。
赏 0

猜你喜欢

4周前 364

2024-10-14 170

2024-10-14 117

2024-10-14 73

2024-10-14 71

2024-10-13 81

评论0

取消

首页 发现 VIP 我的
显示验证码
没有账号？注册  忘记密码？