简单案例

作者:唐亚峰 | battcn

字数统计:437 字

增删改查

下面通过一个小 DEMO 来给大家讲解如何在5分钟内快速上手开发自己的分页+增删改查

前端实现

创建 index.vue 文件

<template>
  <fs-page>
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </fs-page>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";

//此处为组件定义
export default defineComponent({
  name: "DemoPageList",
  setup() {
    const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: {} });
    // 页面打开后获取列表数据
    onMounted(() => {
      crudExpose.doRefresh();
    });
    return {
      crudBinding,
      crudRef
    };
  }
});
</script>

创建一个 crud.tsx

import * as api from "./api";
import dayjs from "dayjs";
import { useI18n } from "@/hooks/web/useI18n";
import { defHttp } from "@/utils/http/axios";

const { t } = useI18n();
export default function () {
  return {
    crudOptions: {
      request: {
        // 查询
        pageRequest: async (query) => await defHttp.post({ url: "/demo/page", data: query }),
        // 添加
        addRequest: async ({ form }) => await defHttp.post({ url: "/demo/create", data: form }),
        // 编辑
        editRequest: async ({ form }) => await defHttp.put({ url: `/demo/${form.id}`, data: form }),
        // 删除 这里演示调用 其它文件的方法
        delRequest: async ({ row }) => await api.DelObj(row.id),
      },
      columns: {
        id: {
          title: "ID",
          type: "text",
          form: { show: false },
          column: { show: false },
        },
        name: {
          title: "名称",
          type: "text",
          search: { show: true },
          column: { width: 200 },
          form: {
            // 必填验证
            rules: [{ required: true, message: "请填写名称" }],
          },
        },
        mobile: {
          title: "队长手机",
          type: "text",
          column: { width: 200 },
          form: {
            rules: [
              { required: true, message: "请填写手机号" },
              { pattern: /^1\d{10}$/, message: "手机号格式错误" },
            ],
          },
        },
        createdName: {
          // 国际化
          title: t("common.createdName"),
          type: "text",
          form: { show: false },
          column: { ellipsis: true, width: 160 },
        },
      },
    },
  };
}

后端实现

后端同学只要写好响应的增删改查方法即可，这里就不在过多赘述了

@GetMapping
@Operation(summary = "接口名称 - [Levin] - [DONE]")
public IPage<分页返回实体> query(PageRequest request) {
    return service.page(request.buildPage(), Wraps.<数据库实体>lbQ()
                    .eq(数据库实体::getSysOrgId, orgId).orderByAsc(数据库实体::getSort))
            .convert(x -> BeanUtil.toBean(x, 分页返回实体.class));
}