vue3-11
后端Java代码
src\router\a6router.ts文件
import { createRouter, createWebHashHistory } from 'vue-router'
import { useStorage } from '@vueuse/core'
import { Menu, Route } from '../model/Model8080'
const clientRoutes = [{path: '/login',name: 'login',component: () => import('../views/A6Login.vue')},{path: '/404',name: '404',component: () => import('../views/A6NotFound.vue')}, {path: '/',name: 'main',component: () => import('../views/A6Main.vue')}, {path: '/:pathMatcher(.*)*',name: 'remaining',redirect: '/404'}
]
const router = createRouter({history: createWebHashHistory(),routes: clientRoutes
})
//在每次路由跳转之前都会执行beforeEach里面的箭头函数,to代表要跳转的目标路由对象,from代表源路由对象
router.beforeEach((to,from)=>{if(to.name ==='main' && !serverToken.value){return '/login'}
})
//修改页面标题
router.afterEach((to,from)=>{
document.title = to.name?.toString() || ''
})
const serverRoutes = useStorage<Route[]>('serverRoutes', [])
export const serverMenus = useStorage<Menu[]>('serverMenus',[])
//把从后端返回的token中的用户名存储起来
export const serverUsername = useStorage<string>('serverUsername','')
//把从后端返回的token存储起来
export const serverToken = useStorage<string>('serverToken','')
addServerRoutes(serverRoutes.value)
export function addServerRoutes(routeList: Route[]) {for (const r of routeList) {// r.parentName:是加入的路由的父路由,是addRoute()需要的参数router.addRoute(r.parentName, {path: r.path,name: r.name,component: () => import(r.component)})}serverRoutes.value = routeList
}export function resetRoutes() {for (const r of clientRoutes) {router.addRoute(r)}serverRoutes.value= nullserverMenus.value = nullserverToken.value = nullserverUsername.value = null
}
export default router
src\views\A6Login.vue文件
<template><div class="login"><a-form :label-col="{ span: 6 }" autocomplete="off"><a-form-item label="用户名" v-bind="validateInfos.username"><a-input v-model:value="dto.username" /></a-form-item><a-form-item label="密码" v-bind="validateInfos.password"><a-input-password v-model:value="dto.password" /></a-form-item><a-form-item :wrapper-col="{ offset: 6, span: 16 }"><a-button type="primary" @click="onClick">登录</a-button></a-form-item></a-form></div>
</template>
<script setup lang="ts">
import { onMounted, ref} from 'vue'
import { Form } from 'ant-design-vue'
import { addServerRoutes ,resetRoutes,serverMenus,serverToken,serverUsername} from '../router/a6router'
import _axios from '../api/request'
import { useRequest } from 'vue-request'
import { AxiosRespToken, LoginDto, AxiosRespMenuAndRoute } from '../model/Model8080'
import { useRouter } from 'vue-router'
const router = useRouter()
const dto = ref({ username: '', password: '' })
const rules = ref({username: [{ required: true, message: '用户名必填' }],password: [{ required: true, message: '密码必填' }]
})
const { validateInfos, validate } = Form.useForm(dto, rules)
const { runAsync: login } = useRequest<AxiosRespToken, LoginDto[]>((dto) => _axios.post('/api/loginJwt', dto), { manual: true })
const { runAsync: menu } = useRequest<AxiosRespMenuAndRoute, string[]>((username) => _axios.get(`/api/menu/${username}`), { manual: true })
async function onClick() {try {await validate()const loginResp = await login(dto.value)if (loginResp.data.code === 200) {resetRoutes()const token = loginResp.data.data.tokenconsole.log(token)serverToken.value= tokenserverUsername.value = getUsername(token)const menuResp = await menu(serverUsername.value)serverMenus.value =menuResp.data.data.menuTreeconsole.log(menuResp.data.data.routeList)addServerRoutes(menuResp.data.data.routeList)router.push('/')}} catch (error) {console.error(error)}
}
function getUsername(token:string){if(!token){return ''}const s = token.split('.')return JSON.parse(atob(s[1])).sub
}
onMounted(()=>{resetRoutes()
})
</script>
<style scoped>
.login {margin: 200px auto;width: 300px;padding: 20px;height: 180px;background-color: antiquewhite;
}
</style>
src\views\A6Main.vue文件
<template><div class="a6main"><a-layout><a-layout-header><span>{{ serverUsername }} 【{{ UserInfo.name }} -{{ UserInfo.sex }}】</span></a-layout-header><a-layout><a-layout-sider><a-menu theme="dark" mode="inline"><template v-for="m1 of serverMenus"><a-sub-menu v-if="m1.children" :key="m1.id" :title="m1.title"><template #icon><a-icon :icon="m1.icon"></a-icon></template><a-menu-item v-for="m2 of m1.children" :key="m2.id"><template #icon> <a-icon :icon="m2.icon"></a-icon> </template><router-link v-if="m2.routePath" :to="m2.routePath">{{ m2.title }}</router-link><span v-else>{{ m2.title }}</span></a-menu-item></a-sub-menu><a-menu-item v-else :key="m1.id"><template #icon> <a-icon :icon="m1.icon"></a-icon></template><router-link v-if="m1.routePath" :to="m1.routePath">{{ m1.title }}</router-link><span v-else>{{ m1.title }}</span></a-menu-item></template></a-menu></a-layout-sider><a-layout-content><router-view></router-view></a-layout-content></a-layout></a-layout></div>
</template>
<script setup lang="ts">
import { serverMenus,serverUsername } from '../router/a6router'
import AIcon from '../components/AIcon3';
import {useUserInfo} from '../store/UserInfo'
import { onMounted } from 'vue';
const UserInfo = useUserInfo()onMounted(()=>{UserInfo.get(serverUsername.value)
})
</script>
<style scoped>
.a6main {height: 100%;background-color: rgb(220, 225, 255);box-sizing: border-box;
}.ant-layout-header {height: 50px;background-color: gold;border-bottom: 1px solid black;padding: 0 25px 0 0;line-height: 50px;text-align: right;
}.ant-layout-sider {background-color: gold;border-right: 1px solid black;
}.ant-layout-content {background-color: gold;
}.ant-layout-footer {background-color: darkslateblue;height: 30px;
}.ant-layout {height: 100%;
}.ant-layout-has-sider {height: calc(100% - 50px);
}
</style>
相关文章:
vue3-11
后端Java代码 src\router\a6router.ts文件 import { createRouter, createWebHashHistory } from vue-router import { useStorage } from vueuse/core import { Menu, Route } from ../model/Model8080 const clientRoutes [{path: /login,name: login,component: () > …...
【c语言】飞机大战2
1.优化边界问题 之前视频中当使用drawAlpha函数时,是为了去除飞机后面变透明,当时当飞机到达边界的时候,会出现异常退出,这是因为drawAlpha函数不稳定,昨天试过制作掩码图,下载了一个ps,改的话,…...
海康visionmaster-渲染控件:渲染控件加载本地图像的方法
描述 环境:VM4.0.0 VS2015 及以上 现象:渲染控件如何显示本地图像? 解答 思路:在 2.3.1 中,可以通过绑定流程或者模块来显示图像和渲染效果。因此,第一步, 可以使用在 VM 软件平台中给图像源模…...
【SD】一致性角色 - 同一人物 不同姿势 - 2
首先生成4张不同姿势的图片 masterpiece,high quality,(white background:1.6),(simple background:1.4),1gril,solo,black footwear,black hair,brown eyes,closed mouth,full body,glasses,jacket,long hair,long sleeves,lookig at viewer,plaid,plaid skirt,pleated shirt,…...
摩尔线程S80对于软件的支持
摩尔线程对软件的支持 时间:2024年1月1日 显卡型号:MTT S80 主板型号:七彩虹 igame z590 火神 V20 CPU: intel core i5 10400f 内存: 海盗船3600 16*2 存储: 致态1Tb nvme 显卡的驱动是最新的。 游戏 S…...
基数排序 RadixSort
基数排序是一种非比较型整数排序算法,其原理是将整数按位数切割成不同的数字,然后按每个位数分别比较。由于整数也可以表达字符串(比如名字或日期)和特定格式的浮点数,所以基数排序也不是只能使用于整数 . 动态演示 :…...
Maven下载和安装的详细教程
文章目录 一、Maven下载和安装1.1 下载 Maven1.2 配置环境变量 参考资料 一、Maven下载和安装 1.1 下载 Maven 打开 Maven 的官方网站Maven – Download Apache Maven,下载最新版本的 Maven 在可选择的版本中,不同版本的区别在于: binary是已经编译过的…...
申请虚拟VISA卡Fomepay教程
fomepay 用下面的注册链接直达 https://gpt.fomepay.com/#/pages/login/index?dS21BA1 或者扫描下面图片的二维码直达注册 注册后尽量随用随充值不建议放大量现金在里面。...
java常见面试题:什么是装箱和拆箱?装箱和拆箱有哪些应用场景
装箱和拆箱是计算机科学中常用的术语,主要用于描述将数据从一种类型转换为另一种类型的操作。 装箱是将值类型转换为引用类型的过程。在装箱时,需要了解编译器内部的操作。首先,在托管堆中分配好内存,分配的内存量是值类型的各个…...
【map】【滑动窗口】【字典树】C++算法:最长合法子字符串的长度
作者推荐 动态规划 多源路径 字典树 LeetCode2977:转换字符串的最小成本 本文涉及的基础知识点 C算法:滑动窗口总结 字典树 map 离线查询 map map可以分成有序(单调)map和无序(哈希)map。还可分成单键map和多键map(允许重复的键)。本文用…...
机器学习部分相关概念
数据集(Data Set)即数据的集合,每一条单独的数据被称为样本(Sample)。 对于每个样本,它通常具有一些属性(Attribute)或者特征(Feature), 特征所具体取得值被称为特征值(Feature Value)。 西瓜数据集 色泽根蒂纹理青绿稍蜷模糊乌黑蜷缩清晰 …...
Apache DolphinScheduler 3.1.9 版本发布:提升系统的稳定性和性能
🚀我们很高兴宣布,Apache DolphinScheduler 的最新版本 3.1.9 已正式发布!此版本在 3.1.8 的基础上进行了关键的 bug 修复和文档更新,共计修复了 14 个 bug 和改进了 3 个文档。 主要更新亮点 本次更新重点解决了以下几个关键问题…...
go-carbon v2.3.1 发布,轻量级、语义化、对开发者友好的 Golang 时间处理库
carbon 是一个轻量级、语义化、对开发者友好的 golang 时间处理库,支持链式调用。 目前已被 awesome-go 收录,如果您觉得不错,请给个 star 吧 github.com/golang-module/carbon gitee.com/golang-module/carbon 安装使用 Golang 版本大于…...
R_handbook_作图专题
ggplot基本作图 1 条形图 library(ggplot2) ggplot(biopics) geom_histogram(aes(x year_release),binwidth1,fill"gray") 2 堆砌柱状图 ggplot(biopics, aes(xyear_release)) geom_bar(aes(fillsubject_sex)) 3 堆砌比例柱状图 ggplot(biopics, aes(xyear_rele…...
关于Python里xlwings库对Excel表格的操作(二十五)
这篇小笔记主要记录如何【如何使用xlwings库的“Chart”类创建一个新图表】。 前面的小笔记已整理成目录,可点链接去目录寻找所需更方便。 【目录部分内容如下】【点击此处可进入目录】 (1)如何安装导入xlwings库; (2…...
2024 年软件工程将如何发展
软件开发目前正在经历一场深刻的变革,其特点是先进自动化的悄然但显着的激增。这一即将发生的转变有望以前所未有的规模简化高质量应用程序的创建和部署。 它不是单一技术引领这一演变,而是创新的融合。从人工智能(AI) 和数字孪生技术,到植根…...
【Git】git基础
Git 命令 git config --globle user.name ""git config --globle user.email ""git config -lgit config --globle --unset []git add []git commit -m ""]git log//当行且美观 git log --prettyoneline//以图形化和简短的方式 git log --grap…...
Linux中账号和权限管理
目录 一.用户账号和组账号: 1.用户账号类型: 2.组账号类型: 3.系统区别用户的方法 : 4.用户账号文件: 二.Linux中账户相关命令: 1.useradd: 2.passwd: 3.usermod:…...
Resnet BatchNormalization 迁移学习
时间:2015 网络中的亮点: 超深的网络结构(突破1000层)提出residual模块使用Batch Normalization加速训练(丢弃dropout) 层数越深效果越好? 是什么样的原因导致更深的网络导致的训练效果更差呢…...
Unity检测地面坡度丨人物上坡检测
Unity检测地面坡度 前言使用 代码 前言 此功能为,人物在爬坡等功能时可以检测地面坡度从而完成向某个方向给力或者完成其他操作 使用 其中我们创建了脚本GradeCalculation,把脚本挂载到人物上即可,或者有其他的使用方式,可自行…...
SASS循环
<template><div><button class"btn type-1">默认按钮</button><button class"type-2">主要按钮</button><button class"type-3">成功按钮</button><button class"type-4">信息…...
Java超高精度无线定位技术--UWB (超宽带)人员定位系统源码
UWB室内定位技术是一种全新的、与传统通信技术有极大差异的通信新技术。它不需要使用传统通信体制中的载波,而是通过发送和接收具有纳秒或纳秒级以下的极窄脉冲来传输数据,从而具有GHz量级的带宽。 UWB(超宽带)高精度定位系统是一…...
系列十一、解压文件到指定目录
一、解压文件到指定目录 1.1、需求 Linux的/opt目录有一个文件zookeeper-3.4.11.tar.gz,我现在想把该文件解压至/usr/local/目录,那么应该怎么做呢? 语法:tar -zxvf xxx -C /usr/local/ tar -zxvf zookeeper-3.4.11.tar.gz -C /u…...
PHP Swoole Client
PHP常用socket创建TCP连接,使用CURL创建HTTP连接,为了简化操作,Swoole提供了Client类用于实现客户端功能,并增加了异步非阻塞模式,让用户在客户端也能使用事件循环。 作为客户端使用,Swoole Client可以在F…...
《QDebug 2023年12月》
一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.Q_REVISION 标记的信号槽或者 REVISION 标记的属性,在子类中访问 Q_REVISION 是 Qt 用来做版本控制的一个宏。以 QQuickWindow 为例,继承后去访问 REVISION 标记的 opacity 属性或者 Q_REVISION…...
sklearn 中matplotlib编制图表
代码 # 导入pandas库,并为其设置别名pd import pandas as pd import matplotlib.pyplot as plt# 使用pandas的read_csv函数读取名为iris.csv的文件,将数据存储在iris_data变量中 iris_data pd.read_csv(data/iris.txt,sep\t)# 使用groupby方法按照&quo…...
【Docker-Dev】Mac M2 搭建docker的redis环境
Redis的dev环境docker搭建 1、前言2、官方文档重点信息提取2.1、创建redis实例2.2、使用自己的redis.conf文件。 3、单机版redis搭建4、redis集群版4.1、一些验证4.2、一些问题 结语 1、前言 本文主要针对M2下,相应进行开发环境搭建,然后做一个文档记录…...
docker +gitee+ jenkins +maven项目 (一)
jenkins环境和插件配置 文章目录 jenkins环境和插件配置前言一、环境版本二、jenkins插件三、环境安装总结 前言 现在基本都是走自动化运维,想到用docker 来部署jenkins ,然后jenkins来部署java代码,做到了开箱即用,自动发布代码…...
IDEA 开发中常用的快捷键
目录 Ctrl 的快捷键 Alt 的快捷键 Shift 的快捷键 Ctrl Alt 的快捷键 Ctrl Shift 的快捷键 其他的快捷键 Ctrl 的快捷键 Ctrl F 在当前文件进行文本查找 (必备) Ctrl R 在当前文件进行文本替换 (必备) Ctrl Z 撤…...
Ubuntu Desktop 死机处理
Ubuntu Desktop 死机处理 当 Ubuntu Desktop 死机时,除了长按电源键重启,还可以使用如下两种方式处理。 方式1:ctrlaltFn 使用 ctrl alt F3~F6: 切换到其他 tty 命令行。 执行 top 命令查看资源占用最多的进程,然后使用 kill…...
Hermite矩阵
Hermite矩阵 文章目录 Hermite矩阵一、正规矩阵【定义】A^H^矩阵【定理】 A^H^的运算性质【定义】正规矩阵、特殊的正规矩阵【定理】与正规矩阵酉相似的矩阵也是正规矩阵【定理】正规的上(下)三角矩阵必为对角矩阵【定义】复向量的内积【定理】Schmitt正交化 二、酉矩阵&#x…...
HTML 实操试题(二)
创建一个简单的HTML文档: 包含<!DOCTYPE html>声明。包含<html>标签,并设置lang属性为英语。包含<head>标签,其中包含<meta charset"UTF-8">和一个自定义的页面标题。包含<body>标签,其…...
MongoDB 面试题
MongoDB 面试题 1. 什么是MongoDB? MongoDB是一种非关系型数据库,被广泛用于大型数据存储和分布式系统的构建。MongoDB支持的数据模型比传统的关系型数据库更加灵活,支持动态查询和索引,也支持BSON格式的数据存储,这…...
LeetCode 1154. 一年中的第几天:2023年最后一道每日一题
【LetMeFly】1154.一年中的第几天:2023年最后一道每日一题 力扣题目链接:https://leetcode.cn/problems/day-of-the-year/ 给你一个字符串 date ,按 YYYY-MM-DD 格式表示一个 现行公元纪年法 日期。返回该日期是当年的第几天。 示例 1&…...
《深入理解JAVA虚拟机笔记》OutOfMemoryError 异常
在《Java 虚拟机规范》的规定里,除了程序计数器外,虚拟机内存的其他几个运行时区域都有发生 OutOfMemoryError (下文称 OOM)异常的可能。 Java堆溢出 Java 堆用于储存对象实例,我们只要不断地创建对象,并…...
R306指纹识别模块指令系统
一:指令集 1. GR_GetImage 指令代码:01H 功能:从传感器上读入图像存于图像缓冲区 2. GR_GenChar 指令代码:02H 功能:根据原始图像生成指纹特征存于 CharBuffer1 或 CharBuffer2 3. GR_Match 指令代码ÿ…...
redis的搭建及应用(三)-Redis主从配置
Redis主从配置 为提升Redis的高可用性,需要搭建多个Redis集群以保证高可用性。常见搭建方式有:主从,哨兵集群等,本节我们搭建一主二从的多Redis架构。 redis主从安装1主2从的方式配置,以端口号为redis的主从文件夹。 主…...
Java学习,一文掌握Java之SpringBoot框架学习文集(1)
🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论…...
javaWeb学生信息管理系统2
一、学生信息管理系统SIMS 一款基于纯Servlet技术开发的学生信息管理系统(SIMS),在设计中没有采用SpringMVC和Spring Boot等框架。系统完全依赖于Servlet来处理HTTP请求和管理学生信息,实现了信息的有效存储、检索和更新…...
Linux Shell 019-文本行处理工具sed
Linux Shell 019-文本行处理工具sed 本节关键字:Linux、Bash Shell、文本行处理工具 相关指令:sed、 sed介绍 sed是Stream Editor(流编辑器)的缩写,简称流编辑器;用来处理文件的。sed是一行一行读取文件…...
Ubuntu中fdisk磁盘分区并挂载、扩容逻辑卷
Ubuntu中fdisk磁盘分区并挂载、扩容逻辑卷 一:fdisk磁盘分区并挂载1.查看磁盘分区信息2.分区3.强制系统重新读取分区(避免重启系统)4.格式化分区5.创建挂载目录6.设置开机自动挂载:7.验证并自动挂载(执行了该命令不需要重启系统)8.查看挂载007.异常情况处…...
【leetcode】栈与队列总结
本文内容来自于代码随想录 栈 用栈实现队列 两个栈实现队列。思路:两个栈分别表示入栈和出栈。 入队:直接入栈出队: a. 出栈为空,先把入栈中的元素全部放到出栈中(相当于反过来,这样在出栈的时候先进的元…...
[EFI]HP Spectre 13 v102nl电脑 Hackintosh 黑苹果efi引导文件
硬件型号驱动情况主板 HP Spectre 13 v102nl 处理器Intel Core i7-7500U (7th gen - Kaby Lake)已驱动内存8 GB LPDDR3-1866 SDRAM已驱动硬盘512 GB Toshiba NVMe™ M.2 SSD已驱动显卡Intel HD Graphics 620已驱动声卡Conexant CX8200 (0x2008)已驱动网卡I1211 Gigabit Etherne…...
【Pytorch】学习记录分享8——PyTorch自然语言处理基础-词向量模型Word2Vec
【Pytorch】学习记录分享7——PyTorch自然语言处理基础-词向量模型Word2Vec 1. 词向量模型Word2Vec)1. 如何度量这个单词的?2.词向量是什么样子?3.词向量对应的热力图:4.词向量模型的输入与输出![在这里插入图片描述](https://img-blog.csdni…...
【Kotlin 】协程
Kotlin协程 背景定义实践GlobalScope.launchrunBlocking业务实践 背景 在项目实践过程中,笔者发现很多异步或者耗时的操作,都使用了Kotlin中的协程,所以特地研究了一番。 定义 关于协程(Coroutine),其实…...
用Xshell连接虚拟机的Ubuntu20.04系统记录。虚拟机Ubuntu无法上网。本机能ping通虚拟机,反之不能。互ping不通
先别急着操作,看完再试。 如果是:本机能ping通虚拟机,反之不能。慢慢看到第8条。 如果是:虚拟机不能上网(互ping不通),往下一直看。 系统是刚装的,安装步骤:VMware虚拟机…...
人机对话--关于意识机器
人机对话–关于意识机器 这段内容是我和《通义千问》的对话。这本身展示的是人工智能的效果,同时这里面的内容也有人工智能相关,与各位分享。 我:阿尼尔赛斯 《意识机器》这本书写的是什么? 通义千问: 阿尼尔赛斯教…...
八股文打卡day16——计算机网络(16)
面试题:TCP连接是如何确保可靠性的? 我的回答: 1.数据分块控制。应用数据被分成被认为最适合传输的数据块大小,再发送到传输层,数据块被称为数据报文段或数据段。 2.序列号和确认应答。TCP为每一个数据包分配了一个序…...
Java Object浅克隆深克隆
对象克隆 把A对象的属性值完全拷贝给B对象,也叫对象拷贝,对象复制。 实现Cloneable接口,表示当前类的对象就可以被克隆,反之,表示当前类的对象就不能克隆。 如果一个接口里面没有抽象方法,表示当前的接口…...
概率的 50 个具有挑战性的问题 [8/50]:完美的桥牌
一、说明 我最近对与概率有关的问题产生了兴趣。我偶然读到了弗雷德里克莫斯特勒(Frederick Mosteller)的《概率论中的五十个具有挑战性的问题与解决方案》)一书。我认为创建一个系列来讨论这些可能作为面试问题出现的迷人问题会很有趣。每篇…...