cool-admin框架使用

一：创建原型 entity/app/bannertest.ts

快捷键 ent 可一键搭建结构

import { EntityModel } from '@midwayjs/orm';
import { BaseEntity } from 'midwayjs-cool-core';
import { Column } from 'typeorm';

/**
 * 轮播图
 */
 //           要创建的数据库表名
@EntityModel('base_demo_bannertest')
export class bannertestEntity extends BaseEntity {
  //数据库里面的字段
  @Column({ comment: '图片' })
  picture: string;

  @Column({ comment: '标题' })
  title: String;

  @Column({ comment: '链接' })
  link: String
}

二：写api接口 controller/admin/app/bannertest.ts

快捷键 con 可一键搭建结构

import { Provide, Get } from '@midwayjs/decorator';
import { CoolController, BaseController } from 'midwayjs-cool-core';
import { bannertestEntity } from '../../../entity/app/bannerTest';

/**
 * 描述
 */
@Provide()
@CoolController({
  api: ['add', 'delete', 'update', 'info', 'list', 'page'],
  // 加载实体类
  entity: bannertestEntity,
  // 调整默认自带的crud方法的属性
  pageQueryOp: {
    // 让title字段支持模糊查询
    keyWordLikeFields: ['title'],
  }
})
export class bannertestController extends BaseController {
  // 其它自定义接口
  @Get('/other')
  async other() {
    return this.ok('hello, cool-admin!!!');
  }
}

三：数据库会自动创建表格

npm run dev

四：启动前端 创建页面bannertest.vue /view/bannertest.vue

快捷键 cl 一键搭建结构

<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 }) {
            ctx.service().done();
            app.refresh();
        }
    }
};
</script>

五：添加service请求服务 /service/app/bannertest.js

import { BaseService, Service, Permission } from "cl-admin";

// 默认创建api接口controller的位置就是这个地址  /文件夹/xxx.ts
//不对应就会出现404
//        这要和后台创建的接口地址对应
@Service("base/app/bannertest")
class bannertest extends BaseService {

}

export default bannertest;

六：在service里面的index实例我添加的service请求服务

如果是模块化开发，modules一定要实现这步，要不找不到你定义的接口

// 自定义
import bannertest from "./app/bannertest";

export default {
  // 自定义
  banner: new bannertest()
};

七：在网页.vue中的methods添加接口

methods: {
    onLoad ({ ctx, app }) {
      //console.log(this.$service);
      // 对应的是你  上步中实例化的对象
      ctx.service(this.$service.banner).done();
      app.refresh();
    }
  }

八：设置显示数据 data中

data () {
    return {
      // 新增、编辑配置
      // 弹窗表单
      upsert: {
        items: [
          {
            label: "照片",
            prop: 'picture',
            // element-ui的组件  也有自己框架定义的
            component: {
              name: 'cl-upload',
              props: {
                text: "选择头像",
                icon: "el-icon-picture"
              }
            },
            // 校验
            rules: [
              { required: true, message: '请选择图片', trigger: 'changes' },
            ]
          },
          {
            label: "标题",
            prop: 'title',
            component: {
              name: 'el-input'
            },
            rules: [
              { required: true, message: '请输入标题', trigger: 'blur' },
              { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ]
          },
          {
            label: "链接",
            prop: 'link',
            component: {
              name: 'el-input'
            },
            rules: [
              { pattern: '[a-zA-z]+://[^\s]*', message: '请输入正确的链接地址', trigger: 'blur' }
            ]
          }
        ]
      },
      // 表格配置
      table: {
        columns: [
          {
            label: "照片",
            prop: "picture",
          },
          {
            label: "标题",
            prop: "title",
          },
          {
            label: "链接",
            prop: "link",
          }
        ]
      }
    };
  },

九：如果想在表单模块显示自己要的东西可以用template

比如：头像显示 得用显示框显示，不能用div显示链接

// 位置一定要看清 是在表格里template
<cl-table v-bind="table">
        <!-- 头像 -->
        <template #column-picture="{ scope }">
          <cl-avatar shape="square"
                     size="medium"
                     :src="scope.row.picture | default_avatar"
                     :style="{ margin: 'auto' }">
          </cl-avatar>
        </template>
</cl-table>

十：在菜单中追加我定义的页面

如果需要给它添加权限的话

比较常用的权限搭配：

查看: page+info
添加： add
删除： delete
修改： update+info

显示列表页面

点击添加显示的弹窗

右键表格元素的菜单