自研国产零依赖前端UI框架实战011 用户管理系统完成

摘要：// 用户增删改查操作的表单操作const useCrudForm = (data, formData, title = "用户") => {// 是否显示对话框const isShowModal = ref(false);// 对话框标题const moda

前言

通过前面的学习, 我们已经有了一个比较完善的用户管理系统了.

不过我们还可以继续优化.

封装表单相关的操作

我们可以把表单相关的操作封装到一个组合式API里面去.

// 用户增删改查操作的表单操作
const useCrudForm = (data, formData, title = "用户") => {
// 是否显示对话框
const isShowModal = ref(false);
// 对话框标题
const modalTitle = ref(`编辑${title}`);
// 是否为编辑
const isEdit = ref(false);
// 编辑的ID
const editId = ref(0);
// 编辑的索引
const editIndex = ref(0);

// 点击编辑, 显示编辑对话框
const onShowEditModal = (index, item) => {
isEdit.value = true;
isShowModal.value = true;
editId.value = item.id
editIndex.value = index
formData.name = item.name
formData.age = item.age
modalTitle.value = `编辑${title}`
}
// 清空表单
const clearFormData = =>Object.assign(formData, {})
// 隐藏对话框
const onHideModal = => isShowModal.value = false
// 显示对话框
const onShowAddModal = => {
clearFormData
modalTitle.value = `新增${title}`
isShowModal.value = true;
};
// 点击对话框中的保存按钮
const onSave = => {
isShowModal.value = false;

if (isEdit.value) {
data.value[editIndex.value] = {
id: editId.value,
...formData,
};
} else {
let newUser = {
id: random.id1,
...formData,
}
array.insertFirst(data.value, newUser)
}

isEdit.value = false;
clearFormData
};

return {
isShowModal,
modalTitle,
isEdit,
editIndex,
editId,
clearFormData,
onShowEditModal,
onShowAddModal,
onHideModal,
onSave,
}
}

此时去测试表单, 可以发现, 一切依旧还是正常的.

在这里插入图片描述

此时完整的App.vue代码如下.

import zdp_table1 from"./zdpui/components/zdp_table1.vue";
import zdp_page1 from"./zdpui/components/zdp_page1.vue";
import random from"./zdpui/js/random.js";
import {onMounted, reactive, ref} from"vue";
import zdp_confirm1 from"./zdpui/components/zdp_confirm1.vue";
import zdp_modal1 from"./zdpui/components/zdp_modal1.vue";
import Zdp_input1 from"./zdpui/components/zdp_input1.vue";
import Zdp_button1 from"./zdpui/components/zdp_button1.vue";
import array from"./zdpui/js/array.js";
import crud from"./zdpui/js/crud.js";

const {
page,
size,
total,
data,
loading,
onChange,
loadData,
} = crud.useCrudPage(random.apiGetPageUser)
const {
columns,
isShowDeleteDialog,
onDelete,
onShowDeleteDialog,
onHideDeleteDialog,
} = crud.useCrudTable(data)

const formData = reactive({
name: "张三",
age: 23,
});

const {
isShowModal,
modalTitle,
onShowEditModal,
onShowAddModal,
onHideModal,
onSave,
} = crud.useCrudForm(data, formData)

onMounted(async =>{
await loadData
console.log("data...", data.value)
})

@click="onShowAddModal"
text="新增"
/>
:columns="columns"
:data="data"
:loading="loading"
@edit="onShowEditModal"
@delete="onShowDeleteDialog"
/>
:page="page"
:size="size"
:total="total"
@change="onChange"
/>
:show="isShowDeleteDialog"
@confirm="onDelete"
@close="onHideDeleteDialog"
/>
:show="isShowModal"
:title="modalTitle"
@confirm="onSave"
@close="onHideModal"
>
label="姓名"
v-model="formData.name"
placeholder="请输入姓名"
/>
label="年龄"
type="number"
v-model="formData.age"
placeholder="请输入年龄"
/>

封装crud组件

紧接着, 我们来封装crud的组件.

import zdp_table1 from"./zdp_table1.vue";
import zdp_page1 from"./zdp_page1.vue";
import random from"../js/random.js";
import {onMounted, reactive, ref} from"vue";
import zdp_confirm1 from"./zdp_confirm1.vue";
import zdp_modal1 from"./zdp_modal1.vue";
import Zdp_input1 from"./zdp_input1.vue";
import Zdp_button1 from"./zdp_button1.vue";
import crud from"../js/crud.js";
const props = defineProps({
// 标题
title: {
type: String,
required: true,
},
// 表单数据
formData: {
type: Object,
required: true,
},
// 分页查询数据的接口
apiGetPage: {
type: Function,
required: true,
},
// 新增数据的接口
apiAdd: {
type: Function,
required: false,
},
// 删除数据的接口
apiUpdate: {
type: Function,
required: false,
},
})
const {
page,
size,
total,
data,
loading,
onChange,
loadData,
} = crud.useCrudPage(props.apiGetPage)
const {
columns,
isShowDeleteDialog,
onDelete,
onShowDeleteDialog,
onHideDeleteDialog,
} = crud.useCrudTable(data)

const {
isShowModal,
modalTitle,
onShowEditModal,
onShowAddModal,
onHideModal,
onSave,
} = crud.useCrudForm(data, props.formData, props.title)

onMounted(async =>{
await loadData
})

@click="onShowAddModal"
text="新增"
/>
:columns="columns"
:data="data"
:loading="loading"
@edit="onShowEditModal"
@delete="onShowDeleteDialog"
/>
:page="page"
:size="size"
:total="total"
@change="onChange"
/>
:show="isShowDeleteDialog"
@confirm="onDelete"
@close="onHideDeleteDialog"
/>
:show="isShowModal"
:title="modalTitle"
@confirm="onSave"
@close="onHideModal"
>

此时App.vue就可以简化为:

import {onMounted, reactive, ref} from"vue";

import random from"./zdpui/js/random.js";
import Zdp_input1 from"./zdpui/components/zdp_input1.vue";
import zdp_crud1 from"./zdpui/components/zdp_crud1.vue";

const formData = reactive({
name: "张三",
age: 23,
});
const apiGetPage = random.apiGetPageUser

title="用户"
:form-data="formData"
:api-get-page="apiGetPage"
:api-add="null"
:api-update="null"
>
label="姓名"
v-model="formData.name"
placeholder="请输入姓名"
/>
label="年龄"
type="number"
v-model="formData.age"
placeholder="请输入年龄"
/>

再次测试, 可以发现页面效果依然是一样的.

下一步做什么

目前用户管理系统增删改查的功能我们就基本做完了, 有了crud组件以后, 我们做普通的数据管理也变得足够的简单.

那么下一步要做什么呢?

做图表相关的功能吗?

整合fastapi3进行开发吗?

在继续开发之前, 我们先来配置vite的路径别名, 这样我们后面开发ui组件会更方便.

配置vite路径别名

修改vite.config.js

import {defineConfig} from'vite'
import vue from'@vitejs/plugin-vue'
import {resolve} from'path';

exportdefault defineConfig({
plugins: [
vue,
],
resolve: {
alias: {
"@": resolve(__dirname, 'src'),
}
}
})

这样就可以使用@作为根路径的别名了.

此时修改App.vue

import {onMounted, reactive, ref} from "vue";import random from "@/zdpui/js/random.js";import Zdp_input1 from "@/zdpui/components/zdp_input1.vue";import zdp_crud1 from "@/zdpui/components/zdp_crud1.vue";const formData = reactive({ name: "张三", age: 23,});const apiGetPage = random.apiGetPageUserconst apiAdd = nullconst apiUpdate = null

将案例封装为demo

为了便于后面的学习和演示, 可以方便的复制粘贴, 我们把这个案例封装为一个demo组件.

import {onMounted, reactive, ref} from"vue";

import random from"@/zdpui/js/random.js";
import ZdpInput1 from"@/zdpui/components/ZdpInput1.vue";
import ZdpCrud1 from"@/zdpui/components/ZdpCrud1.vue";

const formData = reactive({
name: "张三",
age: 23,
});
const apiGetPage = random.apiGetPageUser
const apiAdd = null
const apiUpdate = null

title="用户"
:form-data="formData"
:api-get-page="apiGetPage"
:api-add="apiAdd"
:api-update="apiUpdate"
>
label="姓名"
v-model="formData.name"
placeholder="请输入姓名"
/>
label="年龄"
type="number"
v-model="formData.age"
placeholder="请输入年龄"
/>

此时, 在App.vue中只需要一行代码就可以调用了.

import CrudUserPage from"@/zdpui/demo/crud/CrudUserPage.vue";