他人信息+用户快捷入口

src/components/socre.vue

@@ -5,7 +5,6 @@
     <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>

src/components/userid.vue

@@ -0,0 +1,173 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="16">
+      <div class="userinfo">
+        <h1>{{name}}</h1>
+        <h1>{{score}}分</h1>
+        <h1>用户id：{{$route.params.id}}</h1>
+      </div>
+      <el-button @click="editUserVisible=true" type="primary" circle >
+        <el-icon><User /></el-icon>
+      </el-button>
+
+      <el-dialog v-model="editUserVisible" title="用户信息">
+        <p>联系方式：{{userData.affiliation}}</p>
+        <p>城市：{{userData.country}}</p>
+        <p>网站：{{userData.website}}</p>
+      </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: "",
+        website: "",
+        name: "",
+      },
+      editUserVisible:false,
+      name: "",
+      rank:"",
+      score:0,
+      id:0,
+      formData:[],
+    }
+  },
+  methods:{
+  },
+  mounted() {
+
+    //管理员信息保护
+    if(this.$route.params.id ==='1'){
+      this.name = "admin";
+      this.rank = "管理员";
+      this.score = "114514";
+      this.userData.affiliation = "下北泽";
+      this.id = 1;
+      this.formData = [
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        },
+        {
+          challenge_name: "简单题目",
+          score: "0",
+          created_at: "2020-01-01"
+        }
+      ]
+
+    }else {
+
+      //他人信息
+    axios.get('/api/v1/user/'+this.$route.params.id).then(res=> {
+      this.id = res.data.data.id;
+      this.userData.affiliation= res.data.data.affiliation;
+      this.userData.country= res.data.data.country;
+      this.name =this.userData.name= res.data.data.username;
+      this.userData.website= res.data.data.website;
+      if(res.data.data.username===""){
+        this.name = "用户不存在捏";
+        return
+      }
+    })
+    //获取排名信息
+    axios.get("/api/v1/score/"+this.$route.params.id).then(res => {
+      if (res.data.code === 200) {
+        this.score = res.data.data
+      }
+    })
+    //获取提交记录
+    axios.get("/api/v1/user/solves/uid/"+this.$route.params.id).then(res=>{
+      if (res.data.code === 200) {
+        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/components/userinfo.vue

@@ -1,5 +1,4 @@
 <template>
-
   <el-row class="row-bg" justify="center">
     <el-col :span="16">
       <div class="userinfo">
@@ -76,11 +75,7 @@ export default {
         name: "",
       },
       editUserVisible:false,
-      affiliation: "",
-      country: "",
-      email: "",
       name: "",
-      website: "",
       rank:"",
       score:0,
       id:0,
@@ -90,7 +85,13 @@ export default {
   },
   methods:{
     editUser(){
-      console.log(this.userData)
+      axios.put('/api/v1/user/userinfo',this.userData).then(res=>{
+        this.editUserVisible=false
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+      })
     }
   },
   mounted() {
@@ -98,11 +99,11 @@ export default {
     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.userData.affiliation= res.data.data.affiliation;
-        this.country =this.userData.country= res.data.data.country;
+        this.userData.country= res.data.data.country;
-        this.email =this.userData.email= res.data.data.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;
+        this.userData.website= res.data.data.website;
       }
       //请求不到就删除token，防止变量出现还有遗留的情况，非常号解决方案
     }).catch(err => {localStorage.removeItem('token');});
@@ -116,7 +117,6 @@ export default {
     //获取提交记录
     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');

src/components/userlist.vue

@@ -6,7 +6,14 @@
     <el-col :span="16">
       <el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
         <el-table-column prop="id" label="Id" width="180" />
-        <el-table-column prop="username" label="User" width="180" />
+        <el-table-column  label="User" width="180">
+          <template #default="scope">
+              <el-link type="primary" :href="'/user/'+scope.row.id">
+                {{scope.row.username}}
+              </el-link>
+
+          </template>
+        </el-table-column>
         <el-table-column prop="affiliation" label="Affiliation" />
         <el-table-column prop="country" label="Country" />
         <el-table-column prop="website" label="Website" />
@@ -45,4 +52,4 @@ export default {
   justify-content: center;
   color: #dddddd;
 }
-</style>
+</style>

src/router/index.js

@@ -57,6 +57,17 @@ const router = createRouter({
             path:'/info',
             name:'info',
             component: () => import('../views/Info.vue'),
+            meta: {
+                requireAuth: true,
+            }
+        },
+        {
+            path:'/user/:id',
+            name:'user',
+            component: () => import('../views/Userother.vue'),
+            meta: {
+                requireAuth: true,
+            }
         },
         {
             path:'/admin',

src/views/Userother.vue

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