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="https://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環境搭建完畢。