个人信息页面

src/components/socre.vue

@@ -5,6 +5,7 @@
     <el-col :span="16">
       <el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
         <el-table-column prop="rank" label="Ranking" width="180" />
+        <el-table-column prop="id" label="Userid" width="180" />
         <el-table-column prop="username" label="User" width="180" />
         <el-table-column prop="score" label="Score" />
       </el-table>
@@ -48,4 +49,4 @@ export default {
   --el-table-tr-bg-color: var(--el-color-success-light-9);
 }
 
-</style>
+</style>

src/components/userinfo.vue

@@ -0,0 +1,150 @@
+<template>
+
+  <el-row class="row-bg" justify="center">
+    <el-col :span="16">
+      <div class="userinfo">
+        <h1>{{name}}</h1>
+        <h1>{{rank}}位</h1>
+        <h1>{{score}}分</h1>
+        <h1>用户id：{{id}}</h1>
+      </div>
+      <el-button @click="editUserVisible=true" type="primary" circle >
+        <el-icon>
+        <edit/>
+      </el-icon></el-button>
+
+      <el-dialog v-model="editUserVisible" title="编辑信息">
+
+        <el-form :model="userData"  ref="vForm" label-position="left" label-width="80px" size="default">
+          <el-form-item label="用户名" prop="name">
+            <el-input v-model="userData.name" placeholder="用户名" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="邮箱"
+                        :rules="[
+        {
+          required: true,
+          message: 'Please input email address',
+          trigger: 'blur',
+        },
+        {
+          type: 'email',
+          message: 'Please input correct email address',
+          trigger: ['blur', 'change'],
+        },
+      ]" prop="email" disabled>
+            <el-input v-model="userData.email" placeholder="邮箱"></el-input>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="phone">
+            <el-input v-model="userData.affiliation" placeholder="联系方式"></el-input>
+          </el-form-item>
+          <el-form-item label="所在地" prop="country">
+            <el-input v-model="userData.country" placeholder="所在地"></el-input>
+          </el-form-item>
+          <el-form-item label="网站" prop="website">
+            <el-input v-model="userData.website" placeholder="website"></el-input>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" @click="editUser">提交</el-button>
+      </el-dialog>
+      <h1 style="color: #FFFFFF">解题数</h1>
+      <div>
+        <el-table :data="formData" style="width: 100%" stripe>
+          <el-table-column prop="challenge_name" label="题目" width="180" />
+          <el-table-column prop="score" label="分数" width="180" />
+          <el-table-column prop="created_at" label="提交时间" />
+        </el-table>
+      </div>
+
+
+</el-col>
+  </el-row>
+
+</template>
+
+<script>
+import axios from "axios";
+import dayjs from 'dayjs';
+
+export default {
+  data(){
+    return{
+      userData:{
+        affiliation: "",
+        country: "",
+        email: "",
+        website: "",
+        name: "",
+      },
+      editUserVisible:false,
+      affiliation: "",
+      country: "",
+      email: "",
+      name: "",
+      website: "",
+      rank:"",
+      score:0,
+      id:0,
+      formData:[],
+
+    }
+  },
+  methods:{
+    editUser(){
+      console.log(this.userData)
+    }
+  },
+  mounted() {
+    //获取相关信息
+    axios.get("/api/v1/user/session").then(res => {
+      if (res.data.code === 200) {
+        this.id = res.data.data.id;
+        this.affiliation =this.userData.affiliation= res.data.data.affiliation;
+        this.country =this.userData.country= res.data.data.country;
+        this.email =this.userData.email= res.data.data.email;
+        this.name =this.userData.name= res.data.data.username;
+        this.website =this.userData.website= res.data.data.website;
+      }
+      //请求不到就删除token，防止变量出现还有遗留的情况，非常号解决方案
+    }).catch(err => {localStorage.removeItem('token');});
+    //获取排名信息
+    axios.get("/api/v1/user/score/self").then(res => {
+      if (res.data.code === 200) {
+        this.score = res.data.data.score;
+        this.rank = res.data.data.rank;
+      }
+    })
+    //获取提交记录
+    axios.get("/api/v1/user/solves/self").then(res=>{
+      if (res.data.code === 200) {
+        console.log(res.data.data);
+        this.formData = res.data.data;
+        this.formData.forEach(function(item,index){
+          item.created_at = dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss');
+        })
+        this.formData.reverse();
+      }
+    })
+  }
+}
+
+</script>
+
+<style lang="less">
+.row-bg{
+
+  .userinfo{
+    //内容垂直居中
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    //div内标题间隙
+    line-height:1px;
+    color: #FFFFFF;
+
+  }
+
+}
+
+
+</style>

src/router/index.js

@@ -53,6 +53,11 @@ const router = createRouter({
                 requireAuth: true,
             }
         },
+        {
+            path:'/info',
+            name:'info',
+            component: () => import('../views/Info.vue'),
+        },
         {
             path:'/admin',
             name:'Admin',

src/views/Info.vue

@@ -0,0 +1,16 @@
+<template>
+  <Navbar></Navbar>
+  <userinfo></userinfo>
+</template>
+
+<script>
+import Navbar from '../components/Navbar.vue'
+import Userinfo from "../components/userinfo.vue";
+export default {
+  components: {
+    Userinfo,
+    Navbar
+  }
+}
+
+</script>