1
0

More than 3 years have passed since last update.

【Node.js Express 4.x で Routing Middleware Template(pug) をつかう方法】

Last updated at Posted at 2021-03-17

Expressでは簡単にルーティングができるが、色々方法があって忘れる。
ということでここでいったんまとめていく

Expressのversionは4系です

同じパスに対して複数のハンドラがあるとき
app.js
const express = require('express')
const app = express()

app.route('app/user')
    .get(req, res) => {}
    .post(req, res) => {}
特定のパス以下のルーティングをまとめるとき
routes/user.js
const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {})
router.get('/edit', (req, res) => {})
router.get('/delete', (req, res) => {})
app.js
const express = require('express')
const app = express()

app.use('app/user', (require('./routes/user')))
// app/user以降のパスがroutes/user.jsで指定されているとおりに設定される

ミドルウェアの使い方

app.get()app.set()もミドルウェアに当たるため、処理をnext()で委譲できる。

・特定のパスにミドルウェアを適用する方法
app.js
const express = require('express')
const app = express()

function Middleware(req, res, next){
  console.log('checked Middleware function !!!!')
    next() 
}
// checked Middleware function !!!! を出力後、処理をnext()で委譲している
app.get('app/user', Middleware, (req, res) => {
    res.end()
}
・アプリケーションレベルのミドルウェアを利用する方法

委譲(next)はuse→getでもget→useでもuse→useでもget→getでもできる。
引数にnextを追加することだけ気をつける。

app.js
const express = require('express')
const app = express()

app.use('app/user', (req, res, next) => {
    console.log('middleware!!!!!!!!!!')
    next()
})
app.get('app/user', (req, res) => {
    res.render('rooms', { title: 'rooms' })
})

・テンプレートエンジン(ここではpug)を使う方法

"view engine"をsetして、このファイルと同じ階層にviewsディレクトリを作れば、viewsディレクトリをルートディレクトリとして操作できる。

app.js
const express = require('express')
const app = express()
app.set("view engine", "pug") 

app.get('/room', (req, res) => {
    res.render('room')     // パスが/views/room.pugの場合
    res.render('html/room')// パスが/views/html/room.pugの場合 
})
・静的ファイルも配信する方法

上記のままではcssやjavascriptファイルが読み込めていないので以下コードを追加

app.use(express.static(__dirname + '/views'))

・その他、app.set()でできる設定たち(他にもいろいろある)

https://expressjs.com/ja/api.html#app.set ここで確認

app.set("case sensitive routing", true or false) 
// routingの際、大文字小文字の区別を有効にするかどうか

app.set('env', 'production')
// 環境モード 本番ではproductionにする

app.set('trust proxy', true or false)
// プロキシを介したHTTPリクエストでも情報を保持できるようにする
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0