IDEA搭建一個SpringBoot項目——十分詳細(web+mysql)

前排提示

IDEA版本:IntelliJ IDEA 2021.1.1 專業版(是否為專業版影響不大)

搭建目的:前端web頁面能夠獲取到MySQL資料庫中的數據


詳細步驟:

1. 創建一個新項目

File -> New -> Project…

2. 項目環境配置

左側選擇Spring Initializr,右側對項目一些屬性進行配置。其中,包名Name為”newDemo”,Project SDK默認1.8版本,java選擇8(我的jdk是1.8),點擊next;

3. 添加依賴項

添加依賴項頁面如下:

在添加依賴項環節中,我們添加Web下的Spring Web,SQL下的MyBatis Framework和MySQL Driver;

       

右側可以看見已經選擇的依賴;

點擊Finish完成項目創建;

4. 創建好的項目結構

5. application.yml配置

將resources文件夾下的application.properties文件後綴名改為yml;

雙擊進入配置頁面,進行埠、資料庫和Mybatis的配置,我的配置結果如下;

其中,需要注意的幾個地方如下:

埠號設置為默認值:8080;

mysql資料庫:edusystem,username:root,password:111111;

mybatis下的type-aliases-package:com.example.newDemo.bean(bean目錄馬上創建)

mysql資料庫需要替換成自己的資料庫、用戶名和密碼;

該部分程式碼如下(注意縮進):

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/edusystem?serverTimezone=Asia/Shanghai&characterEncoding=utf-8
    username: root
    password: 111111
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
  type-aliases-package: com.example.newDemo.bean

6. web頁面測試

在resources的static目錄下創建index.html,內容如下;

點擊右上角運行按鈕;

可見運行成功;

打開瀏覽器,在地址欄輸入localhost:8080,回車;

可見index.html的內容成功顯示在頁面上。至此,web環境搭建成功,接下來搭建mysql環境。

7. 創建bean、controller、mapper、service四層目錄

在newdemo目錄下創建bean、controller、mapper、service四層目錄,目錄結構如下所示;

8. 完善bean層

我的edusystem資料庫下的departments表數據如下:

在bean層下建立Depart類,內容如下(屬性要和數據表的列一一對應):

package com.example.newdemo.bean;

public class Depart {
    private String id;
    private String depName;
    private Integer grades;
    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getDepName() {
        return depName;
    }

    public void setDepName(String depName) {
        this.depName = depName;
    }

    public Integer getGrades() {
        return grades;
    }

    public void setGrades(Integer grades) {
        this.grades = grades;
    }
}

9. 完善mapper層

在mapper層下建立DepartMapper介面,內容如下:

package com.example.newdemo.mapper;

import com.example.newdemo.bean.Depart;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface DepartMapper {
    @Select({
            "select",
            "id, depName, grades",
            "from departments"
    })
    List<Depart> selectAll();
}

10. 完善service層

在service層下建立DepartService介面和DepartServiceImpl實現類,內容分別如下;

DepartService介面:

package com.example.newdemo.service;

import com.example.newdemo.bean.Depart;

import java.util.List;

public interface DepartService {
    public List<Depart> selectAll();
}

DepartServiceImpl實現類:

package com.example.newdemo.service;

import com.example.newdemo.bean.Depart;
import com.example.newdemo.mapper.DepartMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service("departService")
public class DepartServiceImpl implements DepartService{
    @Autowired
    private DepartMapper departMapper;

    @Override
    public List<Depart> selectAll() {
        return departMapper.selectAll();
    }
}

11. 完善controller層

在controller層下建立DepartController類,內容如下:

package com.example.newdemo.controller;

import com.example.newdemo.bean.Depart;
import com.example.newdemo.service.DepartService;
import com.example.newdemo.service.DepartServiceImpl;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/depart")
public class DepartController {
    @Resource
    private DepartService departService = new DepartServiceImpl();

    @RequestMapping(value = "/selectAll", method = RequestMethod.GET)
    public List<Depart> selectAll() {
        List<Depart> list = departService.selectAll();
        return list;
    }
}

12. 完善後的項目結構

13. 完善index.html以進行測試

對index.html的內容進行完善,用來獲取數據表departments中的數據,內容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .result{
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 300px;
            background-color: rgba(0,0,0,.8);
            color: white;
            text-align: center;
            letter-spacing: 2px;
            padding-top: 20px;
            font-size: 18px;
            line-height: 28px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<button style="display: block;margin: 20px auto;width: 160px;height: 60px;" onclick="getAll()">查看院系資訊</button>
<div class="result" id="result"></div>
<script>
    function getAll(){
        $.ajax({
            type: "get",
            url: "depart/selectAll",
            data: {
            },
            success:function (data) {
                console.log(data)
                $("#result").empty()
                for(var i = 0;i < data.length;i++){
                    $("#result").append(JSON.stringify(data[i]) + "<br>")
                }
            },
        });
    }
</script>
</body>
</html>

14. 點擊右上角的運行

15. 打開瀏覽器,輸入localhost:8080

可以看見有一個「查看院系資訊」按鈕:

點擊該按鈕,在頁面下方得到如下結果:

可見,departments表中的數據成功顯示在index頁面中,至此,web+mysql環境搭建完畢。