class/miniapp-demo1/Pagesss.md

# 教师：随机点名且提问，学生：签到且回答

## 调用后端接口的代码

<template>
  <view>
    <view v-if="role === 'teacher'">
      <button @click="randomCall" class="button">随机点名</button>
      <button @click="askQuestion" class="button">发布问题: 1+1=</button>
    </view>

    <view class="list">
      <view class="list-header">
        <text>签到学生名单</text>
        <text>状态</text>
      </view>
      <view v-for="(student, index) in selectedStudents" :key="index" class="list-item">
        <text>{{ student.name }}</text>
        <text>{{ student.signed ? '✔' : '' }}</text>
      </view>
    </view>
    
    <view v-if="role === 'student'" class="button-container">
      <button :disabled="!canSignIn" @click="signIn" class="button">签到</button>
      <button @click="answerQuestion" class="button">回答问题: 1+1=</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      role: '', // 用户角色：teacher 或 student，从后端获取
      currentStudent: 'jywsd', // 当前学生姓名
      students: [
        { name: 'jywsd', signed: false },
        { name: 'sserjs', signed: false },
        { name: 'shsjsh', signed: false },
        { name: 'wwkks', signed: false }
      ],
      selectedStudents: []
    };
  },
  computed: {
    canSignIn() {
      // 判断当前学生是否在被点名的名单中
      return this.selectedStudents.some(s => s.name === this.currentStudent);
    }
  },
  methods: {
    fetchUserRole() {
      // 假设从后端获取用户信息
      uni.request({
        url: 'http://10.133.28.65:3000/api/students', // 替换为实际的后端接口
        method: 'GET',
        success: (res) => {
          this.role = res.data.role; // 获取用户角色
        }
      });
    },
    randomCall() {
      // 随机选择学生进行点名
      let numberOfStudents = Math.floor(Math.random() * this.students.length) + 1;
      this.selectedStudents = [...this.students]
        .sort(() => 0.5 - Math.random())
        .slice(0, numberOfStudents)
        .map(student => ({ ...student, signed: false }));
    },
    signIn() {
      // 学生签到逻辑
      this.selectedStudents = this.selectedStudents.map(student => {
        if (student.name === this.currentStudent) {
          return { ...student, signed: true };
        }
        return student;
      });
      uni.showToast({
        title: '签到完成',
        icon: 'success'
      });
    },
    askQuestion() {
      // 教师发布问题
      uni.showToast({
        title: '问题已发布: 1+1=',
        icon: 'none'
      });
    },
    answerQuestion() {
      // 学生回答问题
      let answer = prompt("请输入你的答案: 1+1=");
      if (answer === "2") {
        uni.showToast({
          title: '回答正确',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '回答错误',
          icon: 'none'
        });
      }
    }
  },
  created() {
    this.fetchUserRole(); // 页面加载时获取用户角色
  }
}
</script>

<style>
.button {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  background-color: #1E90FF;
  color: white;
  text-align: center;
  border-radius: 5px;
}

.button:disabled {
  background-color: grey;
}

.list {
  margin: 20px;
  background-color: #f0f0f0;
  padding: 10px;
}

.list-header, .list-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.button-container {
  display: flex;
  justify-content: center;
}
</style>

# rank调用

<script setup>
import { ref, onMounted } from 'vue';

const rankData = ref([]); // 定义 rankData 为响应式数据

const getStudents = async () => {
    let res = await uni.request({
        url: "http://10.133.60.255:3000/api/students",
    });
    
    if (res && res.data) {
        rankData.value = res.data; // 假设返回的数据格式正确并赋值给 rankData
    }
};

onMounted(() => {
    getStudents(); // 组件挂载时调用获取学生数据的函数
});

</script>