homework_lys_vue/vue01/src/views/AssignmentList.vue

<template>
    <div class="assignment-list">
      <h1>课堂作业 Assignments</h1>
      <div v-for="assignment in assignments" :key="assignment.id" class="assignment-item">
        <h2>{{ assignment.name }}</h2>
        <p>截止时间: {{ assignment.deadline }}</p>
        <p>提交状态: {{ assignment.status }}</p>
        <button @click="goToAssignment(assignment.id)">写作业</button>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        assignments: []
      };
    },
    created() {
      this.fetchAssignments();
    },
    methods: {
      fetchAssignments() {
        axios.get('/api/assignments')
          .then(response => {
            this.assignments = response.data;
          })
          .catch(error => {
            console.error('Error fetching assignments:', error);
          });
      },
      goToAssignment(assignmentId) {
        this.$router.push({ name: 'DoAssignment', params: { assignmentId } });
      }
    }
  };
  </script>
  
  <style scoped>
  .assignment-list {
    padding: 20px;
  }
  .assignment-item {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
  }
  </style>