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

显示列表页面

点击添加显示的弹窗

右键表格元素的菜单

cool-admin框架使用相关推荐

关于Vue admin 框架中 Pagination 分页异步加载的问题
关于Vue admin 框架中 Pagination 分页异步加载的问题贴代码核心代码: this.$emit('update:page', this.currentPage) this.$em ...
HeyUI - 自带admin框架、中后台前端UI框架的后起之秀
一款同样优秀的前端 UI 组件库,其基于HeyUI的 admin 框架也是开箱即用的优质框架. 介绍 HeyUI 是基于 Vue2.0 的开源 UI 组件库,是一整套解决方案,所有的组件提供全局的可配 ...
Dcat Admin框架JS颜色中，Dcat.color.darken()其实是调用Dcat.color.lighten()
小发现闲来无事,有猫彬又扒了下源码,发现Dcat Admin框架JS颜色中,Dcat.color.darken()其实是调用Dcat.color.lighten() /* Color.js中源码截 ...
easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace Admin框架菜单导航 ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
Artiely Vue Admin - 基于蚂蚁金服Ant Design构建的高颜值开源管理后台UI框架
继承 Ant Design 专业美观的优点,支持PC/手机/平板的响应式布局的优秀后台管理系统 UI 框架. 关于 Artiely Vue Admin Ant Design 是阿里巴巴蚂蚁金服团队出品 ...
html响应式布局 ace,.NET Core基于Ace Admin的响应式框架
原标题:.NET Core基于Ace Admin的响应式框架转自:netnr cnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace A ...
开发新项目看过来，这3款基于 Vue 的免费开源的 admin 管理后台框架非常好用
三款 admin 框架,分别基于热门的前端 UI 组件库 ElementPlus / Ant Design / Naive UI 打造,开箱即用. 新项目的开始,一般是搭建 admin 系统,今天盘点 ...
RuoYi Vue - 若依框架的 Vue 版本，免费开源、生态强大、专业的 admin 后台管理系统，基于 Vue + Element
有一段时间没有推荐 admin 框架了,若依这款后台框架很强大,提供了 vue 版本,很实用,推荐给大家. 关于若依 RuoYi 中文名称叫若依,名字十分二次元,是一个后台管理系统,后端基于经典技术组 ...
干货！请码住——点此领取免费开源框架
何谓框架框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法; 框架是可被应用开发者定制的应用骨架. 拥有一套企业级开发框架有哪些好处? 对于一个软件公司 ...

cool-admin框架使用

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

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

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

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

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

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

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

八：设置显示数据 data中

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

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

cool-admin框架使用相关推荐

最新文章

热门文章

cool-admin框架使用

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

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

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

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

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

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

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

八：设置显示数据 data中

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

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

cool-admin框架使用相关推荐

最新文章

热门文章

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