关于TypeScript:开源免费比较好看的后台管理系统

47次阅读

共计 2065 个字符,预计需要花费 6 分钟才能阅读完成。

cool-admin(midway 版) 一个很酷的后盾权限管理系统,开源收费,模块化、插件化、极速开发 CRUD,不便疾速构建迭代后盾管理系统,反对 serverless、docker、一般服务器等多种形式部署

开源地址

  • 后端

https://github.com/cool-team-…

https://gitee.com/cool-team-o…

  • 前端

https://github.com/cool-team-…

https://gitee.com/cool-team-o…

技术栈

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

正文完
 0