最初のページ

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

準備

ディレクトリ作りーの

$ mkdir /home/dalomo/nodebbs

npm initしーの

$ npm init

expressインストールしーの

$ npm install express --save

expressのHello, world

https://expressjs.com/ja/starter/hello-world.html

こちら参考に

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}`)
})

これで

https://dalomo.net/nodebbs/

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

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

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

$ mkdir /home/dalomo/nodebbs/public

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

  res.send('Hello World!')

を

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

に書き換え。そうすると

https://dalomo.net/nodebbs/

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

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

を消して

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

でよいみたい。

https://expressjs.com/ja/starter/static-files.html

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>

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

https://developer.mozilla.org/ja/docs/Learn/Forms/Your_first_form

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