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…...
如何在机器学习中实现分类?
机器学习和统计学中的分类是一种监督学习方法,其中计算机程序从给定的数据中学习并进行新的观察或分类。在本文中,我们将详细了解机器学习中的分类。 本博客涵盖以下主题: 目录 什么是机器学习中的分类? 机器学习中的分类术语 分类算法...

深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...

PHP 8.5 即将发布:管道操作符、强力调试
前不久,PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5!作为 PHP 语言的又一次重要迭代,PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是,借助强大的本地开发环境 ServBay&am…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...

实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
深入浅出Diffusion模型:从原理到实践的全方位教程
I. 引言:生成式AI的黎明 – Diffusion模型是什么? 近年来,生成式人工智能(Generative AI)领域取得了爆炸性的进展,模型能够根据简单的文本提示创作出逼真的图像、连贯的文本,乃至更多令人惊叹的…...
xmind转换为markdown
文章目录 解锁思维导图新姿势:将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件(ZIP处理)2.解析JSON数据结构3:递归转换树形结构4:Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...