Jonathan Wexler/吉川 邦夫 翔泳社 2019年09月25日頃
Lesson8
Express.jsを使う
- インストール
npm init
npm install express
const port = 3000,
express = require("express"),
app = express();
app.get("/", (req, res) => {
res.send('hello2!');
}).get("/items/:id", (req, res) => {
res.send(`<h1>${req.params.id}</h1>`);
}).listen(port, () => {
console.log(`Server running on port: ${port}`);
});
ミドルウェア関数
- 全てのリクエストで共通の処理を定義することができる。
app.use((req, res, next) => {
console.log(`request made to: ${req.url}`);
next();
});
// 第1引数を/itemsとすると、/items/1や/items/1/editなどのルートで共通の処理となる。
app.use('/items', (req, res, next) => {
console.log(`items request made to: ${req.url}`);
next();
});
nodemon
- ソース変更を検知して、nodeコマンドを再実行してくれる。
- npm install nodemon --save-devでインストール。
- npx nodemon index.jsで実行。
（または、packge.jsonのscripteに"start": "nodemon index.js",を追加してnpm startで実行）
Lesson9
パラメータを受け取る
- GETパラメータは
req.query.xxxで取得可能。
- POSTパラメータは以下の2つのミドルウェア関数を追加すると
req.body.xxxで取得可能となる。
app.use(express.urlencoded({extended: false}));
app.use(express.json());
MVCに分ける
const port = 3000;
const express = require("express");
const app = express();
const homeController = require("./controllers/homeController");
app.use(express.urlencoded({extended: false})
).use(express.json());
app.get("/items/:vegetable", homeController.sendReqParam);
app.listen(port, () => {
console.log(`Server running on port: ${port}`);
});
exports.sendReqParam = (req, res) => {
res.send(`This is the page for ${req.params.vegetable}`);
};
Lesson10
EJSを使う
- インストール
npm init
npm install express
app.set("view engine", "ejs");をindex.jsに追加する。- デフォルトではviewsディレクトリのテンプレートが参照される。
const express = require("express");
const layouts = require("express-ejs-layouts");
const app = express();
const homeController = require("./controllers/homeController");
app.set("port", process.env.PORT || 3000);
app.set("view engine", "ejs");
app.use(layouts);
app.get("/name/:name", homeController.respondWithName);
app.listen(app.get('port'), () => {
console.log(`Server running on port: ${app.get('port')}`);
});
exports.respondWithName = (req, res) => {
res.render("index", {name: req.params.name});
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
</head>
<body>
<%- body %>
</body>
</html>
<h1> Hello, <%= name %></h1>
app.set()メソッド
app.set('xxx','yyy');でExpressにあらかじめ定義された設定項目に値を設定することができる。- 独自のキーを追加することもできる。
app.set("port", process.env.PORT || 3000);
console.log(app.get('port'));
コメント