3.1、首先搭建前后端项目

1024创新实验室 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项目导入！并将 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

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

(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创新实验室” 喝咖啡支持我们的开源与分享

2.3、Java规范 V2.0 3.2、然后熟悉Java项目结构

SmartAdmin