当前位置: 首页 > Web前端 > vue.js

开源、免费、更好看的后台管理系统

时间:2023-03-31 22:46:51 vue.js

cool-admin(中途版)是一款炫酷的后台权限管理系统,开源免费、模块化、插件化、极速开发的CRUD,它是方便快捷搭建迭代后台管理系统,支持serverless、docker、commonserver等多种方式部署开源地址后台https://github.com/cool-team-...https://gitee.com/cool-team-o...前端https://github.com/cool-team-...https://gitee.com/cool-team-o...技术栈后端:node.jsmidway.jsegg.jsmysqltypescriptfrontend:vue.jselement-uijsxvuexvue-router如果你是前端,这些后端技术选型对你特别友好,前端开发者上手也比较快。如果你是后端,Typescript的语法和java、php等非常相似,一切看起来都是那么的眼熟。Demohttps://show.cool-admin.com账号:admin密码:123456文档https://admin.cool-js.com项目前端https://github.com/cool-team-official/cool-admin-VueQQ群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,}安装依赖然后运行??$npmi$npmrundev$openhttp://localhost:8001/注意:如果你的网络不好,可以尝试使用cnpm,或者切换你的镜像源CURD(快增删改查)为大部分后台管理系统或API服务管理数据,因此可以看到大量的增删改查场景(增删改查)。cool-admin对此做了很多封装,使得这方面的代码量变得极少。新建数据表src/modules/demo/entity/goods.ts,项目启动数据库会自动创建该表,无需手动创建import{EntityModel}from'@midwayjs/orm';import{BaseEntity}from'midwayjs-cool-core';import{Column}from'typeorm';/***Goods*/@EntityModel('demo_app_goods')exportclassDemoAppGoodsEntityextendsBaseEntity{@Column({comment:'Title'})title:string;@Column({评论:'图片'})图片:字符串;@Column({comment:'price',type:'decimal',precision:5,scale:2})price:number;}写api接口src/modules/demo/controller/app/goods.ts,快写6api接口从'@midwayjs/decorator'导入{Provide};从'midwayjs-cool-core'导入{CoolController,BaseController};import{DemoAppGoodsEntity}from'../../entity/goods';/***Goods*/@Provide()@CoolController({api:['add','delete','update','info','list','page'],entity:DemoAppGoodsEntity})exportclassDemoAppGoodsControllerextendsBaseController{/***其他接口*/@Get('/other')asyncother(){returnthis.ok('hello,合作社ol-admin!!!');}}这样,我们就完成了6个界面的编写,对应的界面如下:POST/app/demo/goods/addAddPOST/app/demo/goods/deleteDeletePOST/app/demo/goods/updateupdateGET/app/demo/goods/info单条信息POST/app/demo/goods/list列表信息POST/app/demo/goods/page分页查询(包括模糊查询,字段全匹配等)部署$npmstart$npmstop内置指令使用npmrunlint进行代码风格检查使用npmtest执行单元测试。