SpringBoot整合MyBatis(實現前端)
阿新 • • 發佈:2021-10-20
SpringBoot整合MyBatis(實現前端)
使用MyBatis Generatot外掛
系統要求
Java 8+
springBoot2.5 +
建立springBoot專案工程
匯入依賴
<properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.5</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.0</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.25</version> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.5</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.mybatis.generator</groupId> <artifactId>mybatis-generator-maven-plugin</artifactId> <version>1.4.0</version> <dependencies> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.7</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.25</version> </dependency> </dependencies> <executions> <execution> <id>Generate MyBatis Artifacts</id> <goals> <goal>generate</goal> </goals> </execution> </executions> <configuration> <overwrite>true</overwrite> </configuration> </plugin> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build>
檢視是否有MyBatis Generator外掛
編寫sql
-- 建立資料庫 create database webapp1 charset utf8mb4; -- 建立使用者名稱、密碼 create user'webapp1'@'localhost'identified by'webapp1'; -- 授權 grant all on webapp1.*to'webapp1'@'localhost'; -- 用使用者名稱、密碼登入 mysql -uwebapp1 -pwebapp1 -- 建立表 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for user -- ---------------------------- DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int NOT NULL AUTO_INCREMENT, `username` varchar(12) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `sex` varchar(2) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL, `age` int NULL DEFAULT NULL, `birthday` date NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 554 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
配置application.yml
spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3307/webapp1 # ?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8 username: webapp1 password: webapp1 #Spring Boot 預設是不注入這些屬性值的,需要自己繫結 #druid 資料來源專有配置 # 初始化大小,最小,最大 initialSize: 5 minIdle: 5 maxActive: 200 # 配置獲取連線等待超時的時間 maxWait: 60000 # 配置間隔多久才進行一次檢測,檢測需要關閉的空閒連線,單位是毫秒 timeBetweenEvictionRunsMillis: 60000 # 配置一個連線在池中最小生存的時間,單位是毫秒 minEvictableIdleTimeMillis: 300000 # 用來檢測連線是否有效的sql,要求是一個查詢語句 validationQuery: SELECT 1 FROM DUAL # 建議配置為true,不影響效能,並且保證安全性。申請連線的時候檢測,如果空閒時間大於timeBetweenEvictionRunsMillis,執行validationQuery檢測連線是否有效。 testWhileIdle: true # 申請連線時執行validationQuery檢測連線是否有效,做了這個配置會降低效能 testOnBorrow: false # 歸還連線時執行validationQuery檢測連線是否有效,做了這個配置會降低效能。 testOnReturn: false # 是否快取preparedStatement,也就是PSCache。PSCache對支援遊標的資料庫效能提升巨大,比如說oracle。在mysql下建議關閉。 poolPreparedStatements: true # 要啟用PSCache,必須配置大於0,當大於0時,poolPreparedStatements自動觸發修改為true。 max-pool-prepared-statement-per-connection-size: 50 #配置監控統計攔截的filters,stat:監控統計、log4j:日誌記錄、wall:防禦sql注入 #如果允許時報錯 java.lang.ClassNotFoundException: org.apache.log4j.Priority #則匯入 log4j 依賴即可,Maven 地址:https://mvnrepository.com/artifact/log4j/log4j filters: stat,wall,log4j # 合併多個DruidDataSource的監控資料 useGlobalDataSourceStat: true # 通過connectProperties屬性來開啟mergeSql功能;慢SQL記錄 connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500 mvc: hiddenmethod: filter: #手動開啟Restful風格 enabled: true mybatis: #sql對映檔案的位置 # mapper-locations: classpath:com/xiang/mapper/*.xml mapper-locations: classpath:mapper/*.xml #開啟駝峰命名轉化 configuration: map-underscore-to-camel-case: true #開啟別名 # type-aliases-package: com.xiang pagehelper: helperDialect: mysql reasonable: true supportMethodsArguments: true params: count: countSql
配置generatorConfig.xml
<!DOCTYPE generatorConfiguration PUBLIC
"-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
"http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
<context id="simple" targetRuntime="MyBatis3Simple">
<jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
connectionURL="jdbc:mysql://localhost:3307/webapp1"
userId="webapp1" password="webapp1"/>
<!-- useSSL=true&useUnicode=true&characterEncoding=UTF-8"-->
<!-- <commentGenerator>-->
<!-- <!– 是否去除自動生成的註釋 true:是 : false:否 –>-->
<!-- <property name="suppressAllComments" value="false" />-->
<!-- </commentGenerator>-->
<javaModelGenerator targetPackage="com.xiang.model" targetProject="src/main/java"/>
<sqlMapGenerator targetPackage="com.xiang.mapper" targetProject="src/main/resources"/>
<javaClientGenerator targetPackage="com.xiang.mapper" targetProject="src/main/java" type="XMLMAPPER"/>
<table tableName="user"/>
</context>
</generatorConfiguration>
編寫mapper、model 這兩個包。
(只寫包名就好)包下邊的實體類、與介面、xml檔案使用外掛生成
接下來建立service、controller層
編寫UserService
package com.xiang.service;
import com.xiang.model.User;
import java.util.List;
/**
* Created by IntelliJ IDEA.
* User: xiang
* Date: 2021/10/19 11:24
*/
public interface UserService {
int deleteByPrimaryKey(Integer id);
int insert(User record);
User selectByPrimaryKey(Integer id);
List<User> selectAll();
int updateByPrimaryKey(User record);
// 登入
User login(User user);
}
編寫UserServiceImpl
package com.xiang.service.impl;
import com.xiang.mapper.UserMapper;
import com.xiang.model.User;
import com.xiang.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* Created by IntelliJ IDEA.
* User: xiang
* Date: 2021/10/19 11:27
*/
@Service
public class UserServiceImpl implements UserService{
@Autowired
UserMapper userMapper;
@Override
public int deleteByPrimaryKey(Integer id) {
return userMapper.deleteByPrimaryKey(id);
}
@Override
public int insert(User record) {
return userMapper.insert(record);
}
@Override
public User selectByPrimaryKey(Integer id) {
return userMapper.selectByPrimaryKey(id);
}
@Override
public List<User> selectAll() {
return userMapper.selectAll();
}
@Override
public int updateByPrimaryKey(User record) {
return userMapper.updateByPrimaryKey(record);
}
@Override
public User login(User user) {
return userMapper.login(user);
}
}
編寫LoginController
package com.xiang.controller;
import com.xiang.model.User;
import com.xiang.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
/**
* Created by IntelliJ IDEA.
* User: xiang
* Date: 2021/10/19 21:31
*/
@Controller
public class LoginController {
@Autowired
UserService userService;
@GetMapping("/")
public String index() {
return "index2";
}
@GetMapping("/login")
public String login(User user, Model model, HttpSession session) {
User login = userService.login(user);
if (login == null) {
//登入失敗,id或使用者名稱錯誤
model.addAttribute("msg", "登入失敗,id或使用者名稱錯誤");
return "index2";
} else {
session.setAttribute("login", login);
return "forward:/findAll";
}
}
//登出
@RequestMapping(value = "/logout")
public String getLogout(HttpServletRequest request) {
HttpSession session = request.getSession();
if (session != null) {
session.removeAttribute("login");
}
return "index2";
}
}
編寫UserController
package com.xiang.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xiang.model.User;
import com.xiang.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
/**
* Created by IntelliJ IDEA.
* User: xiang
* Date: 2021/10/19 21:45
*/
@Controller
public class UserController {
@Autowired
UserService userService;
// @GetMapping("/findAll")
// public String findAll(Model model) {
// List<User> list = userService.selectAll();
// model.addAttribute("list", list);
// return "list";
// }
@GetMapping("/findAll")
public Object list(@RequestParam(value = "page", defaultValue = "1") Integer page, Model model) {
//獲取指定頁資料,每頁顯示10條資料
PageHelper.startPage(page, 6);
//緊跟的第一個select方法被分頁
List<User> list = userService.selectAll();
model.addAttribute("list", list);
//使用PageInfo包裝資料 navigatePages表示導航標籤的數量
PageInfo pageInfo = new PageInfo(list, 3);
model.addAttribute("pageInfo", pageInfo);
return "list";
}
@GetMapping("/addByUser")
public String addByUser() {
return "addByUser";
}
@GetMapping("/addUser")
public String addUser(User user, Model model) {
userService.insert(user);
List<User> list = userService.selectAll();
model.addAttribute("list", list);
return "forward:/findAll";
// modelAndView.addObject("list", list);
// modelAndView.setViewName("list");
// return modelAndView;
}
@GetMapping("/updateById/{id}")
public String findById(@PathVariable("id") int id, Model model) {
User user = userService.selectByPrimaryKey(id);
model.addAttribute("user", user);
return "updateUser";
}
@GetMapping("/updateUser")
public Object updateUser(User user, Model model) {
userService.updateByPrimaryKey(user);
List<User> list = userService.selectAll();
model.addAttribute("list", list);
return "forward:/findAll";
// modelAndView.addObject("list", list);
// modelAndView.setViewName("list");
// return modelAndView;
// return "forward:/list";
}
@GetMapping("/deleteById/{id}")
public Object deleteById(@PathVariable("id") int id, Model model) {
userService.deleteByPrimaryKey(id);
List<User> list = userService.selectAll();
model.addAttribute("list", list);
// modelAndView.addObject("list", list);
// modelAndView.setViewName("list");
// return modelAndView;
return "redirect:/findAll";
}
// @GetMapping("/list")
// @ResponseBody
// public String deleteById2() {
// return "帥哥";
// }
}
接下來是前端頁面
編寫index2.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登陸</title>
<link rel="stylesheet" href="/resource/style.css" media="all"/>
</head>
<body>
<div class="loginBox">
<img src="/resource/user.png" class="user">
<h2>登陸</h2>
<form th:action="@{/login}" method="get">
<div>
<p>ID</p>
<input type="text" id="id" name="id" placeholder="id">
</div>
<div>
<p>userName</p>
<input type="text" id="username" name="username" placeholder="username">
</div>
<h4 style="color: red" th:text="${msg}"></h4>
<input type="submit"></input>
</form>
</div>
</body>
</html>
編寫list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="">
<head>
<meta charset="UTF-8">
<title>list</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Image and text -->
<div class="container">
<nav class="navbar navbar-light "style="background-color:hotpink;">
<a class="h2 ">使用者管理頁面</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
<h4>當前使用者:
[[${session.login == null ? "" : session.login.username+"歡迎您"}]]
</h4>
<div style="margin: 5px; float: right;">
<a type="button" class="btn btn-primary" role="button" th:href="@{/addByUser}">新增使用者</a>
<a type="button" class="btn btn-info" role="button" th:href="@{/logout}">登出使用者</a>
</div>
<table class="table table-striped">
<tr>
<th>序號</th>
<!-- <th >編號</th>-->
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>生日</th>
<th>操作</th>
</tr>
<!--
private Integer id;
private String username;
private String sex;
private Integer age;
private Date birthday;
-->
<tr th:each="lists,stats:${list}">
<td th:text="${stats.count}"></td>
<!-- <td th:text="${lists.getId()}"></td>-->
<td th:text="${lists.getUsername()}"></td>
<td th:text="${lists.getSex()}"></td>
<td th:text="${lists.getAge()}"></td>
<!-- <td th:text="${user.getBirthday()}"></td>-->
<!-- <td>-->
<!-- <fmt:formatDate value="${user.getBirthday()}" type="date"/>-->
<!-- </td>-->
<td th:text="${#dates.format(lists.getBirthday(),'yyyy-MM-dd')}"></td>
<td>
<!--@{/queryUserById/{id}(id=${user.getId()})}:路徑後可以跟引數,之後需要用括號說明引數的值是什麼-->
<a role="button" class="btn btn-warning" th:href="@{/updateById/{id}(id=${lists.getId()})}">修改</a>
<a role="button" class="btn btn-danger" th:href="@{/deleteById/{id}(id=${lists.getId()})}">刪除</a>
</td>
</tr>
</table>
</div>
<!--分頁-->
<div align="center">
<span>
<a th:href="@{|findAll?page=1|}">首頁</a>
</span>
<span th:if="${pageInfo.hasPreviousPage==true}">
<a th:href="@{|findAll?page=${pageInfo.pageNum-1}|}">上一頁</a>
</span>
<span th:each="page:${pageInfo.navigatepageNums}">
<a th:href="@{|findAll?page=${page}|}" th:text="${page}"></a>
</span>
<span th:if="${pageInfo.hasNextPage==true}">
<a th:href="@{|findAll?page=${pageInfo.pageNum+1}|}">下一頁</a>
</span>
<span>
<a th:href="@{|findAll?page=${pageInfo.pages}|}">末頁</a>
</span>
當前頁:第<span th:text="${pageInfo.pageNum}"></span>/<span th:text="${pageInfo.pages}"></span>頁
</div>
</body>
</html>
編寫addByUser.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--
private Integer id;
private String username;
private String sex;
private Integer age;
private Date birthday;
-->
<div style="width: 500px;height: 1200px;margin:100px auto">
<form action="/addUser" class="form-horizontal" >
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="username">
</div>
<div class="form-group">
<label for="sex">性別</label>
<input type="text" class="form-control" id="sex" name="sex" placeholder="sex">
</div>
<div class="form-group">
<label for="age">年齡</label>
<input type="text" class="form-control" id="age" name="age" placeholder="age">
</div>
<div class="form-group">
<label for="birthday">生日</label>
<input type="date" class="form-control" id="birthday" name="birthday" placeholder="birthday">
</div>
<button type="submit" class="btn btn-success">確認新增</button>
<input type="button" onclick="history.go(-1)" class="btn btn-warning" value="取消新增"/>
</form>
</div>
</body>
</html>
編寫updateUser.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>update</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width: 500px;height: 1200px;margin:100px auto">
<form th:action="@{/updateUser}" class="form-horizontal">
<input type="hidden" name="id" th:value="${user.getId()}">
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" id="username" name="username"
th:value="${user.getUsername()}">
</div>
<div class="form-group">
<label for="sex">性別</label>
<input type="text" class="form-control" id="sex" name="sex" th:value="${user.getSex()}">
</div>
<div class="form-group">
<label for="age">年齡</label>
<input type="text" class="form-control" id="age" name="age" th:value="${user.getAge()}">
</div>
<div class="form-group">
<label for="birthday">生日</label>
<input type="date" class="form-control" id="birthday" name="birthday"
th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}">
</div>
<!-- th:value="${user.getBirthday()}">-->
<button type="submit" class="btn btn-success">確認修改</button>
<input type="button" onclick="history.go(-1)" class="btn btn-warning" value="取消修改"/>
</form>
</div>
</body>
</html>
前端執行
登入頁style.css
body{
margin: 0;
padding: 0;
background: url(photo.jpg);
background-size: cover;
font-family: sans-serif;
}
.loginBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
}
.user{
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-100px/2);
/*left: calc(50% -50px);*/
}
h2{
margin: 0;
padding: 0 0 20px;
color: #32cd32;
text-align: center;
}
.loginBox p{
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input{
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"],
.loginBox input[type="password"]{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder{
color: rgba(255, 255, 255, 0.5);
}
.loginBox input[type="submit"]{
border: none;
outline: none;
height: 40px;
color: #ffffff;
font-size: 16px;
background: #ff6347;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="submit"]:hover{
background: #32cd32;
color: #ffffff;
}
.loginBox a{
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}