使用vue3搭建前端模拟增删改查

主要工具

vue3
element-plus
axios
mockjs

使用mockjs模拟数据

import Mock from "mockjs";
// 内存模拟数据
const arr = [];
for (let i = 0; i < 10; i++) {arr.push({id: Mock.mock("@id"),name: Mock.mock("@cname"),place: Mock.mock("@county(true)"),});
}
export default [{url: "/list",method: "get",response: () => {return arr;},},{url: "/add",method: "post",response: (req) => {console.log(req.body, "body");arr.push(Mock.mock({id: "@id",...req.body,}));return {code: 200,message: "添加成功",};},},{url: "/del/:id",method: "delete",response: (req) => {const index = arr.findIndex((item) => item.id === req.query.id);if (index > -1) {arr.splice(index, 1);return { success: true };} else {return { success: false };}},},{url: "/edit/:id",method: "patch",response: ({ query, body }) => {const item = arr.find((item) => item.id === query.id);if (item) {item.name = body.name;item.place = body.place;return { success: true };} else {return { success: false };}},},
];

列表页

<script setup>
import { onMounted, ref } from "vue";
import Edit from "./components/Edit.vue";
import Add from "./components/Add.vue";
import axios from "axios";
// TODO: 列表渲染
const list = ref([]);
const getList = async () => {const res = await axios.get("List");console.log(res, "res");list.value = res.data;
};
onMounted(() => {getList();
});
// TODO: 新增功能
const addRef = ref(null);
const addDialog = (item) => {addRef.value.open(item);
};
// TODO: 删除功能
const onDelete = async (id) => {await axios.delete(`/del/${id}`);getList();
};// TODO: 编辑功能
const editRef = ref(null);
const openDialog = (item) => {editRef.value.open(item);
};// 更新列表
const updateList = () => {getList();
};
</script><template><div class="app"><el-button type="primary" @click="addDialog">新增</el-button><el-table :data="list"><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="姓名" prop="name" width="150"></el-table-column><el-table-column label="籍贯" prop="place"></el-table-column><el-table-column label="操作" width="150"><template #default="{ row }"><el-button type="primary" link @click="openDialog(row)">编辑</el-button><el-button type="danger" link @click="onDelete(row.id)">删除</el-button></template></el-table-column></el-table></div><Edit ref="editRef" @update-list="updateList" /><Add ref="addRef" @update-list="updateList" />
</template><style scoped>
.app {width: 980px;margin: 100px auto 0;
}
</style>

这里假设添加和编辑功能不一致

新增页面

component/Add.vue

<script setup>
import { ref } from "vue";
import axios from "axios";const addVisible = ref(false);// 表单数据
const form = ref({name: "",place: "",
});// 打开弹框
const open = (item) => {form.value.name = "";form.value.place = "";addVisible.value = true;
};// 提交表单
const emit = defineEmits(["update-list"]);
const onSubmit = async () => {if (form.value.name && form.value.place) {// 提交接口await axios.post("/add", form.value);// 关闭弹框addVisible.value = false;// 通知父组件拉取最新列表emit("update-list");}
};defineExpose({open,
});
</script><template><el-dialog v-model="addVisible" title="新增" width="400px"><el-form label-width="50px"><el-form-item label="姓名"><el-input placeholder="请输入姓名" v-model="form.name" /></el-form-item><el-form-item label="籍贯"><el-input placeholder="请输入籍贯" v-model="form.place" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="addVisible = false">取消</el-button><el-button type="primary" @click="onSubmit">确认</el-button></span></template></el-dialog>
</template><style scoped>
.el-input {width: 290px;
}
</style>

编辑页面

component/Edit.vue

<script setup>
import { ref } from "vue";
import axios from "axios";
// TODO: 编辑// 控制弹框打开关闭
const dialogVisible = ref(false);// 表单数据
const form = ref({name: "",place: "",
});// 打开弹框
const open = (item) => {const { name, place, id } = item;dialogVisible.value = true;form.value.name = name;form.value.place = place;form.value.id = id;
};// 提交表单
const emit = defineEmits(["update-list"]);
const onSubmit = async () => {if (form.value.name && form.value.place) {// 提交接口await axios.patch(`/edit/${form.value.id}`, form.value);// 关闭弹框dialogVisible.value = false;// 通知父组件拉取最新列表emit("update-list");}
};defineExpose({open,
});
</script><template><el-dialog v-model="dialogVisible" title="编辑" width="400px"><el-form label-width="50px"><el-form-item label="姓名"><el-input placeholder="请输入姓名" v-model="form.name" /></el-form-item><el-form-item label="籍贯"><el-input placeholder="请输入籍贯" v-model="form.place" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="onSubmit">确认</el-button></span></template></el-dialog>
</template><style scoped>
.el-input {width: 290px;
}
</style>