vue+servlet基础查询分页代码

最新推荐文章于 2024-10-05 01:22:45 发布

Elik-hb

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量125

点赞数 2

分类专栏：其他文章标签： vue.js servlet 前端

本文链接：https://blog.csdn.net/qq_65099052/article/details/138260270

版权

其他专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基础查询分页代码
test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>分页示例</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<body>
    <div id="app">
    <select v-model="pageSize" @change="fetchData">
    <option v-for="option in pageSizeOptions" :value="option">{{ option }}</option>
</select>
    
    <!-- 数据表格或其他内容 -->
    <table>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
        </tr>
        <tr v-for="user in users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
        </tr>
    </table>

    <!-- 分页组件 -->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item" :class="{ disabled: currentPage === 1 }">
                <a class="page-link" href="#" @click.prevent="prevPage">上一页</a>
            </li>
            <li class="page-item" v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
                <a class="page-link" href="#" @click.prevent="goToPage(page)">{{ page }}</a>
            </li>
            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                <a class="page-link" href="#" @click.prevent="nextPage">下一页</a>
            </li>
        </ul>
    </nav>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            currentPage: 1,
            totalPages: 0,
            pageSize: 10, // 默认每页显示10条记录
            pageSizeOptions: [5, 10, 20, 30, 50], // 用户可以选择的每页显示条数的选项
            users: [] // 数据数组
        },
        methods: {
            fetchData() {
            	axios.get('/test/PaginationServlet?page=' + this.currentPage + '&pageSize=' + this.pageSize)
                    .then(response => {
                        this.totalPages = response.data.totalPages;
                        this.users = response.data.users;
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                    });
            },
            goToPage(page) {
                if (page >= 1 && page <= this.totalPages) {
                    this.currentPage = page;
                    this.fetchData();
                }
            },
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.fetchData();
                }
            },
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.fetchData();
                }
            }
        },
        created() {
            this.fetchData();
        }
    });
</script>



</body>
</html>

servlet

package servlet;

import com.alibaba.fastjson.JSONObject;
import pojo.User;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/PaginationServlet")
public class UserPageServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private static final String URL = "jdbc:mysql://localhost:3306/people";
    private static final String USER = "root";
    private static final String PASSWORD = "nmnm1239";
    private static final int PAGE_SIZE = 10; // 每页显示10条记录

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        int currentPage = 1;
        int pageSize = 10; // 默认每页显示10条记录

        if (request.getParameter("page") != null) {
            currentPage = Integer.parseInt(request.getParameter("page"));
        }
        if (request.getParameter("pageSize") != null) {
            pageSize = Integer.parseInt(request.getParameter("pageSize"));
        }

        List<User> users = new ArrayList<>();
        int totalRecords = 0;
        int totalPages = 0;

        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

        try (Connection connection = DriverManager.getConnection(URL, USER, PASSWORD)) {
            String countQuery = "SELECT COUNT(*) FROM user";
            try (PreparedStatement countStmt = connection.prepareStatement(countQuery)) {
                ResultSet rs = countStmt.executeQuery();
                if (rs.next()) {
                    totalRecords = rs.getInt(1);
                }
            }

            totalPages = (int) Math.ceil((double) totalRecords / pageSize);

            String query = "SELECT * FROM user LIMIT ? OFFSET ?";
            try (PreparedStatement stmt = connection.prepareStatement(query)) {
                stmt.setInt(1, pageSize);
                stmt.setInt(2, (currentPage - 1) * pageSize);
                ResultSet rs = stmt.executeQuery();
                while (rs.next()) {
                    User user = new User();
                    user.setId(rs.getInt("id"));
                    user.setUsername(rs.getString("username"));
                    user.setEmail(rs.getString("email"));
                    users.add(user);
                }
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

        JSONObject responseData = new JSONObject();
        responseData.put("totalPages", totalPages);
        responseData.put("users", users);

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.println(responseData);
        out.close();
    }
  
}

pojo类

package pojo;

import java.util.List;

public class User {
    private int id;
    private String username;
    private String password;
    private String email;

    // 构造器
    public User() {
    }

    public User(int id, String username, String password, String email) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
    }

    // Getter 和 Setter 方法
    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

展示结果
在这里插入图片描述