Element UI 用户管理页面 - 增删改查及分页功能实现 - 常规

<template>
  <div class='user-management'>
    <el-card>
      <div slot='header'>
        <h3>用户列表</h3>
      </div>
      <el-table :data='tableData' stripe>
        <el-table-column prop='name' label='姓名'></el-table-column>
        <el-table-column prop='phone' label='电话'></el-table-column>
        <el-table-column prop='email' label='邮箱'></el-table-column>
        <el-table-column prop='address' label='地址'></el-table-column>
        <el-table-column label='操作'>
          <template slot-scope='scope'>
            <el-button type='primary' size='small' @click='edit(scope.row)'>编辑</el-button>
            <el-button type='danger' size='small' @click='remove(scope.row)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class='pagination'>
        <el-pagination
          :current-page='currentPage'
          :page-size='pageSize'
          :total='total'
          layout='prev, pager, next'
          @current-change='handleCurrentChange'
        ></el-pagination>
      </div>
      <el-dialog :title='dialogTitle' :visible.sync='dialogVisible' :close-on-click-modal='false'>
        <el-form :model='formData' label-width='80px'>
          <el-form-item label='姓名' prop='name'>
            <el-input v-model='formData.name' placeholder='请输入姓名'></el-input>
          </el-form-item>
          <el-form-item label='电话' prop='phone'>
            <el-input v-model='formData.phone' placeholder='请输入电话'></el-input>
          </el-form-item>
          <el-form-item label='邮箱' prop='email'>
            <el-input v-model='formData.email' placeholder='请输入邮箱'></el-input>
          </el-form-item>
          <el-form-item label='地址' prop='address'>
            <el-input v-model='formData.address' placeholder='请输入地址'></el-input>
          </el-form-item>
        </el-form>
        <div slot='footer'>
          <el-button @click='dialogVisible = false'>取消</el-button>
          <el-button type='primary' @click='save'>保存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  name: 'UserManagement',
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogTitle: '',
      dialogVisible: false,
      formData: {
        name: '',
        phone: '',
        email: '',
        address: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: 'blur',
          },
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios
        .get('/users', {
          params: {
            page: this.currentPage,
            limit: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    add() {
      this.dialogTitle = '新增用户';
      this.formData = {
        name: '',
        phone: '',
        email: '',
        address: '',
      };
      this.dialogVisible = true;
    },
    edit(row) {
      this.dialogTitle = '编辑用户';
      this.formData = Object.assign({}, row);
      this.dialogVisible = true;
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.dialogTitle === '新增用户') {
            axios
              .post('/users', this.formData)
              .then((res) => {
                this.$message.success('保存成功');
                this.getData();
                this.dialogVisible = false;
              })
              .catch((err) => {
                console.error(err);
              });
          } else {
            axios
              .put(`/users/${this.formData.id}`, this.formData)
              .then((res) => {
                this.$message.success('保存成功');
                this.getData();
                this.dialogVisible = false;
              })
              .catch((err) => {
                console.error(err);
              });
          }
        } else {
          console.error('validate failed');
        }
      });
    },
    remove(row) {
      this.$confirm('确定要删除该用户吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          axios
            .delete(`/users/${row.id}`)
            .then((res) => {
              this.$message.success('删除成功');
              this.getData();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.user-management {
  padding: 16px;
}

.pagination {
  margin-top: 16px;
  text-align: right;
}
</style>
<pre><code class="language-javascript">const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const fs = require('fs');

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

let users = [];

// 读取用户数据
fs.readFile('users.json', 'utf8', (err, data) =&gt; {
  if (err) throw err;
  users = JSON.parse(data);
});

// 保存用户数据
function saveUsers() {
  fs.writeFile('users.json', JSON.stringify(users), (err) =&gt; {
    if (err) throw err;
  });
}

// 获取用户列表
router.get('/users', (ctx, next) =&gt; {
  const page = parseInt(ctx.query.page) || 1; // 当前页码，默认为1
  const limit = parseInt(ctx.query.limit) || 10; // 每页显示的数据条数，默认为10
  const startIndex = (page - 1) * limit; // 起始数据索引
  const endIndex = startIndex + limit; // 结束数据索引
  const total = users.length; // 总数据条数
  const totalPages = Math.ceil(total / limit); // 总页数
  const data = users.slice(startIndex, endIndex); // 分页数据
  ctx.body = {
    code: 0,
    message: 'success',
    data: {
      list: data,
      total,
      totalPages,
    },
  };
});

// 新增用户
router.post('/users', (ctx, next) =&gt; {
  const { name, phone, email, address } = ctx.request.body;
  const user = {
    id: Date.now(),
    name,
    phone,
    email,
    address,
  };
  users.push(user);
  saveUsers();
  ctx.body = {
    code: 0,
    message: 'success',
    data: user,
  };
});

// 修改用户
router.put('/users/:id', (ctx, next) =&gt; {
  const { id } = ctx.params;
  const { name, phone, email, address } = ctx.request.body;
  const index = users.findIndex((user) =&gt; user.id == id);
  if (index &gt;= 0) {
    users[index] = {
      id: parseInt(id),
      name,
      phone,
      email,
      address,
    };
    saveUsers();
    ctx.body = {
      code: 0,
      message: 'success',
      data: users[index],
    };
  } else {
    ctx.status = 404;
    ctx.body = {
      code: -1,
      message: 'user not found',
    };
  }
});

// 删除用户
router.delete('/users/:id', (ctx, next) =&gt; {
  const { id } = ctx.params;
  const index = users.findIndex((user) =&gt; user.id == id);
  if (index &gt;= 0) {
    users.splice(index, 1);
    saveUsers();
    ctx.body = {
      code: 0,
      message: 'success',
    };
  } else {
    ctx.status = 404;
    ctx.body = {
      code: -1,
      message: 'user not found',
    };
  }
});

app.use(bodyParser());
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () =&gt; {
  console.log('Server is running at http://localhost:3000');
});
</code></pre>