Contenu connexe
Similaire à Develop Web Application with Node.js + Express (20)
Plus de Akinari Tsugo (7)
Develop Web Application with Node.js + Express
- 5. はじめに
• コーディングする箇所は以下ようなコメント範囲です。
// ------- PROGRAMING -START- --------------------
// ------- PROGRAMING - END - --------------------
<!-- ------- PROGRAMING -START- -------------------- -->
<!-- ------- PROGRAMING - END - -------------------- -->
- 22. 【解答例1】
/app.js
var path = require("path");
var express = require("express");
var app = express();
app.use("/public", express.static(path.join(__dirname, "/public")));
app.listen(3000);
- 29. ルーティングとは
指定されたURLに対してどの処理をするかを決めたルール
var express = require("express");
var app = express();
app.get("/", function () { /* 処理1 */ });
app.get("/search", function () { /* 処理2 */ });
app.get("/shop", function () { /* 処理3 */ });
app.get("/account", function () { /* 処理4 */ });
app.listen(3000);
//localhost:3000/shop
- 30. ルーティングとは
指定されたURLに対してどの処理をするかを決めたルール
var express = require("express");
var app = express();
app.get("/", function () { /* 処理1 */ });
app.get("/search", function () { /* 処理2 */ });
app.get("/shop", function () { /* 処理3 */ });
app.get("/account", function () { /* 処理4 */ });
app.listen(3000);
//localhost:3000/shop
- 31. ルーティングとは
指定されたURLに対してどの処理をするかを決めたルール
var express = require("express");
var app = express();
app.get("/", function () { /* 処理1 */ });
app.get("/search", function () { /* 処理2 */ });
app.get("/shop", function () { /* 処理3 */ });
app.get("/account", function () { /* 処理4 */ });
app.listen(3000);
//localhost:3000/shop
- 32. ルーターとは
ルーティングの塊を定義できるミドルウェア
var express = require("express");
var app = express();
app.get("/", function () { /* 処理1 */ });
app.get("/search", function () { /* 処理2 */ });
app.get("/shop", function () { /* 処理3 */ });
app.get("/account", function () { /* 処理4 */ });
app.listen(3000);
- 33. ルーターとは
ルーティングの塊を定義できるミドルウェア
var express = require("express");
var app = express();
app.get("/", function () { /* 処理1 */ });
app.get("/search", function () { /* 処理2 */ });
app.get("/shop", function () { /* 処理3 */ });
app.get("/account", function () { /* 処理4 */ });
app.listen(3000);
あるURL以下をまとめる
- 34. ルーターとは
ルーティングの塊を定義できるミドルウェア
var express = require("express");
var app = express();
app.get("/", function () { /* 処理1 */ });
app.get("/search", function () { /* 処理2 */ });
app.get("/shop", function () { /* 処理3 */ });
app.get("/account", function () { /* 処理4 */ });
app.listen(3000);
var express = require("express");
var app = express();
app.use("/", (function () {
var router = require("express").Router();
router.get("/", function () {});
router.get("/search", function () {});
router.get("/shop", function () {});
router.get("/account", function () {});
return router;
}));
app.listen(3000);
- 35. ルーター
express.Router() の使い方
– 定義
– 利用
var router = require("express").Router();
router.get("URL", (request, response) => {
// 処理
});
module.exports = router;
app.use(<URL>, <ルーター>);
- 43. 【解答例2】
/app.js
var path = require("path");
var express = require("express");
var app = express();
app.set("view engine", "ejs");
app.use("/public", express.static(path.join(__dirname, "/public")));
app.use("/", require("./routes/index.js"));
app.listen(3000);
- 48. 投入するデータ
ドキュメント
{
_id: "d20cbc9d",
name: "日本料理 蔵",
categories: ["割烹・小料理"],
tel: "03-1111-xxxx",
address: "東京都港区赤坂",
holiday: "月曜",
seats: 10,
score: 4.25,
reviews: [{
id: ObjectId("5b9d0d5703b540fdf79e9827"),
user: "tanaka",
score: 4.0,
visit: ISODate("2018-08-15T00:00:00+09:00"),
post: ISODate("2018-08-16T00:00:00+09:00"),
description: "大変おいしかったです。"
}]
}
- 49. 投入するデータ
ドキュメント
{
_id: "d20cbc9d",
name: "日本料理 蔵",
categories: ["割烹・小料理"],
tel: "03-1111-xxxx",
address: "東京都港区赤坂",
holiday: "月曜",
seats: 10,
score: 4.25,
reviews: [{
id: ObjectId("5b9d0d5703b540fdf79e9827"),
user: "tanaka",
score: 4.0,
visit: ISODate("2018-08-15T00:00:00+09:00"),
post: ISODate("2018-08-16T00:00:00+09:00"),
description: "大変おいしかったです。"
}]
}
店舗情報
レビュー
- 70. 【解答例4】
/app.js
var path = require("path");
var express = require("express");
var app = express();
... (中略) ...
app.use("/", require("./routes/index.js"));
app.use("/shop", require("./routes/shop.js"));
app.listen(3000);
- 71. 【解答例4】
/routes/shop.js
var router = require("express").Router();
router.get("/:id", (request, response) => {
var _id = request.params.id;
console.log(_id);
});
module.exports = router;
- 74. MongoDB接続
データベース接続
var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js");
var MongoClient = require("mongodb").MongoClient;
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
// ... (データベース操作) ...
});
- 75. MongoDB接続
データベース接続
var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js");
var MongoClient = require("mongodb").MongoClient;
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
// ... (データベース操作) ...
}); 接続先URL
- 76. MongoDB接続
データベース接続
var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js");
var MongoClient = require("mongodb").MongoClient;
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
// ... (データベース操作) ...
}); 接続オプション
- 77. MongoDB接続
データベース接続
var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js");
var MongoClient = require("mongodb").MongoClient;
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
// ... (データベース操作) ...
});
接続後コールバック
- 78. MongoDB接続
データベース接続
var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js");
var MongoClient = require("mongodb").MongoClient;
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
// ... (データベース操作) ...
});
Dbオブジェクト取得
- 86. 【解答例5】
/routes/shop.js
var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js");
var router = require("express").Router();
var MongoClient = require("mongodb").MongoClient;
router.get("/:id", (request, response) => {
var _id = request.params.id;
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
db.collection("shops").find({ _id }).toArray()
.then((results) => {
console.log(JSON.stringify(results));
}).catch((error) => {
console.log(error);
}).then(() => { 次のページへつづく。
- 87. /routes/shop.js
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
db.collection("shops").find({ _id }).toArray()
.then((results) => {
console.log(JSON.stringify(results));
}).catch((error) => {
console.log(error);
}).then(() => {
client.close();
});
})
});
module.exports = router;
【解答例5】
前ページのつづき。
- 94. 【解答例6】
/routes/shop.js
var { URL, DATABASE, OPTIONS } = require("../config/mongodb.config.js");
... (中略) ...
MongoClient.connect(URL, OPTIONS, (error, client) => {
var db = client.db(DATABASE);
db.collection("shops").find({ _id }).toArray()
.then((results) => {
response.render("./shop/index.ejs", results[0]);
}).catch((error) => {
console.log(error);
}).then(() => {
client.close();
});
... (中略) ...
- 95. 【解答例6】
/views/shop/index.ejs
<!DOCTYPE html>
... (中略) ...
<div class="border-bottom mt-5 mb-5">
<h1 class="display-4"><%= name %></h1>
<p class="h3">
<span class="rate-star" style="--rate: <%= (score/5.00)*100 %>%;"></span>
<span><%= score %></span>
</p>
</div>
... (中略) ...
次のページへつづく。
- 96. 【解答例6】
/views/shop/index.ejs
<div>
<h2 class="border-bottom mt-5 mb-5 pb-2"><i class="fa fa-fw fa-book"></i> 店舗...
<table class="table table-bordered">
<colgroup>
<col class="bg-light" style="width: 10rem">
<col class="">
</colgroup>
<tr>
<th>店名</th>
<td><%= name %></td>
</tr>
<tr>
<th>カテゴリー</th>
<td><%= categories %></td>
</tr>
<tr>
次のページへつづく。
- 102. 【解答例】
/views/shop/index.ejs
.... (中略) ....
<div>
<div class="position-relative">
<h2 class="border-bottom mt-5 mb-5 pb-2">口コミ</h2>
<div class="position-absolute" style="right:0; top:0;">
<a href="/account/review/regist?shop=xxxxxx">投稿する</a>
</div>
</div>
<div>
<% for (var review of reviews) { %>
<% review.shop = _id; %>
<%- include("./review.ejs", review) %>
<% } %>
</div>
</div>
.... (中略) ....