feat: 对接后端数据接口

src/mock/upload.js

@@ -1,6 +0,0 @@
-import Mock from 'mockjs'
-
-Mock.mock('http://localhost:8080/upload', 'post', {
-  status: 200,
-  message: '文件上传成功！'
-})

src/views/rating/RatingPage.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <h1 class="heading">
       就决定是你了<br />
-      田所浩二
+      {{ stopName }}
     </h1>
     <h2 class="sub-heading">你成功的复述了所提的问题吗？</h2>
     <div class="buttons">
@@ -10,7 +10,7 @@
       <el-button class="ax_default button" @click="showRating = true"
         ><span class="button-text">是</span></el-button
       >
-      <el-button class="ax_default button" @click="showAngryFace = true"
+      <el-button class="ax_default button" @click="updateScoreMinus"
         ><span class="button-text">否</span></el-button
       >
     </div>
@@ -22,7 +22,7 @@
         v-model="currentRating"
         :max="5"
         :disabled="isRatingDisabled"
-        @change="disableRating"
+        @change="updateScore"
       />
 
       <!-- 再抽一次按钮 -->
@@ -50,22 +50,88 @@
 
 <script setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router' // 引入 useRouter
+import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+const route = useRoute()
 
-// 使用 ref 来定义响应式数据
 const currentRating = ref(0)
 const showRating = ref(false)
 const isRatingDisabled = ref(false) // 控制星星是否禁用
 const showAngryFace = ref(false) // 控制生气表情和文字的显示
+const stopNumbers = route.query.stopNumbers
+const stopName = route.query.stopName
+const studentScore = ref(parseInt(route.query.studentScore) || 0)
+
+// 将 stopNumbers 转换为整数 user_id
+const userId = parseInt(
+  Array.isArray(stopNumbers) ? stopNumbers.join('') : stopNumbers
+)
 
 // 获取 router 实例
 const router = useRouter()
 
-// 评分完成后禁用星星评分
+// 评分变化时更新 studentScore，并累加评分
-const disableRating = () => {
+const updateScore = (value) => {
+  // 累加评分到传递过来的 studentScore 上
+  studentScore.value += value
+  // 评分完成后禁用星星评分
   isRatingDisabled.value = true
-}
 
+  // 封装 stopNumbers 和 studentScore 为 JSON 数据
+  const data = JSON.stringify({
+    user_id: userId,
+    user_score: studentScore.value
+  })
+
+  // 构建 config 对象
+  var config = {
+    method: 'post',
+    url: 'http://localhost:8080/change-score',
+    data: data
+  }
+
+  // 发起 POST 请求，传递数据给后端
+  axios(config)
+    .then((response) => {
+      console.log('数据成功发送到后端:', response.data)
+    })
+    .catch((error) => {
+      console.error('发送数据到后端时出错:', error)
+    })
+}
+
+// 减少 studentScore 1 分
+const updateScoreMinus = () => {
+  // 扣除 1 分
+  studentScore.value -= 1
+
+  // 更新后的数据发送给后端
+  const data = JSON.stringify({
+    user_id: userId,
+    user_score: studentScore.value
+  })
+
+  // 构建 config 对象
+  var config = {
+    method: 'post',
+    url: 'http://localhost:8080/change-score',
+    data: data
+  }
+
+  // 发起 POST 请求，传递数据给后端
+  axios(config)
+    .then((response) => {
+      console.log('扣分数据成功发送到后端:', response.data)
+    })
+    .catch((error) => {
+      console.error('发送扣分数据到后端时出错:', error)
+    })
+
+  // 显示生气表情和文字
+  showAngryFace.value = true
+}
 // 跳转到 /roll-call 路由
 const goToRollCall = () => {
   router.push('/roll-call') // 路由跳转到 /roll-call

src/views/roll/RollCallPage.vue

@@ -24,12 +24,15 @@
 <script setup>
 import { ref, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import axios from 'axios'
 import RollingNumber from '@/components/scrollingNumber.vue'
 
 const router = useRouter()
 
-const isScrolling = ref(true)
+const isScrolling = ref(false)
 const stopNumbers = ref([1, 0, 1, 1, 4, 5, 1, 4, 1]) // 每个组件的 stopNumber 值
+const stopName = ref('')
+const studentScore = ref(0)
 
 // 生成每个组件的随机 duration 值（80-120）
 const durations = ref(
@@ -40,9 +43,33 @@ const completedRolls = ref(new Array(stopNumbers.value.length).fill(false))
 const confirmed = ref(false)
 const isButtonPressed = ref(false)
 
-const toggleScrolling = () => {
+const toggleScrolling = async () => {
   isButtonPressed.value = true
   if (isScrolling.value == false) {
+    // 发起后端请求
+    axios
+      .get('http://localhost:8080/get-random', {})
+      .then(function (response) {
+        console.log(JSON.stringify(response.data))
+        // 确保User_id存在
+        if (response.data.data) {
+          const userId = response.data.data.User_id.toString()
+            .split('')
+            .map(Number)
+          stopNumbers.value = userId
+          stopName.value = response.data.data.User_name
+          studentScore.value = response.data.data.User_score
+          durations.value = stopNumbers.value.map(
+            () => Math.floor(Math.random() * (120 - 80 + 1)) + 80
+          )
+        } else {
+          console.error('User_id not found in response data')
+        }
+      })
+      .catch(function (error) {
+        console.log(error)
+      })
+
     setTimeout(() => {
       isButtonPressed.value = false
     }, 10)
@@ -64,10 +91,21 @@ const handleRollCompleted = (index) => {
       isButtonPressed.value = false // 确认弹窗出现后，重置按钮按下状态
       if (
         !confirmed.value &&
-        confirm(`抽到了: ${stopNumbers.value.join('')}，确定后跳转`)
+        confirm(
+          `抽到了: ${stopNumbers.value.join('')}, ${stopName.value}，确定后跳转`
+        )
       ) {
         confirmed.value = true
-        router.push('/rating')
+        confirmed.value = true
+        // 通过 query 参数传递
+        router.push({
+          path: '/rating',
+          query: {
+            stopNumbers: stopNumbers.value.join(''),
+            stopName: stopName.value,
+            studentScore: studentScore.value
+          }
+        })
       }
     }, 800)
   }