Springboot項目搭建（前端到數據庫，超詳細）

下面詳細談談我的第一個springboot項目搭建，希望會給還在摸索的同學一點幫助。

項目說明：

開發環境：Eclipse 4.42

框架：Springboot

工具：Maven

前端：Html、Thymeleaf

後臺：Hibernate

數據庫：Mysql

爲什麼要搭建Springboot項目？

教科書式的闡述這裏就不說了，我就總結爲兩個詞語 “簡單、方便”。

爲了更加清晰的展示，現在我用一個全新的工作空間來演示springboot項目的搭建過程。

【01】創建一個簡單的maven項目（如果Eclipse不支持Maven項目創建，請先自行安裝Maven，不會問度娘）：

（1.1）右鍵單擊 --> New --> Other

（1.2）輸入Maven，選中Maven Project，點擊Next。

（1.3）勾選 Use default Workspace location，點擊Next。

（1.4）選擇 maven-archetype-quickstart，點擊Next。

（1.5）填寫GroupId、ArtifactId、爲了統一，你們也照着這個來寫吧，真實就是填公司性質（.com）和域名（springboot）。填寫好後，Package一欄會自動生成，這也就是項目中的包名，點擊Finish。

（1.6）可以看到，我們的工程已經創建成功了。但貌似現在有一些不完美的地方需要解決。

（1.7）工程創建成功後，可以看到又一個小紅叉，雖然不影響程序運行，但面對有強迫的我們，看着很少難受。選中工程：右鍵單擊--> Maven --> Update Project

（1.8）什麼都不管，直接點擊OK

（1.9）奈斯！小紅叉已經被我們消滅了！

【02】加入Springboot框架

（2.1）我們先雙擊打開pom.xml文件，把不要的東西先幹掉，最後保留如下所示即可：


<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</groupId>
	<artifactId>springboot</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>
    
</project>

（2.2）定義父類：springboot 所有jar包版本，這裏爲 2.0.5.RELEASE 版本


    <!-- Spingboot相關jar包版本 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.5.RELEASE</version>
    </parent>

（2.3）加入springboot核心包、和web開發必須的包


    <!-- 相關jar包 -->
    <dependencies>
    	<!-- Springboot核心jar包 -->
     	<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <!-- web開發包：包含Tomcat和Springmvc -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

（2.4）可以看到，我們項目測試類現在還有一個大紅叉，是因爲我們剛剛吧把初始的Junit包乾掉了，現在，我們重新加入Junit包。

（2.5）加入Junit測試包，保存。


        <!-- Junit測試jar包 -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>

（2.6）重新maven update一下，小紅叉就沒有了（這裏JRE我手動換成了自己常用的jdk1.8）。

（2.7）我們創建一個App類，用來啓動項目用（創建項目的時候已經有這個類了，現在只需要修改代碼爲如下）。


package com.springboot;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
/**
 * 項目啓動類
 */
@SpringBootApplication
public class App {
    
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
    
}

裏面就一個註解，和一個啓動程序的方法。

（2.8）創建Controller：我們同樣舉例以萬年不變的User爲例，取名UserController。


package com.springboot.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
@Controller
public class UserController {
 
	@RequestMapping("/hello")
	@ResponseBody
	public String hello() {
		return "Hello World !!!";
	}
	
}

（2.9）啓動項目，執行app類中的main函數，如果正常，控制檯出現下面輸出，則項目已經啓動成功了。

（2.10）我們在地址欄目輸入 localhost:8080/hello 進行訪問，如果能看到Hello world字樣，則說明項目springboot已經搭建成功了。

【03】常用配置設置
springboot項目默認配置文件是resources文件夾下的application.yml文件，現在項目沒有這些東西，需要手動進行創建。

（3.1）創建resources文件夾（該文件夾主要存放各種配置資源），如果項目已經有 src/main/resources文件夾，則該步驟略過。如果沒有，請按照鏈接所示創建文件夾：https://www.cnblogs.com/zhangyuanqiang/p/9183908.html（敝人博客園文章）

（3.2）創建 application.yml 文件，選中src/main/java/resources/文件夾-->New-->Other

（3.3）選擇General文件夾下的File，點擊Next

（3.4）輸入application.yml，點擊Finish。

（3.5）完成創建如圖所示

（3.6）打開application.yml文件進行服務器配置（注意排版保持一致，也注意鍵值對的冒號後有一個空格）


server:
  port: 80
  session-timeout: 30
  tomcat.max-threads: 0
  tomcat.uri-encoding: UTF-8

（3.7）這樣配置後，重啓項目，我們就可以不用輸入端口號了。

【04】修改項目爲熱部署（凡有文件修改保存後，自動重啓）

（4.1）打開pom.xml，加入下面依賴，最後重啓一次項目。


<!-- spring-boot熱部署 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
</dependency>

（4.2）然後修改返回頁面的語句，保存，你會發現項目可以自動重啓了。

（4.3）並且也能訪問成功，說明我們的熱部署也已經配置成功了。

【05】配置 Thymeleaf

現在後臺已經OK，後臺的數據需要顯示到前端，我們這裏前端顯示，用springboot常配套的 thymeleaf（相當於c標籤），

這個使用起來很簡單，基本一用就會，會c標籤的更是一點即通。

下面是我對thymeleaf常用使用方式總結，不懂的可以看看：https://blog.csdn.net/sunnyzyq/article/details/86685697

（5.1）在pom.xml中加入thymeleaf


<!-- thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

（5.2）在resoures文件夾下分別創建templates（主要放html文件）和static（主要放css、js文件）文件夾

（5.3）配置thymeleaf（這樣配置後，再代碼中返回到那個頁面就不用寫過多的前綴和後綴了，達到簡化效果）


spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    content-type: text/html
    cache: false

（5.4）再UserController.java文件中加入如下代碼，保存。


	@RequestMapping("/index")
	public String index(Model model) {
		model.addAttribute("name", "jack");
		model.addAttribute("age", 20);
		model.addAttribute("info", "我是一個愛學習的好青年");
		return "index";
	}

（5.5）在 templates 文件夾下加入頁面 index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
    姓名：<input type="text" th:value="${name}"><br/>
    年齡：<input type="text" th:value="${age}"><br/>
    簡介：<input type="text" th:value="${info}"><br/>
</body>
</html>

（5.5）由於配置文件進行了修改，這一次我們需要手動重啓項目，啓動後，輸入 localhost/index 訪問，可以看到數據已經成功顯示到頁面上了。

到此爲止，我們前臺、後臺已經打通了，接下來就差最後一步了，把數據存入數據庫。

接下來，我們就採用 hibernate 將數據寫入到數據庫中。

首先到數據庫肯定需要jdbc連接容器和hibernate的相關jar包。

【06】配置數據庫鏈接

（6.1）在pom.xml中加入jdbc鏈接容器相關jar包。


<!-- jdbc鏈接容器 -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

（6.2）配置數據庫相關信息（注意datasource的層級是在spring下）：

有數據庫名稱（我這裏取名爲boot）、數據庫用戶名、數據庫密碼等配置信息（這裏你需要填你的數據庫帳號和密碼）


  datasource:
    url: jdbc:mysql://localhost:3306/boot
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: zyq123
    initial-size: 10
    max-active: 20
    max-idle: 8
    min-idle: 8

（6.3）在你的mysql中創建對應的數據庫，名稱和你的配置保持一致。

（6.4）加入hibernate相關jar包（springboot中，hibernate的相關jar包已經集成到jpa中了，所以這裏只需要引入jpa一個jar依賴即可，再也不用像以前那樣引入一連串的hibernate相關包了）


<!-- jpa（已包含hibernate） -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

（6.5）配置jpa（hibernate）相關信息：


  jpa:
    database: mysql
    show-sql: true
    hibernate:
      ddl-auto: update
      naming:
        physical-strategy: org.springframework.boot.orm.jpa.hibernate.SpringPhysicalNamingStrategy
    database-platform: org.hibernate.dialect.MySQL5InnoDBDialect

好了，配置現在全部已經搞好了，接下來就是寫dao層了。

在寫Dao層前，先創建我們的測試實體類User

【07】創建相關實體

（7.1）我們創建一個bean文件夾來存放相關實體，首先創建一個BaseBean類，裏面主要存放每個實體的公共屬性，比如：id，創建人，創建時間，更新人，更新時間等，這裏我們就只寫一個公共屬性ID來演示。


package com.springboot.bean;
 
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.MappedSuperclass;
 
@MappedSuperclass
public class BaseBean {
 
	/**
	 * 自增長ID
	 */
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
 
}

（7.2）創建User實體類


package com.springboot.bean;
 
import javax.persistence.Entity;
import javax.persistence.Table;
 
@Entity
@Table(name = "user")
public class User extends BaseBean {
 
	private String name;
	private int age;
	private String info;
 
	public String getName() {
		return name;
	}
 
	public void setName(String name) {
		this.name = name;
	}
 
	public int getAge() {
		return age;
	}
 
	public void setAge(int age) {
		this.age = age;
	}
 
	public String getInfo() {
		return info;
	}
 
	public void setInfo(String info) {
		this.info = info;
	}
 
}

（7.3）創建Service層接口


package com.springboot.service;
 
import com.springboot.bean.User;
 
public interface UserService {
 
	/**
	 * 保存用戶對象
	 * @param user
	 */
	void save(User user);
 
}

（7.4）創建Service實現類（實現先暫時不管，等我們寫了dao層再回來補上）


package com.springboot.service.impl;
 
import org.springframework.stereotype.Service;
 
import com.springboot.bean.User;
import com.springboot.service.UserService;
 
@Service
public class UserServiceImpl implements UserService {
 
	@Override
	public void save(User user) {
		// TODO Auto-generated method stub
		
	}
 
}

（7.5）加入dao層，該層接口都是去繼承JpaRepository接口。

在一個項目中，我們往往會創建一個公共接口來處理到數據庫的請求，比如分頁等，然後每個接口去繼承它即可。

所以我們首先創建這個公共dao層接口：CommonDao


package com.springboot.dao;
 
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
 
import com.springboot.bean.BaseBean;
 
@Repository
public interface CommonDao<T extends BaseBean> extends JpaRepository<T, Long> {
 
}

（7.6）加入UserDao


package com.springboot.dao;
 
import org.springframework.stereotype.Repository;
 
import com.springboot.bean.User;
 
@Repository
public interface UserDao extends CommonDao<User> {
 
}

（7.7）現在回到UserServiceImpl類中，補全之前未完成的代碼

OK，到此爲止，所有鏈路都已經打通了，我們現在搞點數據測試一下。

【8】測試

（8.1）修改index.html如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<form action="/save" method="post">
    姓名：<input type="text" th:value="${name}" name="name"><br/>
    年齡：<input type="text" th:value="${age}" name="age"><br/>
    簡介：<input type="text" th:value="${info}" name="info"><br/>
    <button>保存</button>
</form>
</body>
</html>

（8.2）再UserController類中增加保存用戶的方法：


	@Autowired
	private UserService userService;


	@RequestMapping("/save")
	@ResponseBody
	public String save(User user) {
		userService.save(user);
		return "save success !";
	}

（8.3）重啓項目，再次訪問 localhost/index

（8.4）修改頁面數據，點擊保存

（8.5）頁面提示了 save success ！則說明後臺所有鏈路成功打通，數據保存成功！

（8.6）我們進入數據庫，刷新boot數據庫，發現已經創建了的user實體表。

（8.7）打開user表，我們可以發現界面的數據已經成功的幫我們保存到數據庫中了。

【9】讀取數據庫信息到頁面展示（應讀者需求，這小節是幾個月後續寫的內容）

（9.1）打開service層接口，添加獲取用戶對象的方法定義。


/**
 * 獲取所有用戶對象
 * @return
 */
List<User> getUserList();

（9.2）在實現類中添加方法的實現


@Override
public List<User> getUserList() {
    return userDao.findAll();
}

（9.3）在Controller層中添加接受請求的方法


@RequestMapping("/userList")
public String userList(Model model) {
    List<User> userList = userService.getUserList();
    model.addAttribute("userList", userList);
    return "list";
}

看到有的新同學留言，不知道Controller方法的含義，那麼這裏我補充說下：

1處：這個註解裏寫的是你前臺頁面發的請求路徑，規範寫法來講，要與方法同名；

2處：這個對象，是用於存儲數據，將數據帶回頁面；

3處：前面那個藍色的userList是鍵，後面那個是你具體的數據，頁面需要根據你的鍵從model裏取數據。

4處：list爲你返回的頁面文件，比如我們這裏爲 list.html （配置文件中已經配了尾綴，所以這裏不寫後面的.html）

（9.4）我們添加一個展示頁面 list.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用戶列表</title>
</head>
<body>
    <a href="/"><button>返回添加頁面</button></a>
    <div align="center">
        <table style="border: 1px solid;">
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>介紹</th>
            </tr>
            <tr th:each="user:${userList}">
                <td th:text="${user.name}"></td>
                <td th:text="${user.age}"></td>
                <td th:text="${user.info}"></td>
            </tr>
        </table>
    </div>
</body>
</html>