?【爆肝萬字】手把手教你SpringBoot+MyBatis+jQuery+HTML5從0開始寫網頁一學就會！（內附原始碼）?

今天帶給大家的是SpringBoot+MyBatis+jQuery+HTML5+CSS簡單實作前后端互動，保證干貨滿滿，看完你就可以動手寫你自己的程式！

首先得需要你創建一個SpringBoot專案，具體怎么創建這里久不多說啦，

其次，你的創建一張這樣一張表用于連接測驗功能，很簡單的一張表，當然只是用于功能測驗，實際業務中可沒有這么簡單的表喲，

創建完成以后你pom.xm檔案中的中應該有如下引入依賴：

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

        <!--本地測驗-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>5.1.38</scope>
        </dependency>

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

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

        <!--jquery依賴-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>

依賴寫入以后，記得在點擊此刻出現在你IDEA界面右上角的重繪按鈕喲，

注入依賴以后，在你的專案中src目錄下的resources目錄下建立application.yml檔案，當然你也可以使用application.properties來進行配置，但是這里我們更加推薦通過.yml檔案對其進行配置，因為它的屬性結構可以讓引數看起來更加簡潔清晰，配置如下：

spring:
  #thymeleaf頁面快取關閉
  thymeleaf:
    cache: false
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8
    driver-class-name: com.mysql.cj.jdbc.Driver


# 開發環境配置
server:
  # 服務器的HTTP埠，默認為80
  port: 1717
  servlet:
    # 應用的訪問路徑
    context-path: /
  tomcat:
    # tomcat的URI編碼
    uri-encoding: UTF-8
    # tomcat最大執行緒數，默認為200
    max-threads: 800
    # Tomcat啟動初始化的執行緒數，默認值25
    min-spare-threads: 30

# 日志配置
logging:
  level:
    com.gantiexia: debug
    org.springframework: warn

# MyBatis
mybatis:
  # 搜索指定包別名
  typeAliasesPackage: com.gantiexia.**.entity
  # 配置mapper的掃描，找到所有的mapper.xml映射檔案
  mapperLocations: classpath*:mapper/**/*.xml

注意！ 上面spring的配置中，datasource要寫入你自己資料庫的連接引數，這里博主用到的MYSQL的連接方式，同樣，最后MyBatis的路徑配置決定了你的專案能否找到對應的承接資料庫的檔案，

連接資料庫

在java包下創建層級目錄，com/gantiexia/springboot_test，然后在springboot_test包下創建entity包，在這個包下創建物體集，

package com.gantiexia.springboot_test.entity;

/**
 * @author GanTieXia
 * @date 2021/8/21 4:20
 */
public class User {
    /** 用戶名*/
    private String userName;
    /** 賬號*/
    private String idNumber;
    /** 密碼*/
    private String passWord;
    /** 年齡*/
    private String age;
    /** 性別*/
    private String sex;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getIdNumber() {
        return idNumber;
    }

    public void setIdNumber(String idNumber) {
        this.idNumber = idNumber;
    }

    public String getPassWord() {
        return passWord;
    }

    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    @Override
    public String toString() {
        return "User{" +
                "userName='" + userName + '\'' +
                ", idNumber='" + idNumber + '\'' +
                ", passWord='" + passWord + '\'' +
                ", age='" + age + '\'' +
                ", sex='" + sex + '\'' +
                '}';
    }
}

物體集寫好以后，緊接著我們在springboot_test包下創建層級目錄：mapper/user，然后再在user包下創建命為UserMapper的介面：

package com.gantiexia.springboot_test.mapper.user;

import com.gantiexia.springboot_test.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * @author GanTieXia
 * @date 2021/8/21 4:30
 */
@Mapper
public interface UserMapper {
    /**
     * 獲取資訊
     *
     * @return
     */
    List<User> getMessage();
}

然后在resources目錄下，創建層級目錄mapper/user,在user包下面創建UserMapper.xml用于寫我們的資料庫查詢陳述句，

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gantiexia.springboot_test.mapper.user.UserMapper">
    
    <select id="getMessage" resultType="com.gantiexia.springboot_test.entity.User">
        select userName,idNumber,passWord,age,sex from t_user;
    </select>

</mapper>

注意！ 此處的namespace對應的是你的mapper介面所在的路徑，各個namespace之間相互獨立不影響，

好了，到此我們就得寫個測驗類看這個dao介面（又稱mapper）能否連接資料庫，接下來在test包下，按如下路徑創建測驗類，創建如下路徑下的檔案：

撰寫測驗類：

package com.gantiexia.springboot_test;

import com.gantiexia.springboot_test.entity.User;
import com.gantiexia.springboot_test.service.UserService;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.List;

@SpringBootTest
class SpringbootUserCtrlApplicationTests {

    @Autowired
    private UserService userService;

    @Test
    public void getAllMessage(){
        List<User> list = userService.getMessage();
        for(User user : list){
            System.out.println(user);
        }
    }
}

運行結果如下：

至此成功由代碼獲取到資料庫中的資料，

撰寫業務功能模塊代碼

按照如下路徑創建檔案，注意，UserService介面在service目錄下，

撰寫service目錄下的UserService介面代碼：

package com.gantiexia.springboot_test.service;

import com.gantiexia.springboot_test.entity.User;

import java.util.List;

/**
 * @author GanTieXia
 * @date 2021/8/21 4:36
 */
public interface UserService {

    /**
     * 獲取資訊
     *
     * @return
     */
    List<User> getMessage();
}

撰寫service目錄下的serviceImpl包下的UserServiceImpl類代碼：

package com.gantiexia.springboot_test.service.serviceImpl;

import com.gantiexia.springboot_test.entity.User;
import com.gantiexia.springboot_test.mapper.user.UserMapper;
import com.gantiexia.springboot_test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

/**
 * @author GanTieXia
 * @date 2021/8/21 4:36
 */
@Service
@Transactional
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    /**
     * 獲取所有資訊
     *
     * @return
     */
    @Override
    public List<User> getMessage() {
        return userMapper.getMessage();
    }
}

然后創建如下層級路徑以及路徑下的檔案：

撰寫controller路徑下的UserCtrl檔案：

package com.gantiexia.springboot_test.controller;

import com.gantiexia.springboot_test.entity.User;
import com.gantiexia.springboot_test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * @author GanTieXia
 * @date 2021/8/20 23:06
 */
@Controller
@RequestMapping("firstTest")
public class UserCtrl {

    @Autowired
    private UserService userService;

    @RequestMapping("/getMessage")
    @ResponseBody
    public List<User> getMessage(){
        return userService.getMessage();
    }

    @RequestMapping("/testMyFirstPage")
    public String toPage(){
        return "/user/testPage";
    }
}

接下來就要去寫前端頁面了，這里我們只寫一個簡單的樣式，以供參考，

按照如下路徑在resources目錄下創建你的HTML5頁面：

接下來我們撰寫testPage.html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot</title>
</head>
<style>
    #picture {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        position: relative;
        left: -25px;
    }
    #showPicture{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>
<body>
<div>
    <div style="width: 100%;background-color: cornflowerblue;height: 50px">
        <div id="picture" style="float: right;">
            <img id="showPicture" src="/picture/picture.jpg">
        </div>
        <div style="float: right">
            <p style="width: 150px;">用戶名：<label id="userName"></label></p>
        </div>
        <div style="float: right">
            <p style="width: 150px;">賬號：<label id="idNumber"></label></p>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script>
    // 這里我們隨便加載一下資料，大家知道原理就好啦
    $.ajax({
        type:"post",
        url: "/firstTest/getMessage",
        async:false,
        success:function (data) {
            for(var i=0;i<data.length;i++){
                $("#userName").html(data[0].userName)
                $("#idNumber").html(data[0].idNumber)
            }

        }
    })
</script>
</html>

注意！ 此處的中我們用到了jQuery，它的使用需要你去下載相應的js檔案，放在對應的包里，這里為了大家能達到效果，建議大家將這個檔案放在和我一樣的路徑下：

為了展示頭像效果，我在static包下創建了一個picture檔案夾，用來裝待會我們要顯示在前端的圖片，你們也可以先隨便放一張圖片在這里，注意圖片路徑和圖片名字得和我一樣， 因為前端引入的時候輸入它的路徑了，你也可以在前端頁面中將圖片改成你自己的圖片路徑：

相信大家前面看了那么多遍這個檔案，一定好奇這個類是干嘛的吧！

他就是我們springBoot專案中的啟動類啦，這個檔案我是放在gantiexia這個檔案的路徑下面的， 因為它能夠讀取到同級以及同級子目錄下的檔案，這樣無論你是由多少個包像springboot_test、springboot_testOne、springboot_testThree等等等它都能識別到，我們來看看它長什么樣子：

package com.gantiexia;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author GanTieXia
 * @date 2021/8/20 23:06
 */
@SpringBootApplication
public class SpringbootTestApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootTestApplication.class, args);
        System.out.println("springBoot專案啟動成功...");
    }

}

當然我自己改動了一下的哈，我們找到這個類，右鍵運行起這個類：

在訪問前端網頁的時候，要確保你的資料庫能夠正常連接，

接下來我們打開網頁，輸入剛才我們控制器中定義的url地址，埠號為我們application.yml檔案中server下定義的port: 1717（可隨意更改，只要不沖突就好），注意這里我們前端頁面Ajax中取得是資料庫中得第一條資料沒加任何得業務邏輯，

輸入網址：localhost:1717/firstTest/testMyFirstPage

效果圖：

到此，資料庫-后端-前端全部打通，如果有不懂的，歡迎大家留言，我會一一解答，

今天的分享就到這里，覺得博主的分享有用的記得一鍵三連，謝謝大家，我們下期再見~