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

神仙都没用 等级 969 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

收藏
评论区

相关推荐

「写不过瘾系列」使用 cool-admin,4步极速 CRUD
cooladmin 传送门 → https://github.com/coolteamofficial/cooladminvue(https://github.com/coolteamofficial/cooladminvue) (https://imghelloworld.osscnbeijing.aliyuncs.c
C 扩展库
CRUD ==== table ----- create table if not exists `student` ( `id` int auto_increment, `name` varchar(16) not null, `age` int not null, `addres
5分钟 BeetlSQL 快速入门
企业应用面临的问题 ========= * 高效编写数据库访问代码 * 内置CRUD,不需要写SQL * 支持OR/Mapping * 悲观锁,乐观锁,逻辑删除等辅助支持等 * 即支持简单的CRUD,也支持数十行,上百行SQL编写 * 跨数据库平台支持,Oracle,Postgres,Mysql,以及SQLS
MySQL常用sql语句
在数据库操作中,操作基本都是围绕增删改查来操作。简称CRUD ------------------------------ * C创建创建 * R读取/检索查询 * U Update修改 * D删除删除 在数操作数据库时,所有的数据库语句都要以分号结束 ------------------------ 数据库操作不区分大小写
MySql之自动生成CRUD代码
MySql之自动生成CRUD代码 ================ MyBatis能够通过获取MySql中的information\_schema从而获取表的字段等信息,最后通过这些信息生成代码。 笔者受此启发,将MyBatis-Generator中的核心结构体剥离出来,写成了能自动生成简单CRUD的工具。 自动生成代码原理图 ---------
Crawler 不需要写代码的爬虫 不需要写正则的爬虫
Crawler V1.0.0 ============== 1. 代码还没有优化 2. 框架结构很简单 3. 部分功能需要你们给我需求,我后期添加测试 [](http://git.oschina.net/puguoan/Crawler#操作指南)操作指南 --------------------------------
ElasticSearch系列四 CURD
https://www.cnblogs.com/dgwblog/p/12382173.html 1: ES 类似JPA操作 1.1 编写实体类 1.2 编写映射文件 xxx.json 1.3编写repository继承 ElasticSearchrepository 1.4 编写admin 的CRUD 2: 使用ElasticSearch
Mybatis 通用Crud
前言(说明) ====== 源码地址:[https://github.com/LittleNewbie/portal](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FLittleNewbie%2Fportal) mybatis版本 3.2.6 mybatis
Mybatis 通用Crud
更新日志 ==== <!-- 2016-11-13更新 start --> 1 新增批量操作数据方法:批量插入,根据条件删除,根据条件更新指定的列名-字段值。 2 新增高级查询方法:可设置查询列,查询条件,排序,分页。 3 根据1、2更新接口。 4 更改dao接口方法实现方式,统一采用GeneralMapper.xml编写sql,弃用General
MybatisPlus的BaseMapper和Wrapper使用
一、简介  在MybatisPlus中,BaseMapper中定义了一些常用的CRUD方法,当我们自定义的Mapper接口继承BaseMapper后即可拥有了这些方法。二、BaseMapper中的CRUD方法 * 通用 CRUD 封装[BaseMapper](https://gitee.com/baomidou/mybatis-plus/blo
PAP 快速开发框架:mybatis
    背景: 在使用mybatis的过程中,考虑到整合的框架在后期使用的过程中,有可能是需要兼容到多种数据库的,在这种前提条件下,完成通用CRUD功能的编写,本文前期先考虑到不同数据库针对分页功能的统一操作;例如mysql数据库的分页是limit关键字的使用, oracle数据库的分页是rownum关键字的使用;     demo git地址部分: [h
Spring Boot WebFlux 增删改查完整实战 demo
03:WebFlux Web CRUD 实践 ====================== 前言 -- 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里我们不对数据库储存进行访问,因为后续会讲到,而且这里主要是讲一个
SpringBoot学习之路:04.Spring Boot集成Mybatis操作数据库
        前面说了Spring Boot的使用Jpa操作数据库,今天要说是Spring Boot集目前比较受欢迎的持久层框架Mybatis,我个人对mybatis是比较喜欢的,接下来我们在SpringBoot中集成它,我们依旧使用mysql做例子,编写一个简单的用户模块的CRUD的例子。 1.项目依赖包的引入 ---------- _<depend
SpringBoot学习之路:04.Spring Boot集成Mybatis操作数据库
        前面说了Spring Boot的使用Jpa操作数据库,今天要说是Spring Boot集目前比较受欢迎的持久层框架Mybatis,我个人对mybatis是比较喜欢的,接下来我们在SpringBoot中集成它,我们依旧使用mysql做例子,编写一个简单的用户模块的CRUD的例子。 1.项目依赖包的引入 ---------- _<depend
SpringMVC+Hibernate +MySql+ EasyUI实现POI导出Excel(二)
[SpringMVC+Hibernate +MySql+ EasyUI实现CRUD(一)](http://my.oschina.net/xshuai/blog/345117) ======================================================================================= ![]

热门文章

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

最新文章

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