# 1、环境工作
# 1.1、前端环境
- nodejs,要求 node版本 >= 14 (可以通过
node -v
命令来查看) - vscode 或者 webstorm
- vscode 插件:
Vue Language Features(Volar)、Vue3 Support 、Vue Volar extesnion Pack、Vue VSCode Snippets、Prettier Code formatter、eslint、DotENV
# 1.2 后端环境
- Java ( java8+ ,含java 8)
- Mysql ( Mysql 5.7+, 含5.7)
- Maven ( Maven 3+ )
- Redis
- Idea ( eclipse也可 )
- lombok
# 2、拉取代码
从 https://gitee.com/lab1024/smart-admin (opens new window) 拉取最新代码;
- 前端代码:在
/smart-admin-web
目录,其中有 js 和 ts 两个版本; - 后端代码:在
/smart-admin-api
目录,maven的项目结构 - 数据库SQL脚本, 在
/smart_admin_v2.sql
文件中
# 3、执行脚本
- 1)执行Sql脚本:
/smart_admin_v2.sql
- 2)执行成功后,会创建
smart_admin_v2
数据库
# 4、 启动Redis
如果有redis环境,可以直接忽略,如果没有,请安装:
Linux版本:https://redis.io/download (opens new window)
Windows版本:https://github.com/microsoftarchive/redis/releases (opens new window)
# 5、 导入后端
将smart-admin-api
项目导入到idea或者eclipse中(以maven项目导入!并将 idea 的 file encoding 设置为 utf8 !)
# 6、 修改后端配置文件
进入 sa-common
项目,打开src/main/resources/dev/sa-common.yaml
文件
(1)修改jdbc参数,改为你的mysql地址和账号
spring:
# 数据库连接信息
datasource:
url: jdbc:p6spy:mysql://127.0.0.1:3306/smart_admin_v2?autoReconnect=true&useServerPreparedStmts=false&rewriteBatchedStatements=true&characterEncoding=UTF-8&useSSL=false&allowMultiQueries=true&serverTimezone=Asia/Shanghai
username: root
password: Zhuoda123
2
3
4
5
6
(2)修改redis参数
# redis 连接池配置信息
redis:
database: 1
host: 127.0.0.1
lettuce:
pool:
max-active: 5
min-idle: 1
max-idle: 3
max-wait: 30000ms
port: 6379
timeout: 10000ms
password:
2
3
4
5
6
7
8
9
10
11
12
13
(3)修改文件上传配置 (也可以不用管此配置,也能启动)
cloud:
region: oss-cn-qingdao
endpoint: oss-cn-qingdao.aliyuncs.com
bucket-name: common-sit
access-key:
secret-key:
2
3
4
5
6
(4)检查你的idea 文件编码
由于本项目中的 yaml 配置文件中含有中文注释,为了能正常启动项目,请排查如下问题:
第一步:请明确你的 idea file encoding 编码为 utf8,具体请看:
idea -> file -> settings -> Editor -> File Encodings
,这个配置中所有编码均为utf8,若不是,请修改为utf8;第二步:按照第一步修改完utf8以后, 在
/smart-admin-api
目录执行mvn clean
,若不会执行,请将
/smart-admin-api/sa-common/target
和/smart-admin-api/sa-admin/target
这两个目录删除!切记!
# 7、启动后端
启动前:检查redis和mysql没问题,sql脚本执行成功,jdbc 和 redis配置参数正确 !!!
找到sa-admin
项目的 SmartAdminApplication
启动类,运行。
访问:http://localhost:1024/swagger-ui.html (opens new window) 能看到swagger文档
到此,后端启动成功!
若启动报错,请查看常见问题
# 8、启动前端
启动前,确保nodejs版本和npm版本支持:vue3、vite 等
1)选型 使用 js项目还是 typescript项目
如果选择js项目,进入 smart-admin-web / javascript-ant-design-vue3
目录
如果选择ts项目,进入 smart-admin-web / typescript-ant-design-vue3
目录
插曲:作者强烈推荐 js 项目,别问为什么,问就是 JS 大法好,简单,哈哈哈
2)进入目录smart-admin-web / javascript-ant-design-vue3
,执行npm install
命令,安装依赖
3)进入目录smart-admin-web / javascript-ant-design-vue3
,执行 npm run dev
命令,启动开发环境
4)访问 http://localhost:8080 (opens new window) , 账号: admin / 123456
# 9、记住三个单词
在前后端代码目录中经常出现三个非常重要的单词:business
、system
、support
;如何理解呢?
我们知道,任何系统都有一些相似的功能和相同的代码或者写法,所以我们把功能进行了抽象,抽成了三类,分别对应这三个单词,具体如下:
- business , 业务,就是咱们做的系统所要涉及的业务需求,比如开发一个进销存ERP系统,那么业务就是进销存,比如:商品管理,仓库管理、出入、入库等等
- system , 系统,就是业务中必须有的系统功能,比如
员工、部门、角色、权限、菜单
等等, - support , 支撑,就是任何系统都离不开一些基础功能(不涉及任何的业务),比如
基础功能:系统配置、字典、文件上传和下载、缓存cache 等
,日志功能:心跳日志、登录日志、操作日志、数据变动日志等
, 等等,起到 支撑的作用
横向对比下:
对比 | 解释 | 项目 | 涉及业务 | 举例 |
support | 支撑 | sa-common | 不涉及 | 文件、字典、图形验证码、自定义列等 |
system | 系统 | sa-admin | 涉及很少 | 员工、菜单、角色、权限等 |
business | 业务 | sa-admin | 全是业务 | 具体需求具体分析 |
# ※ 联系我们
1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目(软件外包、技术顾问、培训等等)。
![]() | ![]() | ![]() |
加 主任 “卓大” 微信 拉你入群,一起学习 | 关注 “小镇程序员” 分享代码与生活、技术与赚钱 | 请 “1024创新实验室” 喝咖啡 支持我们的开源与分享 |