为了实践自己所学，尝试从零开始搭建一个基于springboot2和vue的后台管理系统脚手架，并配文记录整个搭建过程。
整个开发过程，都遵循从无到有逐步增强的原则，无论是表设计还是编码，都力求先用最少的内容实现最基础的功能，再逐步改造，不会一开始就过多考虑完备性或拓展性。
1 后端初始化 1.1 新建项目直接使用idea的springboot初始化界面新建项目，我的项目名是我儿子小名yiyi。
一开始不引用太多功能，只勾选最基础的四个：Spring Web/Redis/MySQL Driver/Lombok
编辑pom文件，引入一些流行的jar包，既有助于项目自身快速开发，同时也降低脚手架使用者的学习门槛。
1.2.1 通用工具——HuTool我用了很久apache的commons包和谷歌的guava，他们都是很优秀的工具包，不过论功能全面，还是首推国内大神的hutool，基本上引用这个包后，除了个别系统自身特性相关的工具类，很少需要再额外开发工具包。
1.2.2 数据库——Mybatis Pluscn.hutool hutool-all ${hutool.version}
首先排除了springboot系列的JPA，无意争论JPA和Mybatis哪个更好，单纯只是我JPA用的少不熟悉所以暂且不用。
Mybatis本身已经很易用，国内大神的Mybatis Plus让他的易用性更上一层楼，我比较习惯使用他的lambda表达式链式调用来编写一些单表的增删改查，不仅语法简练可读性强，更是节省很多编写sql的精力。
这里推荐引用官方提供的mybatis-plus-boot-starter，可以省去引用jdbc和mybatis等包的麻烦。
1.2.3 鉴权——Sa-Tokencom.baomidou mybatis-plus-boot-starter ${mybatis-plus.version}
之前我看到的绝大数鉴权相关的教程，以及使用过的绝大多数脚手架，都使用shiro或者spring security作为鉴权工具。必须承认他们都是非常优秀的开源工具，但也都是很老的工具，有不少兼容JSP项目的老设计，不光学起来费劲，实现目前主流的鉴权功能（如JWT）还需要集成其他第三方JAR包，因此我尝试使用国内大神开源的Sa-Token，他不仅接口简单，设计灵活，而且集成度非常高，可以快速实现各类当下主流的鉴权功能。
1.3 完整pomcn.dev33 sa-token-spring-boot-starter ${sa-token.version}
1.4 基础配置4.0.0 org.springframework.boot spring-boot-starter-parent 2.5.6 shop.liaozalie yiyi 0.0.1-SNAPSHOT yiyi yiyi 11 1.28.0 5.7.16 3.4.3.4 org.springframework.boot spring-boot-starter-data-redis org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-devtools runtime true mysql mysql-connector-java runtime org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test cn.hutool hutool-all ${hutool.version} com.baomidou mybatis-plus-boot-starter ${mybatis-plus.version} cn.dev33 sa-token-spring-boot-starter ${sa-token.version} cn.dev33 sa-token-dao-redis-jackson ${sa-token.version} org.springframework.boot spring-boot-maven-plugin org.projectlombok lombok
我习惯使用yml配置springboot，因此这里先修改自动生成的application.properties为application.yml
配置基础的redis，mysql以及端口号
server:
port: 3000
spring:
application:
name: yiyi
jackson:
default-property-inclusion: non_null
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://${MYSQL_HOST:127.0.0.1}:${MYSQL_PORT:3306}/yiyi?serverTimezone=GMT%2B8&zeroDateTimeBehavior=convertToNull&useUnicode=true&characterEncoding=utf-8&tinyInt1isBit=false
username: ${MYSQL_USER:root}
password: ${MYSQL_PASSWD:123456}
mybatis-plus:
configuration:
# 输出SQL日志
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
redis:
host: ${REDIS_HOST:127.0.0.1}
port: ${REDIS_PORT:6379}
database: ${MYSQL_DB:0}
password: ${MYSQL_PASSWD}
尝试启动服务，只要数据库和redis没有问题一般都能正常启动
2 前端初始化前端使用一个已经集成好的优秀前端项目 vue-vben-admin，他是一个使用了最新的vue3,vite2,Typescript等主流技术开发，开箱即用的中后台前端解决方案。
虽然我本身更熟悉element-ui，但是目前集成较好的vue3 admin项目，大多是从vue2老项目改过来的，并没有实现ts的覆盖，作为一个实验性质的脚手架项目，我更倾向于前端使用ts编写更加vue3的代码。
vben除了提供一个丰富示例代码的完整项目，还提供了一个精简的项目，官方推荐不熟悉项目时使用精简项目，正和本项目从零开始的开发原则，因此这里使用精简项目：vben-admin-thin-next
网上主流的脚手架项目，大多会分别发布前后端项目，不过这是一个实验性质的项目，放在一起更易使用。在上文初始化的后端项目同目录下执行以下命令：
git clone https://github.com/anncwb/vben-admin-thin-next # linux/gitbash mv vben-admin-thin-next yiyi-ui # win # rename vben-admin-thin-next yiyi-ui cd yiyi-ui yarn
如果你再1.4 基础配置那里自定义了springboot端口（server.port不是3000），到yiyi-ui/.env.development文件内VITE_PROXY一行配置后台代理的端口为你的自定义端口。
启动服务：
yarn dev3 总结
至此，一个基础的项目已经搭建完成，目录如下：
├─.idea
│ └─libraries
├─.mvn
│ └─wrapper
├─src
│ ├─main
│ │ ├─java
│ │ │ └─shop.liaozalie.yiyi
│ │ └─resources
│ │ ├─static
│ │ └─templates
│ └─test
│ └─java
│ └─shop.liaozalie.yiyi
└─yiyi-ui
├─build
├─mock
├─public
├─src
│ ├─api
│ ├─assets
│ ├─components
│ ├─design
│ ├─directives
│ ├─enums
│ ├─hooks
│ ├─layouts
│ ├─locales
│ ├─logics
│ ├─router
│ ├─settings
│ ├─store
│ ├─utils
│ └─views
├─tests
└─types
