返回

Vue3 + ElementPlus + Axios 实现联系人列表管理后台

Android

联系人列表管理：Node.js + Vue3 + ElementPlus 实现

背景介绍

管理联系人信息是许多业务和个人应用中的一个常见需求。为了实现这一目的，可以使用各种技术栈。本文将探讨如何使用 Node.js、Vue3 和 ElementPlus 来构建一个联系人列表管理应用程序。

Node.js 服务

Node.js 服务负责处理 API 请求并与数据库（在本例中为模拟数据存储）进行交互。以下是示例服务代码：

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

app.use(express.json());

const contacts = [
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '123456789',
    address: '北京市海淀区'
  },
  // 省略更多联系人数据
];

app.get('/contacts', (req, res) => {
  // 分页查询联系人数据
  const page = req.query.page || 1;
  const size = req.query.size || 10;
  const start = (page - 1) * size;
  const end = start + size;
  const data = contacts.slice(start, end);
  res.json({
    data: data,
    total: contacts.length
  });
});

app.post('/contacts', (req, res) => {
  // 添加联系人数据
  const contact = req.body;
  contact.id = contacts.length + 1;
  contacts.push(contact);
  res.json(contact);
});

app.put('/contacts/:id', (req, res) => {
  // 编辑联系人数据
  const id = req.params.id;
  const contact = req.body;
  const index = contacts.findIndex(c => c.id === parseInt(id));
  if (index > -1) {
    contacts[index] = contact;
    res.json(contact);
  } else {
    res.status(404).json({
      message: 'Contact not found'
    });
  }
});

app.delete('/contacts/:id', (req, res) => {
  // 删除联系人数据
  const id = req.params.id;
  const index = contacts.findIndex(c => c.id === parseInt(id));
  if (index > -1) {
    contacts.splice(index, 1);
    res.json({
      message: 'Contact deleted'
    });
  } else {
    res.status(404).json({
      message: 'Contact not found'
    });
  }
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Vue3 + ElementPlus 客户端

Vue3 + ElementPlus 客户端负责展示联系人列表并处理用户交互。以下是一些关键组件：

联系人列表

<el-table :data="contacts">
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="email" label="邮箱"></el-table-column>
  <el-table-column prop="phone" label="电话"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button size="mini" type="primary" @click="editContact(scope.row)">编辑</el-button>
      <el-button size="mini" type="danger" @click="deleteContact(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

添加联系人表单

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="姓名">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="邮箱">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <el-form-item label="电话">
    <el-input v-model="form.phone"></el-input>
  </el-form-item>
  <el-form-item label="地址">
    <el-input v-model="form.address"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="addContact">添加</el-button>
  </el-form-item>
</el-form>

分页

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  @current-change="handleCurrentChange"
>
</el-pagination>

Vue3 + ElementPlus 脚本

import axios from 'axios';

export default {
  data() {
    return {
      contacts: [],
      form: {
        name: '',
        email: '',
        phone: '',
        address: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    getContacts() {
      axios.get('/contacts', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      })
      .then(response => {
        this.contacts = response.data.data;
        this.total = response.data.total;
      })
    },
    addContact() {
      axios.post('/contacts', this.form)
      .then(() => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.getContacts()
        this.form = {
          name: '',
          email: '',
          phone: '',
          address: ''
        }
      })
    },
    editContact(contact) {
      this.form = contact;
    },
    updateContact() {
      axios.put('/contacts/' + this.form.id, this.form)
      .then(() => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.getContacts()
      })
    },
    deleteContact(contact) {
      axios.delete('/contacts/' + contact.id)
      .then(() => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getContacts()
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getContacts()
    }
  },
  mounted() {
    this.getContacts()
  }
}

运行应用程序

要运行应用程序，请执行以下步骤：

  1. 在 Node.js 服务目录中运行 node server.js。
  2. 在 Vue3 + ElementPlus 客户端目录中运行 npm run dev。

常见问题解答

  1. 如何添加联系人？

    • 点击“添加”按钮，输入联系人信息并点击“添加”按钮即可添加联系人。

  2. 如何编辑联系人？

    • 点击联系人列表中对应联系人的“编辑”按钮，修改联系人信息并点击“保存”按钮即可编辑联系人。

  3. 如何删除联系人？

    • 点击联系人列表中对应联系人的“删除”按钮即可删除联系人。

  4. 如何分页展示联系人？

    • 联系人列表下方提供了分页控件，可以点击页码进行分页展示。

  5. 如何使用 API？

    • Node.js 服务提供了以下 API：
      • GET /contacts：获取联系人列表
      • POST /contacts：添加联系人
      • PUT /contacts/:id：编辑联系人
      • DELETE /contacts/:id：删除联系人