vue3+TS+nest+mysql实现网站访问统计系统

news2024/9/22 9:33:16

网站采用了vue3+ts+nest+mysql的技术选型,目前初步实现第一版开发
访问地址:点我进入网站

在这里插入图片描述

网站访问统计

主要通过插入script来调用上传接口来实现数据统计,目前仅存储了用户的ip和访问时间,后期也可根据ip来获取用户的城市信息

async pageUpload(id: string, ip: string): Promise<VOUtils> {
    console.log("pageViews进入service:", id);
    const uuid = await getUuid();
    // record表增加访问记录,存储ip
    this.pageStatisticsRepository.save({
      id: uuid,
      ip: ip,
      createTime: new Date(),
      pageId: id
    });

    return VOUtils.success();
  }

前端部分可以再应用统计中新加一个应用,然后点击脚本,将src放到你个人网站的index.html中
在这里插入图片描述
拿到src之后

<script src="刚才点击脚本里面的src内容"></script>

在这里插入图片描述

然后将script放到个人网站的index.html中的body最下面即可,并不影响页面正常展示
在这里插入图片描述
然后访问网站时就会被记录访问信息。
在这里插入图片描述

目前网站刚更新第一版还略有些简陋,欢迎大家测试使用,挑出毛病。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1967075.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

探索TinyDB的轻量级魅力:Python中的微型数据库

文章目录 探索TinyDB的轻量级魅力&#xff1a;Python中的微型数据库背景&#xff1a;为何选择TinyDB&#xff1f;什么是TinyDB&#xff1f;如何安装TinyDB&#xff1f;5个简单的库函数使用方法3个场景下的应用实例常见问题与解决方案总结 探索TinyDB的轻量级魅力&#xff1a;Py…

社区志愿服务管理平台小程序/社区志愿者管理系统

获取源码联系方式请查看文章结尾&#x1f345; 摘 要 随着当今网络的发展&#xff0c;时代的进步&#xff0c;各行各业也在发生着变化&#xff0c;于是小程序也逐步进入人们的生活&#xff0c;给我们生活或者工作提供了新的方向新的可能。 本毕业设计的内容是设计实现一个基…

芯片解密技术可以应用在哪些领域?

芯片解密技术可以在以下一些领域得到应用&#xff1a; 电子产品维修&#xff1a;对于一些老旧或难以获取原厂技术支持的设备&#xff0c;通过解密芯片获取程序代码可以更有效地进行故障诊断和维修。技术研究和学习&#xff1a;帮助科研机构和技术人员深入了解先进芯片的设计和工…

python绘图 | 横坐标是日期,纵坐标是数值

需求 profit_value [0.084, 0.225, 0.234, 0.264, 0.328] time_stamp [20221111, 20230511, 20230704, 20231212, 20240315] 横坐标是日期&#xff0c;纵坐标是数值&#xff0c;我想绘图的时候&#xff0c;横坐标是按日期格式来 代码 from matplotlib import pyplot as pl…

黄水与酿好酒有啥关系?

执笔 | 敏 敏 编辑 | 古利特 上个世纪&#xff0c;白酒泰斗周恒刚先生曾到四川考察&#xff0c;不禁感慨四川生产浓香型白酒占尽天时、地利、人和&#xff0c;其中“黄水”尤为特别。 “黄水”与酿好酒有何关系&#xff1f;,长江酒道,4分钟 近期&#xff0c;五粮液科研团队联…

word预览方式---插件,vue-office-docx、docx-preview、mammoth.js

提示&#xff1a;word预览方式—插件 文章目录 [TOC](文章目录) 前言一、vue-office-docx二、docx-preview三、mammoth.js总结 前言 word预览 一、vue-office-docx npm install vue-office-docx -S-DofficeDocx.vue <template><div class"preview_box">…

前端面试题整理-HTML

1. 从用户输入 url 到页面展示发生了什么&#xff1f; &#xff08;1&#xff09;首先进行url合法性校验&#xff1a;包括协议域名端口号 &#xff08;2&#xff09;进行强缓存判断&#xff0c;判断本地缓存是否已经存在需要的资源文件&#xff0c;存在直接使用本地缓存即可 &…

无捆绑软件!Windows7纯净版镜像等你来下载!

在电脑操作中&#xff0c;很多用户都喜欢纯净版操作系统&#xff0c;但不知道在哪里可以下载到没有捆绑软件的Windows7纯净版系统&#xff1f;接下来系统之家小编给大家带来最新的Windows7纯净版镜像&#xff0c;这些镜像文件经过优化&#xff0c;不包含捆绑软件&#xff0c;安…

零基础学习【Mybatis】这一篇就够了

Mybatis 查询resultType使用resultMap使用单条件查询多条件查询模糊查询返回主键 动态SQLifchoosesetforeachsql片段 配置文件注解增删改查结果映射 查询 resultType使用 当数据库返回的结果集中的字段和实体类中的属性名一一对应时, resultType可以自动将结果封装到实体中 r…

react高级组件ProForm实现输入框搜索

实现界面 <Col span{12}><ProForm.Itemname"name"label"推荐用户"><AutoCompleteclassName"pro-field pro-field-md"placeholder"请输入用户名"options{NameArr}onSearch{debounce(searchUser, 500)}onSelect{onSelect…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第四篇 嵌入式Linux系统移植篇-第七十三章内核添加网卡驱动

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

有趣的PHP小游戏——猜数字

猜数字 这个游戏会随机生成一个1到100之间的数字&#xff0c;然后你需要猜测这个数字是什么。每次你输入一个数字后&#xff0c;程序会告诉你这个数字是“高了”还是“低了”&#xff0c;直到你猜对为止&#xff01; 使用指南&#xff1a; 代码如下&#xff0c;保存到一个p…

大模型卷入医学图像!PFPs:使用大型视觉和语言模型的提示引导灵活病理分割,用于多样化潜在结果

PS&#xff1a;写在前面&#xff0c;近期感谢很多小伙伴关注到我写的论文解读&#xff0c;我也会持续更新吖~同时希望大家多多支持本人的公主号~ 想了解更多医学图像论文资料请移步公主&#x1f478;号哦~~~后期将持续更新&#xff01;&#xff01; 关注我&#xff0c;让我们一…

【嵌入式】STM3212864点阵屏使用SimpleGUI单色屏接口库——(2)精简字库

一 开源库简介与移植 最近一个项目需要用12864屏幕呈现一组较为复杂的菜单界面&#xff0c;本着不重复造轮子的原则找到了SimpleGUI开源库。 开源地址&#xff1a;SimpleGUI: 一个面向单色显示屏的开源GUI接口库。 SimpleGUI是一款针对单色显示屏设计的接口库。相比于传统的GUI…

kali里面的vulhub靶场搭建

第一步&#xff1a;安装docker镜像容器 sudo apt install docker.io 第二步&#xff1a;开启docker镜像容器 先查看一下docker有没有下载成功 docker -v 再查看一下docker的运行状态 systemctl status docker 第三步&#xff1a;下载docker-compose环境 apt install do…

94 二叉树的中序遍历

解题思路&#xff1a; \qquad 首先理解中序遍历&#xff1a;left node——root——right node。 \qquad 中序遍历的起始点为该树最左边的非空元素。本题可以使用递归、DFS&#xff08;迭代&#xff09;解决。 递归法&#xff1a; \qquad 重复的基础操作&#xff1a;输出roo…

甘肃西北风情贝壳面你吃过吗?

在西北的甘肃&#xff0c;有一种传统面食——麻食&#xff0c;以其独特的制作工艺和浓郁的地方风味&#xff0c;成为了当地人民餐桌上的宠儿。麻食&#xff0c;又被称为“麻什”“麻食子”等&#xff0c;是一种手工搓制而成的面食。它的形状酷似猫耳朵&#xff0c;小巧玲珑&…

超有趣的视觉欺骗

by 游梦 关键词&#xff1a;蜘蛛侠、室内映射、假室内 大家一起先找茬&#xff0c;半分钟找出下图中穿帮镜头 &#xff08;图源&#xff1a;https://zhuanlan.zhihu.com/p/159439811&#xff09; 答案揭晓&#xff1a; 可以看到室内门的位置&#xff0c;在建筑不同视角下的位…

为 Laravel 提供生产模式下的容器化环境:打造现代开发环境的终极指南

为 Laravel 提供生产模式下的容器化环境&#xff1a;打造现代开发环境的终极指南 在现代开发中&#xff0c;容器化已经成为一种趋势。使用 Docker 可以让我们轻松地管理和部署应用程序。本文将带你一步步构建一个高效的 Laravel 容器化环境&#xff0c;确保你的应用程序在开发…

Modbus从站模拟软件

下载地址&#xff1a; Modbus从站模拟软件资源-CSDN文库