Springboot-mybatis realisiert Hinzufügen, Löschen, Modifizieren und Abfragen (2)

2. Paging-Anzeige und Abfrage der Benutzerliste realisieren

Fügen Sie vor dem Start eine Protokollkonfiguration zur YML-Konfigurationsdatei hinzu, um die von uns ausgeführte SQL-Anweisung zu drucken.

logging:
  file:
    name: log/log.log
  level:
    root: info
    lzy.springbootuser: debug

1. Definieren Sie die UserDao-Schnittstelle (neue Schnittstelle) in der Dao-Schicht,
   um das Hinzufügen, Löschen, Ändern und Abfragen von Benutzern zu implementieren.
   Um die Schnittstelle zur Verwaltung an mybatis zu übergeben, müssen Sie hier eine Anmerkung hinzufügen, @Mapperum springboot mitzuteilen, dass dies eine mybatis-Mapper-Klasse ist.
   In diesem Fall kann der Namensraum der xml-Datei unter dem mybatis-Ordner diese Schnittstelle direkt verwenden.
   Fügen Sie dann eine @RepositorySchnittstelle hinzu, um userdao an das Spring-Container-Management zu übergeben, und verwenden Sie dann Annotationen, um sie direkt einzufügen, wenn Sie die dao-Schicht in der Dienstschicht aufrufen.
   Dann können Sie Methoden in UserDao definieren.
   
   Hinweis: Die Liste und der Benutzer werden hier rot markiert, da das Java-Paket importiert werden muss, und Sie können es sehen, indem Sie die Maus auf das rote platzieren. Sie können auch alt+enter verwenden.

@Mapper  //用来告诉springboot这是一个mybatis的mapper类
@Repository  //将userdao交由spring容器管理
public interface UserDao {
    
    
	//	查询所有用户
	public List<User> listUser(); //返回一个list集合。方法名：listUser

	//根据用户名查询用户并分页展示
	public List<User> listUserByName();
}

Wenn Sie hier die Paging-Funktion realisieren möchten, müssen Sie einige Parameter verwenden, ein Abfragepaket unter der Pojo-Entitätsklasse erstellen, eine UserQuery-Entitätsklasse im Abfragepaket erstellen und alle Dinge, die abgefragt werden müssen, in diese Entität kapseln Klasse.

public class UserQuery {
    
    
	private Integer pageNum = 1; //定义一个pageNum，当前页面，定义为1.
	private Integer pageSize = 2; //每页所显示的数据条数
	private String name; //根据用户名查询
}

Dann übergeben Sie es an Lombok, um es zu verwalten

@Data
@AllArgsConstructor
@NoArgsConstructor

Das heißt,

an diesem Punkt wurde die Methode definiert, und die Parameter werden an die UserDao-Methode übergeben.

public interface UserDao {
    
    
	//	查询所有用户
	public List<User> listUser(); //返回一个list集合。方法名：listUser

	//根据用户名查询用户并分页展示
	public List<User> listUserByName(UserQuery userQuery);
}

Die Schnittstelle ist definiert.

2. Erstellen Sie unter resources/mybatis eine XML-Datei, um die Operation für die Datentabelle zu implementieren, die Sie in der Schnittstelle implementieren möchten.
   Erstellen Sie eine neue UserMapper.xml-Datei und schreiben Sie SQL-Anweisungen.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="lzy.springbootuser.dao.UserDao">
    <!--已经在UserDao里加了@mapper注解，所以这里的namespace才能找到
    namespace是绑定接口的作用-->
    <!--下面就实现方法-->
    <select id="listUser" resultType="lzy.springbootuser.pojo.User">
        select *
        from mybatis.user;
    </select>
    
    <select id="listUserByName" parameterType="lzy.springbootuser.pojo.query.UserQuery" resultType="lzy.springbootuser.pojo.User">
        select *
        from mybatis.user
        <where>
            <if test="name != null and name != ''">
                and 'name' like concat('%',#{
    
    name},'%')
            </if>
        </where>
    </select>
<!--    #{
    
    }在括号里填属性后，这样能直接取到该属性-->
<!--    这里用到的where动态判定-->
<!--    concat为连接函数，把多个字符连接起来-->
</mapper>

3. Dann müssen Sie mit dem Schreiben der Serviceschicht beginnen.
   Neues UserService-Interface erstellen (new Interface)
   Die Methode im UserService-Interface ist die gleiche wie im Dao-Layer, aber hier ist die Paging-Anzeige keine Listensammlung, sondern PageInfo, wenn man es nutzen will, muss man das erst tun Abhängigkeiten in der Datei pom.xml einführen.

		<!--分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>

Erstellen Sie als Nächstes eine neue UserService-Implementierungsklasse (neue Klasse) UserServiceImpl in der Dienstschicht.
Lassen Sie ihn realisieren, dass er unsere UserService-Schnittstelle implementiert und seine Methode umschreibt.

Nach Auswahl dieser Umschreibungsmethode steht automatisch Folgendes zur Verfügung:

Auf die Dao-Schicht muss in der Dienstschicht mithilfe von @ServiceAnmerkungen verwiesen werden.
Fügen Sie dann die UserDao-Schicht in die Klasse ein:

@Autowired
	private UserDao userDao;

Auf der linken Seite erscheint ein Pfeil, klicken Sie darauf, um zum aufrufenden Ort in der Dao-Schicht zu gelangen,

und dann können Sie die Methode der Dao-Schicht direkt aufrufen.
Ändern Sie die von listUser zurückgegebenen Parameter und ändern Sie null:

	@Override
	public List<User> listUser() {
    
    
		return userDao.listUser();
	}

Die zweite Abfragemethode muss zuerst PageHelper starten und dann die erhaltenen Parameter schreiben:

	@Override
	public PageInfo<User> listUserByName(UserQuery userQuery) {
    
    
		PageHelper.startPage(userQuery.getPageNum(),userQuery.getPageSize());
		return new PageInfo<User>(userDao.listUserByName(userQuery));
	}

Schnittstellen und Methoden sind definiert

4. Die Controller-Schicht steuert den Ansichtssprung.
   Erstellen Sie einen neuen (neuen Klassen-) UserController
   und fügen Sie @Controllerannotations hinzu
   
   , und fügen Sie dann die Dienstschicht in die Controller-Schicht ein:

@Controller
public class UserController {
    
    
	@Autowired
	private UserService userService;
}

Um die Ansicht später zu schreiben, benötigen Sie eine Homepage, erstellen eine neue Seite index.html unter resource/templates und steuern dann den Sprung, Sie müssen eine Abhängigkeit in der pom-Datei einführen:

	  <!--控制页面跳转-->
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>

Schreiben Sie dann die Methode in UserController:

	@GetMapping("/")  //用来设置一个地址
	public String index(){
    
    
		return "index";  //定义跳转到index页面
	}

Strg + Mausklick auf den Index springt zur Seite index.html.
Sie können den Code hier ausführen, um zu sehen, ob Sie diese HTML-Seite erhalten können. Ich habe einen Fehler zur Laufzeit:

Die im Internet gefundene Lösung: Der Fehler, der angezeigt wird, bedeutet wahrscheinlich: Es wird davon abgeraten, sich auf Zirkelverweise zu verlassen, und es ist standardmäßig verboten. Aktualisieren Sie Ihre Anwendung, um Abhängigkeitszyklen zwischen Beans zu entfernen. Als letzten Ausweg können Schleifen automatisch unterbrochen werden, indem spring.main.allow-circular-references auf true gesetzt wird.
Fügen Sie die Konfigurationsdatei yml hinzu

spring:
  main:
    allow-circular-references: true

Dann ganz gut, nach dem Laufen gibt es eine Indexseite

5. Die Frontend-Seite (hier ist die Webseite des Java-Web-Projekts, nicht der von Frontend und Backend getrennte Frontend-Teil. Das Original-Tutorial verwendet hier eine semantische Benutzeroberfläche. Der offizielle Dokument-
   Link https://semantic-ui.com
   ist ein CSS-Framework.
   Der Stil wird durch die Online-CDN-Methode importiert:
   
   fügen Sie ihn in unsere HTML-Seite ein <head>. Dann basiert das hier vorgestellte JavaScript auf jquery, siehe jquery cdn auf Baidu.
   Hier gibt es ein Problem: Das offizielle cdn wird verwendet, aber der Stil wird nicht angezeigt, und GET https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js net::ERR_CONNECTION_TIMED_OUTsolche Fehler werden angezeigt.Ändern
   
   
   Sie den Link von css <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">, der Stil wird normal angezeigt, aber jquery und js melden immer noch Fehler, und ändern Sie dann jquery <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>, verlassen js Melde einen Fehler, ich weiß nicht, was das Problem ist, es gibt wirklich keine Möglichkeit, lass es uns einfach ignorieren.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui container">
    <table class="ui celled table" style="margin-top: 40px !important;">
        <thead>
        <tr><th>id</th>
            <th>姓名</th>
            <th>密码</th>
            <th>操作</th>
        </tr></thead>
        <tbody>
        <tr>
            <td data-label="id">James</td>
            <td data-label="name">24</td>
            <td data-label="pwd">Engineer</td>
            <td data-label="edit">
                <a herf="" class="ui button mini green">编辑</a>
                <a herf="" class="ui button mini red">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</body>
</html>

Der erzielte Effekt:

6. Übergeben Sie ein Parametermodell auf der Controller-Schicht, indem Sie den Business-Schicht-
   Index aufrufen, der verwendet wird, um die Parameter in das Modell einzukapseln und die Front-End-Parameter zu übergeben. Ein userQuery-Parameter ist ebenfalls erforderlich.
   Rufen Sie dann die Dienstebene auf userService.listUserByName(userQuery);und verwenden Sie dann „ieda-local variables einführen (introduce local variable)“, die Tastenkombination lautet, ctrl+alt+Vsehen Sie, dass sie eins zurückgibt userPageInfo, und fügen Sie dann userPageInfo zum Modell hinzu.

@Controller
public class UserController {
    
    
	@Autowired
	private UserService userService;

	@GetMapping("/")  //用来设置一个地址
	public String index(Model model,UserQuery userQuery){
    
    
		PageInfo<User> userPageInfo = userService.listUserByName(userQuery);
		model.addAttribute("page",userPageInfo);
		return "index";  //定义跳转到index页面
	}
}

7. Der Front-End-Wert
   führt zuerst die Thymeleaf-Vorlage ein und fügt dann <html>den Thymeleaf-Namespace hinzu,

<html lang="en" xmlns:th="http://www.thymeleaf.org">

Es kann in HTML-Seiten verwendet werden. Hier wollen wir die Benutzerinformationen in der Datenbank auf der Seite anzeigen, <tr>das Tag mit th beginnen und das Array durchlaufen. Der Variablenname des Arrays ist user, wodurch die Listensammlung von der Seite auf eine Weise abgerufen wird $. Diese Listensammlung ist unsere Die Sammlung von Benutzerobjekten, und nehmen Sie dann die ID, den Namen und das Kennwort des Benutzers in <td>das Label .$

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui container">
    <table class="ui celled table" style="margin-top: 40px !important;">
        <thead>
        <tr><th>id</th>
            <th>姓名</th>
            <th>密码</th>
            <th>操作</th>
        </tr></thead>
        <tbody>
        <tr th:each="user:${page.list}">
            <td th:text="${user.id}">James</td>
            <td th:text="${user.name}">24</td>
            <td th:text="${user.pwd}">Engineer</td>
            <td>
                <a herf="" class="ui button mini green">编辑</a>
                <a herf="" class="ui button mini red">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</body>
</html>

Führen Sie das Ergebnis aus

und fügen Sie dann einen Seitenanzeigeteil hinzu,

<div class="ui attached segment" >
        <table class="m-mobile-wide" width="425px">
            <tbody>
            <tr align="center">
                <td>
                    <a th:href="@{/(pageNum=${page.pageNum}-1)}"  class="ui button basic mini" th:unless="${page.isFirstPage}">上一页</a>
                </td>
                <td>
                    第
                    <h8 th:text="${page.pageNum}">2</h8>
                    页/共
                    <h8 th:text="${page.pages}">4</h8>
                    页
                    共
                    <h8 th:text="${page.total}">29</h8>
                    条
                </td>
                <td>
                    <form name="pageForm" th:action="@{/}" method="get">
                        <div class="ui mini input ">
                            <input type="text" class="m-bg" name="pageNum" placeholder="页码" style="width: 50px!important; height: 27.76px!important;" required>
                            <button type="submit" style="font-size: 11px!important;width: 30px!important; height: 0px!important; border: none;margin: 5px;padding: 0;" class="button mini">
                                跳转
                            </button>
                        </div>
                    </form>
                </td>
                <td> &nbsp;</td>
                <td  style="float: right">
                    <a th:href="@{/(pageNum=${page.pageNum}+1)}" class="ui button basic mini " style="float: right;" th:unless="${page.isLastPage}">下一页</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

Hier wurde die Blätteranzeige der Benutzerliste realisiert.

8. Fragen Sie
   die HTML-Seite nach dem Benutzernamen ab und fügen Sie ein Formular hinzu, um das Suchfeld zu schreiben

<div>
        <form th:action="@{/}" method="post">
        <!--th:action="@{/}"指action走当前的项目路径-->
            <input type="text" name="name" placeholder="输入用户名查找">
            <!--这个name里面一定要与UserQuery的参数名一致，才会把这个值传给name-->
            <input type="submit" value="搜索">
        </form>
    </div>

Als nächstes schreiben Sie @{/}die Suchmethode dieses Sprungpfades:
in den Controller:

@PostMapping("/")  //查询表单提交是用post方式
	public String listUserByName(Model model,UserQuery userQuery){
    
    
		PageInfo<User> userPageInfo = userService.listUserByName(userQuery);
		model.addAttribute("page",userPageInfo);
		return "index";
	}

Die Suchfunktion wird beendet.