FlaskはAjaxを使用してMysqlからスコアボードを動的にレンダリングします

Question

MySQLのクエリからhtmlテーブルにデータをインポートする動的なスコアボードを作成します。これは私のクエリです：fa()方法によって

query = db().fa('SELECT name, score ' 
       'FROM `GIP-Schema`.scoreboard ' 
       'INNER JOIN `GIP-Schema`.user ON user_id = user.id ' 
       'ORDER BY score DESC') 

はfetchall()機能です。 MySQLの表記法（(item),(otheritem),）をフィルタリングする必要がある場合、正規表現を使用することができます。

テーブルには、いくつかのブートストラップクラスを使用すると、私はそれがこのように見て想像：私はテーブルへのクエリで取得MySQLのデータを挿入するために、何をする必要がありますどのような

<table class="table table-bordered table-hover"> 
      <thead> 
       <tr> 
       <th>Name</th> 
       <th>Score</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>{{name1}}</td> 
       <td>{{score1}}</td> 
       </tr> 
       <tr> 
       <td>{{name2}}</td> 
       <td>{{score2}}</td> 
       </tr> 
       <tr> 
       <td>{{name3}}</td> 
       <td>{{score3}}</td> 
       </tr> 
      </tbody> 
     </table> 

。また、クエリのエントリ数に基づいてテーブルの行数を増やす必要があります。

Answer 1

これを行うには、明らかに多くの方法があります。最も簡単なのは、javascriptを使用してDOMノードを作成し、ページにappendを作成することです。それはおそらく、あなたが何をしているのかを知る最短の道です。この種の技法は、複雑な方法でDOMを変更しようとすると、すぐに複雑になることがあります。たとえば、特定の年齢よりも高いスコアを削除することもできます。 ajax呼び出しの成功ハンドラでこれをすべて調整することは、維持するのが少し難しくなる可能性があります。

このような状況を処理するためのより現代的な方法は、DOM操作を処理するためのjavascriptライブラリを使用することです。いくつかの人気のある例はAngular、React、Emberです。それらは、保守が簡単な方法でコードを構造化するのに役立ちます。複雑さが増すにつれて、頭を包み込むのがより簡単になります。

明らかに、あなたはここでトレードオフをしています。これらのライブラリは、あなたの問題のいくつかの側面をより簡単にするかもしれませんが、今ではJavaScriptライブラリを使うことを学びました。あなたは、あなたがやろうとしていることに対して、単純にDOMノードを手動で追加することは、javascriptライブラリにダイビングするより簡単です。

EDIT：

DOMノードは、HTMLタグによって作成されたものを参照してください。たとえば、<p>Hello</p>は段落domノードを作成します。一般的には、ページを読み込むときにブラウザがこれを処理しますが、javascriptを使用してブラウザが作成した内容を変更できます。私が何を意味するか見るには、ブラウザのコンソールを開きます（Firefoxで：右クリック - >要素を調べ、コンソールをクリックします）。次に、次のように入力します。

var p = document.createElement("p"); 
p.innerHTML("HELLO"); 
document.body.appendChild(p); 

ダウンのページの一番下までスクロールし、あなたがページの下部にHELLOを追加したことを確認する必要があります。あなたはあなたのajax呼び出しからデータを受け取り、物事（DOMノード）をページに追加するか、前に述べたようにそれらを削除するときに、同様のことを行うことができます。