开源免费比较好看的后台管理系统
2022-10-28 15:19:56
186
{{single.collect_count}}

cool-admin(midway版)一个很酷的后台权限管理系统,开源免费,模块化、插件化、极速开发CRUD,方便快速构建迭代后台管理系统,支持serverless、docker、普通服务器等多种方式部署

开源地址

  • 后端

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

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

  • 前端

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

https://gitee.com/cool-team-official/cool-admin-vue

技术栈

  • 后端:node.js midway.js egg.js mysql typescript
  • 前端:vue.js element-ui jsx vuex vue-router

如果你是前端,后端的这些技术选型对你是特别友好的,前端开发者可以较快速地上手。
如果你是后端,Typescript的语法又跟java、php等特别类似,一切看起来也是那么得熟悉。

演示

https://show.cool-admin.com

  • 账户:admin
  • 密码:123456

文档

https://admin.cool-js.com

项目前端

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

QQ群

2群:539478405

微信群

微信公众号

运行

修改数据库配置,配置文件位于src/config/config.local.ts

数据库为mysql(>=5.7版本),首次启动会自动初始化并导入数据

config.orm = {type: 'mysql',host: '127.0.0.1',port: 3306,username: 'root',password: '',database: 'cool-admin',synchronize: true,logging: true,}

安装依赖并运行

$ npm i$ npm run dev$ open http://localhost:8001/

注: 如果你的网络不佳可以尝试使用cnpm,或者切换您的镜像源

CURD(快速增删改查)

大部分的后台管理系统,或者API服务都是对数据进行管理,所以可以看到大量的CRUD场景(增删改查),cool-admin对此进行了大量地封装,让这块的编码量变得极其地少。

新建一个数据表

src/modules/demo/entity/goods.ts,项目启动数据库会自动创建该表,无需手动创建

import { EntityModel } from '@midwayjs/orm';import { BaseEntity } from 'midwayjs-cool-core';import { Column } from 'typeorm';/** * 商品 */@EntityModel('demo_app_goods')export class DemoAppGoodsEntity extends BaseEntity {@Column({ comment: '标题' })title: string;@Column({ comment: '图片' })pic: string;@Column({ comment: '价格', type: 'decimal', precision: 5, scale: 2 })price: number;}

编写api接口

src/modules/demo/controller/app/goods.ts,快速编写6个api接口

import { Provide } from '@midwayjs/decorator';import { CoolController, BaseController } from 'midwayjs-cool-core';import { DemoAppGoodsEntity } from '../../entity/goods';/** * 商品 */@Provide()@CoolController({api: ['add', 'delete', 'update', 'info', 'list', 'page'],entity: DemoAppGoodsEntity})export class DemoAppGoodsController extends BaseController {/** * 其他接口 */@Get('/other')async other() {return this.ok('hello, cool-admin!!!');}}

这样我们就完成了6个接口的编写,对应的接口如下:

  • POST /app/demo/goods/add 新增
  • POST /app/demo/goods/delete 删除
  • POST /app/demo/goods/update 更新
  • GET /app/demo/goods/info 单个信息
  • POST /app/demo/goods/list 列表信息
  • POST /app/demo/goods/page 分页查询(包含模糊查询、字段全匹配等)

部署

$ npm start$ npm stop

内置指令

  • 使用 npm run lint 来做代码风格检查。
  • 使用 npm test 来执行单元测试。
回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}