上传背景图

vuetify-project/src/components/home.vue

 <template>
   <v-card style="height: 200px;width: 95%;margin: auto;">
     <v-carousel :show-arrows="false" style="height: 100%;width: 100%;" cycle interval="2000" hide-delimiter-background>
-      <v-carousel-item v-for="(item, i) in items" :key="i" cover>
-        <img :src="item.src" class="tupian">
+      <v-carousel-item v-for="(img, i) in imgs" :key="i" cover>
+        <img :src="img.src" class="tupian">
       </v-carousel-item>
     </v-carousel>
   </v-card>
@@ -11,23 +11,26 @@
     <h class="text-h6 float-right">更多</h>
     <v-divider thickness="3px"></v-divider>
     <v-card class="card1">
-      <div class="text-h6" style="height: 33px;" v-for="(thing, index) in things" :key="index">
-        <div class="float-left zhibiao1">
-          {{ thing.username }}
+      <div class="text-subtitle-1" style="height: 33px;" v-for="(item, index) in items" :key="index">
+        <div class="float-left">
+          {{ item.date }}
+        </div>
+        <div class="float-left zhibiao1" style="width: 20%;">
+          {{ item.homeTeam }}
         </div>
         <div class="float-left zhibiao2">
-          {{ thing.score1 }}
+          {{ item.homeScore }}
         </div>
         <div class="float-left">
           :
         </div>
         <div class="float-left zhibiao2">
-          {{ thing.score2 }}
+          {{ item.awayScore }}
         </div>
-        <div class="float-left zhibiao1">
-          {{ thing.username1 }}
+        <div class="float-left zhibiao1" style="width: 20%;">
+          {{ item.awayTeam }}
         </div>
-        <div class="float-right" style="line-height: 32px;">
+        <div class="float-right">
           <v-icon>mdi-chevron-right</v-icon>
         </div>
         <br>
@@ -38,13 +41,15 @@
     <h class="text-h6">队员榜单</h>
     <h class="text-h6 float-right">更多</h>
     <v-divider thickness="3px"></v-divider>
+    
     <v-card class="card1">
-      <div class="text-h6" style="height: 33px;" v-for="(thing, index) in things" :key="index">
-        <div class="float-left">
-          {{ thing.number }} {{ thing.username }}
+      
+      <div class="text-subtitle-1" style="height: 33px;" v-for="(thing, index) in things" :key="index">
+        <div class="float-left zhibiao5">
+          {{ thing.number }}. {{ thing.realname }}
         </div>
         <div class="float-left zhibiao3">
-          {{ thing.level }}级
+          {{ thing.level }}组
         </div>
         <div class="float-left zhibiao4">
           {{ thing.point }}分
@@ -56,13 +61,16 @@
       </div>
     </v-card>
   </div>
+
+
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import { reactive } from 'vue';
+import axios from 'axios';
 
-const items = reactive([
+const imgs = reactive([
   {
     src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
   },
@@ -77,30 +85,41 @@ const items = reactive([
   },
 ]
 );
+const items = ref(new Array());
+const things = ref(new Array());
 
-const things = reactive([
-  {
-    username: 'User1',
-    score1: 10,
-    score2: 5,
-    username1: 'User2',
-    extraInfo: 'adas',
-    number: '1.',
-    level: 'A',
-    point: 4
-  },
-  {
-    username: 'User3',
-    score1: 8,
-    score2: 3,
-    username1: 'User4',
-    extraInfo: 'adas',
-    number: '2.',
-    level: 'A',
-    point: 8
-  }
-]
-);
+axios.get('/api/games',)
+  .then(function (response) {
+    const data2 = response.data;
+    for (var i = 0; i < data2.Games.length; i++) {
+      var item = {
+        id: data2.Games[i].id,
+        date: data2.Games[i].game_date,
+        homeTeam: data2.Games[i].player1_real_name,
+        awayTeam: data2.Games[i].player2_real_name,
+        homeScore: data2.Games[i].score1,
+        awayScore: data2.Games[i].score2,
+      }
+      items.value[i] = item;
+    }
+  })
+  .catch(function (error) {
+    console.log(error);
+  })
+
+axios.get("/api/players",)
+  .then(function(response){
+    const data3=response.data;
+    for (var i = 0; i < data3.Players.length; i++) {
+      var thing = {
+        number: i+1,
+        realname: data3.Players[i].player_real_name,
+        level: data3.Players[i].group,
+        point: data3.Players[i].score,
+      }
+      things.value[i] = thing;
+    }
+  })
 
 
 </script>
@@ -125,7 +144,6 @@ const things = reactive([
 }
 
 .zhibiao1 {
-  width: 25%;
   text-align: center;
 }
 
@@ -143,4 +161,9 @@ const things = reactive([
   width: 20%;
   /* text-align: center; */
 }
+
+.zhibiao5 {
+  width: 75px;
+  /* text-align: center; */
+}
 </style>
\ No newline at end of file

vuetify-project/src/components/space.vue

@@ -33,7 +33,11 @@
                 上传头像
               </v-btn>
               <v-divider class="my-2"></v-divider>
-              <v-btn variant="text" rounded class="jiacu">
+              <v-btn @click="dialog2 = true" variant="text" rounded class="jiacu">
+                上传背景
+              </v-btn>
+              <v-divider class="my-2"></v-divider>
+              <v-btn @click="dialog3 = true" variant="text" rounded class="jiacu">
                 修改个人信息
               </v-btn>
             </div>
@@ -47,9 +51,17 @@
         <div class="text-subtitle-1 user float-left" style="color:red;">
           {{ level }}级
         </div>
-        <div class="text-subtitle-1 user1">
+        <div class="text-subtitle-1 user float-left">
+          {{ group }}组
+        </div>
+      </div>
+      <div class="float-left">
+        <div class="text-subtitle-1 user1 float-left">
           积分：{{ score }}
         </div>
+        <div class="text-subtitle-1 user1 float-left">
+          胜率：{{ winrate }}%
+        </div>
       </div>
     </div>
     <div class="relative2">
@@ -102,7 +114,7 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
-  
+
   <v-dialog v-model="dialog2" width="auto">
     <v-card width="300px">
       <v-card-text>
@@ -115,49 +127,120 @@
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn color="indigo" text="取消" @click="dialog1 = false"></v-btn>
-        <v-btn color="indigo" text="确认上传" @click="setBackground"></v-btn>
+        <v-btn color="indigo" text="上传" @click="setBackground"></v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <v-dialog v-model="dialog3" width="auto">
+    <v-card width="300px">
+      <v-form ref="form">
+        <v-card-text>
+          修改个人信息
+        </v-card-text>
+        <v-card-text>
+          <v-text-field v-model="username1" variant="filled" color="indigo" label="修改用户名"></v-text-field>
+          <v-text-field v-model="password" variant="filled" color="indigo" label="修改密码" type="password"></v-text-field>
+          <v-text-field v-model="confirmpassword" variant="filled" :rules="[rules.confirmpassword]" color="indigo"
+            label="确认密码" type="password"></v-text-field>
+        </v-card-text>
+      </v-form>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="indigo" text="取消" @click="dialog3 = false"></v-btn>
+        <v-btn color="indigo" text="修改" @click="setUserinform"></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="dialog" width="auto">
+    <v-card width="300px">
+      <v-card-title>
+        {{ cardtitle }}
+      </v-card-title>
+      <v-card-text>
+        {{ cardtext }}
+      </v-card-text>
+      <template v-slot:actions>
+        <v-btn class="ms-auto" variant="flat" color="indigo" text="确认" @click="dialog = false"></v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
   <!-- </v-container> -->
 </template>
 
 <script setup>
 import { ref } from 'vue';
-// import { reactive } from 'vue';
+import { reactive } from 'vue';
 import axios from 'axios';
 
+const form = ref(null);
+const password = ref(null);
+const confirmpassword = ref(null);
 const username = ref('XXX');
-const score = ref(1);
+const username1 = ref(null);
+const score = ref(0);
+const group = ref(null);
 const level = ref("A");
 const items = ref(new Array());
+const dialog = ref(false);
 const dialog1 = ref(false);
 const dialog2 = ref(false);
+const dialog3 = ref(false);
 const pre_avatar_image = ref('');
 const pre_background_image = ref('');
-const my_id = ref(null);
+var my_id = 0;
+const winrate = ref(null);
+const cardtitle = ref(null);
+const cardtext = ref(null);
+const rules = reactive({
+  email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
+  length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
+  usrname: v => !!v || '用户名不能为空',
+  password: v => !!v || '密码不能为空',
+  // password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
+  //   'Password must contain an upper case letter, a numeric character, and a special character',
+  required: v => !!v || 'This field is required',
+  username: v => !!v || '姓名不能为空',
+  confirmpassword: v => v === password.value || '密码不匹配',
+});
 
 axios.get('/api/currentUser',)
   .then(function (response) {
     const data1 = response.data;
     if (data1.status === "SUCCESS") {
-      my_id.value = data1.user_id;
+      my_id = data1.user_id;
       username.value = data1.username;
       pre_avatar_image.value = data1.profile_file;
-      // pre_background_image.value = data1.background_file;
+      pre_background_image.value = data1.background_file;
+      axios.get('/api/players', {
+        params: {
+          player_id: my_id
+        }
+      })
+        .then(function (response) {
+          const data4 = response.data;
+          if (data4.status === "SUCCESS") {
+            score.value = data4.Players[0].score;
+            group.value = data4.Players[0].group;
+            winrate.value = data4.Players[0].winrate;
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        })
     }
   })
   .catch(function (error) {
     console.log(error);
   })
 
-
 axios.get('/api/games',)
   .then(function (response) {
     const data2 = response.data;
     let j = 0;
     for (var i = 0; i < data2.Games.length; i++) {
-      if (data2.Games[i].player1_id === my_id.value || data2.Games[i].player2_id === my_id.value) {
+      if (data2.Games[i].player1_id === my_id || data2.Games[i].player2_id === my_id) {
         var item = {
           id: data2.Games[i].id,
           date: data2.Games[i].game_date,
@@ -175,6 +258,39 @@ axios.get('/api/games',)
     console.log(error);
   })
 
+function info(title, text) {
+  cardtitle.value = title;
+  cardtext.value = text;
+  dialog.value = true;
+}
+
+function setUserinform() {
+  // loading.value = true;
+  var user = { user_name: username1.value, user_password: password.value }
+  if (user.user_name !== null || user.user_password !== null) {
+    axios.post('/api/setUserinform',
+      user
+    )
+      .then(function (response) {
+        const data = response.data;
+        if (data.status == 'SUCCESS') {
+          info('修改成功！', "");
+        }
+        else if (data.status == 'FAILED') {
+          info('用户名已存在！', "");
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  }
+
+  username1.value = null;
+  password.value = null;
+  confirmpassword.value = null;
+  // loading.value = false;
+}
+
 function setAvatar() {
   const fileInput = document.querySelector('#avatarInput');
   const file = fileInput.files[0];
@@ -305,8 +421,8 @@ function setBackground() {
   text-align: center;
 }
 
-.alt-text{
-  top:50%;
-  left:50%;
+.alt-text {
+  top: 50%;
+  left: 50%;
 }
 </style>
\ No newline at end of file

vuetify-project/src/main.vue

 <template>
   <div class="h-screen w-auto">
-    <v-window v-model="tab" class="h-screen w-auto">
-      <v-window-item :key="1" :value="'tab-1'" class="h-screen w-100">
+    <v-window v-model="tab" class="h-screen w-auto bottom-navigation">
+      <v-window-item :key="1" :value="'tab-1'" class="h-screen w-100 bottom-navigation">
         <Home></Home>
       </v-window-item>
-      <v-window-item :key="2" :value="'tab-2'" class="h-screen w-100">
+      <v-window-item :key="2" :value="'tab-2'" class="h-screen w-100 bottom-navigation">
         <Gamemanage></Gamemanage>
       </v-window-item>
-      <v-window-item :key="3" :value="'tab-3'" class="h-screen w-100">
+      <v-window-item :key="3" :value="'tab-3'" class="h-screen w-100 bottom-navigation">
         <Space></Space>
       </v-window-item>
     </v-window>
@@ -51,6 +51,10 @@ const tab = ref(null)
   z-index: 100;
 }
 
+.bottom-navigation {
+  overflow-y: auto;
+  padding-bottom: 57px;
+}
 /*.main-card{
   height: 100%;
   width: 100%;