[Java知识库] springboot-mybatis实现增删改查（二）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Java知识库 -> springboot-mybatis实现增删改查（二） -> 正文阅读

[Java知识库]springboot-mybatis实现增删改查（二）

二、实现用户列表的分页展示及查询

在开始之前，先在yml配置文件当中增加一个日志配置，打印我们执行的sql语句。

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

在dao层中定义UserDao接口（新建new Interface）
接口中用来实现用户的增删改查操作。
要把接口交给mybatis管理，则需要在这里增加一个@Mapper注解，用来告诉springboot这是一个mybatis的mapper类。
这样的话，接下来在mybatis文件夹下的xml文件的namespace就可以直接使用这个接口。
然后增加一个@Repository接口，用来将userdao交由spring容器管理，后续在service层调用dao层时可以直接使用注解进行注入。
然后就可以在UserDao中定义方法。

注：这里list和User会标红，因为需要导入Java包，鼠标放在红色的上面就能看到。也可以以alt+enter。

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

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

这里想要实现分页的功能，需要用到一些参数，在pojo实体类下建一个query包，在query包中创建一个UserQuery实体类，把需要查询的东西都封装到这个实体类里面。

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

在这里插入图片描述
然后交由Lombok来管理

@Data
@AllArgsConstructor
@NoArgsConstructor

即
在这里插入图片描述
到这里，方法已经定义好了，就把参数传递到进去UserDao的方法里。

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

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

接口定义好了。

在resources/mybatis下建立xml文件实现接口里想实现的对数据表的操作。
新建UserMapper.xml文件，编写sql语句。

<?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>

然后就需要开始写service层。
新建UserService接口（new Interface）
UserService接口里的方法和dao层里的一样，但是这里分页展示传的并不是list集合了，而是PageInfo，想要使用的话首先需要在pom.xml文件中引入依赖。

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

接下来在service层新建UserService的实现类（new class）UserServiceImpl。
让他来实现implements我们的UserService接口，重写一下他的方法。
在这里插入图片描述
选择这个重写方法之后就自动有下面的：

在service层需要引用dao层，用@Service注解。
然后在class里把UserDao层注入一下：

@Autowired
	private UserDao userDao;

左侧出现的一个箭头，点击一下就会转到dao层中调用的地方去，
在这里插入图片描述
接下来，就可以直接调用dao层的方法。
修改listUser返回的参数，把null修改：

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

第二个查询的方法，需要先启动PageHelper，再写入获取的参数：

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

接口和方法都定义好了

controller层，控制视图跳转。
新建（new class）UserController
加入@Controller注解

然后在controller层注入一下service层:

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

后面写视图，需要一个主页，在resource/templates下新建一个index.html页面，然后控制跳转，需要引入一个依赖在pom文件中：

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

然后就在UserController编写方法：

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

ctrl+鼠标点击index就会跳转到index.html页面了。
到这里就可以运行代码，看看能不能出来这个html的页面。我在运行时出现了一个错误：
在这里插入图片描述
网上查到的解决办法：出现的bug大概意思是：不鼓励依赖循环引用，默认情况下是禁止的。更新您的应用程序以删除 bean 之间的依赖循环。作为最后的手段，可以通过将 spring.main.allow-circular-references 设置为 true 来自动中断循环。
在配置文件yml中添加

spring:
  main:
    allow-circular-references: true

然后就好了，运行后有了index页面
在这里插入图片描述

前端页面（这里是该Java-Web项目的web页面，不是前后端分离的前端部分）
原教程这里使用了一个Semantic-ui，官方文档链接https://semantic-ui.com
它是一个CSS框架。
样式用在线的CDN方式来引入：

粘贴到我们的html页面<head>里。然后这里引入的JavaScript是基于jquery的，百度一下jquery cdn。
这里出现问题：使用的官方cdn，但是却出现不显示样式、和GET https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js net::ERR_CONNECTION_TIMED_OUT这样的错误.

把css的link换为<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">，样式正常显示，但是jquery和js依旧报错，然后把jquery改为<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>，还剩下js的报错，不知道是什么问题，实在没办法，先不管。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/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/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>

达到的效果：
在这里插入图片描述

在controller层调用业务层
index处传递一个参数model，用来把参数封装到model中，传递前端参数。还需要一个userQuery参数。
然后调用service层userService.listUserByName(userQuery);，后面用到了“ieda-自动引入局部变量（introduce local variable）”，快捷键是ctrl+alt+V，看到它返回的是一个userPageInfo，再把userPageInfo加到model。

@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页面
	}
}

前端取值
先引入thymeleaf模板，在<html>加入thymeleaf的命名空间，

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

就可以在html页面中使用了。这里我们想要实现数据库中的用户信息展示在页面当中，在<tr>标签以th开头，并且遍历数组，数组的变量名是user，它是从page里面以$方式拿到list集合，这个list集合里面就是我们的user对象集合，接下来在<td>标签以$方式取user的id和name、pwd.

<!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/semantic-ui@2.4.2/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/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>

运行结果
在这里插入图片描述
然后加入一个分页展示的部分，

<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>

在这里插入图片描述
到这里用户列表的分页展示已经实现。

根据用户名查询
html页面加一个form表单写搜索框

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

接下来写@{/}这个跳转路径的搜索的方法：
在controller中：

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