メモアプリ開発メモ③ ひとまずMySQLから採ったデータをブラウザで表示

第一回https://qiita.com/pothos/items/7801daffc504ad85f475
前回→https://qiita.com/pothos/items/da0fa78d222c7fdb1383

進捗

本日はMySQLからとったデータをブラウザに表示できるようにコードを加筆しました。jsファイルよりejsファイルに、テーブル(questions)内から全行を取得した結果を送り、受け取ったデータの中からidと見出し文(smallQ)を呼び出して表示しています。

home.ejs

 <ul class="table-body">
                    <% questions.forEach((quests) => { %>
                      <li>
                        <div class="item-data">
                        <span class="id-column"><%= quests.id %></span>.
                          <span class="smallQ-column"><%= quests.smallQ %></span>                       
                        </div>
                      </li>
                    <% }) %>
                  </ul>

app.js

app.get('/sql', (req, res) => {
  connection.query(
    'SELECT * FROM questions',
    (error, results) => {
      console.log(results);
      res.render('forestion.ejs',{questions: results});
    }
  );
});

結果は以下の通り。まずはホーム画面でデータベースにしまってあった値をリスト形式で表示できるようにしました。

さて、しかしCSS内で背景に指定していた画像が表示されなくなってしまいました。

この原因は…?もしや今一つルート処理についての勉強が足りていないかな・・・？
次回はこのミスがなぜ生じたか調べつつ考えつつブラウザに想定通りのレンダリングが行われるよう調整していきたいと思います。

では今回はこの辺りで。