vue实现有数据库的学生信息管理页面的代码

以下是一个简单的 Vue.js 学生信息管理页面的代码示例，包括了使用 Axios 发送请求获取后端数据和实现对学生信息的增删改查等操作：

<template>
  <div>
    <h2>学生信息管理</h2>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.age }}</td>
          <td>
            <button @click="editStudent(student)">编辑</button>
            <button @click="deleteStudent(student.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <h3>{{ formTitle }}</h3>
      <form @submit.prevent="submitForm">
        <div>
          <label for="id">学号：</label>
          <input type="text" id="id" v-model="form.id" required>
        </div>
        <div>
          <label for="name">姓名：</label>
          <input type="text" id="name" v-model="form.name" required>
        </div>
        <div>
          <label for="gender">性别：</label>
          <select id="gender" v-model="form.gender" required>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
        <div>
          <label for="age">年龄：</label>
          <input type="number" id="age" v-model="form.age" required>
        </div>
        <div>
          <button type="submit">{{ formSubmitText }}</button>
          <button type="button" @click="resetForm">重置</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      students: [],
      form: {
        id: '',
        name: '',
        gender: '男',
        age: ''
      },
      formTitle: '',
      formSubmitText: '添加'
    }
  },
  created() {
    this.getStudents()
  },
  methods: {
    getStudents() {
      axios.get('/api/students')
        .then(res => {
          this.students = res.data
        })
        .catch(err => {
          console.error(err)
        })
    },
    editStudent(student) {
      this.formTitle = '编辑学生信息'
      this.formSubmitText = '保存'
      this.form = Object.assign({}, student)
    },
    deleteStudent(id) {
      axios.delete(`/api/students/${id}`)
        .then(res => {
          this.getStudents()
        })
        .catch(err => {
          console.error(err)
        })
    },
    submitForm() {
      if (this.form.id) {
        axios.put(`/api/students/${this.form.id}`, this.form)
          .then(res => {
            this.getStudents()
            this.resetForm()
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        axios.post('/api/students', this.form)
          .then(res => {
            this.getStudents()
            this.resetForm()
          })
          .catch(err => {
            console.error(err)
          })
      }
    },
    resetForm() {
      this.formTitle = ''
      this.formSubmitText = '添加'
      this.form = {
        id: '',
        name: '',
        gender: '男',
        age: ''
      }
    }
  }
}
</script>

这个示例代码中使用了 Axios 库发送 HTTP 请求，可以在 Vue.js 的 methods 中编写相应的函数来实现对数据库的增删改查等操作。同时，也需要在后端开发 API 接口的时候提供相应的路由和处理函数来处理这些请求。