完全移除UI库，测试与后端的通信

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+qodana.yaml

package.json

@@ -13,5 +13,8 @@
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.1"
+  },
+  "dependencies": {
+    "vue": "^3.5.10"
   }
 }

src/components/event-description-board.vue

@@ -1,9 +1,18 @@
 <script setup>
-
+function OnClick()
+{
+  document.getElementById('myid').click()
+}
 </script>
 
 <template>
 <div class="event-description">
+  <button @click="OnClick">
+    open file selection
+  </button>
+  <form>
+    <input type="file" style="display:none" id="myid"/>
+  </form>
 </div>
 </template>
 

src/components/main-frame.vue

@@ -6,10 +6,19 @@ import EventDescriptionBoard from "./event-description-board.vue";
 const number=ref(0);
 const enable=ref(false);
 const score=ref(0);
-function changeNumber()
+const sno=ref("");
+const sname=ref("");
+function getStuInfo()
 {
-  number.value=Math.floor(Math.random()*100)
+  let res = fetch("http://127.0.0.1:8000/get_random_stu",{method: "GET"});
-  enable.value=(number.value % 2 === 0)
+  res.then((res)=>{
+    return res.json()
+  }).then((data)=>{
+    // noinspection JSUnresolvedReference
+    sno.value = data.sno
+    // noinspection JSUnresolvedReference
+    sname.value = data.sname
+  })
 }
 </script>
 
@@ -17,8 +26,8 @@ function changeNumber()
   <div class="frame-container">
     <score-board class="score-board" :current-score="score" @score-changed="(s)=>{score=s}"></score-board>
     <div class="result-board-container">
-      <result-board class="result-board" :number :enable></result-board>
+      <result-board class="result-board" :number :enable :sno :sname></result-board>
-      <button class="start-button" @click="changeNumber">start</button>
+      <button class="start-button" @click="getStuInfo">start</button>
     </div>
   <event-description-board class="event-description"></event-description-board>
   </div>

src/components/result-board.vue

@@ -1,5 +1,6 @@
 <script setup>
-defineProps(['number', 'enable'])
+defineProps(['number', 'enable', 'sno', 'sname']);
+
 </script>
 
 <template>
@@ -7,8 +8,8 @@ defineProps(['number', 'enable'])
     <div class="special-event">
       <span class="special-event-text" v-if="enable">special event !</span>
     </div>
-      <div class="sno-number">1035034{{number >= 10? number : "0" + number}}</div>
+      <div class="sno-number">{{sno}}</div>
-      <div class="s-name">李华</div>
+      <div class="s-name">{{sname}}</div>
   </div>
 </template>
 

src/javascript/main-menu.js

@@ -1,13 +1,5 @@
 import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import MenuSidebar from '../components/menu-sidebar.vue'
 
 const app = createApp(MenuSidebar)
-app.use(ElementPlus)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component)
-}
 app.mount('#menu-sidebar')