Springboot項目搭建(前端到數據庫,超詳細)


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

項目說明:

開發環境:Eclipse 4.42

框架:Springboot

工具:Maven

前端:Html、Thymeleaf

后台:Java、JPA (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 !!!";
    }
    
}

注:上面的注解,剛開始沒注意,自己誤寫成@RestController,導致沒有方法上沒有@ResponseBody注解也能編譯通過,原來@RestController 等於@Controller+@ResponseBody,如果類中的方法均返回JSON格式,則可以用@RestController,如果返回JSON和頁面,則要用類@Controller和方法@ResponseBody。

(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)這樣配置后,重啟項目,我們就可以不用輸入端口號了。

 

 

 

 

【注】當你手動熟悉了上面的流程,也可以試試 如何快速創建一個 Springboot 項目 。

-------------------------------------------------------------------------------------------------------------

【04】修改項目為熱部署(凡有文件修改保存后,自動重啟)

(4.1)打開pom.xml,加入下面依賴,最后重啟一次項目。

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

 

 

 

 

 

 注明:當在pom.xml中添加spring-boot熱部署依賴時,<dependency>報錯,提示找不到,於是添加了在<artifactId>后面添加了<version>2.3.12.RELEASE</version>,版本要與spring-boot版本一致。

(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>

 

 

 注明:當在pom.xml中添加hymeleaf依賴時,<dependency>報錯,提示找不到,於是添加了在<artifactId>后面添加了<version>2.3.12.RELEASE</version>,版本要與spring-boot版本一致。

 

 

 

(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

 

 

 注明:mode: HTML5  編譯報錯,改成mode: HTML 后正確,大家看哪個隊就選哪個吧。

 

 

 

(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

 

 

 注明:

driver-class-name: com.mysql.jdbc.Driver  報錯,提示使用新版本方式,修改為 driver-class-name: com.mysql.cj.jdbc.Driver,修改后正確。

 

 

 (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>

 

 

 注明:當在pom.xml中添加jpa依賴時,<dependency>報錯,提示找不到,於是添加了在<artifactId>后面添加了<version>2.3.12.RELEASE</version>,版本要與spring-boot版本一致。

 

 

 

(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;
    }
 
}

注明:在后面的額調試中發現屬性:int age 為null時,thpmeleaf中${user.age} 報錯,可能是int為null時不能進行映射。於是,將int age 改為了 Integer age,則頁面正常顯示空或者年齡。

(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>

 

 

 

 

 

 


 (9.5) 我們在瀏覽器上輸入 localhost/userList,則可以看到數據庫中的用戶數據了

 

 

 

 

(9.6)點擊這個按鈕,可以直接跳轉到新增用戶頁面

 

 

 

 

(9.7)來到頁面后,我們可以繼續添加用戶,點擊保存。

 

 

 

 

(9.8)然后再次訪問列表頁面,可以看到新數據庫我們也能看見了。

 

 

 

 

至此為止!所有springboot數據從前台到數據庫,以及數據庫到前台,已經完全實現了!我相信你也會了!

要是還不會,沒關系!我這里還有源碼給你,記得修改配置文件中數據庫的帳號和密碼哦!

源碼:https://pan.baidu.com/s/1wGEhuPo52F5-w2daAtN_ag

(包含1-8節,第9節自己弄,總得自己寫點什么才能真正學到!)

----------------------------------------------------------------------------------------------------

其他相關推薦: 

(1)Springboot基於注解實現自動任務(https://blog.csdn.net/sunnyzyq/article/details/98727730)

(2)Springboot之JPA常用查詢方法(https://blog.csdn.net/sunnyzyq/article/details/89476357)

(3)Springboot 攔截器(https://blog.csdn.net/sunnyzyq/article/details/89743507)

----------------------------------------------------------------------------------------------------

項目寫好了,你是不是想迫不及待的發版上去?沒問題,發布公網的小白教程也有!

相關鏈接:網站開發:從寫代碼到公網訪問整個流程(https://blog.csdn.net/sunnyzyq/article/details/95062942)
————————————————
版權聲明:本文為CSDN博主「zyqok」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/sunnyzyq/article/details/86711708

注明:紅色的文字部分是在進行搭建時,針對在原作者原文中遇到的一些問題及解決辦法。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM