使用element ui添加一个用户管理的页面一条用户数据包含的字段有用户姓名、电话、邮箱、地址。需要在页面上呈现用户管理数据列表并且完成用户数据的增删改查以及数据分页的处理过程用户数据存储到服务端json文件或服务端定义变量中。前端用vue后端用koa2

前端代码（使用Vue和Element UI）：

<template>
  <div class="user-management">
    <el-row>
      <el-col :span="24">
        <h1>User Management</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-input v-model="searchText" placeholder="Search"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="showAddUserDialog">Add User</el-button>
        <el-dialog :visible.sync="addUserDialogVisible" title="Add User" :before-close="clearAddUserForm">
          <el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserForm">
            <el-form-item label="Name" prop="name">
              <el-input v-model="addUserForm.name"></el-input>
            </el-form-item>
            <el-form-item label="Phone" prop="phone">
              <el-input v-model="addUserForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="Email" prop="email">
              <el-input v-model="addUserForm.email"></el-input>
            </el-form-item>
            <el-form-item label="Address" prop="address">
              <el-input v-model="addUserForm.address"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="addUserDialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="addUser">Add</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="filteredUsers" :default-sort="{prop: 'name', order: 'ascending'}">
          <el-table-column prop="name" label="Name"></el-table-column>
          <el-table-column prop="phone" label="Phone"></el-table-column>
          <el-table-column prop="email" label="Email"></el-table-column>
          <el-table-column prop="address" label="Address"></el-table-column>
          <el-table-column label="Actions">
            <template slot-scope="scope">
              <el-button type="text" @click="showEditUserDialog(scope.row)">Edit</el-button>
              <el-button type="text" @click="deleteUser(scope.$index)">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="users.length"></el-pagination>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="editUserDialogVisible" title="Edit User" :before-close="clearEditUserForm">
      <el-form :model="editUserForm" :rules="editUserFormRules" ref="editUserForm">
        <el-form-item label="Name" prop="name">
          <el-input v-model="editUserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="Phone" prop="phone">
          <el-input v-model="editUserForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="Email" prop="email">
          <el-input v-model="editUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="Address" prop="address">
          <el-input v-model="editUserForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editUserDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="editUser">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      filteredUsers: [],
      searchText: '',
      addUserDialogVisible: false,
      addUserForm: {
        name: '',
        phone: '',
        email: '',
        address: ''
      },
      addUserFormRules: {
        name: [
          { required: true, message: 'Name is required', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: 'Phone is required', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Email is required', trigger: 'blur' },
          { type: 'email', message: 'Invalid email', trigger: 'blur' }
        ],
        address: [
          { required: true, message: 'Address is required', trigger: 'blur' }
        ]
      },
      editUserDialogVisible: false,
      editUserIndex: null,
      editUserForm: {
        name: '',
        phone: '',
        email: '',
        address: ''
      },
      editUserFormRules: {
        name: [
          { required: true, message: 'Name is required', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: 'Phone is required', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Email is required', trigger: 'blur' },
          { type: 'email', message: 'Invalid email', trigger: 'blur' }
        ],
        address: [
          { required: true, message: 'Address is required', trigger: 'blur' }
        ]
      },
      currentPage: 1,
      pageSize: 10
    };
  },
  created() {
    // Fetch users from server or define users as a variable in server-side code
    this.users = [
      { name: 'John Doe', phone: '555-555-5555', email: 'john.doe@example.com', address: '123 Main St' },
      { name: 'Jane Smith', phone: '555-555-5556', email: 'jane.smith@example.com', address: '456 Oak St' },
      { name: 'Bob Johnson', phone: '555-555-5557', email: 'bob.johnson@example.com', address: '789 Elm St' },
      { name: 'Alice Brown', phone: '555-555-5558', email: 'alice.brown@example.com', address: '321 Maple St' }
    ];
    this.filteredUsers = this.users;
  },
  computed: {
    filteredUsers() {
      if (this.searchText) {
        return this.users.filter(user => {
          return user.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
            user.phone.toLowerCase().includes(this.searchText.toLowerCase()) ||
            user.email.toLowerCase().includes(this.searchText.toLowerCase()) ||
            user.address.toLowerCase().includes(this.searchText.toLowerCase());
        });
      } else {
        return this.users;
      }
    }
  },
  methods: {
    showAddUserDialog() {
      this.addUserDialogVisible = true;
    },
    addUser() {
      this.$refs.addUserForm.validate(valid => {
        if (valid) {
          this.users.push(this.addUserForm);
          this.addUserDialogVisible = false;
          this.clearAddUserForm();
        }
      });
    },
    clearAddUserForm() {
      this.addUserForm.name = '';
      this.addUserForm.phone = '';
      this.addUserForm.email = '';
      this.addUserForm.address = '';
      this.$refs.addUserForm.clearValidate();
    },
    showEditUserDialog(user) {
      this.editUserIndex = this.users.indexOf(user);
      this.editUserForm.name = user.name;
      this.editUserForm.phone = user.phone;
      this.editUserForm.email = user.email;
      this.editUserForm.address = user.address;
      this.editUserDialogVisible = true;
    },
    editUser() {
      this.$refs.editUserForm.validate(valid => {
        if (valid) {
          this.users.splice(this.editUserIndex, 1, this.editUserForm);
          this.editUserDialogVisible = false;
          this.clearEditUserForm();
        }
      });
    },
    clearEditUserForm() {
      this.editUserIndex = null;
      this.editUserForm.name = '';
      this.editUserForm.phone = '';
      this.editUserForm.email = '';
      this.editUserForm.address = '';
      this.$refs.editUserForm.clearValidate();
    },
    deleteUser(index) {
      this.users.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.user-management {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>

后端代码（使用Koa2和JSON文件存储数据）：

const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const fs = require('fs');

const app = new Koa();
const router = new Router();

const JSON_FILE_PATH = './users.json';

// Read users from JSON file
let users = [];
if (fs.existsSync(JSON_FILE_PATH)) {
  users = JSON.parse(fs.readFileSync(JSON_FILE_PATH));
}

// Middleware
app.use(bodyParser());

// Routes
router.get('/users', ctx => {
  ctx.body = users;
});

router.post('/users', ctx => {
  const user = ctx.request.body;
  users.push(user);
  fs.writeFileSync(JSON_FILE_PATH, JSON.stringify(users, null, 2));
  ctx.body = user;
});

router.put('/users/:id', ctx => {
  const id = ctx.params.id;
  const user = ctx.request.body;
  users[id] = user;
  fs.writeFileSync(JSON_FILE_PATH, JSON.stringify(users, null, 2));
  ctx.body = user;
});

router.delete('/users/:id', ctx => {
  const id = ctx.params.id;
  users.splice(id, 1);
  fs.writeFileSync(JSON_FILE_PATH, JSON.stringify(users, null, 2));
  ctx.status = 204; // No Content
});

app.use(router.routes());

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});