vue3实现表格的【增，删，改，查】完整代码

难道她喜欢我
2,243 阅读3分钟

效果图-车辆登记的表格

16.PNG

17.PNG

18.PNG

首先，要安装下面的几个库

npm install axios express cors uuid element-plus

  • axios：Axios是一个HTTP客户端，用于发送网络请求。
  • express：Express是一个Web应用框架，用于构建Web应用。(这里用于模拟后端服务)
  • cors：CORS是一个标准，用于允许跨源请求。
  • uuid：UUID是一种标准，用于生成全局唯一的标识符。(用于生成id)
  • element-plus：Element Plus是一个基于Vue的组件库，用于构建用户界面。

配置代理(proxy)

// 引入@vue/cli-service模块
const { defineConfig } = require('@vue/cli-service')
// 导出配置
module.exports = defineConfig({
  // 转译依赖
  transpileDependencies: true,
  // 开发服务器配置
  devServer: {
    // 代理配置
    proxy: {
      // 代理路径
      '/api': {
        // 目标地址
        target: 'http://localhost:3000',
        // 是否改变源地址
        changeOrigin: true,
        // 路径重写
        pathRewrite: {
          // 将/api替换为空字符串
          '^/api': ''
        }
      }
    }
  }
})

表格数据存储

[
  {
    "id": "fb81e40d-a4af-4311-9179-4f0e3ec9d342",
    "date": "2024/10/28",
    "number": "粤A12348",
    "brand": "奥迪",
    "type": "suv",
    "owner": "张三",
    "creator": "admin"
  },
  {
    "id": "b60cbe58-a7fa-43f1-b97d-a947fd200779",
    "date": "2024/10/28",
    "number": "京B67890",
    "brand": "奔驰",
    "type": "mpv",
    "owner": "李四",
    "creator": "admin"
  },
  {
    "id": "11dd2336-3cb9-4a8a-aa2d-9b181f9f4540",
    "date": "2024/10/28",
    "number": "沪C54321",
    "brand": "宝马",
    "type": "sedan",
    "owner": "王五",
    "creator": "admin"
  },
]

模拟后端服务

const express = require("express"); // 引入express模块
const bodyParser = require("body-parser"); // 引入body-parser模块
const cors = require("cors"); // 引入cors模块
const fs = require("fs").promises; // 引入fs模块
const app = express(); // 创建express实例
const port = 3000; // 设置端口号
const { v4: uuidv4 } = require("uuid"); // 引入uuid模块

app.use(cors());// 使用cors模块解决跨域问题
app.use(bodyParser.json());// 使用body-parser模块解析请求体

// 读取车辆信息
async function getVehicle() {
  try {
    const data = await fs.readFile("./vehicle.json", "utf8");
    return JSON.parse(data);
  } catch (error) {
    console.error("读取文件时发生错误:", error);
    throw error;
  }
}

// 获取车辆信息
app.get("/vehicle", async (req, res) => {
  try {
    const vehicle = await getVehicle();
    res.json(vehicle);
  } catch (error) {
    console.error("Error reading file:", error);
  }
});

// 添加车辆信息
app.post("/vehicle", async (req, res) => {
  try {
    const { number, brand, type, owner } = req.body;
    if (!number || !brand || !type || !owner) {
      return res.status(400).json({ message: "请填写完整信息" });
    }
    const vehicle = await getVehicle();
    const newVehicle = {
      id: uuidv4(),
      date: new Date().toLocaleDateString(),
      number,
      brand,
      type,
      owner,
      creator: "admin",
    };
    vehicle.push(newVehicle);
    await fs.writeFile(
      "./vehicle.json",
      JSON.stringify(vehicle, null, 2),
      "utf8"
    );
    return res.status(200).json({ message: "添加成功" });
  } catch (error) {
    return res.status(500).json({ message: "服务器错误" });
  }
});

// 删除车辆信息
app.delete("/vehicle/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const vehicle = await getVehicle();
    const index = vehicle.findIndex((item) => item.id === id);

    if (index === -1) {
      return res.status(404).json({ message: "车辆未找到" });
    }

    vehicle.splice(index, 1);
    await fs.writeFile(
      ".vehicle.json",
      JSON.stringify(vehicle, null, 2),
      "utf8"
    );
    return res.status(200).json({ message: "删除成功" });
  } catch (error) {
    console.error("服务器错误:", error);
    return res.status(500).json({ message: "服务器错误" });
  }
});

// 更新车辆信息
app.put("/vehicle/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const { newNumber, newBrand, newType, newOwner } = req.body;
    if (!newNumber || !newBrand || !newType || !newOwner) {
      return res.status(400).json({ message: "请填写完整信息" });
    }
    const vehicle = await getVehicle();
    const index = vehicle.findIndex((item) => item.id === id);
    if (index === -1) {
      return res.status(404).json({ message: "车辆未找到" });
    }
    vehicle[index] = {
      ...vehicle[index],
      number: newNumber,
      brand: newBrand,
      type: newType,
      owner: newOwner,
    };
    await fs.writeFile(
      "./vehicle.json",
      JSON.stringify(vehicle, null, 2),
      "utf8"
    );
    return res.status(200).json({ message: "更新成功" });
  } catch (error) {
    console.error("服务器错误:", error);
    return res.status(500).json({ message: "服务器错误" });
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

实现表格

<template>
  <!-- 对话框-添加 -->
  <el-dialog v-model="dialog1" title="填写信息" width="500">
    <el-form :model="form1">
      <el-form-item prop="data">
        <el-input v-model="form1.number" placeholder="请输入车牌号"></el-input>
      </el-form-item>
      <el-form-item prop="brand">
        <el-input v-model="form1.brand" placeholder="请输入车品牌"></el-input>
      </el-form-item>
      <el-form-item prop="type">
        <el-input v-model="form1.type" placeholder="请输入车类型"></el-input>
      </el-form-item>
      <el-form-item prop="owner">
        <el-input v-model="form1.owner" placeholder="请输入车主"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addRow">添加</el-button>
        <el-button @click="dialog1 = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 对话框-修改 -->
  <el-dialog v-model="dialog2" title="填写信息" width="500">
    <el-form :model="form2">
      <el-form-item prop="data">
        <el-input
          v-model="form2.newNumber"
          placeholder="请输入车牌号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="brand">
        <el-input
          v-model="form2.newBrand"
          placeholder="请输入车品牌"
        ></el-input>
      </el-form-item>
      <el-form-item prop="type">
        <el-input v-model="form2.newType" placeholder="请输入车类型"></el-input>
      </el-form-item>
      <el-form-item prop="owner">
        <el-input v-model="form2.newOwner" placeholder="请输入车主"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="putRow">修改</el-button>
        <el-button @click="dialog2 = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <div style="display: flex; gap: 10px; margin-bottom: 10px">
    <el-input v-model="search" placeholder="输入车牌号" style="width: 200px" />
    <el-button plain type="success" @click="dialog1 = true">添加</el-button>
  </div>
  <el-table :data="tableData1" border style="width: 100%; height: 500px">
    <el-table-column fixed type="index" label="序号" width="80" />
    <el-table-column prop="date" label="创建日期" min-width="200" />
    <el-table-column prop="number" label="车牌号" min-width="200" />
    <el-table-column prop="brand" label="车品牌" min-width="200" />
    <el-table-column prop="type" label="车类型" min-width="200" />
    <el-table-column prop="owner" label="车主" min-width="200" />
    <el-table-column prop="creator" label="创建人" min-width="200" />
    <el-table-column prop="id" label="id" width="350" />
    <el-table-column fixed="right" label="操作" width="150">
      <template v-slot="scope">
        <el-button
          link
          type="danger"
          size="small"
          @click="deleteRow(scope.row)"
        >
          删除
        </el-button>
        <el-button link type="primary" size="small" @click="editRow(scope.row)">
          修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import axios from "axios";
import { ref, computed } from "vue";
import { onMounted } from "vue";
import { ElMessage } from "element-plus";

const tableData = ref([]);
const search = ref("");
const tableData1 = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.number.toLowerCase().includes(search.value.toLowerCase())
  )
);
const dialog1 = ref(false);
const dialog2 = ref(false);
const form1 = ref({
  number: "",
  brand: "",
  type: "",
  owner: "",
});

const form2 = ref({
  newNumber: "",
  newBrand: "",
  newType: "",
  newOwner: "",
});
const getVehicle = async () => {
  try {
    const response = await axios("/api/vehicle");
    tableData.value = response.data;
  } catch (error) {
    console.error(error);
  }
};

const addRow = async () => {
  try {
    const response = await axios.post("/api/vehicle", form1.value);
    if (response.status === 200) {
      ElMessage({
        message: response.data.message,
        type: "success",
      });
    }
  } catch (error) {
    if (error.response && error.response.status === 400) {
      ElMessage({
        message: error.response.data.message,
        type: "error",
      });
    } else {
      ElMessage({
        message: error.response.data.message,
        type: "warning",
      });
    }
  }
};

const deleteRow = async (row) => {
  try {
    console.log(`Deleting vehicle with ID: ${row.id}`); // 添加调试信息
    const response = await axios.delete(`/api/vehicle/${row.id}`);
    if (response.status === 200) {
      ElMessage({
        message: response.data.message,
        type: "success",
      });
    }
  } catch (error) {
    console.error(error);
    ElMessage({
      message: error.response.data.message,
      type: "error",
    }); // 打印错误信息
  }
};

const editRow = (row) => {
  selectedRow.value = row;
  form2.value.newNumber = row.number;
  form2.value.newBrand = row.brand;
  form2.value.newType = row.type;
  form2.value.newOwner = row.owner;
  dialog2.value = true;
};

const selectedRow = ref(null); // 初始化selectedRow
const putRow = async () => {
  try {
    const response = await axios.put(
      `/api/vehicle/${selectedRow.value.id}`,
      form2.value
    );
    if (response.status === 200) {
      ElMessage({
        message: response.data.message,
        type: "success",
      });
      dialog2.value = false;
      getVehicle(); // 重新获取数据以刷新表格
    }
  } catch (error) {
    if (error.response && error.response.status === 400) {
      ElMessage({
        message: error.response.data.message,
        type: "error",
      });
    } else {
      ElMessage({
        message: error.response.data.message,
        type: "warning",
      });
    }
  }
};

onMounted(() => {
  getVehicle();
});
</script>

<style>
.el-table .cell {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
</style>

ok，以上就是全部过程，有不懂的，评论区讨论 <(￣ c￣)y▂ξ

avatar
文章
阅读
粉丝