山东大学项目实训（二）---登录退出的实现

最新推荐文章于 2024-09-17 10:07:04 发布
最新推荐文章于 2024-09-17 10:07:04 发布
阅读量101 收藏
点赞数
分类专栏： 项目实训 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L25809/article/details/125109707
版权
本文介绍了一个基于Vue.js和ElementUI的登录退出功能实现。详细讲解了页面设计，包括登录和主页的布局；技术细节如Form表单验证、数据校验和路由跳转；以及登录请求的发送、双Token的获取与管理，退出功能的实现，和自动登录的处理逻辑。
摘要由CSDN通过智能技术生成

目录

一、页面展示

1、登录页面

2、主页

二、技术实现

1、页面设计

2、技术细节

3、请求的发送、双Token的获取、路由的跳转

4、退出

5、自动登录

三、下一篇

一、页面展示

1、登录页面

2、主页

二、技术实现

1、页面设计

登录页面整体布局使用element-ui中的Container布局容器中的Header-Main，Header进行顶部的展示，Main主要是登录表单的展示。

登录表单使用Form表单，通过el-input进行账号密码的数据获取，通过el-button绑定点击事件，进行登录请求的发送、双Token的获取、路由的跳转。

主页的页面整体布局使用Container布局容器的Header-Aside-Main，Header进行顶部的展示，与登录页面不同的主要是多了两个按钮，分别进行修改密码操作和退出操作

最低0.47元/天 解锁文章
L25809
关注
专栏目录
vue项目实现登录/退出功能（包括token机制）
qq_51476492的博客
06-13 6913
vue登录界面设计
山东大学项目实训（一）---开题
L25809的博客
06-03 203
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
山东大学软件学院项目实训weblab-4
xjunjin的博客
03-19 206
前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 用pinia、router和localStorage实现本地的注册、登录、重置密码、登出等功能。 store.ts import { defineStore } from "pinia"; export const useLoginStore = defineStore({ id: "login", state: () => ({ isLogin: Number(lo
山东大学软件学院项目实训（一、二）
qq_63291405的博客
04-23 616
使用Flask框架的自定义语音转文本接口的实现。它使用Base64编码的音频文件，并将其转换为音频文件，然后使用语音识别服务进行转换。
山东大学软件学院项目实训weblab-6
xjunjin的博客
03-29 127
前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 实现登出和忘记密码功能 登出 function goto_codingview() { ElMessageBox.confirm( '是否确认退出?', '退出提示', { confirmButtonText: '确认', cancelButtonText: '取消', }
山东大学项目实训-地图圈系统-web开发（5）
qq_44836727的博客
04-21 255
山东大学项目实训-地图圈系统-web开发（5）一、管理员主页的设计二、用户主页的设计三、用户_操作信息页面设计四、用户_个人信息页面设计 一、管理员主页的设计 本次文章先来填上次挖的坑…… 以管理员身份登录进入主页： 上次文章讲到，本主页设计是由顶部栏-侧边栏-内容主体三部分组成。顶部栏具有主页说明，即管理员端说明，以及一个退出按钮。 点击登录时，会在本地的sessionStorage中存储token、username等信息，而点击退出，会清空掉目前所有存储在sessionStorage的变量。代码如下
山东大学项目实训二——python+opencv实现人脸识别
fangjiayou的博客
03-07 1008
python+opencv实现人脸识别 安装OpenCV 1.读取文件&灰度转换 #导入cv模块 import cv2 as cv #读取图片 img = cv.imread('face1.jpg') #灰度转换 gray_img = cv.cvtColor(img,cv.COLOR_BGR2GRAY) #显示灰度图片 cv.imshow('gray',gray_img) #保存灰度图片 cv.imwrite('gray_face1.jpg',gray_img) #显示图片 cv.imshow(
山东大学软件学院项目实训weblab-12
xjunjin的博客
05-17 156
前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 添加上传用户信息、项目管理以及组织管理模块。 通过请求和响应拦截器验证token instance.interceptors.request.use( function (config) { if(config.headers!.access_token==''){ config.headers!.access_token=store.getT
山东大学软件学院项目实训-创新实训-SDUMeeting(八)
m0_54743939的博客
06-08 100
n方diffie hellman实现
山东大学项目实训（二十七）—— 微信小程序开发总结，一年时间真的可以改变一个人很多
热门推荐
bhegi_seg的博客
06-22 1万+
到目前为止，微信小程序开发，到此就算是结束了，其中实现了不少功能，如下：1.1 角色与权限（后端同学实现的，写这个方便介绍后面的功能） 平台可以配置不同的用户角色并授予其不同的操作权限。每个用户在使用平台时都需要指定一个角色。1.2 可视范围——根据角色绑定的权限菜单 全体职工可以查看自己上报的事件（待审核、已通过、被驳回）。 质控人员可以查看所有的事件（待审核、待评价、已通过、已驳回、已评价）。 职能人员可以查看自己/自己部门负责的事件（待整改、待评价、已评价）。 各科室医务人员可以查看本科室相关的事件（
山东大学项目实训（三十）—— 主页的修改密码和退出登录
long99920的博客
06-08 351
修改密码和退出登录
项目实训-中医药知识图谱7
Santan1412的博客
06-12 381
前端主界面部分代码
前端 + 接口请求实现 vue 动态路由
a123456234的博客
09-12 1445
后端接口返回路由配置：获取用户的权限信息及路由信息。动态加载组件：使用异步组件方式加载指定路径的组件。动态添加路由：根据权限信息动态添加路由。路由守卫：使用或添加路由。这样可以确保应用根据用户的权限动态加载相应的路由，增强安全性与灵活性。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 446
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
利用 Vue.js 自定义指令实现权限控制：问题解析与最佳实践20240912
Narutolxy的博客
09-12 796
vue3 ECharts DOM
Vue Router push方法的使用
ithongchou的博客
09-13 774
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
基于Vue 3组合函数的分页、搜索与排序实践 —— nbsaas-boot项目的实际应用
最新发布
nbsaas-boot基于Request-Response的企业级快速开发框架
09-17 999
Vue 3的组合函数是用于封装功能逻辑的一种模式。与Vue 2的选项式API不同，组合函数允许开发者将组件逻辑集中封装在独立的函数中，便于在不同的组件间共享。在大型项目中，像这样的电商系统，组件往往需要实现复杂的数据交互逻辑，例如分页、搜索、排序等功能。如果将这些功能重复写在多个组件中，代码将会变得臃肿且难以维护。组合函数可以有效解决这一问题。
Vue2与Vue3的区别
qq_45464944的博客
09-11 1057
什么是Vue2？ 什么是Vue3？ Vue2与Vue3区别是什么？
"山东大学光电工程实训-基于投影仪的光学实验报告与总结
山东大学光电工程实训课程中的基于投影仪的基本光学实验涉及了商用典型投影机的拆解和拼装复原，以及对投影机工作原理、结构组成和关键部件的了解。实验还包括了对3LCD-X型合色合光棱镜工作原理的认知，观察各色光的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值