还在从零开始搭建项目?推荐一款高颜值的前后台分离脚手架!
从零开始搭建项目,没有好用的脚手架怎样行!最近发现一款高颜值的前后台分离脚手架
sa-plus
,自带代码生成器,可一键生成前台、后台、API文档代码,推荐给大家!
sa-plus简介
一款基于SpringBoot的快速开发框架,内置代码生成器。
项目特点:
- 集成常用开发功能,包括文件上传、角色受权、全局异常解决、Redis控制台、API日志统计等。
- 内置代码生成器,高自动化代码生成,可一键生成后台、前台和API文档代码。
- 通过给表增加注释来生成代码,数据库表建好了,项目也就开发一半了。
项目架构
sa-plus
前后台使用的技术栈还是非常主流的,下面我们来看下。
使用技术栈
- 后台技术栈:MySql 5.7、SpringBoot、Mybatis-Plus、Druid、PageHelper、Redis、Sa-Token、Lombok、Hutool、FastJson
- 前台技术栈:Vue、Element-Ui、WangEditor、Jquery、Layer、Swiper、Echarts
模块详情
- sp-server:SpringBoot后台代码。
- sp-admin:Vue管理系统前台代码。
- sp-apidoc:Docsify API接口文档代码。
- sp-generate:代码生成器,可生成后台、前台、API文档。
- sp-devdoc:sa-plus本地文档。
- doc:其它文件,存放SQL脚本。
快速开始
sp-server
、sp-admin
、sp-apidoc
为sa-plus的主要项目模块,我们先把它们启动起来。
sp-server
- 先在MySql中创立
sp-dev
数据库,导入项目doc
目录下的sa-plus.sql
脚本,导入成功后将生成如下表;image.png
- 将
sp-server
模块导入到IDEA中,导入成功后项目结构如下;image.png
- 修改项目的配置文件
application-dev.yml
,将MySql和Redis配置修改为你自己的连接配置;
spring: # 数据源配置 datasource: type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://127.0.0.1:3306/sp-dev?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC username: root password: root # redis配置 redis: # Redis数据库索引(默认为0) database: 1 # Redis服务器地址 host: 127.0.0.1 # Redis服务器连接端口 port: 6379 # Redis服务器连接密码(默认为空) # password: # 连接超时时间(毫秒) timeout: 5000ms
- 运行启动类
SpServerApplication
的main
方向,至此后台服务启动成功。
2021-08-09 16:46:00.478 INFO --> Initializing ExecutorService 'applicationTaskExecutor'____ ____ ___ ____ _ _ ____ _ _ [__ |__| __ | | | |_/ |___ |\ | ___] | | | |__| | \_ |___ | \| DevDoc:http://sa-token.dev33.cn (v1.24.0)GitHub: dromara/sa-token2021-08-09 16:46:00.744 INFO --> Initializing ExecutorService 'taskScheduler'2021-08-09 16:46:00.778 INFO --> Starting ProtocolHandler ["http-nio-8099"]2021-08-09 16:46:00.792 INFO --> Tomcat started on port(s): 8099 (http) with context path ''2021-08-09 16:46:00.802 INFO --> Started SpServerApplication in 3.871 seconds (JVM running for 4.797)------------- sa-plus (dev) 启动成功 --by 2021-08-09 16:46:00 -------------
sp-admin
将
sp-admin
模块导入到IDEA中,导入成功后项目结构如下;image.png
打开
index.html
页面,点击右上角按钮运行到浏览器就可;image.png
使用默认账号密码登录后,就可访问
sa-plus
的首页,界面还是挺炫酷的;image.png
我们可以稍稍体验下
sa-plus
的基础功能,比方Redis控制台
功能,可以查看Redis状态和管理Redis中的数据;image.png
还有
API请求日志
功能,可以查看API请求记录和请求耗时;image.png
还有权限管理中的
角色管理
功能,可以创立角色并给角色分配权限;image.png
还有权限管理中的
菜单管理
,其实我们可以发现sa-plus
中的菜单和权限是绑定在一起的,而菜单是从前台的路由中获取的,给角色分配了菜单即分配了菜单下的权限,这样做的话想做到接口级权限就比较麻烦了;image.png
还有权限管理中的
客户管理
,可以管理客户信息。image.png
sp-apidoc将
sp-apidoc
模块导入到IDEA中,导入成功后项目结构如下;image.png
打开
index.html
页面,点击右上角按钮运行到浏览器就可,此时我们可以发现API文档中还没有任何内容。image.png
代码生成器
使用代码生成器,可以根据数据库表直接生成前台、后台及API文档代码,让我们来体验下它有何神奇之处。
- 将
sp-generate
模块导入到IDEA中,导入成功后项目结构如下;image.png
- 而后往MySql中导入测试数据,导入项目
doc
目录下的test-data.sql
脚本,导入成功后新添加如下表;image.png
- 接下来修改
SpGenerateApplication
中的MySql连接配置和代码生成目录配置;
@SqlFlySetup@SpringBootApplicationpublic class SpGenerateApplication { // 直接运行代码生成器 public static void main(String[] args) { // 启动springboot SpringApplication.run(SpGenerateApplication.class, args); // =================================== 设置连接信息 =================================== FlyConfig config = new FlyConfig(); config.setDriverClassName("com.mysql.jdbc.Driver"); config.setUrl("jdbc:mysql://127.0.0.1:3306/sp-dev?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC"); config.setUsername("root"); config.setPassword("root"); config.setPrintSql(true); // 能否打印sql FlyObjects.setConfig(config); // 注入到框架中 // =================================== 少量全局设置 =================================== GenCfgManager.cfg .setProjectPath("D:/developer/demo/sa-plus/") // 总项目地址 (生成代码的路径) .setServerProjectName("sp-server") // 服务端 - 项目名称 // .setServerProjectName("sp-com/sp-core") // 服务端 - 项目名称 (sp-com多模块版填此格式) .setCodePath("src/main/java/") // 服务端代码 - 存放路径 .setPackagePath("com.pj.project") // 服务端代码 - 总包名 .setPackage_utils("com.pj.utils.sg.*") // 服务端代码 - util类包地址 .setAuthor("macrozheng"); // 服务端代码 - 代码作者 }}
- 而后运行启动类
SpGenerateApplication
的main
方法生成代码,运行成功后,sp-server
的project
包下会生成后台代码;image.png
sp-admin
的sa-html
目录下会生成前台代码,还会在menu-list.js
中追加菜单信息;image.png
sp-apidoc
的project
目录也下会生成API文档代码;image.png
重新运行前后台代码后,我们暂时还无法看到新添加的菜单,还需要给角色分配权限才可以查看;
image.png
之后我们可以看到,对于商品表来说,列表页面和增加页面已经给我们生成好了;
image.png
- 其实
sa-plus
是通过解析数据库表中的注释来生成代码的,我们可以看下商品表的SQL语句,其中有很多包含[]
的注释,sa-plus
就是根据这些规则来生成代码的;
CREATE TABLE `ser_goods` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '记录id [num no-add]', `name` varchar(200) DEFAULT NULL COMMENT '商品名称 [text j=like]', `avatar` varchar(512) DEFAULT NULL COMMENT '商品头像 [img]', `image_list` varchar(2048) DEFAULT NULL COMMENT '轮播图片 [img-list]', `content` text COMMENT '图文详情 [f]', `money` int(11) DEFAULT '0' COMMENT '商品价格 [num]', `type_id` bigint(20) DEFAULT NULL COMMENT '所属分类 [num]', `stock_count` int(11) DEFAULT '0' COMMENT '剩余库存 [num]', `status` int(11) DEFAULT '1' COMMENT '商品状态 (1=上架,2=下架) [j]', `create_time` datetime DEFAULT NULL COMMENT '创立日期 [date-create]', `update_time` datetime DEFAULT NULL COMMENT '升级日期 [date-update]', PRIMARY KEY (`id`) USING BTREE) ENGINE=InnoDB AUTO_INCREMENT=1005 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='商品表\n[table icon=el-icon-a
这里的规则比较多,大家可以自行对照下表查看;
image.png
最后我们再来看下已经生成好的API文档,商品表的CRUD接口文档都有了,非常详细;
image.png
而且API文档中还提供了接口测试功能,是不是很贴心!
image.png
总结
通过上面的一波实践,我们可以发现sa-plus的确是个有意思的框架。不仅提供了项目的基础功能,还提供了代码生成器,可以一键生成前后台及API文档代码,大大提高了开发效率。但是没有一种代码生成器是万能的,复杂的代码还是需要手写。sa-plus的权限功能把菜单和权限绑定在了一起,使用起来不太灵活,还是可以改进下的。
参考资料
官方文档:http://sa-plus.dev33.cn/
项目地址
https://gitee.com/click33/sa-plus
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 还在从零开始搭建项目?推荐一款高颜值的前后台分离脚手架!