文章目录

  • 1 登录功能
    • 1.1 登录页面(Login.vue)
      • 1.1.1 页面布局
      • 1.1.2 初始化数据
      • 1.1.3 confirm方法
      • 1.1.4 UserController.java(登录接口)
      • 1.1.5 Login.vue
    • 1.2 登录页面的路由
      • 1.2.1 创建路由文件(router/index.js)
      • 1.2.2 注册路由器(main.js)
      • 1.2.3 路由视图(App.vue)
  • 2 退出登录
    • 2.1 展示用户名(Header.vue)
    • 2.2 logout()退出登录事件
    • 2.3 logout()增加退出确认
      • 2.3.1 MessageBox弹框
      • 2.3.2 退出提示信息
  • 3 参考附录

配置登录页面的路由,点击登录,从后台查询对应的用户,并将返回到前端的用户信息存储到sessionStorage供后续使用,然后跳转到主页。点击退出登录,跳转到登录页面,同时清空sessionStorage。

1 登录功能

1、登录页面
2、后台查询代码
3、登录页面的路由
(1)安装路由插件vue-router@3.5.4
(2)创建路由文件

1.1 登录页面(Login.vue)

在这里插入图片描述

1.1.1 页面布局

实现了一个基于 Element UI 的登录表单,包含账号和密码输入框,支持回车提交和表单验证功能。
在这里插入图片描述
1、使用el-form定义表单:
(1)绑定表单数据对象loginForm;
(2)设定表单验证规则rules;
(3)给表单设置引用名loginForm,便于在JS中调用表单方法(如验证)。
例如this.$refs.loginForm.validate()。

2、通过el

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

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

相关文章

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…

飞算科技:以自主创新引领数字科技浪潮,飞算JavaAI赋能产业智能化升级

技术创新已成为企业突破瓶颈、实现跨越式发展的核心驱动力。作为国家级高新技术企业,飞算数智科技(深圳)有限公司(简称“飞算科技”)凭借其深厚的互联网科技、大数据与人工智能技术积淀,以及在民生产业、中…

51单片机按键复位电路电压随着电容放电升高的分析

一、引言在单片机系统中,复位电路是一个至关重要的组成部分,它确保了单片机在特定情况下能够恢复到初始状态,从而避免程序运行错误或系统崩溃。对于51单片机而言,按键复位电路是一种常用的复位方式,它通过手动按下复位…

JVM学习日记(十五)Day15——性能监控与调优(二)

好了我们这一篇继续来说命令行监控指令,上一篇说了4个比较重要的指令,其中用的比较多的也就是jstat和jmap了。 jhat:堆转储分析工具 他是JDK自带的分析工具,分析我们上一篇说的jmap转存的内存快照,​​内置了一个微型…

Docker国内镜像列表

Docker 镜像源列表(8月3日更新-长期&免费)_docker国内镜像源-CSDN博客

Orange AI 管理平台单体版安装教程(Docker Compose 部署)

Orange AI 管理平台单体版安装教程(Docker Compose 部署) 本文介绍如何通过 Docker Compose 快速安装 Orange AI 管理平台单体版,适用于本地开发和测试环境。步骤简单,适合初学者和有一定运维经验的用户。 一、环境准备 已安装 …

PHP的魔术方法

一、介绍 ‌PHP魔术方法是以双下划线__开头的一组特殊方法,用于在对象生命周期、属性访问、方法调用等场景中实现自动化操作。‌简化面向对象编程。 二、17个现有的魔术方法 (一)、对象生命周期相关 1、__construct() 类的构造函数方法&a…

vue2实现类似chatgpt和deepseek的AI对话流打字机效果,实现多模型同时对话

实现多模型同时对话功能特点:1、抽离对话框成单独组件ChatBox.vue,在新增模型对比窗口时可重复利用2、通过sse与后台实时数据流,通过定时器实现打字效果3、适应深度思考内容输出,可点击展开与闭合4、可配置模型参数,本…

电脑上不了网怎么办?【图文详解】wifi有网络但是电脑连不上网?网络设置

一、问题背景 你有没有遇到过这种情况:电脑右下角的网络图标明明显示连接正常,可打开浏览器就是加载不出网页,聊天软件也刷不出新消息? 这种 "网络已连接但无法上网" 的问题特别常见,既不是没插网线&#xf…

思途Spring学习 0804

SpringBoot 核心概念与开发实践SpringBoot 是一个基于 Spring 框架的快速开发脚手架,通过约定大于配置的原则简化了传统 Spring 应用的初始化配置。其核心目标是整合 Spring 生态(如 SSM)并支持微服务架构开发。控制反转(IoC&…

Hutool工具类:Java开发必备神器

Hutool工具类使用说明Hutool是一个Java工具类库,提供了丰富的功能模块,包括字符串处理、日期时间操作、IO流、加密解密、HTTP客户端等。以下是一些常用模块的具体使用方法。字符串工具(StrUtil)字符串处理是开发中的常见需求&…

Node.js中Buffer的用法

// Buffer 与字符串的转换示例 // Buffer 是 Node.js 中用于处理二进制数据的类,字符串与 Buffer 之间的转换是常见操作// 1. 从字节数组创建 Buffer 并转换为字符串 // Buffer.from(array) 接收一个字节数值数组,创建对应的 Buffer let buf_4 Buffer.f…

【Java 基础】Java 源代码加密工具有哪些?

👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 ⛪️ 个人社区:个人社区 💞 个人主页:个人主页 🙉 专栏地址: ✅ Java 中级 🙉八股文专题:剑指大厂,手撕 J…

es的histogram直方图聚合和terms分组聚合

你提到的这两个 Elasticsearch aggs 聚合语句:第一种:histogram 直方图聚合 "aggs": {"DayDiagram": {"histogram": {"field": "${FiledName}","interval": ${TimeInterval},"extende…

基于Java的AI/机器学习库(Smile、Weka、DeepLearning4J)的实用

基于Java和AI技术处理动漫视频 以下是一些基于Java和AI技术处理动漫视频(如《亚久斗》)的实用案例和实现方法,涵盖视频分析、风格转换、角色识别等方向。每个案例均提供技术思路和关键代码片段。 视频关键帧提取 使用OpenCV提取动漫视频中的关键帧,保存为图片供后续分析…

笔记本电脑联想T14重启后无法识别外置红米屏幕

【原先是可以连接重启后不行】按照以下步骤排查和解决:✅ 1. 基础排查确认连接方式:检查是否使用 USB-C转DP/HDMI线 或 HDMI/DP直连,尝试更换线缆或接口(如换另一个USB-C口或HDMI口)。测试显示器:将红米显示…

vue+ts 基础面试题 (一 )

目录 1.Vue3 响应式原理 一、 响应式的基本概念 二、 核心机制:Proxy 和依赖追踪 三、 触发更新的过程 四、 代码示例 五、 优势总结 2.如何实现组件间通信? 一、父子组件通信 1. 父传子:Props 传递 2. 子传父:自定义事…

Spring AI实战:SpringBoot项目结合Spring AI开发——提示词(Prompt)技术与工程实战详解

🪁🍁 希望本文能给您带来帮助,如果有任何问题,欢迎批评指正!🐅🐾🍁🐥 文章目录一、前言二、提示词前置知识2.1 提示词要素2.2 设计提示词的通用技巧2.2.1 从简单开始2.2.…

【后端】Java static 关键字详解

在 Java 中,static 是一个修饰符,用于定义与类相关(而非对象实例相关)的成员。以下是核心知识点和用法:一、四大用途静态变量(类变量) 作用:属于类,而非实例。所有实例共…

算法训练营DAY50 第十一章:图论part01

98. 所有可达路径 98. 所有可达路径 【题目描述】 给定一个有 n 个节点的有向无环图,节点编号从 1 到 n。请编写一个程序,找出并返回所有从节点 1 到节点 n 的路径。每条路径应以节点编号的列表形式表示。 【输入描述】 第一行包含两个整数 N&#…