「写不过瘾系列」使用 cool-admin,4步极速 CRUD

神仙都没用 等级 700 3 2

cool-admin 传送门 → https://github.com/cool-team-official/cool-admin-vue

「写不过瘾系列」使用 cool-admin,4步极速 CRUD

1.vscode 编辑器下输入关键字 cl-crud,会生成对应的模板代码:

<template>
    <cl-crud ref="crud" @load="onLoad">
        <el-row type="flex" align="middle">
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key />
        </el-row>

        <el-row>
            <!-- 数据表格 -->
            <cl-table v-bind="table"></cl-table>
        </el-row>

        <el-row type="flex">
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </el-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
    </cl-crud>
</template>

<script>
    export default {
        data() {
            return {
                // 新增、编辑配置
                upsert: {
                    items: []
                },
                // 表格配置
                table: {
                    columns: []
                }
            };
        },
        methods: {
            onLoad({ ctx, app }) {
                // crud 配置
                ctx.service().done();
                // 发送 page 接口请求
                app.refresh();
            }
        }
    };
</script>

2.编辑数据表格 cl-table

{
    table: {
        // 参数与 el-table-column 一致,并支持许多骚操作
        columns: [
            // 多选列
            {
                type: "selection",
                width: 60
            },
            // 自定义列
            {
                label: "昵称",
                prop: "name"
            },
            {
                label: "账户",
                prop: "price",
                sortable: "custom" // 是否添加排序
            },
            {
                label: "状态",
                prop: "status",
                // 字典匹配,使用 el-tag 展示
                dict: [
                    {
                        label: "启用",
                        value: 1,
                        type: "primary"
                    },
                    {
                        label: "禁用",
                        value: 0,
                        type: "danger"
                    }
                ]
            },
            {
                label: "创建时间",
                prop: "createTime"
            },
            // 操作按钮列,默认包含:编辑、删除
            {
                type: "op"
            }
        ];
    }
}

3.编辑新增、编辑表单 cl-upsert,动一动就完事了:

{
    upsert: {
        items: [
            {
                label: "昵称",
                prop: "name",
                // 参数与 el-form-item 一致
                props: {},
                value: "神仙都没用", // 昵称默认值
                // 渲染参数,支持 slot, 组件实例,jsx
                component: {
                    name: "el-input", // 可以是任意已注册的组件名
                    props: {}, // 组件的参数
                    on: {} // 组件的回调事件
                },
                // 验证规则,与 el-form 一致
                rules: {
                    required: true,
                    message: "昵称不呢为空"
                }
            },
            {
                label: "存款",
                prop: "price",
                component: {
                    name: "el-input-number",
                    props: {
                        min: 0,
                        max: 10000
                    }
                }
            },
            {
                label: "状态",
                prop: "status",
                value: 1,
                component: {
                    name: "el-radio-group",
                    options: [
                        {
                            label: "启用",
                            value: 1
                        },
                        {
                            label: "禁用",
                            value: 0
                        }
                    ]
                }
            }
        ];
    }
}

4.绑定 service。在 src/service/ 下新建文件 test.js,并编辑:

// src/service/test.js
import { BaseService, Service, Permission } from "cl-admin";

// 请求接口的路径
@Service("test")
class Test extends BaseService {
    // 继承 BaseService 后,拥有 page, list, add, delete, update, info 6个基本接口

    // 自定义其他接口
    @Permission("product") // 权限装饰器,可选
    product(id) {
        // this.request() 参数与 axios 一致
        return this.request({
            url: "/product",
            method: "POST",
            data: {
                id
            }
        });
    }
}

export default Test;

src/service/ 下的文件,框架会自动根据 目录结构文件名称 格式化成对应的 $service 对象。你现在可以这么使用它:

this.$service.test.page({ page: 1 });
this.$service.test.product(1);

service 编写好后,我们把它绑定在 crud 上:

export default {
    methods: {
        onLoad({ ctx, app }) {
            // 绑定 service,这边指定到 test 即可
            ctx.service(this.$service.test).done();

            // 发起 page 请求
            app.refresh({
                // 请求默认参数
            });
        }
    }
};

效果预览

  • 列表 「写不过瘾系列」使用 cool-admin,4步极速 CRUD

  • 新增 「写不过瘾系列」使用 cool-admin,4步极速 CRUD

  • 配置数据表格右键菜单 「写不过瘾系列」使用 cool-admin,4步极速 CRUD

项目后端

https://github.com/cool-team-official/cool-admin-midway

微信群

「写不过瘾系列」使用 cool-admin,4步极速 CRUD

微信公众号

「写不过瘾系列」使用 cool-admin,4步极速 CRUD

收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
如何用不到200行代码写一款属于自己的js类库
前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的类库。我们将会学到如下知识点: 闭包:减少变量污染,缩短变量查找范围 自执行函数在对象中的运用 extend的实现原理 如何实现跨浏览器的事件监听 原型链与继承 接下来我会对类库
昨天写了这些骚代码,今天上班差点被同事揍了
昨天写了这些骚代码,今天上班差点被同事揍了 前端开发 微信号 qianduan1024 功能介绍 专注于Web前端技术文章分享,包含JavaScript、HTML5、CSS3等前端基础知识,以及Vue.js,React,Augular等前端框架 收录于话题 来自:掘金,作者:布拉德特皮 链接:h
Java单例模式7种写法,你是不是有用错过?
单例大家都很清楚的知道作用,也不多说,主要是在不同的情况下注意事项; 单例模式多种写法 1、饿汉式可用 //饿汉式 language private final static Singleton INSTANCE new Singleton(); private Singleton(){} public static Singleton
好家伙,这些写 CSS 的新姿势你还不知道?
现在大部分搞前端的应该还是这样写 CSS 的: .mock {     margin: auto;     fontsize: 16px;     // ... } <div class'mock'mock</div 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。 但是这种方式写多了以后,你应该
13. 如果自己写的 Python 程序出错了,怎么办?
本篇文章主要内容为程序错误与异常处理,顺带会说一下内置模块 logging 。 <center<font colorred缓解一下视疲劳</font</center 13. 如果自己写的 Python 程序出错了,怎么办?(https://imghelloworld.osscnbeijing.aliyuncs.com/ee1f42d25d
「写不过瘾系列」使用 cool-admin,4步极速 CRUD
cooladmin 传送门 → https://github.com/coolteamofficial/cooladminvue(https://github.com/coolteamofficial/cooladminvue) (https://imghelloworld.osscnbeijing.aliyuncs.c
《SpringBoot 中间件设计和开发》| 对,小傅哥的掘金小册上线啦,这次教你造火箭!
作者:小傅哥博客:沉淀、分享、成长,让自己和他人都能有所收获!😄 一、前言年纪轻轻,为什么要搞中间件开发?五年前,香河大厂村,开张大吉。我和弟兄们雄心壮志,坐公交车去面试,谁知道求职不到半个月,每天平均1.3个人挂在八股文造火箭,一年内6个兄弟去了外包。佛祖保佑!算命的说我是“CRUD搬砖996”,不过我不同意。我认为出来混的,是20K是
不知这117人会不会也被狗不理报警处理?
作者:朱小五鸣谢:等你下课 周末好,我是小五这周发生一件特别奇葩的事情,狗不理包子王府井总店被差评“又贵又难吃”,然后它竟然报警了?起因呢,就是一个探店美食博主发现这家店在大众点评网上的评分是2.85分,是王府井/东单地区“评分最差餐厅”。于是就过去品尝了一番,结果视频发出后导致狗不理包子王府井总店报警了。本来还没多少人知道,这么一番操作大家就都知道了。狗
写个单链表,VS里面可以运行的代码,VScode居然不能运行?指针原因?
一、出现的问题事情是这样的,当时很着急,写个单链表出来,在VS里面写过一次,在VScode里面也写过一次,老师写的代码有一些罗嗦,于是我思考用自己的的代码风格来写一遍。啪的一下,很快啊!问题出现了!VS里面可以运行的代码,到了VSocde里就不能运行了!这是为什么!cpp这是List.cpp中相关代码bool List::insertByTail(Node
用了这 7 个 VS Code 插件,想写一辈子代码
0\. 往期精彩工具推荐 译文来自 https://levelup.gitconnected.com/7vscodeextensionsthatmakeyouwanttokeepcodingforeverf205e597ae34 原作者 Daan 译者: 蓝色的秋风(github
你写的Python代码规范吗?
总第141篇/张俊红1.什么是PEP8PEP 是 Python Enhancement Proposals 的缩写,直译过来就是「Python增强建议书」也可叫做「Python改进建议书」,说的直白点就是Python相关的一些文档,主要用来传递某些信息,这些信息包括某个通知亦或是某个新的规范。关于更深层次的概念,大家有兴趣的可以自行去了解。PEP 后面的数字
Python 为什么没有 main 函数?为什么我不推荐写 main 函数?
毫无疑问 Python 中没有所谓的 main 入口函数,但是网上经常看到一些文章提“Python 的 main 函数”、“建议写 main 函数”……有些人是知情的,他的意图可能是模仿那些正宗的 main 函数,但还有不少人明显是被误导了(或自己误解了),就写出来很累赘的代码。本期“Python 为什么”栏目来聊聊 Python 为什么没有 main 函数
Python 为什么没有 main 函数?为什么我不推荐写 main 函数?
毫无疑问 Python 中没有所谓的 main 入口函数,但是网上经常看到一些文章提“Python 的 main 函数”、“建议写 main 函数”……有些人是知情的,他的意图可能是模仿那些正宗的 main 函数,但还有不少人明显是被误导了(或自己误解了),就写出来很累赘的代码。本期“Python 为什么”栏目来聊聊 Python 为什么没有 main 函数
用Python写几行代码,一分钟搞定一天工作量,同事直呼:好家伙!
前几天有一个读者说最近要整理几千份文件,头都要整秃了,不知道能不能用Python解决,我们来看一下,你也可以思考一下。 由于涉及文件私密所以具体内容已做脱敏处理。大概是这样,一个文件夹下有多份会议通知信息(本文以 7 份文件为例)每一份通知打开格式基本类似,如下所示👇现在需要将每份会议文档中的 学习时间、学习内容、学习形式、主持人 四项关键信息提取出来,整理

热门文章

开发 vue3 + ts + vite / webpack 的管理系统

最新文章

开发 vue3 + ts + vite / webpack 的管理系统