⭐️ Basic Link Navigation ⭐️
Server →☁️ AliCloud event address
See sample →🐟 Groping small website address
Learning Code →💻 Source code repository address
I. Preface
Hello everyone, this is summo, something happened recently (I was laid off, I'm looking for a job) and I'm sorry for the hiatus. When I was just laid off, it was still a little hard, and I still have a mortgage to pay, so I'm a little stressed, but after a period of rest, my mind has calmed down a little, and I plan to write while I look for a job, so if there are any students who have the same experience as I have had, let's encourage each other!
The first six posts in this series of "Make a Fish-Touching Small Site for 100 Bucks! The first six articles in this series have probably finished the overall process, from this article I will add some details and components, so that our small website is a little richer. This article I will introduce how to leave the user's visit record, watching their own website is visited by others is a very interesting and very sense of accomplishment.
The corresponding component is also the one I've marked with a red box, as shown below:
II. User identification
The best way to indicate a user's identity is to do login and registration, but once you add such logic, there will be a lot of troublesome issues to deal with, such as how to do human verification, interface anti-scratch, and so on, these issues are not dealt with if the site is very easy to be attacked. Small sites like ours, I think this feature is not necessary, we just need to know how many people have visited our site can be.
For such a demand, the simplest approach is to use the user's access IP as an identifier, and then parse the geographical information according to the IP, which is already very good. And the most commonly used IP resolution tool is:ip2regionI've written an article on how to use this component before, here's the link to the article:SpringBoot integration ip2region realize the use of ip monitoring user access to the city。
The core code is this one:
package ;
import ;
import . ;
import ;
import ;
import ;
public class AddressUtil {
/**
* Local DB for the current record address
*/
private static final String TEMP_FILE_DIR = "/home/admin/app/";
/**
* Query login source by IP address
*
* @param ip
* @return
*/
public static String getCityInfo(String ip) {
try {
// Get the file where the address is currently recorded
String dbPath = (("/ip2region/")).getPath();
File file = new File(dbPath);
// If the current file does not exist, make a copy from the cache
if (! ()) {
dbPath = TEMP_FILE_DIR + "";
(("Current directory is:[{0}]", dbPath));
file = new File(dbPath);
((().getResourceAsStream("classpath:ip2region/")), file);
}
// Create the query object
Searcher searcher = (dbPath);; //Start the query.
//Start the query
return (ip); }
} catch (Exception e) {
(); }
}
//Defaults to returning the empty string
return "";
}
public static void main(String[] args) {
(getCityInfo("1.2.3.4")); }
}
}
III. Functional realization
To decouple the logic, I use an annotation:@VisitLogIn addition, we need to design an access log table to store the data and design a widget to display the data. At the same time in order to count the user's access data, we need to design an access log table to store the data, and design a widget to display these data, the specific process is as follows.
1. Back-end component
(1) Design of access log sheet
Table Building Statements
-- `summo-sbmy`.t_sbmy_visit_log definition
CREATE TABLE `t_sbmy_visit_log` (
`id` bigint(20) unsigned zerofill NOT NULL AUTO_INCREMENT COMMENT 'Physical Primary Key',
`device_type` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT 'Equipment type，Cell phone or computer',
`ip` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT 'interviews',
`address` varchar(256) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT 'IPaddress',
`time` int DEFAULT NULL COMMENT 'take a period of (x amount of time)',
`method` varchar(2048) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT 'invoke a method',
`params` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci COMMENT 'parameters',
`gmt_create` datetime DEFAULT NULL COMMENT 'Creation time',
`gmt_modified` datetime DEFAULT NULL COMMENT 'update time',
`creator_id` bigint DEFAULT NULL COMMENT 'founder',
`modifier_id` bigint DEFAULT NULL COMMENT 'updater',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=oDEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
DO, Mapper, Repository and other documents
Remember that I introduced in the third DO generation plug-ins, in changing the table name and DO name, double-click mybatis-generator:generate can generate the corresponding DO, Mapper, xml.
(2) VisitLog annotations
package ;
/**
* :: Access ID annotations
*/
public @interface VisitLog {
}
package ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import .slf4j.Slf4j;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import static ;
@Slf4j
@Aspect
@Component
public class VisitLogAspect {
@Autowired
private SbmyVisitLogRepository sbmyVisitLogRepository;
@Pointcut("@annotation()")
public void pointcut() {
// do nothing
}
@Around("pointcut()")
public Object around(ProceedingJoinPoint joinPoint) throws Throwable {
//gainrequest
HttpServletRequest request = ();
// Requested class name
MethodSignature signature = (MethodSignature)();
Method method = ();
String className = ().getClass().getName();
// Requested method name
String methodName = ();
String ip = (request);
String address = (ip);
SbmyVisitLogDO sbmyVisitLogDO = ().deviceType(isFromMobile(request) ? "cell phone" : "laptops").method(
className + "." + methodName + "()").ip(ip).address((address)).build();
// Requested method parameter values
Object[] args = ();
// Name of the requested method parameter
LocalVariableTableParameterNameDiscoverer u = new LocalVariableTableParameterNameDiscoverer();
String[] paramNames = (method);
if (args != null && paramNames != null) {
// establish key-value The mapping is used to generate JSON string (computer science)
Map<String, Object> paramMap = new LinkedHashMap<>();
for (int i = 0; i < ; i++) {
if (args[i] instanceof HttpServletRequest || args[i] instanceof HttpServletResponse) {
continue;
}
(paramNames[i], args[i]);
}
// utilization Fastjson Converts the parameter mapping to JSON string (computer science)
String paramsJson = (paramMap);
(paramsJson);
}
long beginTime = ();
Object proceed = ();
long end = ();
((int)(end - beginTime));
(sbmyVisitLogDO);
return proceed;
}
/**
* parameter constructor¬
*
* @param params
* @param args
* @param paramNames
* @return
* @throws JsonProcessingException
*/
private StringBuilder handleParams(StringBuilder params, Object[] args, List paramNames)
throws JsonProcessingException {
for (int i = 0; i < ; i++) {
if (args[i] instanceof Map) {
Set set = ((Map)args[i]).keySet();
List<Object> list = new ArrayList<>();
List<Object> paramList = new ArrayList<>();
for (Object key : set) {
(((Map)args[i]).get(key));
(key);
}
return handleParams(params, (), paramList);
} else {
if (args[i] instanceof Serializable) {
Class<?> aClass = args[i].getClass();
try {
("toString", new Class[] {null});
// If you don't throw the NoSuchMethodException An exception exists if the toString methodologies ，safe writeValueAsString ，if not die (euph.) Object(used form a nominal expression)
// toStringmethodologies
(" ").append((i)).append(": ").append(
(args[i]));
} catch (NoSuchMethodException e) {
(" ").append((i)).append(": ").append(
(args[i].toString()));
}
} else if (args[i] instanceof MultipartFile) {
MultipartFile file = (MultipartFile)args[i];
(" ").append((i)).append(": ").append(());
} else {
(" ").append((i)).append(": ").append(args[i]);
}
}
}
return params;
}
}
Here used to some tools, the code I have uploaded to the warehouse, you directly down on it.
(3) Annotation use
Just add this note to the
package ;
import ;
import ;
import ;
@Controller
public class IndexController {
@GetMapping("/")
@VisitLog
public String index(){
return "index";
}
}
2. Front-end segment
(1) Create a new VisitorLog component.
The code is as follows:
<template>
<div class="stats-card-container">
<el-card class="stats-card-main">
<!-- Highlighted Today PV -->
<div class="stats-section">
<div class="stats-value-main">{{ }}</div>
<div class="stats-label-main">today PV</div>
</div>
<!-- Other statistics，Display in a more compact form -->
<div class="stats-section stats-others">
<div class="stats-item">
<div class="stats-value-small">{{ }}</div>
<div class="stats-label-small">today UV</div>
</div>
<div class="stats-item">
<div class="stats-value-small">{{ }}</div>
<div class="stats-label-small">assemble PV</div>
</div>
<div class="stats-item">
<div class="stats-value-small">{{ }}</div>
<div class="stats-label-small">assemble UV</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
import apiService from "@/config/";
export default {
name: "VisitorLog",
data() {
return {
statsData: {
todayPv: 0,
todayUv: 0,
allPv: 0,
allUv: 0,
},
};
},
created() {
(); // Called once immediately upon component creation
(); // Start Timer
},
beforeDestroy() {
(); // Cleaning the timer before component destruction
},
methods: {
fetchVisitorCount() {
apiService
.get("/welcome/queryVisitorCount")
.then((res) => {
// Processing response data
= ;
})
.catch((error) => {
// Handling of error conditions
(error);
});
},
startPolling() {
// Define a method to start the periodic timer
= setInterval(() => {
();
}, 1000 * 60 * 60); // each60000millisecond（1minutes）invoke once
},
stopPolling() {
// Define a method to stop the timer
clearInterval();
},
},
};
</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; /* Reduced font size for a more compact layout */
}
.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) Component use
Introduce the VisitorLog component in the component, and by the way, re-split the layout with the following code:
<template>
<div >
<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=""
:icon=""
:fetch-url=""
:type=""
/>
</el-col>
</el-row>
</el-col>
<el-col :span="4">
<visitor-log />
</el-col>
</el-row>
</div>
</template>
<script>
import HotSearchBoard from "@/components/";
import VisitorLog from "@/components/";
export default {
name: "App",
components: {
HotSearchBoard,
VisitorLog,
},
data() {
return {
hotBoards: [
{
title: "Baidu",
icon: require("@/assets/icons/"),
type: "baidu",
},
{
title: "jitterbug",
icon: require("@/assets/icons/"),
type: "douyin",
},
{
title: "know",
icon: require("@/assets/icons/"),
type: "zhihu",
},
{
title: "Bbranch of a company or organization",
icon: require("@/assets/icons/"),
type: "bilibili",
},
{
title: "Sogou (dog breed)",
icon: require("@/assets/icons/"),
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; /* Provides a soft background color */
min-height: 100vh; /* Use the viewport height to ensure that it fills the entire screen */
padding: 0; /* Keep the overall layout compact，No extra inside margins */
}
</style>
Let's make it look like this, as follows:
Extra: Sogou Hot Search Crawler
1. Evaluation of the crawling program
A string of JSON-formatted data returned by Sogou's hot search interface, which is simple enough to save us from parsing the dom and accessing the link is:/hot_ranks
2. Web page parsing code
package ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import .slf4j.Slf4j;
import ;
import ;
import ;
import .;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import static .CACHE_MAP;
import static ;
import static ;
/**
* @author summo
* @version , 1.0.0
* @description SearchHotSearchJavacrawler code
* @date 2024surname Nian08moon09
*/
@Component
@Slf4j
public class SougouHotSearchJob {
@Autowired
private SbmyHotSearchService sbmyHotSearchService;
@XxlJob("sougouHotSearchJob")
public ReturnT<String> hotSearch(String param) throws IOException {
("SearchHotSearch爬虫任务开始");
try {
//查询SearchHotSearch数据
OkHttpClient client = new OkHttpClient().newBuilder().build();
Request request = new ().url("/hot_ranks").method("GET", null)
.build();
Response response = (request).execute();
JSONObject jsonObject = (().string());
JSONArray array = ("data");
List<SbmyHotSearchDO> sbmyHotSearchDOList = ();
for (int i = 0, len = (); i < len; i++) {
//Get the information about the hot searches of Zhihu
JSONObject object = (JSONObject)(i);
//Build a hot search information list
SbmyHotSearchDO sbmyHotSearchDO = ().hotSearchResource(()).build();
//Setting up the Knowledge TripartiteID
(("id"));
//Setting the article title
(("attributes").getString("title"));
//Setting up article links
(
"/web?ie=utf8&query=" + ());
//Setting the heat of a hot search
(("attributes").getString("num"));
//ordinal order
(i + 1);
(sbmyHotSearchDO);
}
if ((sbmyHotSearchDOList)) {
return ;
}
//Data added to cache
CACHE_MAP.put((), ()
//Hot Search Data
.hotSearchDTOList(
().map(HotSearchConvert::toDTOWhenQuery).collect(()))
//update time
.updateTime(().getTime()).build());
//Data persistence
sbmyHotSearchService.saveCache2DB(sbmyHotSearchDOList);
("SearchHotSearch爬虫任务结束");
} catch (IOException e) {
("Get Sogou Data Exception", e);
}
return ;
}
}