parent
b1b82d6e58
commit
b714922b36
@ -0,0 +1,20 @@
|
||||
package com.ruoyi.test.domain.DO;
|
||||
|
||||
import lombok.Data;
|
||||
|
||||
@Data
|
||||
public class UserDO {
|
||||
private Long userId;
|
||||
private String name;
|
||||
private String tname;
|
||||
private Long age;
|
||||
private String sex;
|
||||
private String birthday;
|
||||
private String telephone;
|
||||
private String grade;
|
||||
private String Class1;
|
||||
private String teacherName;
|
||||
private String email;
|
||||
private String studentnumber;
|
||||
|
||||
}
|
||||
@ -1,32 +1,68 @@
|
||||
|
||||
<template>
|
||||
<div style="font-size: 12px;line-height: 60px;display: flex">
|
||||
<div style="flex: 1;font-size: 20px">
|
||||
<span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></span>
|
||||
<div class="header-container">
|
||||
<div class="left-section">
|
||||
<span :class="collapseBtnClass" class="collapse-icon" @click="collapse"></span>
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<span class="logout-btn" @click="logout">退出</span>
|
||||
</div>
|
||||
<el-dropdown style="width: 70px; cursor: pointer">
|
||||
<span>王小虎</span>
|
||||
<i class="el-icon-arrow-down" style="margin-left: 5px"></i>
|
||||
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>-->
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>个人信息</el-dropdown-item>
|
||||
<el-dropdown-item>退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
props:{
|
||||
collapseBtnClass:String,
|
||||
collapse:Boolean,
|
||||
|
||||
props: {
|
||||
collapseBtnClass: String,
|
||||
collapse: Boolean,
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
// 执行登出操作
|
||||
this.$store.dispatch("logout"); // 调用 Vuex 登出逻辑
|
||||
this.$router.push("/login"); // 跳转到登录页面
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
line-height: 60px;
|
||||
background-color: #f5f5f5;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
</style>
|
||||
.left-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #409EFF;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<el-container style="min-height: 100vh">
|
||||
<el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
|
||||
<Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="border-bottom:1px solid #ccc;">
|
||||
<Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20" justify="center">
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card class="profile-card">
|
||||
<div slot="header" class="clearfix profile-header">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<el-avatar
|
||||
:src="user.avatar || defaultAvatar"
|
||||
size="large"
|
||||
class="user-avatar"
|
||||
shape="circle"
|
||||
/>
|
||||
</div>
|
||||
<ul class="profile-info">
|
||||
<li>
|
||||
<svg-icon icon-class="user" /> 昵称
|
||||
<div class="info-value">{{ user.name || "暂无数据" }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="user" /> 姓名
|
||||
<div class="info-value">{{ user.tname || "暂无数据" }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="id-card" /> 学号
|
||||
<div class="info-value">{{ user.studentnumber || "暂无数据" }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="phone" /> 手机号码
|
||||
<div class="info-value">{{ user.telephone || "暂无数据" }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="email" /> 邮箱
|
||||
<div class="info-value">{{ user.email || "暂无数据" }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="book" /> 年级
|
||||
<div class="info-value">{{ user.grade || "暂无数据" }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="tree" /> 班级
|
||||
<div class="info-value">{{ user.class1 || "暂无数据" }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<svg-icon icon-class="user-tie" /> 辅导员
|
||||
<div class="info-value">{{ user.teacherName || "暂无数据" }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Header from "@/components/Header.vue";
|
||||
import Aside from "@/components/Aside.vue";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Profile",
|
||||
components: {Aside, Header},
|
||||
data(){
|
||||
return{
|
||||
collapseBtnClass: 'el-icon-s-fold',
|
||||
isCollapse: false,
|
||||
sideWidth: 200,
|
||||
logoTextShow: true,
|
||||
user: {
|
||||
name: "",
|
||||
tname:"",
|
||||
studentnumber: "",
|
||||
telephone: "",
|
||||
email: "",
|
||||
Class1: "",
|
||||
grade: "",
|
||||
teacherName: "",
|
||||
avatar: ""
|
||||
},
|
||||
defaultAvatar: "https://via.placeholder.com/150"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
collapse(){
|
||||
//点击收缩按钮触发
|
||||
this.isCollapse = !this.isCollapse
|
||||
if(this.isCollapse){
|
||||
this.sideWidth = 64
|
||||
this.collapseBtnClass = 'el-icon-s-unfold'
|
||||
this.logoTextShow = false
|
||||
}else{
|
||||
this.sideWidth = 200
|
||||
this.collapseBtnClass = 'el-icon-s-fold'
|
||||
this.logoTextShow = true
|
||||
}
|
||||
},
|
||||
async fetchUserProfile() {
|
||||
try {
|
||||
const token = this.$store.state.token;
|
||||
if (!token) {
|
||||
alert("用户未登录，请重新登录！");
|
||||
this.$router.push('/login');
|
||||
return false;
|
||||
}
|
||||
const response = await axios.get(`http://localhost:8080/student/homepage/getUserById`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
this.user = response.data.data;
|
||||
} catch (error) {
|
||||
this.$message.error("获取个人信息失败");
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchUserProfile();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.aside {
|
||||
background-color: rgb(238, 241, 246);
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background: linear-gradient(135deg, #ffffff, #f6f9fc);
|
||||
border: 1px solid #dfe4ea;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.profile-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #2f3542;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
margin: 20px 0;
|
||||
border: 3px solid #74b9ff;
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: scale(1.1);
|
||||
border-color: #0984e3;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.profile-info li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed #dfe4ea;
|
||||
}
|
||||
|
||||
.profile-info li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-weight: 600;
|
||||
color: #34495e;
|
||||
background: #f1f2f6;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue