当前位置：首页 > news >正文

VSCode创建VUE项目（四）增加用户Session管理

news 来源：原创 2025/8/3 1:37:12

将用户信息存储或者更新到Session

sessionStorage.setItem("userID",loginform.value.username);
sessionStorage.setItem('loginTime', Date.now());

获取Session信息

const storedUserInfo = sessionStorage.getItem('userID');
const loginTime = sessionStorage.getItem('loginTime');

移除Session信息

sessionStorage.removeItem("userID");
sessionStorage.removeItem('loginTime');

以下是代码修改：

效果：当进入登录页面的时候之前登录过且没有超时，直接跳转到登录后界面，登录后的界面长时间没有操作，直接跳转登录界面

LoginView.vue

<template><div class="login-container dis-h"><div class="login-form  dis-h"><div class="dis-v left"><span> 欢迎~ </span><span> VUE 新世界 </span></div><div class="dis-v right"><div class="username dis-h"><el-input placeholder="请输入用户名" v-model="loginform.username" /></div><div class="pwd dis-h"><el-input type="password" placeholder="请输入密码" v-model="loginform.pwd" /></div><div class="btn dis-h"><el-button size="large" style="width:220px;background-color:#626aef;color:#fff;font-weight:bold; "@click="commit">登录</el-button></div></div></div></div>
</template>
<script setup>
import { ref, getCurrentInstance ,onMounted} from "vue"
import router from '@/router';
import { ElMessage } from 'element-plus';const { appContext } = getCurrentInstance()
const axios = appContext.config.globalProperties.$axios;
var loginform = ref({username: "",pwd: ""
})var commit = async () => {try {var response = await axios.get('/v1/aifunction/employee/info?emplCode=' + loginform.value.username);//保存日志信息console.log("--------------调用后台出参{"+loginform.value.username+"}--------------------");console.log(response);if (response && response.data) {if (response.data.defaultDeptCode == loginform.value.pwd) {// 将用户信息和登录时间存储到 sessionStoragesessionStorage.setItem("userID",loginform.value.username);sessionStorage.setItem('loginTime', Date.now());ElMessage.success("YES,成功啦啦啦啦啦！");router.replace("./about")}else {ElMessage.error("Sorry,请检查用户名和密码！失败！" + response.data.defaultDeptCode);}}else {ElMessage.error("Sorry,请检查用户名！没有该用户！");}} catch (error) {//登录失败,提示错误信息console.log(error)//this.$message.error('登录失败,请检查用户名和密码')ElMessage.error("Sorry,失败！" + error);}}onMounted(() => {const storedUserInfo = sessionStorage.getItem('userID');const loginTime = sessionStorage.getItem('loginTime');if (storedUserInfo && loginTime) {const currentTime = Date.now();const sessionTimeout = 2 * 60 * 1000; // 会话超时时间，这里设置为 2 分钟const elapsedTime = currentTime - parseInt(loginTime);if (elapsedTime < sessionTimeout) {router.replace("./about")}}
});
</script>
<style>
.login-container {width: 100vw;height: 100vh;background-image: url('../assets/background.jpeg');align-items: center;justify-content: center;background-repeat: no-repeat;/* 背景图片不重复 */background-size: cover;/* 背景图片覆盖整个div区域 */background-position: center;/* 背景图片居中显示 */
}.login-form {width: 600px;height: 300px;/* background-color: red; */}.login-form .left {width: 50%;height: 100%;align-items: left;justify-content: center;font-size: 1.6rem;font-weight: bold;background: linear-gradient(to right bottom, rgba(136, 209, 234, 0.80) 5%, rgba(215, 193, 187, 0.80) 100%);color: #fff;text-indent: 1rem;
}.login-form .right {width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.90);align-items: center;justify-content: center;
}.login-form .username,
.pwd,
.btn {padding: 0.5rem 0;}/*水平排列子元素*/
.dis-h {display: flex;
}/*垂直排列子元素*/
.dis-v {display: flex;flex-direction: column;
}
</style>

AboutView.vue

<template><div class="about"><h1>This is an about page</h1></div><div><el-button @click="loginOut">退出登录</el-button></div>
</template><script setup>
import router from '@/router';
import { ref, onMounted } from 'vue';var loginOut=function(){sessionStorage.removeItem("userID");sessionStorage.removeItem('loginTime');router.replace("/")
}onMounted(() => {const storedUserInfo = sessionStorage.getItem('userID');const loginTime = sessionStorage.getItem('loginTime');if (storedUserInfo && loginTime) {const currentTime = Date.now();const sessionTimeout = 2 * 60 * 1000; // 会话超时时间，这里设置为 2 分钟const elapsedTime = currentTime - parseInt(loginTime);if (elapsedTime >= sessionTimeout) {loginOut();}else{sessionStorage.setItem('loginTime', Date.now());}}
});</script>

VSCode创建VUE项目（四）增加用户Session管理

将用户信息存储或者更新到Session sessionStorage.setItem("userID",loginform.value.username); sessionStorage.setItem(loginTime, Date.now()); 获取Session信息 const storedUserInfo sessionStorage.getItem(userID); const loginTime sessionStorage.get…...

编程日记 2025/8/3 1:37:12

Spring Boot（十六）：拦截器Interceptor

拦截器的简介拦截器（Interceptor）是Spring框架中的概念，它同样适用于Spring Boot，因为Spring Boot是基于Spring框架的。拦截器是一种AOP（面向切面编程）的轻量级实现方式，它允许我…...

编程日记 2025/8/3 8:51:25

考研复习之队列

循环队列队列为满的条件队列为满的条件需要特殊处理，因为当队列满时，队尾指针的下一个位置应该是队头指针。但是，我们不能直接比较 rear 1 和 front 是否相等，因为 rear 1 可能会超出数组索引的范围。因此，我们需…...

编程日记 2025/8/2 21:29:43

sql-labs

p1 sql注入的目的是为了破坏sql语句结构，有三种参数类型，字符型（就是一个字符1或者a之类的），字符串（“hellow之类的”）型，数值型，前两个有闭合，注释符号有# …...

编程日记 2025/8/3 8:52:21

Java 集合框架：从数据结构到性能优化，全面解析集合类

Java 集合框架（Java Collections Framework，JCF）是 Java 语言中用于存储、操作和管理数据的标准库。它提供了一组通用的接口、类和方法，使开发者能够高效地操作不同类型的数据集合。本文将结合 Java 集合框架类图，介…...

编程日记 2025/7/30 4:12:52

vulkanscenegraph显示倾斜模型(5.4)-相机操纵器

前言在VSG（Vulkan Scene Graph）中，系统支持用户通过鼠标或触摸输入与三维场景进行交互，从而动态控制相机的位置和姿态，实现与三维场景的交互。VSG提供了多种相机操纵器，其中Trackball是一种常见的相机操作…...

编程日记 2025/8/3 8:54:14

两个还算好用的ppt转word和PDF转word的python脚本

PPT转word： import re from pptx import Presentation from docx import Document from docx.shared import Inches from io import BytesIO from PIL import Imagedef clean_text(text):# 使用正则表达式删除控制字符和NULL字节return re.sub(r[\x00-\x1F\x7F], ,…...

编程日记 2025/7/30 1:17:30

用PostgreSQL玩转俄罗斯方块：当SQL成为游戏引擎

当DBA开始摸鱼2025年某深夜，一位不愿透露姓名的DBA为了在监控大屏上隐藏游戏行为，竟用SQL实现了俄罗斯方块！从此，SELECT成了方向键，UPDATE成了旋转指令，DELETE成了消除大招。本文将揭秘这个疯狂项目的技术内…...

编程日记 2025/8/3 8:48:45

基于WebAssembly的浏览器密码套件

目录一、前言二、WebAssembly与浏览器密码套件2.1 WebAssembly技术概述2.2 浏览器密码套件的需求三、系统设计思路与架构3.1 核心模块3.2 系统整体架构图四、核心数学公式与算法证明4.1 AES-GCM加解密公式4.2 SHA-256哈希函数五、异步任务调度与GPU加速设计5.1 异步任务调度5.…...

编程日记 2025/8/3 8:54:14

手撕算法之`vector` 扩容、`string` 分割、链表翻转

手写常见操作：vector 扩容、string 分割、链表翻转（一）vector扩容在 C++ 中，vector 的扩容机制是动态数组实现的核心特性，直接关系到性能和内存使用效率。以下是深入剖析： 1. 扩容触发条件 vector<int> v; v.push_back(1); // 当 size() == capacity() 时触发…...

编程日记 2025/7/31 16:12:37

tauri2程序单例模式实现，二次点击桌面图标显示之前最小化的程序并聚焦

官方有这个单例的插件可以直接使用：单例 | Tauri，使用单实例插件确保 Tauri 应用程序在同一时间只运行单个实例。插件已经安装并初始化，应该可以立即正常运行。尽管如此，我们也可以使用 init() 方法来增强它的功能。插件的 init()…...

编程日记 2025/7/31 1:27:07

【AI学习笔记】Coze平台实现将Excel文档批量导入数据库全过程

背景前摇&原视频教程： 最近看到很多同学都在用Coze平台操作数据，我也想了解一下工作流的搭建和数据处理过程，但是一下子又看不懂太复杂的逻辑，于是上B站搜索相关的基础教程。 Coze官方教程： 之前有看过Coze平台…...

编程日记 2025/8/3 8:50:19

c++之迭代器

一.迭代器的基本概念 1.什么是迭代器迭代器是一种对象，它提供了一种访问容器中各个元素的方法，同时隐藏了容器内部的实现细节。简单来说，迭代器就像是一个指针，它可以指向容器中的某个元素，并且能够通过一些操作&am…...

编程日记 2025/7/28 22:47:18

Elasticsearch 索引

一、简介在 Elasticsearch 中，索引（Index）是存储相关文档的地方，类似于关系数据库中的数据库。索引是 Elasticsearch 中最重要的概念之一，用于组织和存储数据。二、索引的基本概念索引（Index&#xf…...

编程日记 2025/7/28 15:27:21

Java EE(16)——网络原理——TCP协议解析二

4.滑动窗口(效率机制) 上篇博客讲到的确认应答/超时重传/连接管理都是安全机制，但也会降低传输效率。滑动窗口就是在保证可靠传输的基础上，尽可能地提高传输效率。根据确认应答机制，客户端每发送一个请求都需要收到服务器的确认应答报文后才…...

编程日记 2025/8/3 8:53:07

解决address already in use报错：如何查看占用某个端口的程序并杀死

文章目录问题背景解决策略概述端口占用诊断步骤 1：确认占用端口的进程步骤 2：确认进程的详细信息解决端口占用问题方案 1：安全终止进程方案 2：修改应用配置最佳实践与预防措施端口使用规范开发环境配置进阶技巧批量处理端口占…...

编程日记 2025/8/3 0:02:54

linux 设置tomcat开机自启动

tomcat自启动配置 1.添加tomcat.service文件 vim /etc/systemd/system/tomcat.service 2.编辑文件内容，路径修改为自己的 [Unit] DescriptionTomcat8 Aftersyslog.target network.target remote-fs.target nss-lookup.target[Service] Typeoneshot ExecStart/us…...

编程日记 2025/8/3 8:52:20

如何配置本地git

配置本地 Git 主要包含设置用户信息、配置 SSH 密钥、设置 Git 仓库等步骤，以下是详细的配置过程： 1. 安装 Git 在开始配置之前，你需要先安装 Git。不同操作系统的安装方式有所不同： Windows：访问 Git 官方下载页面&a…...

编程日记 2025/7/27 11:06:06

VSCode 生成HTML 基本骨架

在VSCode 新建html文件中敲一个英文感叹号 ! <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><titl…...

编程日记 2025/7/30 20:59:28

蓝桥杯备考：DFS暴搜之健康的荷斯坦奶牛

这道题数据量很小很小，我们可以用dfs暴搜来搜索这是我们的决策树 #include <iostream> using namespace std; int n, m; const int N 45; int rq[N]; int g[N][N]; int cnt; int path; int ret 45; int st; bool check() {for (int i 1; i < n; i){in…...

编程日记 2025/8/3 8:55:18

android adjust 卸载与重装监测

想要洞察应用内用户的留存率，可以通过Adjust 的卸载与重装进行监测名词解释：卸载：集成完成后，卸载应用，安装状态为：卸载重装：如果应用已经卸载，但一段时间后又进行安装，则会被视为重装。 📢📢📢：adjust 文件中说到24 小时后，可以再 adjust 控制台看安装…...

编程日记 2025/8/3 1:08:00

WPF Reactive 数据绑定

文章目录 Combox 绑定List-通过枚举绑定方法一：方法二：Button 绑定TextBlock绑定NumericUpDown绑定Expander绑定checkbox绑定NumericUpDownCombox 绑定List-通过枚举绑定方法一： ViewControl using Avalonia; using Avalonia.Controls; using Avalonia.Markup.Xaml; usin…...

编程日记 2025/8/1 15:34:32

2.创建Collection、添加索引、加载内存、预览和搜索数据

milvus官方文档 milvus2.3.1的官方文档地址: https://milvus.io/docs/v2.3.x 使用attu创建collection collection必须要有一个主键字段、向量字段确保字段类型与索引类型兼容字符串类型（VARCHAR）通常需要使用 Trie 索引，而不是 AutoInd…...

编程日记 2025/7/18 16:17:11

yaffs

YAFFS（Yet Another Flash File System）是专为NAND闪存设计的日志结构文件系统，其核心原理围绕NAND闪存的特性优化数据管理。以下是其关键原理的详细说明： 1. NAND闪存适配写入限制：NAND闪存需按页写入（通…...

编程日记 2025/8/2 13:39:36

CMake-环境变量介绍

文章目录作用域获取环境变量初始化查看特殊的环境变量环境变量类似普通变量，但也有些不同，如下： 作用域在一个CMake进程中环境变量具有全局作用域获取环境变量使用ENV操作符获取环境变量，例如$ENV{<name>}&#xff…...

编程日记 2025/7/25 1:14:17

wordpress表单插件CF7调用方式

Contact Form 7(CF7)是WordPress中非常流行的表单插件，以下是其常见的调用方式： 通过短代码调用在页面或文章编辑器中添加：完成表单设置后，复制表单对应的短代码，然后在需要显示表单的页面或文章的编辑器中直接粘贴…...

编程日记 2025/8/2 13:41:10

小程序开发中的用户反馈收集与分析

我们在开发小程序的过程中根据开发过程中的代码及业务场景，以下是针对需求管理系统的用户反馈收集与分析方案设计：需求管理系统用户反馈收集与分析方案一、反馈数据模型设计 // 新增Feedback模型（app/admin/model/Feedback.php） namespace app\admin\model; use think\…...

编程日记 2025/8/2 13:41:09

【HarmonyOS Next】鸿蒙中App、HAP、HAR、HSP概念详解

【HarmonyOS Next】鸿蒙中App、HAP、HAR、HSP概念详解 （图1-1） 一、鸿蒙中App、HAP、HAR、HSP是什么？ （1）App Pack（Application Package） 是应用发布的形态，上架应用市场是以App Pa…...

编程日记 2025/7/30 4:40:31

Linux：一些命令记录

netstat -antp|grep -i 27017 | awk {print $5}| cut -d: -f1 | sort | uniq -c | sort -n 查看磁盘大小 du -sh /usr/local/* 查看剩余内存： free -m linux下获取占用CPU资源最多的10个进程，可以使用如下命令组合： ps aux|head -1;ps aux|gr…...

编程日记 2025/8/3 8:53:06

Microsoft Edge浏览器的取证分析（基于Chromium）

概述早在2019年，微软就用Chromium替换了EdgeHTML浏览器引擎，这是微软支持谷歌Chrome浏览器的一个开源项目。通过切换到Chromium，Edge与Chrome浏览器共享一个共同的架构，这意味着用于Chrome浏览器调查的取证技术也适用于Edge。 …...

编程日记 2025/7/26 1:40:14

Java面试黄金宝典6

1. 什么是 CAS 原理： CAS （Compare-And-Swap）是一种硬件级别的原子操作指令，在 Java 并发编程中常被用于实现无锁算法。其核心逻辑是：在进行数据更新时，会先将内存位置 V 的值与预期原值 A 进行比较&#x…...

编程日记 2025/7/29 19:17:13

【计算机网络】网络编程

文章目录 1. 客户端/服务器2. TCP/UDP协议3. 网络编程套接字-socket3.1 API的使用3.1 DatagramScoket类3.1 DatagramScoket类 4. 通过UDP实现回显服务器程序4.1 服务器代码4.2 客户端代码4.3 代码执行过程4.4 通过UDP实现翻译客户端 5. 通过TCP实现回显服务器5.1 服务器代码5.2…...

编程日记 2025/8/3 8:53:07

算法刷题整理合集（七）·【算法赛】

本篇博客旨在记录自已的算法刷题练习成长，里面注有详细的代码注释以及和个人的思路想法，希望可以给同道之人些许帮助。本人也是算法小白，水平有限，如果文章中有什么错误或遗漏之处，望各位可以在评论区指正出来&#xf…...

编程日记 2025/8/1 20:02:35

【开源宝藏】30天学会CSS - DAY6 第六课流光文字动画

第 0 步：项目结构 lighting-text/├─ index.html└─ style.cssindex.html：包含列表 <ul>，其中每个 <li> 放一个字母或符号。style.css：设置背景、文字样式，以及关键帧动画（lighting&#xf…...

编程日记 2025/7/31 12:39:10

C#与西门子PLC的六大通信库

C#与西门子PLC的六大通信库： 一、S7.NET S7.NET是一款开源的S7协议通信库，支持西门子S7通信。二、Sharp7 Sharp7与S7.NET一样，是一款.NET版本的S7通信库。三、Snap7 Snap7是一个开源的C通信库，支持西门子S7通信。四、Prodave P…...

编程日记 2025/8/3 8:53:08

VScode

由于centos停止了维护 ,后面使用ubuntu 在Ubuntu中用vscode 充当记事本的作用替代了centos中vim的作用后面使用vscode编辑 vscode中继续使用makefile , xshell中的cgdb进行debug (半图形写 ,半命令行debug&&运行) 官网下载地址：https://code.visuals…...

编程日记 2025/8/3 8:51:25

Linux文件系统与磁盘管理

文件系统和磁盘管理是Linux系统管理的核心组成部分，直接影响系统的性能、数据安全性和存储效率。本文将从Linux文件系统的基本概念出发，深入探讨其架构、类型、管理工具以及实际操作技巧，帮助读者全面理解并掌握这一关键领域。第一章&#x…...

编程日记 2025/8/3 8:49:37

【云馨AI-大模型】大模型的开发和应用中，Python、PyTorch和vLLM关系概括

说明 1. Python 定位：基础编程语言。作用：Python 是大模型生态系统的核心语言，几乎所有深度学习框架（如 PyTorch、TensorFlow）和工具链（如 vLLM）都通过 Python 接口提供服务。特点&#xff1a…...

编程日记 2025/8/3 8:51:24

AWS SAP学习笔记-概念

1、什么是ETL应用程序，举个例子说明？ ETL（Extract, Transform, Load）应用程序是一种用于数据处理和迁移的工具或程序，它主要负责从多个数据源提取数据，对数据进行转换和清洗，然后将处理后的数据…...

编程日记 2025/8/3 8:55:17

kotlin知识体系(三) : Android Kotlin 中的函数式编程实践指南

前言 Kotlin以函数式编程革新了Android开发，通过高阶函数、扩展函数等特性，帮助开发者构建高可维护性代码。接下来我们来看一下Kotlin 中的函数式编程的各个特性。 1. 高阶函数与 Lambda 表达式：函数作为参数或返回值在 Kotlin 中&#x…...

编程日记 2025/7/31 5:38:54

SpringBoot3+Vue3实战（Vue3快速开发登录注册页面并对接后端接口、表单项自定义校验规则、Hutool工具类）(4)

目录一、SpringBoot3Vue3实现基本增删改查。前后端通信交互、配置后端跨域请求。数据批量删除。(博客链接) 二、SpringBoot3Vue3快速开发登录、注册页面并实现对接。 （1）操作数据表employee(员工信息表)。 <1>修改employee表的字段组成。 <2&g…...

编程日记 2025/7/27 16:52:52

OpenCV图像拼接项目指南

引言图像拼接是计算机视觉领域中的一个重要应用，它可以将多张有重叠区域的图像拼接成一张全景图。这项技术广泛应用于虚拟现实、医学影像、卫星图像处理等领域。OpenCV作为一个强大的开源计算机视觉库，提供了丰富的工具和函数来实现图像拼接。本文将详…...

编程日记 2025/7/30 1:14:13

机器学习--DBSCAN聚类算法详解

目录引言 1. 什么是DBSCAN聚类？ 2. DBSCAN聚类算法的原理 3. DBSCAN算法的核心概念 3.1 邻域（Neighborhood） 3.2 核心点（Core Point） 3.3 直接密度可达（Directly Density-Reachable） 3…...

编程日记 2025/8/2 21:42:17

使用 Docker 构建 LangChain 开发环镜及 ChatOllama 示例

文章目录 Github官网简介Dockerfilerequirements.txt构建 LangChain 镜像ChatOllama 示例Ollama 示例模拟 tools Github https://github.com/langchain-ai/langchain 官网 https://python.langchain.com/docs/introduction/ 简介 LangChain 是一个用于构建 LLM 驱动的应用…...

编程日记 2025/7/29 21:04:32

持续集成与持续交付：这里有从开发到部署的全流程优化

阅读原文在上一篇中，我们深入探讨了安全测试的核心内容，强调了它在发现安全漏洞和提升系统安全性中的重要作用。接下来，我们将聚焦于持续集成（CI）与持续交付（CD），这是现代软件开发…...

编程日记 2025/8/1 22:42:32

CH32V208蓝牙内部带运放32位RISC-V工业级微控制器CH32V208CBU6、CH32V208GBU6开发板原理图和PCB

开发板 CH32V208CBU6立创格式的开发板上述链接可下载，官方文件进行了转换，使用前请仔细核对。 CH32V208CBU6原理图，上述图片为芯片部分。已进行DRC。 CH32V208CBU6 PCB三维图，上述图片为芯片部分。已进行DRC。 CH32V208GBU6开发…...

编程日记 2025/8/1 10:05:14

机器臂运动控制算法工程师面试

大厂的经验总结：一、基础概念理解请解释机器臂运动学正解和逆解的概念，并分别说明其用途。正解：已知机器臂各关节的角度（或位移），通过运动学模型计算出机器臂末端执行器在笛卡尔空间中的位置和姿态。用途在于可以根据给定的关节驱动值，预测末端的实际位置，用于运动…...

编程日记 2025/8/1 5:43:38

【一起来学kubernetes】21、Secret使用详解

Secret 的详细介绍 Secret 是 Kubernetes 中用于存储和管理敏感信息（如密码、令牌、密钥等）的资源对象。Secret的设计目的是为了安全地存储和传输敏感信息，如密码、API密钥、证书等。这些信息通常不应该直接硬编码在配置文件或镜像中&#x…...

编程日记 2025/7/22 14:44:54

Java架构师成长之路

概述本教程主要从6个方面，全面讲解Java技术栈的知识。 1.性能调优深入理解MySQL底层原理、索引逻辑，数据结构与算法。使用Explain进行优化分析MVCC原理剖析日志机制解析 2.框架源码掌握Spring底层原理带你手写一个Spring解析IOC、AOP源码、以及事…...

编程日记 2025/8/1 19:21:46

Cyberchef实用功能之-json line格式文件美化和查询

本文将介绍一下如何使用cyberchef对json line格式数据进行美化方便阅读，以及json line格式数据的批量查询操作。之前的文章介绍了json格式数据的美化和查询，即Cyberchef实用功能之-json解析美化和转换，Cyberchef实用功能之-批量提取json数据…...

编程日记 2025/7/27 17:13:12

相关文章：