新增下一页和上一页功能

Question

提问，刚入行不太清楚如何在nodejs查到的新的数据里面添加查看上一条信息和下一条信息，并在前端的vue里面通过按钮实现这个功能
下面是node.js的代码

const express = require('express');
const router = express.Router();
const { Article } = require('../../models');
const { Op } = require("sequelize");
const { NotFoundError } = require('../../utils/errors');
const { success, failure } = require('../../utils/responses');

/**
 * 查询文章列表
 * GET /admin/articles
 */
router.get('/', async function (req, res) {
  try {
    const query = req.query;
    const currentPage = Math.abs(Number(query.currentPage)) || 1;
    const pageSize = Math.abs(Number(query.pageSize)) || 10;
    const offset = (currentPage - 1) * pageSize;

    const condition = {
      order: [['mlid', 'DESC']],
      limit: pageSize,
      offset: offset
    };

    if (query.jingming) {
      condition.where = {
        jingming: {
          [Op.like]: `%${ query.jingming }%`
        }
      };
    }

    const { count, rows } = await Article.findAndCountAll(condition);
    success(res, '查询文章列表成功。', {
      articles: rows,
      pagination: {
        total: count,
        currentPage,
        pageSize
      }
    });
  } catch (error) {
    failure(res, error);
  }
});

/**
 * 查询文章详情
 * GET /admin/articles/:mlid
 */
router.get('/:mlid', async function (req, res) {
  try {
    const article = await getArticle(req);
    success(res, '查询文章mlid成功。', { article });
  } catch (error) {
    failure(res, error);
  }
});

/**
 * 公共方法：查询当前文章
 */
async function getArticle(req) {
  const { mlid } = req.params;

  const article = await Article.findByPk(mlid);
  if (!article) {
    throw new NotFoundError(`ID: ${ id }的文章未找到。`);
  }

  return article;
}

module.exports = router

下面是前端vue代码

<template>
  <div>
    <el-descriptions title="查看信息" :column="1" border>
      <template #extra>
        <el-button type="primary" @click="goBack">返回</el-button>
      </template>
      <el-descriptions-item label="名称">{{ article.mingcheng }}</el-descriptions-item>
      <el-descriptions-item label="作者">{{ article.zuozhe }}</el-descriptions-item>
      <el-descriptions-item label="网址">{{ article.url }}</el-descriptions-item>
      <el-descriptions-item label="词典">{{ article.cd }}</el-descriptions-item>
      <el-descriptions-item label="内容">
        <div v-html="article.nr"/>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { fetchArticle } from '@/api/articles'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'

const route = useRoute()
const router = useRouter()
const article = ref({})

/**
 * 初始化
 * @returns {Promise<void>}
 */
const init = async () => {
  const res = await fetchArticle(route.params.id)
  article.value = res.data.article
}

init()

/**
 * 返回
 */
const goBack = () => {
  router.push({ path: "/" });
}
</script>

<style>
.el-descriptions__label {
  width: 150px;
}
</style>

基础的sql语句如：
根据名字搜是：
select * from article where name=%hello%

点击其中，一个是：
select * from article where id = 50

查询下一个是：
select * from article where name=%hello% and id > 50 order by id asc limit 1

查询上一个是：
select * from article where name=%hello% and id < 50 order by id asc limit 1

order by要根据需求调整。不一定是asc

Answer 1

以下内容由AIGC 及 gpt.4o 科技梦想家编程波士 共同为您回答解决方案、有用望采纳☀️☀️：

要在Node.js和Vue中实现查看上一条和下一条信息的功能，你可以按照以下步骤修改你的代码：

1. 修改Node.js后端
   在你的/admin/articles/:mlid路由中，添加查询上一条和下一条文章的逻辑：

router.get('/:mlid', async function (req, res) {
  try {
    const mlid = req.params.mlid;
    const article = await getArticle(req);
    
    // 查询下一条
    const nextArticle = await Article.findOne({
      where: {
        id: {
          [Op.gt]: mlid // 获取ID大于当前文章的第一条
        }
      },
      order: [['id', 'ASC']]
    });

    // 查询上一条
    const prevArticle = await Article.findOne({
      where: {
        id: {
          [Op.lt]: mlid // 获取ID小于当前文章的第一条
        }
      },
      order: [['id', 'DESC']]
    });

    success(res, '查询文章mlid成功。', { article, nextArticle, prevArticle });
  } catch (error) {
    failure(res, error);
  }
});

1. 修改Vue前端
   在Vue组件中，添加按钮和逻辑来查看下一条和上一条文章：

<template>
  <div>
    <el-descriptions title="查看信息" :column="1" border>
      <template #extra>
        <el-button type="primary" @click="goBack">返回</el-button>
        <el-button v-if="prevArticle" @click="fetchArticle(prevArticle.id)">上一条</el-button>
        <el-button v-if="nextArticle" @click="fetchArticle(nextArticle.id)">下一条</el-button>
      </template>
      <el-descriptions-item label="名称">{{ article.mingcheng }}</el-descriptions-item>
      <el-descriptions-item label="作者">{{ article.zuozhe }}</el-descriptions-item>
      <el-descriptions-item label="网址">{{ article.url }}</el-descriptions-item>
      <el-descriptions-item label="词典">{{ article.cd }}</el-descriptions-item>
      <el-descriptions-item label="内容">
        <div v-html="article.nr"/>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { fetchArticle } from '@/api/articles'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'

const route = useRoute()
const router = useRouter()
const article = ref({})
const prevArticle = ref(null)
const nextArticle = ref(null)

const init = async () => {
  const res = await fetchArticle(route.params.id)
  article.value = res.data.article
  prevArticle.value = res.data.prevArticle
  nextArticle.value = res.data.nextArticle
}

const fetchArticle = async (id) => {
  route.params.id = id; // 更新路由参数
  await init(); // 重新加载文章
}

init()

const goBack = () => {
  router.push({ path: "/" });
}
</script>

1. 总结
   在Node.js后端中，我们添加了查询上一条和下一条文章的逻辑。
   在Vue前端中，我们添加了按钮并实现了通过fetchArticle函数重新加载相应文章的功能。
   这样你就能通过按钮在不同文章之间切换了！