WeChat applet development tutorial: Use nodejs to obtain a data from the mysql database and display it to the WeChat applet

This is a very basic tutorial that will help you use noidejs to get the data you want from the mysql database and display it in the WeChat applet.

To enable the WeChat applet to correctly obtain data and display it on the interface, you also need to make the following modifications:

Make sure that your WeChat applet's wx.request method uses the correct HTTP method (GET or POST) to request data.
Update the callback function in wx.request so that the returned data can be used to set the data of the applet page. success
Make sure your data bindings are correct in WXML to be able to display data fetched from the backend.

WeChat applet TS code:

wx.request({
  url: config.apiUrl + '/api/pop',
  method: 'POST', // 指定请求方法为 POST
  success: (res) => {
    console.log(res.data);
    if (res.data && res.data.length > 0) {
      // 假设我们只显示第一条数据
      const adData = res.data[0];
      this.setData({
        item: adData, // 设置数据
        showAdPopup: true // 显示弹窗
      });
    }
  }
});

Node.js pop routing interface code:

var express = require('express');
var router = express.Router();
var db = require('../sql.js');
router.post('/pop', function(req, res, next) {
    const sql = 'SELECT * FROM pop';
    db.query(sql, (error, results, fields) => {
        if (error) {
            throw error;
        }
        if (results.length > 0) {
            res.json(results);
        } else {
            res.status(404).json({ message: 'No data found' });
        }
    });
});
module.exports = router;

The WXML code of the WeChat applet is used to display the obtained data:

<view wx:if="{
   
   {showAdPopup && item}}" class="ad-popup">
  <view class="ad-popup-content">
    <text class="ad-popup-title">{
   
   {item.text}}</text>
    <image class="ad-popup-image" src="{
   
   {ImgUrl}}{
   
   {item.img}}" mode="aspectFit"></image>
    <view class="ad-popup-buttons">
      <button class="cancel-button" bindtap="closeAdPopup">关闭</button>
      <view class="spacer"></view>
      <button class="contact-button" bindtap="openCustomerServiceChat">咨询客服</button>
    </view>
  </view>
</view>

In the above code, { {ImgUrl}} parameter is a constructed url path field. You can find its usage in the article I published before. Click here to read:WeChat Mini Program Development Tutorial: Improving the Maintainability and Flexibility of the Codehttps://mp.csdn.net/mp_blog /creation/editor/134728790

Note: { The text in {item.text}} corresponds to the text field in the pop table of the mysql database, { {item.img}}Similarly.

Finally, make sure that the server domain name of your WeChat applet has been added to the server domain name whitelist of the WeChat public platform, otherwise the request will fail because the domain name is not in the whitelist.

After completing the above modifications, your applet should be able to correctly obtain data from the Node.js server and display it on the interface.

WeChat applet development tutorial: Use nodejs to obtain a data from the mysql database and display it to the WeChat applet

Supongo que te gusta