詳細實戰教程——從Maven搭建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 文件下中。