1. 程式人生 > 其它 >SpringBoot整合MyBatis(實現前端)

SpringBoot整合MyBatis(實現前端)

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&amp;useUnicode=true&amp;characterEncoding=UTF-8"-->

<!--        <commentGenerator>-->
<!--            &lt;!&ndash; 是否去除自動生成的註釋 true:是 : false:否 &ndash;&gt;-->
<!--            <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;

}
登入頁
list頁面
add頁面
update頁面
完結