微信小程序开发教程：用nodejs从mysql获取一组数据，全部展现到微信小程序。数据交互保姆级教程_微信小程序怎么从数据库获取数据

上次我写了一篇文章，将mysql数据库中的一条数据显示到微信小程序的前端，也就是数据交互：

微信小程序开发教程：利用nodejs从mysql数据库获取一个数据，并显示到微信小程序-CSDN博客文章浏览阅读329次，点赞8次，收藏5次。上面的代码中，{{ImgUrl}}参数是构建的一个url路径字段，你可以在我之前发布的文章中，找到它的使用方法。注意：{{item.text}}中的text，对应mysql数据库pop表中的text字段，{{item.img}}同理。最后，确保你的微信小程序的服务器域名已经添加到微信公众平台的服务器域名白名单中，否则请求会因为域名不在白名单中而失败。这是一个很基础的教程，将帮助你利用noidejs，从mysql数据库中获取想要的数据，并显示到微信小程序中。回调函数，以便使用返回的数据设置小程序页面的数据。https://blog.csdn.net/qq_25501981/article/details/134728961现在就来继续教大家如何利用nodejs，将mysql数据库中的多个数据，全部显示到微信小程序中。

第一步，创建微信小程序WXML文件

依旧是我自己写的案例，下面是我写的微信小程序前端WXML代码：

<button bindtap="showForm" style="width: 35%; background-color: {{btnColor}}; color: white;" class="view-btn">动态</button>
 
 
<view class="cover-pen-dt" wx:if="{{ isShowForm }}" wx:for="{{ wxinfopenList }}" wx:key="{{ index }}">
  <view class="cover-1">
    <view class="avatarbox">
      <image class="avatar" src="{{item.avatarUrl}}"></image>
      <view class="avatartxt">
        <text class="nickname">{{item.nickname}}</text>
        <text class="timetxt">发布时间：{{item.create_time}}</text>
      </view>
    </view>
    <view class="nicknamebox">
      <text class="nickname1">{{ item.text }}</text>
    </view>
    <view class="imgbox">
      <block wx:for="{{ imgPaths[index] }}" wx:key="{{ item }}" wx:for-index="itemIndex">
        <image class="img" src="{{ item }}" bindtap="previewImage" data-index="{{ index }}" data-item-index="{{ itemIndex }}"></image>
      </block>
    </view>
    <view class="btnbox">
      <image class="btntxt" src="../images/jh.png"></image>      
      <div class="btnimglove-container">
      <image class="btnimglove" src="../images/love.png" bindtap="like" data-content-id="{{item.iddt}}"></image>
      <text class="like-count {{ likeCounts[item.iddt] > 0 ? 'red-background' : '' }}">{{ likeCounts[item.iddt] }}</text>
      </div>
 
      <div class="btnimg-container">
       <image class="btnimg" src="../images/chat.png" bindtap="showComment" data-content-id="{{item.iddt}}"></image>
       <text class="comment-count {{ commentCounts[item.iddt] > 0 ? 'red-background' : '' }}">{{ commentCounts[item.iddt] > 0 ? commentCounts[item.iddt] : '' }}</text>
      </div>
 
    </view>
 
    <view class="comment2" wx:for="{{ commentListzy[item.iddt] }}" wx:key="{{index}}" wx:if="{{ commentListzy[item.iddt] }}">
      {{item.nickname}}： {{ item.comment_text }}
      <text class="reply-button" data-comment-id="{{ item.id }}" data-nickname="{{ item.nickname }}" bindtap="reply">回复</text>
    </view>
 
   <view class="comment-container">
  <view class="comment" bindtap="showComment1" data-content-id="{{item.iddt}}">{{ showCommentText}}</view>
    </view>
   </view>
 
</view>

wx:for="{{ wxinfopenList }}"

代码有点长，我们先看开头，有没有看到wx:for="{{ wxinfopenList }}"，这是微信小程序中的模板语法，用于列表渲染的一个指令，可以遍历一个数组，并对数组中的每一项生成模板内容。

因此，我们可以用这个语法将从mysql中获取到的数据遍历出来。

在我的这个例子中，wx:for="{{ wxinfopenList }}"表示将要遍历wxinfopenList这个数组。而wxinfopenList包含了一系列的数据。这里的双花括号{{ }}是数据绑定的语法，它告诉小程序框架，需要将变量wxinfopenList的值绑定到这个wx:for循环中。

当我们使用wx:for进行列表渲染时，微信小程序会默认提供一个index变量表示当前项的索引，和一个item变量表示当前项的数据。如果需要自定义这些变量的名称，可以使用wx:for-index和wx:for-item属性。不过这些内容看看就好，不需要看的太细。

简单来说，这段代码的作用是：遍历wxinfopenList数组中的每一项，然后根据这个遍历过程中的数据生成一系列的WXML元素，从而动态地构建用户界面。

{{item.avatarUrl}}

然后我们在说一说代码{{item.nickname}}。在微信小程序中，{{item.nickname}} 是一种数据绑定的表达式。这里，双花括号 {{}} 表示这是一个动态数据绑定的地方，小程序框架会自动将绑定的数据填充到这个位置。

具体来说，item 是一个变量，它通常在使用 wx:for 进行列表渲染时作为默认的当前项变量名，或者是开发者自定义的变量名。在我这个案例中，nickname 是 item 对象中的一个属性，代表了某个用户的昵称。

例如，如果有一个用户列表，每个用户是一个对象，包含了各种属性，如 nickname、age 等，那么在使用 wx:for 遍历这个用户列表时，可以使用 {{item.nickname}} 来显示每个用户的昵称。

在小程序的WXML模板中，这段代码被放置在某个标签内，当小程序运行时，它会被替换为相应 item 对象的 nickname 属性的实际值。这样，用户就可以在小程序的界面上看到每个用户的昵称了。

bindtap="showForm"

bindtap="showForm" 是一个事件绑定的声明。这里的 bindtap 是微信小程序中用来绑定点击事件的属性，而 "showForm" 是处理点击事件的函数名，这个函数需要在小程序的 Page 对象的 methods 中定义。

当用户点击带有 bindtap="showForm" 属性的元素时，小程序会执行名为 showForm 的函数。这个函数通常会在页面的 JavaScript 文件中定义，用来处理点击事件后的逻辑，比如显示一个表单、改变一个数据状态、导航到另一个页面等。

在我的案例中，当我点击带有 bindtap="showForm" 属性的button按钮后，将展示下面代码中的内容。

总结

目前这些就是基本的从mysql数据库中获取数据后，展示到微信小程序前端的方法，至于我后面写的 wx:for="{{ imgPaths[index] }}" 和  wx:for="{{ commentListzy[item.iddt] }}" ，我下次教大家。

第二步，创建微信小程序TS文件，从nodejs获取数据

上面的代码开头，我还写了一个wx:if="{{ isShowForm }}"，这是一种条件渲染指令，用于根据条件决定是否渲染某个模板部分。

举个例子，如果你有一个表单，只有在某些条件满足时才希望它显示，你就可以使用 wx:if 来控制表单的显示与隐藏，如下所示：

<form wx:if="{{ isShowForm }}">
  <!-- 表单内容 -->
</form>

我们继续，我们首先要在Data中，写上：

  data: {
    wxinfopenList: [], // 存储从后台获取的数据。
  },

然后是这些内容：

  showForm() {
    if(this.data.btnColor == '#ff00ff'){
        this.setData({
            isShowForm1: false,
            isShowForm2: false,
            isShowForm3: false,
            btnColor: '#662d91',
            btnColor1: '#ff00ff',
            btnColor2: '#ff00ff'
        })
    }else{
        this.setData({
            btnColor: '#ff00ff'
        })
    }
    this.setData({
        isShowForm:!this.data.isShowForm
    })
    wx.request({
        url: config.apiUrl + "/api/getdt",
        success: (res) => {
          const { result, allImagePaths } = res.data;
          this.setData({
            wxinfopenList: result,
            imgPaths: allImagePaths,
          });
        },
      });
},

上面的代码中，我发起了一个网络请求，以获取mysql中的数据，请求的 URL 由 config.apiUrl + "/api/getdt" 拼接而成。请求成功后，使用箭头函数 (res) => {...} 来处理响应。在响应中，它解构赋值了 result 和 allImagePaths，并将它们分别设置为 wxinfopenList 和 imgPaths。

在这里，我们先忽略 allImagePaths  和 imgPaths。

setData 方法用于更新页面数据，这会引起页面的重新渲染，以反映数据的变化。基本上，直接套用模版改改就行，不需要我怎么解释了。

第三步，创建nodejs路由接口

在我的案例中，我创建的路由接口是getdt，代码如下：

const express = require("express");
const router = express.Router();
const multer = require("multer");
const path = require("path");
const db = require("../sql");
 
// 获取wxinfopen表的数据
router.get("/getdt", (req, res) => {
    //const sql = "SELECT * FROM wxinfopen";
    const sql = "SELECT * FROM wxinfopen INNER JOIN wxusers ON wxinfopen.openid = wxusers.openid ORDER BY wxinfopen.iddt DESC";
    db.query(sql, (err, result) => {
        if (err) {
            console.log(err);
            res.status(500).json({ message: "获取数据失败" });
        } else {
            const allImagePaths = result.map((row) => {
                const imgArr = JSON.parse(row.img || "[]");
                return imgArr.map((imgObj) => "http://localhost:3000/" + imgObj.path.path);
            });
            console.log("成功获取所有的路径，传递这些数据到小程序", allImagePaths,result);
            res.status(200).json({ result, allImagePaths});
        }
    });
});
module.exports = router;

上述代码中，我们可以使用const sql = "SELECT * FROM wxinfopen";无条件直接获取全部的数据，然后通过res.status(200).json({ result, allImagePaths});将数据全部传递出来。这里我们还是先忽略allImagePaths，这是我创建的图片路径数组，实战时你可以把与allImagePaths相关的代码删除。而关于allImagePaths是我从mysql获取一组照片并展现到微信小程序前端，这个有点小复杂，所以我们这里先不说。

上面的看起来代码有点多，我们直接看一个简化版的：

const express = require('express');
const router = express.Router();
var db = require('../sql.js');
 
router.get('/getinfo', (req, res) => {
    const sql = 'SELECT * FROM wxinfopen';
    db.query(sql, (error, results, fields) => {
        if (error) {
            throw error;
        }
        res.json(result);
    });
});
 
module.exports = router;

最后，我们的微信小程序中使用wx.request调用这个接口从数据库获取数据，并将其发送到小程序前端。