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} />)}
}

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

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

相关文章

使用Java服务器实现UDP消息的发送和接收(多线程)

目录 简介&#xff1a;1. 导入必要的库2. 创建服务器端代码3. 创建客户端代码4. 实现多线程处理5. 测试运行示例代码&#xff1a;函数说明服务器端代码说明&#xff1a;客户端代码说明&#xff1a; 总结&#xff1a; 简介&#xff1a; 在本篇博客中&#xff0c;我们将介绍如何…

genism word2vec方法

文章目录 概述使用示例模型的保存与使用训练参数详解&#xff08;[原链接](https://blog.csdn.net/weixin_44852067/article/details/130221655)&#xff09;语料库训练 概述 word2vec是按句子来处理的Sentences(句子们) 使用示例 from gensim.models import Word2Vec #sent…

《起风了》C++源代码

使用方法 Visual Studio、Dev-C、Visual Studio Code等C/C创建一个 .cpp 文件&#xff0c;直接粘贴赋值即可。 #include <iostream> #include <Windows.h> #pragma comment(lib,"winmm.lib") using namespace std; enum Scale {Rest 0, C8 108, B7 …

目录——车载网络安全

本文主要汇总车载网络安全专栏文章,以方便各位读者阅读。 ISO21434 概述(一) ISO21434 组织网络安全管理(二) ISO21434 项目网络安全管理(三) ISO21434 分布式网络安全(四) SO21434 持续进行的网络安全(五) ISO21434 概念阶段网络安全(六)

线性代数(四) 特征值相似矩阵

前言 前面主要讲述的是方程组和矩阵的关系&#xff0c;现在了解下矩阵和矩阵的关系 方阵的特征值与特征向量 假设A为n阶方阵&#xff0c;对于一个数 λ \lambda λ 若存在&#xff1a;非零列向量 α \alpha α&#xff0c;使得&#xff1a; A α ⃗ λ α ⃗ A\vec{\alp…

2022年电赛C题——小车跟随行驶系统——做题记录以及经验分享

前言 自己打算将做过的电赛真题&#xff0c;主要包含控制组的&#xff0c;近几年出现的小车控制题目&#xff0c;自己做过的真题以及在准备电赛期间刷真题出现的问题以及经验分享给大家 这次带来的是22年电赛C题——小车跟随行驶系统&#xff0c;这道题目指定使用的是TI的单片…

spring ico容器 spring注入方式 spring与tomcat整合

一、简介 1、什么是spring&#xff1f; Spring是一个开源的轻量级Java应用开发框架&#xff0c;它提供了一种简单、高效、灵活的方式来构建企业级应用程序。Spring框架的核心特点是依赖注入&#xff08;Dependency Injection&#xff09;和面向切面编程&#xff08;Aspect-Ori…

SpringBoot整合Redis完整篇

SpringBoot整合Redis完整篇 1、在springboot项目的pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schem…

分布式锁有哪些应用场景和实现?

电商网站都会遇到秒杀、特价之类的活动&#xff0c;大促活动有一个共同特点就是访问量激增&#xff0c;在高并发下会出现成千上万人抢购一个商品的场景。虽然在系统设计时会通过限流、异步、排队等方式优化&#xff0c;但整体的并发还是平时的数倍以上&#xff0c;参加活动的商…

WebRTC音视频通话-实现GPUImage视频美颜滤镜效果iOS

WebRTC音视频通话-实现GPUImage视频美颜滤镜效果 在WebRTC音视频通话的GPUImage美颜效果图如下 可以看下 之前搭建ossrs服务&#xff0c;可以查看&#xff1a;https://blog.csdn.net/gloryFlow/article/details/132257196 之前实现iOS端调用ossrs音视频通话&#xff0c;可以查…

2023秋招笔试

柠檬微趣 将java的链表升序排序&#xff0c;链表用Class Node{int val,Node next}实现 import java.util.Comparator; import java.util.PriorityQueue; import java.util.Scanner;/*** 输入一串数字&#xff0c;放入list中&#xff0c;实现sortList&#xff0c;返回升序的li…

将单个训练数据集文件拆分为:image文件和label文件(pytorch学习+蚂蚁蜜蜂数据集)

蚂蚁蜜蜂分类数据集下载链接&#xff1a;https://download.pytorch.org/tutorial/hymenoptera_data.zip 要实现如图操作&#xff1a; 将ants分为ants_image和ants_label 将bees分成bees_image和bees_label 创建ants_label和bees_label&#xff0c;并且以图片名作为txt文件的…

Apche Kafka + Spring的消息监听容器

目录 一、消息的接收1.1、消息监听器 二、消息监听容器2.1、 实现方法2.1.1、KafkaMessageListenerContainer2.1.1.1、 基本概念2.1.1.2、如何使用 KafkaMessageListenerContainer 2.1.2、ConcurrentMessageListenerContainer 三、偏移 四、监听器容器自动启动 一、消息的接收 …

【机器学习】sklearn数据集的使用,数据集的获取和划分

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 sklearn数据集 二、安装sklearn二、获取数据集三、…

mac录屏工具,录屏没有声音的解决办法

mac录屏工具&#xff0c;录屏没有声音的解决办法 在使用macbook录制屏幕时&#xff0c;发现自带的录屏工具QuickTime Player没有声音&#xff0c;于是尝试了多款录屏工具&#xff0c;对其做一些经验总结&#xff08;省流&#xff1a;APP Store直接可以免费下载使用Omi录屏专家…

第三课-界面介绍SD-Stable Diffusion 教程

前言 我们已经安装好了SD&#xff0c;这篇文章不介绍难以理解的原理&#xff0c;说使用。以后再介绍原理。 我的想法是&#xff0c;先学会画&#xff0c;然后明白原理&#xff0c;再去提高技术。 我失败过&#xff0c;知道三天打鱼两天晒网的痛苦&#xff0c;和很多人一样试了…

TiDB数据库从入门到精通系列之六:使用 TiCDC 将 TiDB 的数据同步到 Apache Kafka

TiDB数据库从入门到精通系列之六&#xff1a;使用 TiCDC 将 TiDB 的数据同步到 Apache Kafka 一、技术流程二、搭建环境三、创建Kafka changefeed四、写入数据以产生变更日志五、配置 Flink 消费 Kafka 数据 一、技术流程 快速搭建 TiCDC 集群、Kafka 集群和 Flink 集群创建 c…

【网络编程系列】网络编程实战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

使用Vue.js框架的指令和事件绑定实现一个购物车的页面布局

使用了v-model指令来实现全选/全不选的功能&#xff0c;当全选框被点击时&#xff0c;isAllChecked的值会被改变。使用了v-if指令来判断购物车中是否有商品&#xff0c;如果有商品则渲染商品列表&#xff0c;否则显示购物车为空的提示。使用了v-for指令来遍历datalist数组&…

jvm内存溢出排查(使用idea自带的内存泄漏分析工具)

文章目录 1.确保生成内存溢出文件2.使用idea自带的内存泄漏分析工具3.具体实验一下 1.确保生成内存溢出文件 想分析堆内存溢出&#xff0c;一定在运行jar包时就写上参数-XX:HeapDumpOnOutOfMemoryError&#xff0c;可以看我之前关于如何运行jar包的文章。若你没有写。可以写上…