最初のページ

とりあえずexpressでサーバーを立てて最初のHTMLを返せるようになろう。

準備

ディレクトリ作りーの

$ mkdir /home/dalomo/nodebbs

npm initしーの

$ npm init

expressインストールしーの

$ npm install express --save

expressのHello, world

Express の「Hello World」の例

expressjs.com

こちら参考に

const express = require('express')
const app = express()
const port = 8850

app.get('/nodebbs', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

これで

nodebbs - dalomo

dalomo.net

にアクセスするとHello, worldという文字列が返る。

静的ファイルを返すようにする

んで静的ファイル置き場を作りーの

$ mkdir /home/dalomo/nodebbs/public

この中にindex.htmlを置いておく。

  res.send('Hello World!')

を

res.sendFile(__dirname + '/public/index.html')

に書き換え。そうすると

nodebbs - dalomo

dalomo.net

に行くとindex.htmlが表示される。まぁこれでもいいんだけど、ぶっちゃけ/nodebbsでやってることって静的ファイルを返してるだけだ。そういう場合

app.get('/nodebbs', (req, res) => {
  res.sendFile('index.html')
})

を消して

app.use('/nodebbs', express.static('public'));

でよいみたい。

Express での静的ファイルの提供

expressjs.com

index.htmlの中身

とりまフォームさえあればええやろという事で

    <form action="" method="POST">
        <li>
            <label for="name">名前:</label>
            <input type="text" id="name" name="user_name">
        </li>
        <li>
            <label for="msg">内容:</label>
            <textarea id="msg" name="user_message"></textarea>
        </li>
        <li class="button">
            <button type="submit">送信</button>
        </li>
        </ul>
    </form>

とした。↓を日本語にしただけ

初めてのフォーム - ウェブ開発を学ぶ | MDN

このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、 CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初...

developer.mozilla.org

ボタンを押したときに、actionの内容が実行される。フォームの内容はPOSTメソッドで勝手に飛ぶのでactionの内容を作ってやればいいんだなと思う。そしたら次はその処理を作ってこう。