SpringBoot + Vue前后端分离项目实战 || 一：Vue前端设计

在这个SpringBoot + Vue前后端分离项目中，我们将使用Vue来设计前端页面。以下是一个简单的Vue组件示例，用于展示如何创建一个用户列表页面。

<template>
  <div>
    <h1>用户列表</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="editUser(user.id)">编辑</button>
            <button @click="deleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      // 假设已经有一个axios实例
      axios.get('/api/users').then(response => {
        this.users = response.data;
      });
    },
    editUser(userId) {
      // 跳转到编辑页面
      this.$router.push(`/users/${userId}/edit`);
    },
    deleteUser(userId) {
      // 发送删除请求
      axios.delete(`/api/users/${userId}`).then(response => {
        if (response.status === 204) {
          this.fetchUsers(); // 重新获取用户列表
        }
      });
    }
  }
};
</script>

在这个组件中，我们定义了一个包含用户信息的数组users，在组件创建时通过created生命周期钩子获取用户列表。fetchUsers方法通过API获取数据并更新users数组。editUser和deleteUser方法分别处理用户的编辑和删除操作。这个组件使用了Vue的响应式系统来更新DOM，当users数组发生变化时，表格的内容会自动更新。