Element UI 用户管理页面：增删改查、分页和数据接口实现

本文将使用 Element UI 创建一个用户管理页面，该页面包含用户列表展示、用户数据的增删改查功能以及数据分页功能。同时，我们将使用 Node.js 和 Express 框架搭建一个简单的服务器来提供数据接口，将用户数据存储在服务端定义的变量中。

页面功能需求

展示用户列表，包括用户姓名、电话、邮箱和地址。
提供添加、修改、删除用户的功能。
实现数据分页功能，以便展示大量用户数据。

前端页面实现

使用 Element UI 框架，我们可以轻松地构建用户管理页面。以下代码示例展示了如何使用 Element UI 的组件创建用户列表、添加用户、修改用户、删除用户和数据分页功能。

<template>
  <el-table :data="tableData" border style="width: 100%" :row-key="'id'" stripe>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="phone" label="电话" width="150"></el-table-column>
    <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
  <el-dialog title="用户信息" :visible.sync="dialogVisible" width="30%">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="姓名" prop="name">
        <el-input v-model.trim="form.name"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model.trim="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model.trim="form.email"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model.trim="form.address"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      form: {
        name: '',
        phone: '',
        email: '',
        address: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 获取用户数据，示例代码使用了 axios
      axios.get('/api/users').then(res => {
        this.tableData = res.data;
        this.total = res.data.length;
      }).catch(err => {
        console.error(err);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleEdit(row) {
      this.form = Object.assign({}, row);
      this.dialogVisible = true;
    },
    handleDelete(row) {
      // 删除用户数据，示例代码使用了 axios
      axios.delete('/api/users/' + row.id).then(res => {
        this.fetchData();
      }).catch(err => {
        console.error(err);
      });
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 添加或修改用户数据，示例代码使用了 axios
          let url = '/api/users';
          if (this.form.id) {
            url += '/' + this.form.id;
          }
          axios[this.form.id ? 'put' : 'post'](url, this.form).then(res => {
            this.fetchData();
            this.dialogVisible = false;
          }).catch(err => {
            console.error(err);
          });
        }
      });
    },
  },
}
</script>

服务端代码实现

使用 Node.js 和 Express 框架，我们可以搭建一个简单的服务器来提供数据接口，将用户数据存储在服务端定义的变量中。

const express = require('express');
const app = express();

// 用户数据存储在服务端定义变量中
let users = [
  { id: 1, name: '张三', phone: '123456789', email: 'zhangsan@example.com', address: '北京市' },
  { id: 2, name: '李四', phone: '234567890', email: 'lisi@example.com', address: '上海市' },
  { id: 3, name: '王五', phone: '345678901', email: 'wangwu@example.com', address: '广州市' },
];

// 设置响应头，允许跨域请求
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
});

// 获取所有用户数据
app.get('/api/users', (req, res) => {
  res.json(users);
});

// 获取指定id的用户数据
app.get('/api/users/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const user = users.find(u => u.id === id);
  if (user) {
    res.json(user);
  } else {
    res.status(404).json({ message: '用户不存在' });
  }
});

// 添加用户数据
app.post('/api/users', (req, res) => {
  const user = req.body;
  user.id = Date.now();
  users.push(user);
  res.json(user);
});

// 修改用户数据
app.put('/api/users/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const index = users.findIndex(u => u.id === id);
  if (index !== -1) {
    users[index] = req.body;
    users[index].id = id;
    res.json(users[index]);
  } else {
    res.status(404).json({ message: '用户不存在' });
  }
});

// 删除用户数据
app.delete('/api/users/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const index = users.findIndex(u => u.id === id);
  if (index !== -1) {
    users.splice(index, 1);
    res.json({ message: '删除成功' });
  } else {
    res.status(404).json({ message: '用户不存在' });
  }
});

// 启动服务器，监听3000端口
app.listen(3000, () => {
  console.log('Server is running on port 3000.');
});

总结

本文介绍了如何使用 Element UI 构建用户管理页面，并使用 Node.js 和 Express 框架搭建数据接口，实现用户数据的增删改查和数据分页功能。这只是一个简单的示例，实际开发中需要根据具体需求进行修改和完善。

注意：

前端代码中的 axios 是一个用于发送 HTTP 请求的库，需要在项目中安装。
服务端代码中使用了 Date.now() 来生成用户 id，实际开发中建议使用数据库自增主键或 UUID 来生成唯一 id。
这里只是使用服务端变量存储用户数据，实际开发中建议使用数据库来存储用户数据，以提高数据安全性、可维护性和可扩展性。

希望本文能够帮助你快速上手使用 Element UI 构建用户管理页面并实现数据交互。