3.1、首先搭建前后端项目

11/20/2022

# 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项目导入!

# 6、 修改后端配置文件

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

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

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

在前后端代码目录中经常出现三个非常重要的单词: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