[Java知识库]新建项目——从零开始搭建后台管理系统脚手架（一）

为了实践自己所学，尝试从零开始搭建一个基于springboot2和vue的后台管理系统脚手架，并配文记录整个搭建过程。

整个开发过程，都遵循从无到有逐步增强的原则，无论是表设计还是编码，都力求先用最少的内容实现最基础的功能，再逐步改造，不会一开始就过多考虑完备性或拓展性。

1 后端初始化

1.1 新建项目

直接使用idea的springboot初始化界面新建项目，我的项目名是我儿子小名yiyi。

一开始不引用太多功能，只勾选最基础的四个：Spring Web/Redis/MySQL Driver/Lombok

1.2 补充依赖

编辑pom文件，引入一些流行的jar包，既有助于项目自身快速开发，同时也降低脚手架使用者的学习门槛。

1.2.1 通用工具——HuTool

我用了很久apache的commons包和谷歌的guava，他们都是很优秀的工具包，不过论功能全面，还是首推国内大神的hutool，基本上引用这个包后，除了个别系统自身特性相关的工具类，很少需要再额外开发工具包。

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>${hutool.version}</version>
</dependency>

1.2.2 数据库——Mybatis Plus

首先排除了springboot系列的JPA，无意争论JPA和Mybatis哪个更好，单纯只是我JPA用的少不熟悉所以暂且不用。

Mybatis本身已经很易用，国内大神的Mybatis Plus让他的易用性更上一层楼，我比较习惯使用他的lambda表达式链式调用来编写一些单表的增删改查，不仅语法简练可读性强，更是节省很多编写sql的精力。

这里推荐引用官方提供的mybatis-plus-boot-starter，可以省去引用jdbc和mybatis等包的麻烦。

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>${mybatis-plus.version}</version>
</dependency>

1.2.3 鉴权——Sa-Token

之前我看到的绝大数鉴权相关的教程，以及使用过的绝大多数脚手架，都使用shiro或者spring security作为鉴权工具。必须承认他们都是非常优秀的开源工具，但也都是很老的工具，有不少兼容JSP项目的老设计，不光学起来费劲，实现目前主流的鉴权功能（如JWT）还需要集成其他第三方JAR包，因此我尝试使用国内大神开源的Sa-Token，他不仅接口简单，设计灵活，而且集成度非常高，可以快速实现各类当下主流的鉴权功能。

<dependency>
    <groupId>cn.dev33</groupId>
    <artifactId>sa-token-spring-boot-starter</artifactId>
    <version>${sa-token.version}</version>
</dependency>

1.3 完整pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>shop.liaozalie</groupId>
    <artifactId>yiyi</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>yiyi</name>
    <description>yiyi</description>
    <properties>
        <java.version>11</java.version>
        <sa-token.version>1.28.0</sa-token.version>
        <hutool.version>5.7.16</hutool.version>
        <mybatis-plus.version>3.4.3.4</mybatis-plus.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--工具类-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>${hutool.version}</version>
        </dependency>

        <!--数据库-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${mybatis-plus.version}</version>
        </dependency>

        <!-- 鉴权-->
        <dependency>
            <groupId>cn.dev33</groupId>
            <artifactId>sa-token-spring-boot-starter</artifactId>
            <version>${sa-token.version}</version>
        </dependency>
        <dependency>
            <groupId>cn.dev33</groupId>
            <artifactId>sa-token-dao-redis-jackson</artifactId>
            <version>${sa-token.version}</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

1.4 基础配置

我习惯使用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 dev

3 总结

至此，一个基础的项目已经搭建完成，目录如下：

├─.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