react go实现用户历史登录列表页面
refer: http://ip-api.com/
1.首先需要创建一个保存用户历史的登录的表,然后连接go
2.在用户登录的时候,获取用户的IP IP位置,在后端直接处理数据即可(不需要在前端传递数据)
(1)增加路由:
apiv1.POST("/history_login_logs", v1.AddHistoryLoginLog)
(2)在model里增加(例如:models/history_login_logs.go)
func AddHistoryLoginLog(user_id int, ip_address string, ip_location string, login_at time.Time) bool {db.Create(&HistoryLoginLogs{UserId: user_id,IpAddress: ip_address,IpLocation: ip_location,LoginAt: login_at,})return true}
(3) 在登录后的方法中增加(需要引入
import("time""io/ioutil""fmt""encoding/json"
)type Location struct {Status string `json:"status"`Country string `json:"country"`CountryCode string `json:"countryCode"`Region string `json:"region"`RegionName string `json:"regionName"`City string `json:"city"`Zip string `json:"zip"`Lat float64 `json:"lat"`Lon float64 `json:"lon"`Timezone string `json:"timezone"`Isp string `json:"isp"`Org string `json:"org"`As string `json:"as"`Query string `json:"query"`
}...
ipAddress := c.ClientIP()
fmt.Println("== ip_address:", ipAddress)
resp, err := http.Get("http://ip-api.com/json/" + ipAddress + "?lang=zh-CN")
if err != nil {fmt.Println("Error:", err)return
}defer resp.Body.Close()body, err := ioutil.ReadAll(resp.Body)if err != nil {fmt.Println("Error:", err)return}var location Location
err = json.Unmarshal(body, &location)if err != nil {fmt.Println("Error:", err)return}fmt.Println("=== Location:", location)
City := location.CitycurrentTime := time.Now()
models.AddHistoryLoginLog(user.ID, ipAddress, City, currentTime)
...
(4)增加action (例如:routers/api/v1/history_login_log.go)(需要引入import "net/http" "time" "fmt")
type AddHistoryLoginLogRequest struct {UserID int `json:"user_id" binding:"required"`IPAddress string `json:"ip_address" binding:"required"`City string `json:"ip_location" binding:"required"`CurrentTime time.Time `json:"login_at" binding:"required"`}func AddHistoryLoginLog(c *gin.Context) {var request AddHistoryLoginLogRequestif err := c.ShouldBindJSON(&request); err != nil {fmt.Println("== err: ", err)return}models.AddHistoryLoginLog(request.UserID, request.IPAddress, request.City, request.CurrentTime)}
3.在前端写一个展示的列表页面即可。(登录时间写现在的时间即可。)
例如:src/pages/HistoryLoginLog/index.jsx
import React, { Component } from 'react'
import { Table } from 'antd';
import axios from 'axios'
import Config from '@/settings'
import { getToken, removeToken } from '@/utils/auth'const columns = [{title: '登录名',dataIndex: 'user_id',key: 'user_id',render: text => <a>{text}</a>,},{title: '登陆时间',dataIndex: 'login_at',key: 'login_at',// 这里是进行时间的处理,转换为北京时间,格式为:2023/08/16 21:40render: text => {const dateObj = new Date(text);const localizedDate = dateObj.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai',year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',});return <span>{localizedDate}</span>;},},{title: '登陆ip',dataIndex: 'ip_address',key: 'ip_address',},{title: '登陆位置',dataIndex: 'ip_location',key: 'ip_locatio',}
];export default class CalculationPlan extends Component {state = {data: [],loading: true,}async fetchData() {try {const response = await axios.get(`${Config.BASE_URL}/api/v1/history_login_logs?token=${getToken()}`)if (response.data.message == "ok") {const sortedData = response.data.data.sort((a, b) => new Date(b.id) - new Date(a.id));this.setState({data: sortedData,loading: false,})}} catch (error) {console.error(error)removeToken()window.location.href = '/'}}componentDidMount() {this.fetchData()}render() {const { data, loading } = this.statereturn (<Table columns={columns} dataSource={data} loading={loading} />)}
}
相关文章:
react go实现用户历史登录列表页面
refer: http://ip-api.com/ 1.首先需要创建一个保存用户历史的登录的表,然后连接go 2.在用户登录的时候,获取用户的IP IP位置,在后端直接处理数据即可(不需要在前端传递数据) (1)增加路由&am…...

如何做好服务性能测试
一、什么是性能测试 新功能上线或切换底层数据库或扩容调优,根据实际业务场景的需要,做必要的性能压测,收集性能数据,作为上线的基准报告。 性能测试一般分一下几个阶段: 1. 性能测试 并发量小(jmeter 并…...

速通蓝桥杯嵌入式省一教程:(五)用按键和屏幕实现嵌入式交互系统
一个完整的嵌入式系统,包括任务执行部分和人机交互部分。在前四节中,我们已经讲解了LED、LCD和按键,用这三者就能够实现一个人机交互系统,也即搭建整个嵌入式系统的框架。在后续,只要将各个功能加入到这个交互系统中&a…...

虚拟拍摄,如何用stable diffusion制作自己的形象照?
最近收到了某活动的嘉宾邀请,我将分享: 主题:生成式人工智能的创新实践 简要描述:从品牌营销、智能体、数字内容创作、下一代社区范式等方面,分享LLM与图像等生成式模型的落地应用与实践经验。 领域/研究方向ÿ…...

开启AI创新之旅!“华为云杯”2023人工智能应用创新大赛等你来挑战
简介 近年来,人工智能技术的发展如日中天,深刻地改变着我们的生活方式和产业格局。 为了培养AI人才,持续赋能AI企业,推进国家新一代人工智能开放创新平台建设,打造更加完善的AI技术创新生态,华为…...

npm和node版本升级教程
cmd中查看本地安装的node版本 node -v //查询node的位置 where node2.官网下载所需要的node版本,安装在刚查出来的文件夹下,即覆盖掉原来的版本 3.查看node版本是否已经更新 4.查看npm版本是否和node版本相匹配 cnpm install -g npm...

C++入门篇9---list
list是带头双向循环链表 一、list的相关接口及其功能 1. 构造函数 函数声明功能说明list(size_type n,const value_type& valvalue_type())构造的list中包含n个值为val的元素list()构造空的listlist(const list& x)拷贝构造list(InputIterator first, InputIterator…...

STM32基于CubeIDE和HAL库 基础入门学习笔记:物联网项目开发流程和思路
文章目录: 第一部分:项目开始前的计划与准备 1.项目策划和开发规范 1.1 项目要求文档 1.2 技术实现文档 1.3 开发规范 2.创建项目工程与日志 第二部分:调通硬件电路与驱动程序 第三部分:编写最基础的应用程序 第四部分&…...
Hive on Spark (1)
spark中executor和driver分别有什么作用? Spark中Executor 在 Apache Spark 中,Executor 是分布式计算框架中的一个关键组件,用于在集群中执行具体的计算任务。每个 Executor 都在独立的 JVM 进程中运行,可以在集群的多台机器上…...

PostgreSQL基本操作总结
安装按PostgreSQL数据库后,会默认创建用户postgres和数据库postgres,这个用户是超级用户,权限最高,可以创建其他用户和权限,在实际开发过程中,会新创建用户和业务数据库,本文主要介绍用户权限和…...
Jakarta 的 Servlet 下BeanUtils的日期处理 和JSTL 的使用
jsp优于性能等问题已经不被spring boot等支持,如果想使用jsp和jstl标签库需要引入一下依赖。 <!-- 用jakarta.servlet.jsp.jstl,用org.glassfish.web--><dependency><groupId>jakarta.servlet.jsp.jstl</groupId><art…...

聚焦电力行业CentOS迁移,麒麟信安受邀参加第六届电力信息通信新技术大会暨数字化发展论坛并发表主题演讲
为加快推进“双碳”目标下的新型能源体系和新型电力系统建设,深化新一代数字技术与电力业务的融合发展,促进电力行业关键技术自主创新、安全可控,助力电力企业数字化转型升级和高质量发展,2023年8月9-11日,第六届电力信…...
华为OD真题--分月饼--带答案
1. 华为OD机考题 答案 2023华为OD统一考试(AB卷)题库清单-带答案(持续更新) 2023年华为OD真题机考题库大全-带答案(持续更新) 2. 面试题 一手真实java面试题:2023年各大公司java面试真题汇总--…...

帆软大屏2.0企业制作
 数字化观点中心 / 当前页 如何从0-1制作数据大屏,我用大白话给你解释清楚了 文 | 商业智能BI相关文章 阅读次数:18,192 次浏览 2023-06-08 11:51:49 好莱坞大片《摩天营救》中有这么一个场景:  你可以看见反派大b…...

【学习笔记之opcua】使用Python获取opcua数据
Python与OPC UA的应用 示例代码 将代码放入spyder中运行后,出现下面这个错误 没有‘opcua’,那我们就下载pip install opcua 之后出现下面这个错误 问问题大不,安装语句写错了 正经安装语句是 !pip install opcua 读取opcua协议数据测试 …...
apache doris和StarRocks的区别
记录一下最新要用到2个新数据库的区别 Apache Doris是一个分布式的列式存储系统,它的设计目标是提供大规模数据处理的可靠性和高性能。Doris采用了集群方式,通过将数据分布在多个机器上进行处理来提高性能,并提供了SQL查询接口方便用户使用。…...

文心一言最新重磅发布!
8月16日,由深度学习技术及应用国家工程研究中心主办的WAVE SUMMIT深度学习开发者大会2023举办。百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰以《大语言模型为通用人工智能带来曙光》为题,阐述了大语言模型具备理解、生成、逻辑、记忆…...
css整体使用
文章目录 html与csshtml、css与排版响应式与自适应布局自适应布局响应式布局 css规则class、id、以及默认的标签名的优先级 css书写位置flex整体逻辑 bootstrap资源 html与css html负责网页功能,css负责网页美化;浏览器本身有一套默认的css样式…...
LeetCode1578. 使绳子变成彩色的最短时间
思路 拆除成本 全部拆除 - 最大的不拆除在统计成本的同时,维持一个成本的最大值 代码 class Solution {public int minCost(String colors, int[] neededTime) {int res 0;int i 0;int len colors.length();while (i < len) {int max -1;int sum 0;char…...
如何在机器学习中实现分类?
机器学习和统计学中的分类是一种监督学习方法,其中计算机程序从给定的数据中学习并进行新的观察或分类。在本文中,我们将详细了解机器学习中的分类。 本博客涵盖以下主题: 目录 什么是机器学习中的分类? 机器学习中的分类术语 分类算法...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...

springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...

376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...

使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
掌握 HTTP 请求:理解 cURL GET 语法
cURL 是一个强大的命令行工具,用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中,cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
32单片机——基本定时器
STM32F103有众多的定时器,其中包括2个基本定时器(TIM6和TIM7)、4个通用定时器(TIM2~TIM5)、2个高级控制定时器(TIM1和TIM8),这些定时器彼此完全独立,不共享任何资源 1、定…...