山东大学项目实训Web实验室（WebLab）（九）学生个人中心

前言

项目仓库
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。
代码内容均为我和肖同学共同完成。

任务目标

设计并且编写主界面
主界面内容：

• 学生界面
  • 项目中心
    • 课程任务
    • 课程通知
    • 我的项目
  • 上传中心
  • 编辑中心
  • 组织中心
• 老师界面
  • 组织中心
  • 发布中心
  • 学生课程作业

我的任务

• 页面外观与布局设计
• 页面交互设计
• 页面编写

展示内容

• 学生个人中心

代码

view/personal-view.vue

<template>
  <el-page-header :icon="ArrowLeft" content="修改个人信息" @back="goback()" />
  <el-main>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="姓名" label-align="center" align="center" label-class-name="my-label"
        class-name="my-content" width="30px">
        <el-input type="text" v-model="selfInfo.realName" />
      </el-descriptions-item>
      <el-descriptions-item label="年级" label-align="center" align="center">
        <el-input v-model="selfInfo.grade" oninput="value=value.replace(/[^\d]/g,'')" />
      </el-descriptions-item>
      <el-descriptions-item label="班级" label-align="center" align="center">
        <el-input type="text" v-model="selfInfo.banji" />
      </el-descriptions-item>
      <el-descriptions-item label="学号" label-align="center" align="center">
        <el-input type="text" v-model="selfInfo.studentId" />
      </el-descriptions-item>
      <el-descriptions-item label="头像" label-align="center" align="center">
        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload"
          :http-request="submitImage">
          <img v-if="selfInfo.imageUrl" :src="selfInfo.imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />

          </el-icon>
          <template #tip>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </template>
        </el-upload>
      </el-descriptions-item>
      <el-descriptions-item label="个性签名" label-align="center" align="center">
        <el-input type="text" v-model="selfInfo.signature" />
      </el-descriptions-item>
      <!-- <el-descriptions-item label="组织" label-align="center" align="center"
      ><el-row>
        <el-col :span="24">
          <el-button @click="deletelesson()">退出</el-button>
          <el-button @click="addlesson()">加入</el-button
          >
        </el-col>
        <el-col :span="24">
          <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
          >Check all</el-checkbox>

          <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="city in cities" :key="city" :label="city">{{
                city
              }}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>


      </el-descriptions-item
      > -->
    </el-descriptions>
  </el-main>
  <el-footer>
    <el-row :gutter="20">
      <el-col :span="12" />
      <el-col :span="8">
        <el-button @click="submit()">保存</el-button>
      </el-col>
      <el-col :span="6" />
    </el-row>
  </el-footer>


</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { Plus, ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
import type { UploadProps } from 'element-plus'
import { request } from '@/network/request'
import { useLoginStore } from '@/stores/store'
const router = useRouter();
const store = useLoginStore();
const selfInfo = ref({
  realName: '',
  grade: '',
  banji: '',
  studentId: '',
  imageUrl: '',
  signature: ''
})
request('/weblab/user/getUserWithInfo', undefined, store.getToken)
  .then(res => {
    console.log(res.data);
    if (res.data.msg == 'success') {
      const data = res.data.pkg;
      selfInfo.value.realName = data.realName;
      selfInfo.value.grade = data.grade;
      selfInfo.value.banji = data.banji;
      selfInfo.value.studentId = data.studentId;
      selfInfo.value.imageUrl = data.headImg;
      selfInfo.value.signature = data.signature;
    }
  })
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('头像必须为JPG/PNG格式!')
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过2MB!');
    return false
  }
  return true
}
const submit = () => {
  let param = new FormData();
  // if (selfInfo.value.realName != '')
  param.append('realName', selfInfo.value.realName);
  // if (selfInfo.value.grade != '')
  param.append('grade', selfInfo.value.grade);
  // if (selfInfo.value.banji != '')
  param.append('banji', selfInfo.value.banji);
  // if (selfInfo.value.studentId != '')
  param.append('studentId', selfInfo.value.studentId);
  // if (selfInfo.value.imageUrl != '')
  param.append('headImg', selfInfo.value.imageUrl);
  // if (selfInfo.value.signature != '')
  param.append('signature', selfInfo.value.signature);
  request('/weblab/user/setUserInfo', param)
    .then(res => {
      if (res.status == 200 && res.data.msg == 'success') {
        ElMessage({
          showClose: true,
          message: '保存成功',
          type: 'success',
          grouping: true
        })
      }
    })
    .catch(error => {
      console.log(error);
    })
}
const submitImage = (file: any) => {

  let param = new FormData();
  param.append('image', file.file);
  request('/weblab/user/uploadHeadImg', param, store.getToken)
    .then(res => {
      if (res.data.msg == 'success') {
        selfInfo.value.imageUrl = res.data.pkg;
      }
    })
    .catch(error => {
      console.log(error);
    })
}


function goback() {
  router.push({ path: '/coding' });
}
</script>
<style scoped>
.my-label {
  background: var(--el-color-success-light-9);
}

.my-content {
  background: var(--el-color-danger-light-9);
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>