用vue写一个用户管理页面

好的，我可以帮你编写一个简单的用户管理页面。

首先，你需要在终端中使用 Vue CLI 创建一个新的项目。在终端中输入以下命令：

vue create user-management

然后，安装 Element UI 和 Axios 库。在终端中输入以下命令：

cd user-management
npm install element-ui axios --save

接下来，在 src/views 文件夹中创建一个 UserManagement.vue 组件。在该组件中，我们使用 Element UI 的表格和对话框组件来展示用户列表和添加/编辑用户的表单。

UserManagement.vue 组件的代码如下所示：

<template>
  <div>
    <el-button type="primary" @click="showAddDialog">添加用户</el-button>

    <el-table :data="users" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="addDialogVisible" title="添加用户" width="30%">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="addForm.age"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">添加</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="editDialogVisible" title="编辑用户" width="30%">
      <el-form ref="editForm" :model="editForm" :rules="editFormRules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      users: [],
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        name: '',
        age: '',
        email: ''
      },
      editForm: {
        id: '',
        name: '',
        age: '',
        email: ''
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { min: 1, max: 120, message: '请输入正确的年龄', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ]
      },
      editFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { min: 1, max: 120, message: '请输入正确的年龄', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState(['token'])
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('/api/users', { headers: { Authorization: `Bearer ${this.token}` } })
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    showAddDialog() {
      this.addDialogVisible = true;
    },
    addUser() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          axios.post('/api/users', this.addForm, { headers: { Authorization: `Bearer ${this.token}` } })
            .then(response => {
              this.getUsers();
              this.$message.success('添加用户成功');
              this.addDialogVisible = false;
            })
            .catch(error => {
              console.log(error);
            });
        }
      });
    },
    showEditDialog(user) {
      this.editForm.id = user.id;
      this.editForm.name = user.name;
      this.editForm.age = user.age;
      this.editForm.email = user.email;
      this.editDialogVisible = true;
    },
    updateUser() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          axios.put(`/api/users/${this.editForm.id}`, this.editForm, { headers: { Authorization: `Bearer ${this.token}` } })
            .then(response => {
              this.getUsers();
              this.$message.success('更新用户成功');
              this.editDialogVisible = false;
            })
            .catch(error => {
              console.log(error);
            });
        }
      });
    },
    deleteUser(user) {
      this.$confirm(`确定删除用户 ${user.name} 吗？`, '提示', { type: 'warning' })
        .then(() => {
          axios.delete(`/api/users/${user.id}`, { headers: { Authorization: `Bearer ${this.token}` } })
            .then(response => {
              this.getUsers();
              this.$message.success('删除用户成功');
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {});
    }
  }
};
</script>

在代码中，我们使用了 Axios 库向后端发送请求，获取用户列表、添加用户、编辑用户和删除用户等操作。其中，我们在组件中使用 Vuex 的 mapState 辅助函数，获取用户的登录 token，以便在请求头中携带 token 认证。

最后，在 src/router/index.js 文件中配置 UserManagement.vue 组件的路由，以便用户可以访问该页面。代码如下所示：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import UserManagement from '../views/UserManagement.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/users',
    name: 'UserManagement',
    component: UserManagement
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

这样，一个简单的用户管理页面就完成了。你可以在组件中根据你的具体需求，修改样式和逻辑。