首页 > 编程语言 >2024年1月Java项目开发指南15:vue3+AntDesignVue 设计页面

2024年1月Java项目开发指南15:vue3+AntDesignVue 设计页面

时间:2024-01-26 21:37:30浏览次数:44  
标签:Java 登录 AntDesignVue value 2024 token 组件 const 页面

image

考虑到有的同学对vue3不熟悉,因此,我把ControlView.vue这个页面清空,我们从0开始写。

<template style="width: 100%">

</template>

<script setup>

</script>
<style scoped>

</style>

搭建页面的基本框架

image

image

展开代码后复制你需要的代码。比如我选择上中下这种结构,我就复制上中下这种结构的代码

image

image

image

运行查看效果

image

显然,这个样式依旧有一点问题,需要我们补充一点样式。
我们希望他他占满整个页面(100vh)

image

image

image

引用组件

image

Header设计

关于header的布局,我们使用ant-design-vue中的栅格组件
image

image

image

当然还是要做一些细节调整

左边的栅栏内容靠左显示,右边的栅栏内容靠右显示

image

image

我们希望:

右边,用户没有登录的时候,显示登录按钮,用户登录的时候,显示头像和昵称

我们准备两个div,一个是存放已登录显示的内容,一个存放未登录显示的内容

image

未登录的时候就显示这个登录按钮就行了,麻烦点的是登录后要显示的内容。

我们在父组件(ControlView.vue)里面去判断它有没有登录

怎么判断用户有没有登录呢,我们之前写登录的时候,用户登录成功,会在本地缓存一个token,现在,我们把这个token读取出来,看这个token包含的信息就行了。

image

有token就是登录了,没token就是没登录,这是第一个判断

有token但是这个token不一定是有效token,因此我们要解密这个token,然后判断token是否有效。

你怎么加密的就怎么解密,方式可以和我不一样的。

image

例如我解密token后,提取时间,判断登录是否过期,在提取身份,判断用户是否有权限访问这个页面。

设置一个变量为isLoginIn,用来记录我们判断的登录状态

image

image

判断用户是否登录的事情就解决了。

我建议的话,你别整的我这么麻烦。保存的时候不加密了,需要用的时候就不用解密了。练习嘛,不用太为难自己了,等熟练了之后再去考虑安全性的问题吧。

父组件传值子组件

接下来要做的就是父组件给子组件传值——父组件告诉子组件,到底登录没有

首先要设置子组件
image

然后再去父组件设置
image

子组件获取到登录状态后,就可以根据登录状态来控制到底显示啥了
(使用v-if 和v-else)

image

如下图,登录了的话,就不会显示这个登录按钮了
image

接下来就是登录后显示内容的设计了

添加一个文字头像吧,先准备好用户信息

image

然后使用UI组件

image

image

image

好,我们再增加一个退出登录的功能

image

这里我们使用了选择框,点击退出登录,清除token,并跳转到登录页面。

好,现在我把这个文件的完整代码贴出来。

<script setup>
import {useRouter} from "vue-router";

import {defineProps, onMounted, ref} from 'vue';

onMounted(() => {
  console.log(props.isLoginIn)
})
const props = defineProps({
  isLoginIn: {
    type: Boolean,
    required: true
  }
});
const router = useRouter();
const navigateToLogin = () => {
  router.push("/login")
}
const user = ref({
  avatar: '',
  nickname: localStorage.getItem("userNickname")
});
const SelectValue = ref([])
const selectOptions = [
  {value: "用户昵称", label: user.value.nickname},
  {value: "个人信息", label: "个人信息", disabled: true},
  {value: "消息通知", label: "消息通知", disabled: true},
  {value: "退出登录", label: "退出登录"},

]
const selectHandleChange = (value, all) => {
  if (value === "退出登录") {
    localStorage.removeItem("token")
    router.push("/login")
  }
}
const placement = ref('bottomRight')
</script>

<template>
  <a-row>
    <a-col :span="8" style="text-align: left">
      <h3> 控制中心</h3>
    </a-col>
    <a-col :span="16" :offset="0" style="text-align: right">
      <div v-if="!isLoginIn">
        <a-button type="primary" danger @click="navigateToLogin">登录</a-button>
      </div>
      <div v-else>
        <a-avatar style="color: #f56a00; background-color: #fde3cf">{{ user.nickname.charAt(0) }}</a-avatar>
        <a-select :bordered=false :showArrow=false :showSearch=false size="small"  :dropdown-match-select-width=true :placement=placement
                  v-model:value="SelectValue"
                  style="width:50%;max-width: 100px;text-align:center;"
                  :placeholder=user.nickname
                  :options="selectOptions"
                  @change="selectHandleChange"
        ></a-select>
      </div>

    </a-col>
  </a-row>
</template>

<style scoped>

</style>

我们的header先做到这里,接下来,我们做content。就写在下一篇笔记吧

标签:Java,登录,AntDesignVue,value,2024,token,组件,const,页面
From: https://www.cnblogs.com/mllt/p/17990509/project202401-15

相关文章

  • java IO
    I/O流什么事文件文件就是保存数据的地方文件流文件在程序中是以流的方式来操作的流:数据在数据源(文件)和程序(内存之间)经历的路径输入流:数据从数据源(文件)到程序(内存)的路径输出流:数据从程序(内存)到数据源文件的路径1.常用创建文件的操作创建文件对象相关的......
  • 【随笔】2024年1月1日
    关于Febonacci的一些事学了矩阵加速递推遂顺手给你谷的板子题又过了一遍对于“已知递推式求转移矩阵”的方法仍有疑惑与巨佬WPP交流并丢给WPP一道题请他口糊题:求Febonacci前n项的和(n<=1e18)正解是把S(n)(表示前n项的和)塞到矩阵里一起转移答案矩阵F(n)={f(n-1)f(n-2)S(n......
  • 1.JAVA基础-JDK的介绍
    Java语言语言:人与人交流沟通的表达方式。计算机语言:人与计算机之间进行信息交流沟通的一种特殊语言。Java语言是美国Sun公司(StanfordUniversityNetwork)在1995年推出的计算机语言。Java之父:詹姆斯·高斯林(JamesGosling)。Java语言的三个版本⚫JavaSE⚫JavaME......
  • 2024 蓝桥杯模拟赛 1
    P8761[蓝桥杯2021国BC]大写#include<bits/stdc++.h>usingnamespacestd;#defineintlonglongusingvi=vector<int>;usingi32=int32_t;usingpii=pair<int,int>;i32main(){strings;cin>>s;for(auto&i......
  • Hello 2024
    AWalletExchange题目大意Alice有a个硬币,Bob有b个硬币,双方轮流进行以下操作:1.与对方交换硬币,或者保留现有硬币.2.取出一个硬币无法进行操作的人判定为输,总是从Alice开始操作问:哪位获得胜利解题思路我们可以把游戏看作是轮流取硬币,取得最后一个硬币的为胜利那......
  • PKUWC 2024 Day 1
    大致的题面如下:T1Alice和Bob玩游戏。有一个长度为\(N\)的字符串\(S\),由L和R组成。Alice先手,Bob后手。他们可以:选择一个\(i\)。如果\(S_i\)=L,那么只保留\(S_{1\simi-1}\)。如果\(S_i\)=R,那么只保留\(S_{i+1,|S|}\)。第一个遇到\(S\)空了的输掉。问谁会......
  • java集合知识
    集合概述Java集合概览Java集合,也叫作容器,主要是由两大接口派生而来:一个是Collection接口,主要用于存放单一元素;另一个是Map接口,主要用于存放键值对。对于Collection接口,下面又有三个主要的子接口:List、Set和Queue。说说List,Set,Queue,Map四者的区别?List(对付......
  • 2024年1月Java项目开发指南14:关于post中的body和param以及java中的@RequestBody和@Req
    在HTTP请求中,POST方法通常用于向服务器发送数据,这些数据可以在请求的body中,也可以在URL的param中。不过,这两者的使用方式和适用场景是不同的。Body:在POST请求中,body主要用于包含要发送到服务器的数据。这些数据通常是表单数据、JSON数据或其他类型的数据。当你需要在请求体中发送......
  • 基于Java和Vue开发的企业Ehr数智化人力管理系统源码+配套文档(提升人力资源管理效率的
    写在前面:随着企业规模的不断扩大和人力资源管理的日益复杂,传统的人力资源管理方式已经无法满足现代企业的需求。为了提高管理效率、优化资源配置、降低人力成本,越来越多的企业开始引入eHR人力资源管理系统。本文将重点介绍eHR系统在招聘管理、人事管理、考勤管理、绩效管理、社保......
  • SMU 2024 winter round1
    7-1最好的文档#include<bits/stdc++.h>usingnamespacestd;usingi32=int32_t;i32main(){ios::sync_with_stdio(false),cin.tie(nullptr);cout<<"Goodcodeisitsownbestdocumentation.";return0;}7-2自动编程#includ......