从前端到后端：为 Web 应用程序构建可扩展的分页

# Web 开发 # 编程 # nextjs

对于任何处理大型数据集的应用程序来说，分页都是一项必不可少的功能。它可以提高性能、增强用户体验并确保跨页面导航顺畅。本指南逐步介绍了 **React** 前端（使用 Tailwind CSS 和 Vite）和 **Node.js/Express.js** 后端（使用 **Next.js** API 路由和 **MongoDB**）的分页实现。

为什么分页很重要？

性能优化：减少客户端和服务器上的数据负载。

改善的用户体验：允许用户以可管理的块形式查看数据。

可扩展性：即使数据集随着时间的推移而增长，也能让应用程序高效运行。

更好的资源管理：减少前端和后端的内存使用。

技术堆栈概述

前端：React.js、Tailwind CSS、Vite（用于快速开发体验）。

后端：Node.js、Express.js、Next.js API 路由。

数据库：MongoDB（NoSQL 数据库）。

工具：Axios 用于 HTTP 请求。

逐步实施

后端：使用 Node.js 和 MongoDB 构建分页 API

1.设置 Express.js 服务器

确保已安装 Node.js，然后设置新的 Express.js 服务器。

mkdir pagination-backend
cd pagination-backend
npm init -y
npm install express mongoose dotenv

2.创建服务器和 MongoDB 连接

使用 MongoDB 设置一个简单的服务器。

**服务器.js**

const express = require('express');
const mongoose = require('mongoose');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.error(err));

app.use(express.json());

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

在 `.env` 文件中添加你的 MongoDB URI：

MONGO_URI=mongodb://localhost:27017/pagination_demo

3. 创建示例模型

定义用于存储记录的示例数据模式。

**模型/User.js**

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('User', UserSchema);

4. 创建分页路由

添加路由以返回分页结果。

**routes/users.js**

const express = require('express');
const router = express.Router();
const User = require('../models/User');

// GET Paginated Data
router.get('/users', async (req, res) => {
  const page = parseInt(req.query.page) || 1; // Default to page 1
  const limit = parseInt(req.query.limit) || 10; // Default 10 items per page

  try {
    const startIndex = (page - 1) * limit;
    const total = await User.countDocuments();

    const users = await User.find().skip(startIndex).limit(limit);

    res.status(200).json({
      totalPages: Math.ceil(total / limit),
      currentPage: page,
      data: users,
    });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

5.添加路由到服务器

在 `server.js` 中，包含路由：

const usersRoute = require('./routes/users');
app.use('/api', usersRoute);

6.测试 API

运行服务器：

node server.js

使用 **Postman** 或浏览器等工具进行测试：

获取 http://localhost:5000/api/users?page=1&limit=10

⚛️ 前端：使用 React、Tailwind CSS 和 Vite 实现分页

1. 使用 Vite 设置 React

npm create vite@latest frontend
cd frontend
npm install
npm install axios react-router-dom

2. 获取分页数据

创建一个 React 组件来从后端 API 获取分页数据。

**组件/UserList.jsx**

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  const fetchUsers = async (page) => {
    const { data } = await axios.get(
      `http://localhost:5000/api/users?page=${page}&limit=10`
    );
    setUsers(data.data);
    setTotalPages(data.totalPages);
    setCurrentPage(page);
  };

  useEffect(() => {
    fetchUsers(1);
  }, []);

  const handlePageChange = (page) => fetchUsers(page);

  return (
    
      Paginated User List
      
        {users.map((user) => (
          
            {user.name} - {user.email}
          
        ))}
      

      {/* Pagination Buttons */}
      
        {[...Array(totalPages).keys()].map((_, index) => (
          
        ))}
      
    
  );
};

export default UserList;

3.添加 Tailwind CSS

安装 Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置`tailwind.config.js`：

module.exports = {
  content: ["./index.html", "./src/**/*.{js,jsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
};

将 Tailwind 指令添加到 `index.css`：

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 使用 UserList 组件

在 `App.jsx` 中集成组件：

import React from 'react';
import UserList from './components/UserList';

function App() {
  return (
    
      
    
  );
}

export default App;

示例输出

该应用程序从服务器获取分页数据并通过按钮显示以浏览页面。

关键要点

后端计算跳过和限制以获取特定记录。

前端使用状态来管理分页 UI，并在页面改变时获取新数据。

Tailwind CSS 使分页按钮的样式变得快速、简洁。

最后说明

此实现为您提供了一种干净且可扩展的方法来处理 MERN 堆栈应用程序中大型数据集的分页。

祝你编码愉快！

CLIS.CC