详细实战——SpringBoot搭建网站基础

搭建初始线上项目实现的方法有很多，按照本人接触的，它们关系简单来说就是：数据库——后台服务器——前台展示。

下面从头开始说一种感觉方便简单好用的方法（仅供参考，具体书写的格式及规范遵从实际情况），本文多图，相关的全部代码可在文章末尾处点击 百度网盘 下载。

————————————————————————操作环境如下——————————————————————————

 

类别	名称	简介
编译器软件	IDEA	Java编程语言开发的集成环境
框架	Springboot+Mybatis-plus	开源的轻量级框架
Jar包管理	maven	可通过小段描述信息来管理项目的构建
数据库	mysql	关系型数据库管理系统
数据库管理	navicat	快速、可靠的数据库管理工具
前端框架	Layui	采用自身模块规范编写的前端 UI 框架

想要达成的目标：

后台数据库取数据——封装成JSON——前端接收数据——在表格中显示。

————————————————————————实际操作———————————————————————————

一、新建项目：

打开IDEA软件，点击 Create New Project 新建项目，如下图所示

左侧导航选择 Maven，之后点击 Next，进行下一步，如下图所示

输入相关信息，其中:

• GroupId 定义项目属于哪个组，例如：公司是 demo，即 GroupIdy 应该是 com.demo；再加一级项目为 test，即 GroupIdy 应该是 com.demo.test。
• ArtifactId 定义项目组中唯一 ID，例如：test 等。
• Version 定义了项目当前版本，SNAPSHOT 意思为快照，例如：1.0-SNAPSHOT。

输入完成后，点击Next进行下一步，如下图所示：

输入相关信息，其中，Project name 为项目名称，Project location为项目存放路径，输入完成后，点击Finish，如下图所示：

由此，可以得到一个空的Maven项目，如下图所示：

二、完善依赖：

为了减少篇幅，将所有需要的依赖都放在了一起，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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.table.data</groupId>
    <artifactId>data</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!--设置spring boot的parent，这样当前的项目就是Spring Boot项目了，使用它之后，常用的包依赖可以省去version标签-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.5.RELEASE</version>
    </parent>
    <!-- 设置项目编码格式及声明JDK版本 -->
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <!--依赖-->
    <dependencies>
        <!--对全栈web开发的支持， 包括Tomcat和spring-webmvc-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--引入mybatis-plus，MyBatis的增强工具-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0.3</version>
        </dependency>

        <!--引入mysql数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>

        <!--引入thymeleaf页面模板-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!--比较喜欢这个，创建bean的时候不用写getter/setter/toString-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- 引入fastjson，JSON转换时使用 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.9</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <!--Spring boot的插件，导出成jar、war包时需要-->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

为了达成目标，所需的依赖如上述内容，但有以下几点需要说下：

1. idea的maven下载包的速度太慢了。。替换成国内阿里maven库的话，会快很多，具体操作如下：
   1. 找到IDEA安装目录，在plugins-maven-lib-maven3-conf中找到settings.xml配置文件，路径如下图所示：
   2. 查找到 <mirror> 标签，替换标签内容，若IDEA存在C盘的话，修改后不让保存，可先将文件复制到桌面，修改好后再替换回来，需替换的文字

         <mirror>
            <id>alimaven</id>
            <mirrorOf>central</mirrorOf>
            <name>aliyun maven</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
         </mirror>

      修改后内容如下图：
   3. 之后重启IDEA就可以啦。
2. MyBatis-plus是一个好东西，它有代码生成器、CRUD接口、条件构造器、分页插件等很多核心功能，能帮助我们写代码，更快更方面的开发。本次目标涉及不到太多的东西，因此并没有展示全，有兴趣的可以到 MyBatis-plus 详细的了解下。

   核心功能。

3. Thymeleaf是现代化服务器端的Java模板引擎，依赖中加入它，HTML页面可以通过指定标签实现像JSP页面一样，让前端页面模板接收后端传过来的数据，本次测试仅用到其可以让启动时默认跳转指定页面，感兴趣的可以到百度或取去官网了解下。

4. IDEA有很多使用的插件，结合插件会方便开发，如上述文件中依赖的 lombok ，有了它实体类就不需要写 getter/setter方法。

三、完善目录结构：

本次测试的目录结构如下图（实际目录结构根据实际情况决定）：

 

目录结构的说明如下：

四、创建数据库表及测试数据：

本次使用的是 mysql5.7，确保安装完成，并记住登录用的账号名及密码后，打开 Navicat 软件，如下图所示：

点击右上角的连接，选择 Mysql，如下图所示：

在输入框中输入对应信息，其中连接名起名无限制，主机名或IP地址中的 localhost意思为本机，用户名和密码为mysql数据库安装时数据库的账号密码，输入完成后建议点击弹窗左下角的连接测试，显示连接成功即成功连接数据库，如下图所示：

双击打开连接，右击连接名，选择新建数据库，如下图所示：

输入数据库名，选定字符集及排序规则，排序规则不选默认的话，varchar类型是对大小写不区分，图中的 utf8_bin 是将字符串中的每一个字符用二进制数据存储，并区分大小写的，具体如下图所示：

数据库创建完成后，右击创建表，如下图所示：

新建一张简单的用户表，如下图所示：

在新建的表中添加一些测试数据，如图所示，至此，数据库准备工作结束：

五、完善后端代码：

application.yml配置文件可根据真实情况更改配置，具体如下所示：

#服务器配置
server:
  #默认端口号
  port: 8088
  #tomcat服务器传输参数时的字符编码,不注意的话会导致中文乱码
  tomcat.uri-encoding: UTF-8

#配置spring数据源
spring:
  # 配置连接信息默认连接池
  datasource:
    #数据库连接地址,解释为:JDBC以Mysql的方式进行连接,IP地址为本地,端口号为3306,数据库为test,使用Unicode字符集,字符集编码为utf-8,不进行SSL连接
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false
    #数据库用户名
    username: root
    #数据库用户密码
    password: 123456
    #数据库驱动
    driver-class-name: com.mysql.jdbc.Driver
  #配置hikari连接池
  hikari:
    #从连接池中获取的连接是否默认处于只读模式:否
    read-only: false
    #等待来自连接池的连接的毫秒数为60000,即60秒
    connection-timeout: 60000
    #连接允许在池中闲置的毫秒数为60000,即60秒
    idle-timeout: 60000
    #连接池中最长生命周期
    max-lifetime: 3000
    #指定连接数据库的超时时间
    login-timeout: 500
    #连接池中最大连接数
    maximum-pool-size: 60
    #连接池中维护的最小连接数
    minimum-idle: 10
  # 配置静态资源地址
  resources:
    #静态资源默认目录,此出配置指向resources文件夹
    static-locations: classpath:/
  # 配置模板引擎
  thymeleaf:
      # 指定文件默认目录
      prefix: classpath:/templates/
      # 指定文件尾缀
      suffix: .html
      # 是否开启缓存
      cache: false
      # 字符集编码
      encoding: UTF-8

#mybatis plus映射文件的地址
mybatis-plus:
  #设置扫描.xml文件的存放目录
  mapper-locations: classpath*:/mapper/**/*.xml
  #设置扫描实体bean目录
  typeAliasesPackage: com.test.demo.pojo

编写项目启动类代码，如下所示：

package com.test.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

/**
 * spring boot  启动
 * extends SpringBootServletInitializer 为了部署到Tomcat
 *
 * SpringBootApplication标签是Sprnig Boot项目的核心注解，目的是开启自动配置
 */

@SpringBootApplication
public class Application extends SpringBootServletInitializer {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);

    }


    /**
     * 用于打WAR包
     * @param builder
     * @return
     */
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(Application.class);
    }
}

编写完启动代码后，就可以运行Application启动类代码中的main函数启动项目了，直接启动后，如图所示：

由于我们没有编写页面，所以网页上会报404找不到页面。依靠Thymeleaf及上述配置文件中的设置，仅需在templates文件中创建一个名为index的html页面即可，页面内容如下所示：

此时，再重新启动项目，在浏览器的地址栏上输入 http://localhost:8088/，即可得到如下页面信息：

此时，项目启动完美成功，下面，继续编写后端代码获取数据库数据并转成JSON。

在 pojo 文件夹中创建实体 bean，取名为 TUser，类的属性名要和数据库中对应表的属性名一致。由于依赖导入了lombok，无须写 getter/setter方法，但需要加上@Data注解，否则是需要写的，代码如下图所示（请先忽略注释）：

接下来在 Mapper 文件夹中创建接口文件，取得的数据可用实体Bean或Map两种方式取得，具体使用情况根据实际情况决定，代码如下：

对应的，在resources下的mapper文件夹下新建xml文件，具体内容如下所示：

接下来，写业务层，一般情况下业务层可以进行一些复杂的操作，本次仅展示取数据库中的数据，具体代码如下所示:

上述 Service 业务层中使用了 ResqUtil 类中的方法，这个类是我自定义的，方便返回带数据的前端传参格式，具体代码如下，使用时可根据实际情况修改：

后端代码的最后一步，编写Controller控制层代码，具体如下：

至此，后端代码创建完成，测试下，启动项目，并在浏览器上访问 http://localhost:8088/user/userBean，得到的结果如下图所示：

六、完善前端代码：

首先，需要先准备好Layui所需的文件。前往Layui官网，点击页面中的 立即下载，如下图所示：

将下载后的压缩包中的 layui文件夹放置到项目中的 resources的目录下，详情见上述第三步骤的路径结构。准备完成后，在index.html增加表格，具体代码如下：

上述代码有一点需要注意，由于使用了thymeleaf模板，解析后台传过来的JSON，"cols:[[ "处 "["不换行会导致数据读取失败。

最后，看下成功的效果：

至此，全文结束。

全部的示例代码，可在百度网盘下载，相关的数据库 sql 在 resources 目录下的 sql 文件下中。