3.1、首先搭建前后端项目

11/20/2023

# 1、环境工作

  • 前端: node版本 >= 18 (可以通过node -v命令来查看,建议使用 nvm)
  • 后端: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_v3.sql 文件中

# 3、执行SQL脚本

  • 1)执行Sql脚本:/smart_admin_v3.sql
  • 2)执行成功后,会创建 smart_admin_v3 数据库

# 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配置

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

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

(1)修改jdbc参数

spring:
  datasource:
    url: jdbc:p6spy:mysql://127.0.0.1:3306/smart_admin_v3?autoReconnect=true&useServerPreparedStmts=false&rewriteBatchedStatements=true&characterEncoding=UTF-8&useSSL=false&allowMultiQueries=true&serverTimezone=Asia/Shanghai
    username: root
    password: Zhuoda#123
1
2
3
4
5

(2)修改redis参数

  redis:
    database: 1
    host: 127.0.0.1
    port: 6379
    password:
    timeout: 10000ms
    lettuce:
      pool:
        max-active: 5
        min-idle: 1
        max-idle: 3
        max-wait: 30000ms
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-prefix: https://${file.storage.cloud.bucket-name}.${file.storage.cloud.endpoint}/
      private-url-expire-seconds: 3600
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 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/index.html (opens new window) 能看到swagger文档,账号:api 密码: 1024 到此,后端启动成功!
若启动报错,请查看常见问题

# 8、启动前端

1)选型 js 还是 ts
作者强烈推荐 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-base 不涉及 文件、字典、图形验证码、自定义列等
system 系统 sa-admin 涉及很少 员工、菜单、角色、权限等
business 业务 sa-admin 全是业务 具体需求具体分析

# ※ 联系我们

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

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