vue学生信息增删改查

Vue 学生信息增删改查涉及到前端页面的交互和后端接口的调用，具体实现步骤如下：

1. 编写前端页面：包括学生信息列表展示、添加学生信息、编辑学生信息和删除学生信息等模块。

2. 发送请求给后端：前端通过请求后端接口获取学生信息列表、添加学生信息、编辑学生信息和删除学生信息等操作。

3. 后端接口实现：后端接口需要接收前端的请求，并进行相应的增删改查操作，最后将结果返回给前端。

4. 数据库操作：后端接口需要连接数据库进行数据的增删改查操作。

下面是一个简单的 Vue 学生信息增删改查示例代码：

<template>
  <div class="student-info">
    <div class="student-list">
      <h2>学生信息列表</h2>
      <table>
        <thead>
          <tr>
            <th>学生姓名</th>
            <th>学生年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(student, index) in students" :key="index">
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>
              <button @click="editStudent(student)">编辑</button>
              <button @click="deleteStudent(student)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="add-student">
      <h2>添加学生信息</h2>
      <form>
        <div>
          <label>学生姓名：</label>
          <input type="text" v-model="newStudent.name" />
        </div>
        <div>
          <label>学生年龄：</label>
          <input type="number" v-model="newStudent.age" />
        </div>
        <button @click.prevent="addStudent">添加</button>
      </form>
    </div>
    <div class="edit-student" v-if="editingStudent">
      <h2>编辑学生信息</h2>
      <form>
        <div>
          <label>学生姓名：</label>
          <input type="text" v-model="editingStudent.name" />
        </div>
        <div>
          <label>学生年龄：</label>
          <input type="number" v-model="editingStudent.age" />
        </div>
        <button @click.prevent="updateStudent">保存</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [], // 学生信息列表
      newStudent: {}, // 新增学生信息
      editingStudent: null, // 编辑中的学生信息
    };
  },
  created() {
    this.getStudentList();
  },
  methods: {
    // 获取学生信息列表
    getStudentList() {
      fetch('/api/student')
        .then(res => res.json())
        .then(data => {
          this.students = data;
        });
    },
    // 添加学生信息
    addStudent() {
      fetch('/api/student', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.newStudent),
      })
        .then(res => res.json())
        .then(data => {
          this.students.push(data);
          this.newStudent = {};
        });
    },
    // 编辑学生信息
    editStudent(student) {
      this.editingStudent = student;
    },
    // 更新学生信息
    updateStudent() {
      fetch(`/api/student/${this.editingStudent.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.editingStudent),
      })
        .then(res => res.json())
        .then(data => {
          const index = this.students.findIndex(
            student => student.id === data.id,
          );
          this.students.splice(index, 1, data);
          this.editingStudent = null;
        });
    },
    // 删除学生信息
    deleteStudent(student) {
      fetch(`/api/student/${student.id}`, {
        method: 'DELETE',
      })
        .then(() => {
          const index = this.students.findIndex(
            item => item.id === student.id,
          );
          this.students.splice(index, 1);
        });
    },
  },
};
</script>

在这个示例代码中，我们使用了 fetch API 向后端发送 HTTP 请求，通过 RESTful API 的方式实现了学生信息的增删改查操作。同时，我们还使用了 Vue 组件的方式组织了页面逻辑，使得整个应用具有良好的可维护性和可扩展性。