写在最前面
今天是2025年1月1日, 是2025年的第一天, 祝大家新年快乐, 希望大家新的一年事事顺遂, 多财多福, 平安健康.
特意给大家准备了这个新年礼物, 一个前端开发效率提高的神器, 我自研的crud表格, 给大家来一场程序员的浪漫.
这是想了好多年一直想做的东西, 现在终于做出来了, 免费送给大家, 希望大家喜欢.
前言
我们之前已经开发了一个简单的用户管理系统, 已经实现了最基础的zdpui版本.
那么, 如果你是一个并没有一步一步跟着我学过来的同学, 又该如何上手zdpui框架的使用呢?
这个文章我们就来介绍一下zdpui里面最具特色的组件, 一个超级强大的vue3组件, crud表格组件.
超级强大的crud表格
在做后台管理系统的时候, 我们不可避免的要涉及到实现各种各样的增删改查的表格.
基本上每张表都要这么操作一下, 极其的繁琐, 那么有没有一种统一的解决方案能够解决这个问题呢?
今天它来了, 我们的主角, zdpui的crud超强表格.
搭建环境
首先, 我们把环境搭建起来.
这里我们选择一种最简单的方案, 直接把官方的c01_crud_table这个示例整个给下载下来.
在这里插入图片描述
这里不知道怎么下载的同学, 可以留言哈.
然后用webstorm打开.
在这里插入图片描述
接着我们执行命令安装依赖.
pnpm i
在这里插入图片描述
接着配置一个启动项.
在这里插入图片描述
运行项目.
在这里插入图片描述
浏览器访问. http://localhost:5173/
在这里插入图片描述
新增功能
点击新增按钮, 会弹出新增表单.
在这里插入图片描述
填写表单信息, 点击确定.
在这里插入图片描述
会将新增的数据插入到表格的第一行.
在这里插入图片描述
修改功能
点击编辑按钮, 会弹出编辑用户的界面. 会自动填充要编辑的用户的信息.
在这里插入图片描述
填写要修改的信息. 点击确定.
在这里插入图片描述
对应的信息自动被修改了.
在这里插入图片描述
删除功能
点击删除按钮, 会弹出一个删除的确认提示弹窗.
在这里插入图片描述
点击取消可以取消删除, 点击确定, 会确认删除, 表格中的数据也会自动消失. 大家注意看第一行数据, 这里原本新建的张三已经被删除了.
在这里插入图片描述
加载中的状态
如果数据是从后端加载过来的, 还贴心的给大家准备了一个加载中状态的动画.
在这里插入图片描述
仅仅只有一行代码
接下来我们看看App.vue
<script setup>
import CrudUserPage from "@/zdpui/demo/crud/CrudUserPage.vue";
</script>
<template>
<CrudUserPage/>
</template>
你会发现, 如果真的只是想要具备演示效果, 仅仅只需要一行代码就可以搞定.
<CrudUserPage/>
深入到细节
接下来我们来看看CrudUserPage这个Demo的代码, 这个就是大家如果真正动手开发的时候, 需要复制粘贴的一个案例.我这里演示的是用户的增删改查, 你可以复制过去改成员工的增删改查, 日志的增删改查等等...
<script setup>
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
</script>
<template>
<div>
<ZdpCrud1
title="用户"
:form-data="formData"
:api-get-page="apiGetPage"
:api-add="apiAdd"
:api-update="apiUpdate"
>
<ZdpInput1
label="姓名"
v-model="formData.name"
placeholder="请输入姓名"
/>
<ZdpInput1
label="年龄"
type="number"
v-model="formData.age"
placeholder="请输入年龄"
/>
</ZdpCrud1>
</div>
</template>
这就是最核心的代码, 严格算起来, 总共也不到20行代码就可以搞定!!!
这就是我很早之前梦寐以求的开发方法, 简单的几个配置, 就能够自动生成一个增删改查的页面, 还美观, 又特效, 炫酷!!!
解释一下代码
当然, 我们不仅仅只是炫技的, 还得给大家介绍一下每一行代码的作用.
const formData = reactive({
name: "张三",
age: 23,
});
这个是定义表单结构, 也就是你的表单应该长什么样. 比如用户只有姓名和年龄.
const apiGetPage = random.apiGetPageUser
const apiAdd = null
const apiUpdate = null
这三个是你需要自己实现的后端的接口, 这里的分页查询接口用的是zdpui自带的mock用户的接口.新增用户和更新用户的接口没有实现, 所以只有前端的演示效果,并没有修改真正的数据库.
<ZdpCrud1
title="用户"
:form-data="formData"
:api-get-page="apiGetPage"
:api-add="apiAdd"
:api-update="apiUpdate"
>
<ZdpInput1
label="姓名"
v-model="formData.name"
placeholder="请输入姓名"
/>
<ZdpInput1
label="年龄"
type="number"
v-model="formData.age"
placeholder="请输入年龄"
/>
</ZdpCrud1>
ZdpCrud1这是增删改查的组件, ZdpInput1这个是表单的输入框, 表单输入框会在新增和删除的时候那个弹出的模态框里面显示.
所以整个代码看下来, 大家只需要关心自己的数据长什么样就行了, 其他的都不需要关系, crud表格组件会自动帮你搞定.
比如怎么分页, 你只需要给我接口就行了, 怎么增加, 怎么删除也是一样的.
总结
zdpui框架致力于提高前端的开发效率, 从目前来看已经初步的做到了.
不过前端开发不仅仅只是一个数据表格开发而已, 还涉及到方方面面, 接下来我们要实现各种各样的案例, 继续封装和优化各种各样的组件, 来助力前端开发.
当然, zdpui是一个全栈框架, 我们不仅仅只开发前端功能, 后面后端功能也会提供配套接口, 达到生产级别可用.
所以, 让我们继续开搞吧!!!
