• 使用nodel实现前后端数据渲染

    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 zeyu_Pan 2024-05-12 18:51 采纳率: 33.3% 浏览 9 首页/ 前端 / 使用nodel实现前后端数据渲染 html前端mysql 使用node+express+mysql实现前后端数据渲染，但是我遇到了分页渲染的问题，就是那个分页渲染里面的渲染渲染不出来，测试数据是可以出的。实在是懵逼了，请求网友帮忙。 下面是前端代码： 商品管理
    用户名称 联系地址 电话 订单 备注 操作
    下面是前端js: // 定义一个查询的参数对象，将来请求数据的时候， // 需要将请求参数对象提交到服务器 var q = { pagenum: 1, // 页码值，默认请求第一页的数据 pagesize: 10, // 每页显示几条数据，默认每页显示2条 Id: '', // 文章分类的 Id state: '' // 文章的发布状态 } initTable() // initCate() function initTable() { $.ajax({ method: 'GET', url:'/api/user', data:q, success: function(res) { if (res.status !== 0) { return layer.msg('获取文章列表失败！') } // 使用模板引擎渲染页面的数据 var htmlStr = template('user_table', res) $('tbody').html(htmlStr) res.render('user',{user:total}) // 调用渲染分页的方法 renderPage(res.total) table.render({ elem:"#demo", height:'full-200', url:'/api/user', toolbar:"#tablebar1", limit:10, limits:[10,20,30,40,50,60,70,80,90], page:true, cols:[[ {field:'user_name,title:‘用户名',width:'10%',sort:true,fixed:'left'}, {field:'address,title:‘地址',width:'10%',sort:true,fixed:'left'}, {field:'tel,title:‘电话',width:'10%',sort:true,fixed:'left'}, {field:'order,title:‘订单',width:'10%',sort:true,fixed:'left'}, {field:'comment,title:‘备注',width:'10%',sort:true,fixed:'left'}]] }) } }) } 下面是后端js： const { result } = require('@hapi/joi/lib/base') const db = require('../db/index') exports.user_list=(req,res) =>{ // 定义查询分类列表数据的 SQL 语句 const sql = `select * from users_table where is_deleted=0 order by id asc` // 调用 db.query() 执行 SQL 语句 db.query(sql,(err,results) => { console.log(results.length) var pager={} pager.pageCurrent=1; pager.maxNum=results.length; pager.pageSize=10; pager.pageCount=parseInt(Math.ceil(pager.maxNum/pager.pageSize)); var datalist=results.slice((pager.pageCurrent-1)*pager.pageSize,pager.pageSize); if (err) return res.cc(err) res.send({ status:0, message: '获取文章分类数据成功！', data:datalist, pager:pager, total:results.length }) // res.render('user',{user:results}) // console.log(results.length) }) } 展开全部 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500） ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    5条回答 默认 最新

    • 笑面虎 2024-05-12 18:51
      关注

      以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

      【您想要解决的问题】：您想要解决的问题是如何在使用Node.js、Express和MySQL实现的前后端数据渲染中实现分页渲染，具体来说，您遇到的问题是在分页渲染部分的数据无法正确显示。

      【问题出现原因】：根据您提供的代码和描述，可能的问题原因包括：

      1. 分页逻辑可能没有正确实现，导致分页数据没有按预期渲染。
      2. 前端分页的JavaScript代码可能存在逻辑错误，没有正确处理分页数据。
      3. 前端模板渲染可能存在问题，导致分页信息没有正确显示。
      4. 后端分页数据的传递可能存在问题，导致前端无法正确接收分页数据。

      【问题解决方案】：为了解决这个问题，您可以尝试以下步骤：

      1. 确保后端分页逻辑正确，并且分页数据能够正确传递给前端。
      2. 在前端JavaScript中，使用正确的逻辑来处理分页数据，并更新DOM以显示分页信息。
      3. 检查前端模板渲染是否正确使用分页数据。
      4. 使用控制台调试和网络工具来检查网络请求和响应数据，确保分页数据被正确请求和接收。

      【提供代码】：由于您的代码中存在多个可能的问题点，我将提供一个简化的示例，展示如何在前端处理分页数据：

      function initTable() {
  $.ajax({
    method: 'GET',
    url: '/api/user',
    data: q,
    success: function(res) {
      if (res.status !== 0) {
        return layer.msg('获取文章列表失败！');
      }
      // 使用模板引擎渲染页面的数据
      var htmlStr = template('user_table', res.data);
      $('tbody').html(htmlStr);

      // 假设res.pager包含了所有分页信息
      renderPage(res.pager);
    }
  });
}

function renderPage(pager) {
  // 这里需要您自己实现分页的渲染逻辑
  // 例如，根据pager中的信息来动态生成分页链接
  console.log(pager); // 仅用于调试，查看分页信息
  // 您需要根据实际的分页信息来更新分页导航的DOM元素
}

// 注意：您需要确保res.pager中包含了所有必要的分页信息，
// 例如当前页码、总页数、每页显示的记录数等。

      【代码运行方式】：您需要在支持Node.js的环境中运行您的后端代码，并在浏览器中打开您的前端页面。确保您的Express服务器正在运行，并且可以处理API请求。

      【代码预期运行结果】：当您访问页面时，应该能够看到渲染出来的商品数据，并且在页面底部应该有一个分页导航，显示当前页码、总页数等信息，且点击分页链接能够正确请求到对应的数据。

      【推荐相关链接】：

      展开全部

      评论 编辑记录
      zeyu_Pan 2024-05-15 20:51

      谢谢

      赞
      回复
    • 专家-皆知 2024-05-12 18:51
      关注

      确认后端返回的分页数据格式是否正确，与前端对接代码匹配。

      以上回复有部分引自免费微信小程序：皆我百晓生。 如问题尚未解决，还请稍待，如有疑问请回复进一步沟通。

      评论
      专家-皆知 回复 zeyu_Pan 2024-05-12 18:52

      根据您提供的前端和后端代码，我发现有几个问题导致分页功能没有正确工作。以下是针对这些问题的修改建议：

      1. 前端代码中，你需要引入正确的模板引擎库。在HTML头部添加以下行以导入template库：
      1. 在HTML中，你需要更新{{each total}}这部分，因为你在JavaScript里并没有定义total变量。这里应该改为{{each data}}，并确保传递给模板的参数是data而不是total。

      修改后的HTML片段：
      1. 对于分页导航，你可能想动态地创建页数。可以使用 JavaScript 来计算并生成这些链接。你可以在initTable()函数的success回调中添加以下代码：
      function initTable() {
  // ... 现有的代码 ...

  res.data.forEach((item, index) => {
    $('#page-numbers').append(`
    • ${index + 1}
      • `);
  });

  // ... 现有的代码 ...
}
      1. 在HTML中添加一个用于存放页码的容器：
      1. 关闭。

      经过以上修改后，你应该可以看到分页渲染出来了。然而，为了使分页功能更加完善，你还需要处理点击页码时的跳转。这可以通过监听点击事件并在点击时发送新的AJAX请求来实现。但是这涉及到更复杂的交互逻辑，通常会使用前端框架（如React、Vue等）来简化这类操作。如果你想要继续使用原生JavaScript，你可能需要学习一些基本的事件处理知识，并且编写更多代码来实现这个功能。

      另外，对于前端代码中的表格渲染部分，你可以考虑使用layui自带的表格组件layui.table进行渲染，这样可以简化代码。但首先需要确保你已经正确安装并引入了layui库。以下是修改后的代码示例：

      layui.use(['table'], function() {
  let table = layui.table;

  function initTable() {
    // ... 现有代码 ...

    // 渲染表格
    table.render({
      elem: '#demo',
      height: 'full-200',
      url: '/api/user',
      toolbar: '#tablebar1',
      limit: 10,
      limits: [10, 20, 30, 40, 50, 60, 70, 80, 90],
      page: true,
      cols: [
        { field: 'user_name', title: '用户名', width: '10%', sort: true, fixed: 'left' },
        { field: 'address', title: '地址', width: '10%', sort: true, fixed: 'left' },
        { field: 'tel', title: '电话', width: '10%', sort: true, fixed: 'left' },
        { field: 'order', title: '订单', width: '10%', sort: true, fixed: 'left' },
        { field: 'comment', title: '备注', width: '10%', sort: true, fixed: 'left' }
      ]
    });

    // ... 其他现有代码 ...
  }

  // ... 其他现有代码 ...
});

      这样，你就得到了一个基本的分页功能。不过，完整的分页功能包括处理点击页码时的跳转以及更新表格内容，这需要更多的前端交互逻辑。如果你不熟悉原生JavaScript，强烈建议你学习一种前端框架（如React、Vue），它们能更好地处理这类复杂情况。

      赞
      回复
      zeyu_Pan 2024-05-15 20:51

      谢谢

      赞
      回复
    • Kwan的解忧杂货铺@新空间代码工作室 2024-05-12 18:52
      关注

      晚上好🌙🌙🌙
      本答案参考ChatGPT-3.5

      问题描述：

      使用 node+express+mysql 实现前后端数据渲染，但是在分页渲染时，页面中的渲染内容无法正常展示。

      原因分析：

      需要修改的地方在前端 JS 文件中，需要注意以下几点错误或需要改进的地方：

      • 在调用 API 接口时，请求参数 q 属性中应该是 pagesize，而不是 pageSize。
      • 在 initTable 函数的 success 回调函数中，应该先判断从后端返回的数据是否存在。如果不存在，则应该直接返回，不再对数据进行任何操作。判断代码如下：

      if (!res || res.status !== 0 || res.data.length === 0) { return layer.msg('获取文章列表失败！'); }

      • 在 initTable 函数的 success 回调函数中，渲染分页时的参数名称应该是 obj，而不是 res。代码应该改为：

      renderPage(obj.total_count);

      • 在分页渲染时，应该传递 obj.total_count 参数，而不是 res.total。代码应该改为：

      res.render('user', { user: obj.total_count });

      解决方案：

      • 将请求参数 q 属性中的 pageSize 改为 pagesize。
      • 在 success 回调函数中添加数据不存在的判断代码，防止渲染错误。
      • 在调用 renderPage 函数时使用 obj.total_count 作为参数。
      • 在渲染分页时，传递 obj.total_count 参数。

      正确代码：

      // 定义一个查询的参数对象，将来请求数据的时候， // 需要将请求参数对象提交到服务器

      var q = { pagenum: 1, // 页码值，默认请求第一页的数据 pagesize: 10, // 每页显示几条数据，默认每页显示2条 Id: '', // 文章分类的 Id state: '' // 文章的发布状态 };

      initTable();

      function initTable() { $.ajax({ method: 'GET', url: '/api/user', data: q, success: function(obj) { if (!obj || obj.status !== 0 || obj.data.length === 0) { return layer.msg('获取文章列表失败！'); } // 使用模板引擎渲染页面的数据 var htmlStr = template('user_table', obj); $('tbody').html(htmlStr);

              res.render('user', { user: obj.total_count });

        // 调用渲染分页的方法
        renderPage(obj.total_count);
        table.render({
            el: '#article-table',
            data: obj.data
        });
    }
});

      }

      function renderPage(total) { // 使用layui的分页模块实现分页效果 layui.use(['laypage'], function() { var laypage = layui.laypage; laypage.render({ elem: 'article-page', count: total, // 数据总数 limit: q.pagesize, // 每页显示条数 curr: q.pagenum, // 当前页码 limits: [10, 20, 30, 40, 50], // 每页显示条数列表 layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], jump: function(obj, first) { // 首次不执行 if (!first) { // 将最新的页码值赋值给 q.pagenum q.pagenum = obj.curr; // 调用函数，渲染表格数据 initTable(); } } }); }); }

      展开全部

      评论
      zeyu_Pan 2024-05-15 20:50

      谢谢

      赞
      回复
    • 经海路大白狗 前端领域优质创作者 2024-05-13 22:43
      关注

      network 看到请求数据了？

      评论
      zeyu_Pan 2024-05-15 20:50

      解决了

      赞
      回复
    • zeyu_Pan 2024-05-15 20:50
      关注

      我回去重新使用layui布局前端 ，实现前后端分页渲染，问题已经解，谢谢大家支持

      评论
    编辑
    预览

    报告相同问题？

  • 相关阅读:
    vue 部分知识点总结
    时间序列分析1--生成和导出时间序列数据
    【观察】数字冰雹：华为护航，出海有方
    开发环境搭建---Ubuntu18.04开发环境搭建
    【饭谈】细嗦那些职场中喜欢用领导口气命令别人的同事
    力扣刷题学习SQL篇——1-12 树节点（使用行转列union/条件判断case when）
    领域驱动设计（Domain-Driven Design DDD)——通过重构找到深层次模型2
    【对象存储】SpringBoot集成华为云OBS对象存储
    43页大数据管理中心 规划设计方案
    一文带你看透短信验证码
  • 原文地址：https://ask.csdn.net/questions/8102313