Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8695

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

$
0
0

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

Expressのversionは4系です

同じパスに対して複数のハンドラがありまとめたい
app.js
constexpress=require('express')constapp=express()app.route('app/user').get(req,res)=>{}.post(req,res)=>{}
特定のパス以下のルーティングをまとめたい
routes/user.js
constexpress=require('express')constrouter=express.Router()router.get('/',(req,res)=>{})router.get('/edit',(req,res)=>{})router.get('/delete',(req,res)=>{})
app.js
constexpress=require('express')constapp=express()app.use('app/user',(require('./routes/user')))// app/user以降のパスがroutes/user.jsで指定されているとおりに設定される

ミドルウェアの使い方

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

・特定のパスにミドルウェアを適用
app.js
constexpress=require('express')constapp=express()functionMiddleware(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
constexpress=require('express')constapp=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
constexpress=require('express')constapp=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",trueorfalse)// routingの際、大文字小文字の区別を有効にするかどうかapp.set('env','production')// 環境モード 本番ではproductionにするapp.set('trust proxy',trueorfalse)// プロキシを介したHTTPリクエストでも情報を保持できるようにする

Viewing all articles
Browse latest Browse all 8695

Trending Articles