前回、MySQL データベース内のデータの一部を WeChat アプレットのフロントエンド (データ対話) に表示する記事を書きました。
WeChat ミニ プログラム開発チュートリアル:nodejs を使用して mysql データベースからデータを取得し、WeChat ミニ プログラムに表示する - CSDN ブログこの記事は 329 回閲覧され、読まれています。 8回いいね、5回集めました。上記のコードでは、{
{ImgUrl}} パラメータは構築された URL パス フィールドです。その使用法については、以前に公開した記事で説明しています。知らせ：{
{item.text}} のテキストは、mysql データベースのポップ テーブルのテキスト フィールド { に対応します。
{item.img}}同様に。最後に、WeChat アプレットのサーバー ドメイン名が WeChat パブリック プラットフォームのサーバー ドメイン名のホワイトリストに追加されていることを確認します。追加されていない場合、ドメイン名がホワイトリストにないため、リクエストは失敗します。これは、noidejs を使用して mysql データベースから必要なデータを取得し、それを WeChat アプレットに表示するのに役立つ非常に基本的なチュートリアルです。返されたデータを使用してアプレット ページのデータを設定するコールバック関数。 https://blog.csdn.net/qq_25501981/article/details/134728961次に、nodejs を使用してデータを変換する方法を説明していきます。 mysql データベース 複数のデータはすべて WeChat アプレットに表示されます。
最初のステップは、WeChat アプレット WXML ファイルを作成することです
これはまだ私が書いたケースですが、以下は私が書いた WeChat アプレットのフロントエンド 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 }}"。これは WeChat アプレットのテンプレート構文です。リストの命令です。レンダリングし、配列を走査し、配列内の各項目のテンプレート コンテンツを生成できます。
したがって、この構文を使用して、mysql から取得したデータを走査できます。
この例では、wx:for="{
{ wxinfopenList }}" は配列 wxinfopenList が走査されることを意味します。そして wxinfopenList には一連のデータが含まれています。ここの二重中括弧 {
{ }} はデータ バインディングの構文で、変数 wxinfopenList の値をこの < a i=6> ループ内。 wx:for
リストのレンダリングに wx:for を使用すると、WeChat アプレットはデフォルトで、現在のアイテムのインデックスを表す index 変数を提供します。 属性を使用できます。ただし、これらの内容を見てください。あまり注意深く読む必要はありません。 属性と item 変数は現在のアイテムのデータを表します。これらの変数の名前をカスタマイズする必要がある場合は、 wx:for-indexwx:for-item
簡単に言うと、このコードの機能は、wxinfopenList 配列内の各項目を走査し、走査プロセスのデータに基づいて一連の WXML 要素を生成することです。これにより、ユーザー インターフェイスが動的に構築されます。
{ {item.avatarUrl}}
次にコードについて話します{
{item.nickname}}。 WeChat アプレットでは、{
{item.nickname}} はデータ バインディング式です。ここで、二重中括弧 {
{}} は、これが動的データ バインディングの場所であり、ミニ プログラム フレームワークがバインドされたデータをこの位置に自動的に埋め込むことを示しています。
具体的には、 item は変数であり、通常、 wx:for をリストのレンダリングに使用するとき、または開発または開発するときに、デフォルトの現在のアイテム変数名として使用されます。カスタム変数名。私の場合、 nickname は item オブジェクトの属性であり、ユーザーのニックネームを表します。
たとえば、ユーザーのリストがある場合、各ユーザーは、 nickname、age などのさまざまな属性を含むオブジェクトです。次に、 wx:for を使用してこのユーザー リストを参照する場合、 {
{item.nickname}} を使用して各ユーザーのニックネームを表示できます。
ミニ プログラムの WXML テンプレートでは、このコードは特定のタグに配置されます。ミニ プログラムが実行されると、対応する item オブジェクト nickname 属性の実際の値。このようにして、ユーザーはミニ プログラム インターフェイス上で各ユーザーのニックネームを確認できます。
バインドタップ="showForm"
bindtap="showForm" はイベント バインディング宣言です。ここで、 bindtap は WeChat アプレットでクリック イベントをバインドするために使用される属性、 "showForm" はクリック イベントを処理する関数の名前です。この関数はアプレット Page オブジェクトのメソッドで定義されます。
ユーザーが属性 bindtap="showForm" を持つ要素をクリックすると、アプレットは showForm という名前の関数を実行します。この関数は通常、ページの JavaScript ファイルで定義され、フォームの表示、データ状態の変更、別のページへの移動など、クリック イベント後のロジックを処理するために使用されます。
私の場合、 bindtap="showForm" 属性が付いたボタンをクリックすると、以下のコードの内容が表示されます。
要約する
現時点では、mysql データベースからデータを取得して WeChat アプレットのフロントエンドに表示する基本的な方法は次のとおりです。wx:for="{ については後で書きました。 { imgPaths[index] }}" および wx:for="{ { commentListzy[item.iddt] }}」、次回教えます。
2 番目のステップは、WeChat アプレット TS ファイルを作成し、nodejs からデータを取得することです。
上記のコードの最初に、wx:if="{ も書きました。 { isShowForm }}"。これは、条件に基づいて特定のテンプレート パーツをレンダリングするかどうかを決定するために使用される条件付きレンダリング命令です。
たとえば、フォームがあり、特定の条件が満たされた場合にのみフォームを表示したい場合は、 wx:if を使用してフォームの表示と非表示を制御できます。ショーに続きます:
<form wx:if="{
{ isShowForm }}">
<!-- 表单内容 -->
</form>まずデータを書き込む必要があります。
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 このメソッドはページ データを更新するために使用されます。これにより、データの変更を反映するためにページが再レンダリングされます。基本的には、テンプレートを適用して変更を加えるだけなので、説明する必要はありません。
3 番目のステップは、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 に関連するコードを削除できます。 allImagePath については、mysql から一連の写真を取得し、WeChat アプレットのフロントエンドに表示しますが、これは少し複雑なので、ここでは説明しません。
上記は大量のコードのように見えるので、簡略化したバージョンを見てみましょう。
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;最後に、WeChat アプレットはwx.requestを使用してこのインターフェイスを呼び出し、データベースからデータを取得し、アプレットのフロントエンドに送信します。