3.1、首先搭建前后端项目

11/20/2022

# 1、环境工作

  • 前端:nodejs,要求 node版本 >= 14 (可以通过node -v命令来查看)
  • 后端:Java ( java8+ ,含java 8)
  • Mysql ( Mysql 5.7+, 含5.7)
  • Redis

# 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、执行SQL脚本

  • 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、 修改后端配置文件

修改配置文件之前请检查你的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 这两个目录删除!切记!

# 6.1 修改sa-common中的配置sa-common.yaml

进入 sa-common 项目,打开src/main/resources/dev/sa-common.yaml文件

(1)修改jdbc参数

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
1
2
3
4
5

(2)修改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:
1
2
3
4
5
6
7
8
9
10
11
12

(3)修改文件上传配置
文件上传默认配置为:上传本地,即 如下 file.storage.mode = local,前期可以不做任何改变,服务就能正常启动;
如若改为上传云端,请具体查看 文件上传说明

file:
  storage:
    mode: local
    local:
      upload-path: /home/smart_admin_v2/upload/    #文件上传目录
      url-prefix:                                  #文件访问url
    cloud:
      region: oss-cn-qingdao
      endpoint: oss-cn-qingdao.aliyuncs.com
      bucket-name: common
      access-key:
      secret-key:
      url:
        expire: 7200000
        public: https://${file.storage.cloud.bucket-name}.${file.storage.cloud.endpoint}/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 6.2 修改sa-admin中的配置application.yaml

进入sa-admin项目,打开src/main/resources/dev/application.yaml文件

修改日志目录 log-directory,此目录为 log4j2的目录和tomcat日志目录

project:
  name: sa-admin
  log-directory: /home/smart-admin/${project.name}/${spring.profiles.active}
1
2
3

修改端口

server:
  port: 1024
  servlet:
    context-path: /
1
2
3
4

# 7、启动后端

找到sa-admin项目的 SmartAdminApplication启动类,运行。
访问:http://localhost:1024/swagger-ui.html (opens new window) 能看到swagger文档 到此,后端启动成功!
若启动报错,请查看常见问题

# 8、启动前端

启动前,确保nodejs版本和npm版本支持:vue3、vite 等

1)选型 使用 js项目还是 typescript项目 (作者强烈推荐 js 项目,别问为什么,问就是 JS 大法好,简单)
如果选择js项目,进入 smart-admin-web / javascript-ant-design-vue3 目录
如果选择ts项目,进入 smart-admin-web / typescript-ant-design-vue3 目录

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、记住三个单词

在前后端代码目录中经常出现三个非常重要的单词:businesssystemsupport;如何理解呢?
我们知道,任何系统都有一些相似的功能和相同的代码或者写法,所以我们把功能进行了抽象,抽成了三类,分别对应这三个单词,具体如下:

  • business , 业务,就是咱们做的系统所要涉及的业务需求,比如开发一个进销存ERP系统,那么业务就是进销存,比如:商品管理,仓库管理、出入、入库等等
  • system , 系统,就是业务中必须有的系统功能,比如员工、部门、角色、权限、菜单等等,
  • support , 支撑,就是任何系统都离不开一些基础功能(不涉及任何的业务),比如基础功能:系统配置、字典、文件上传和下载、缓存cache 等日志功能:心跳日志、登录日志、操作日志、数据变动日志等, 等等,起到 支撑的作用

横向对比下:

对比 解释 项目 涉及业务 举例
support 支撑 sa-common 不涉及 文件、字典、图形验证码、自定义列等
system 系统 sa-admin 涉及很少 员工、菜单、角色、权限等
business 业务 sa-admin 全是业务 具体需求具体分析

# ※ 联系我们

1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目(软件外包、技术顾问、培训等等)。

加 主任 “卓大” 微信
拉你入群,一起学习
关注 “六边形工程师”
分享:赚钱、代码、生活
请 “1024创新实验室” 喝咖啡
支持我们的开源与分享
告白气球 (钢琴版)
JESSE T