第2阶段35-分页前台项目开发

M78910

已于 2022-11-18 13:05:56 修改

阅读量212

点赞数

文章标签： java

于 2022-11-17 16:53:38 首次发布

本文链接：https://blog.csdn.net/M78910/article/details/127907139

版权

修改后端封装,响应数据和总条数

一、实体层

User.java

package demo.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private Long id;
    private String userName;
    private String passwd;
    private String createDate;
}

Pager.java

package demo.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Pager {
    private Object data; //用于响应的数据
    private int pageTotle; //总条数
}

二、创建UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="demo.dao.UserMapper">

</mapper>

三、通过ResultMap建立User实体和t_user表的映射关系

<!-- 建立映射，将数据库中t_user表和java实体User建立关联 -->
<resultMap id="userResult" type="User">
    <result column="id" property="id"/>
    <result column="user_name" property="userName"/>
    <result column="passwd" property="passwd"/>
    <result column="create_date" property="createDate"/>
</resultMap>

四、在UserMapper中添加查询所有用户的方法

UserMapper.java

public interface UserMapper {
    public List<User> selectAll(int pageIndex, int pageSize);
}

UserMapper.xml

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="demo.dao.UserMapper">
    <!--  建立映射,将数据库中t_user表和java实体User建立关联 column表字段,property实体属性 -->
    <resultMap id="userResult" type="User">
        <result column="id" property="id"></result>
        <result column="user_name" property="userName"/>
        <result column="passwd" property="passwd"/>
        <result column="create_date" property="createDate"/>
    </resultMap>

    <sql id="sql_temp">
        select id, user_name, passwd, create_date from t_user
    </sql>

    <select id="selectAll" resultMap="userResult">
        <include refid="sql_temp"></include> limit #{pageIndex},#{pageSize}
    </select>

    <select id="selectCount" resultType="int">
        select count(id) from t_user
    </select>
</mapper>

五、在IUserService中添加业务方法

IUserService接口

public interface IUserService {

    public Pager queryUserList(int pageIndex, int pageSize);
}

UserServiceImpl实现类

package demo.service.impl;

import demo.dao.UserMapper;
import demo.entity.User;
import demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class UserServiceImpl implements IUserService {

    @Autowired(required = false)
    private UserMapper userMapper;

    @Override
    public Pager queryUserList(int pageIndex, int pageSize) {
        List<User> list = userMapper.selectAll((pageIndex-1)*pageSize, pageSize);
        int count = userMapper.selectCount();
        return new Pager(list, count);
    }
}

五、在UserController中测试

package demo.controller;

import demo.dao.UserMapper;
import demo.entity.User;
import demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("/list")
    @CrossOrigin(origins = "*") //允许所有跨源请求
    public Pager findUserList(int pageIndex, int pageSize){
        return userService.queryUserList(pageIndex, pageSize);
    }

}

六、运行效果

在这里插入图片描述

前端代码

七、添加bootstrap和vue的依赖

    <!-- 导入bootstrap -->
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 导入vue -->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

八、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 导入bootstrap -->
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 导入vue -->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container">
        <table class="table table-striped">
            <caption>用户列表</caption>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>创建日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="u in users">
                    <td>{{u.id}}</td>
                    <td>{{u.userName}}</td>
                    <td>{{u.createDate}}</td>
                </tr>
            </tbody>

        </table>

        <!-- 分页器（bootstrap的一款导航）-->
        <ul class="pagination" v-for="p in pageNum">
            <li v-if="p == pageIndex" class="active"><a href="#" @click="doGo(p)">{{p}}</a></li>
            <li v-else="p == pageIndex"><a href="#" @click="doGo(p)">{{p}}</a></li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                users: null,
                //分页用
                pageIndex: 1, //哪一页
                pageSize: 10, //每页显示多少条
                pageTotle: 0, //总条数
                pageNum: 0 //有几页
            },
            methods: {
                //发送请求，获取用户列表
                requestUserList(url){
                    //通过axios发送请求
                    axios.get(url).then(response => {
                        console.log(response.data)
                        this.users = response.data.data;
                        this.pageTotle = response.data.pageTotle;
                        this.pageNum = Math.ceil(this.pageTotle / this.pageSize);
                    });
                },
                doGo(p){
                    this.pageIndex = p; //按分页器的按钮被点中
                    var url = 'http://127.0.0.1:8080/user/list?pageIndex='+p+'&pageSize='+this.pageSize;
                    this.requestUserList(url); //调用请求用户列表的函数
                }
            },
            created: function () { //页面加载完成后执行
                var url = 'http://127.0.0.1:8080/user/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize;
                this.requestUserList(url); //调用请求用户列表的函数
            }
        });
    </script>
</body>
</html>

九、页面效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IuaUQh1F-1668675071564)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1368f4b859c4a6796eb8bbd6036271f~tplv-k3u1fbpfcp-watermark.image?)]