템플릿 만들기
3545 단어 Node.jsExpress.js
먼저
지난번에는 생http로 만든 서버 쪽이었는데, 이번에는 템플릿을 사용하고 싶어요.
express.js 사용
사전 준비
다음 명령 express를 실행합니다.설치 js
npm install express --save
사진 사이트 만들기
목표는 사진 공유 사이트를 만드는 것이다
이번에 사진의 구조를 보여줍니다.
서버 측 생성
하고 있는 일로img 디렉터리에 있는 jpg 파일을 모두 가져와 템플릿에 건네줍니다
// ①HTTPサーバを作成するための必要
const express = require("express");
let app = express();
// ディレクトリ読み込み用
let fs = require('fs');
const IMG_PATH = 'img/img/';
// テンプレートエンジンの指定
app.set("view engine", "ejs");
// 静的ファイルを読み込めるようにする
app.use(express.static('css'));
app.use(express.static('img'));
app.get("/", function(req, res) {
let fileList = [];
try {
// img配下のファイルをすべて読み込む
let files = fs.readdirSync(IMG_PATH);
// jpgの画像を絞り込む
files.filter(function(file) {
return fs.statSync(IMG_PATH + file).isFile() && /.*\.jpg$/.test(file); //絞り込み
}).forEach(function(file) {
fileList.push(file);
});
let data = {
items : fileList
}
console.log(data);
// レンダリングを行う
res.render("./index.ejs", data);
} catch (err) {
// 読み込めない場合エラー画面に繊維
console.error(err);
res.render("./error.ejs");
}
});
// サーバ実行
app.listen(8081);
템플릿 만들기
・index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<header class="header">
<!-- タイトルとヘッダ画像の挿入 -->
<h1>写真投稿サイト</h1>
<div class="header-img"><img class="img-header" src="header/header.jpg" alt="" />
</header>
<!-- UIkit CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 共有する写真のパスを渡して全部表示する -->
<%- include("./item.ejs", items) %>
</body>
</html>
・item.ejs
<div>
<p>写真一覧</p>
<!-- 横スライドショーで表示 -->
<ul class="horizontal-list">
<% for (let item of items) { %>
<li class="item">
<!-- クリック時は正規のファイルをダウンロードさせる -->
<a href="img/" download="img/">
<!-- 画面に表示するのは小さくした画像（容量削減のため） -->
<img src="img_mini/s" alt="s">
</a>
</li>
<% } %>
</ul>
※写真全部で２G超えています。取得時はwifi環境で実施してください。
また、zipファイルのためダウンロード前に解凍環境を確認してください
<a href="136-231570-335954_photo_l_part1_of_2.zip" download>一括ダウンロードその１</a><br>
<a href="136-231570-335954_photo_l_part2_of_2.zip" download>一括ダウンロードその２</a><br>
・style.css
## スタイル
/** ヘッダのスタイル*/
header h1 {
font-size: 2.0rem;
line-height: 1.5rem;
background-color: #7CB342;
padding: 0px 5%;
color: #fff;
}
.horizontal-list {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.item {
/* 横スクロール用 */
display: inline-block;
margin: 16px;
background: rgba(255, 0, 0, 0.4);
}
/** ヘッダの画像だけは横いっぱいに表示 */
.img-header {
width: 100%;
max-width: 100%;
height: auto;
}
완성도
완성도.얼굴은 가리는 것이니 탓하지 마십시오
총괄하다
이런 느낌으로 잠시 전시용 사이트를 만들었다.
너무 쉬워요.
다음은 도메인을 취득하고 외부 공개를 예약하는 방법입니다.
Reference
이 문제에 관하여(템플릿 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nokki0726/items/83711ea340217255a1d3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
다음 명령 express를 실행합니다.설치 js
npm install express --save
사진 사이트 만들기
목표는 사진 공유 사이트를 만드는 것이다
이번에 사진의 구조를 보여줍니다.
서버 측 생성
하고 있는 일로img 디렉터리에 있는 jpg 파일을 모두 가져와 템플릿에 건네줍니다
// ①HTTPサーバを作成するための必要
const express = require("express");
let app = express();
// ディレクトリ読み込み用
let fs = require('fs');
const IMG_PATH = 'img/img/';
// テンプレートエンジンの指定
app.set("view engine", "ejs");
// 静的ファイルを読み込めるようにする
app.use(express.static('css'));
app.use(express.static('img'));
app.get("/", function(req, res) {
let fileList = [];
try {
// img配下のファイルをすべて読み込む
let files = fs.readdirSync(IMG_PATH);
// jpgの画像を絞り込む
files.filter(function(file) {
return fs.statSync(IMG_PATH + file).isFile() && /.*\.jpg$/.test(file); //絞り込み
}).forEach(function(file) {
fileList.push(file);
});
let data = {
items : fileList
}
console.log(data);
// レンダリングを行う
res.render("./index.ejs", data);
} catch (err) {
// 読み込めない場合エラー画面に繊維
console.error(err);
res.render("./error.ejs");
}
});
// サーバ実行
app.listen(8081);
템플릿 만들기
・index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<header class="header">
<!-- タイトルとヘッダ画像の挿入 -->
<h1>写真投稿サイト</h1>
<div class="header-img"><img class="img-header" src="header/header.jpg" alt="" />
</header>
<!-- UIkit CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 共有する写真のパスを渡して全部表示する -->
<%- include("./item.ejs", items) %>
</body>
</html>
・item.ejs
<div>
<p>写真一覧</p>
<!-- 横スライドショーで表示 -->
<ul class="horizontal-list">
<% for (let item of items) { %>
<li class="item">
<!-- クリック時は正規のファイルをダウンロードさせる -->
<a href="img/" download="img/">
<!-- 画面に表示するのは小さくした画像（容量削減のため） -->
<img src="img_mini/s" alt="s">
</a>
</li>
<% } %>
</ul>
※写真全部で２G超えています。取得時はwifi環境で実施してください。
また、zipファイルのためダウンロード前に解凍環境を確認してください
<a href="136-231570-335954_photo_l_part1_of_2.zip" download>一括ダウンロードその１</a><br>
<a href="136-231570-335954_photo_l_part2_of_2.zip" download>一括ダウンロードその２</a><br>
・style.css
## スタイル
/** ヘッダのスタイル*/
header h1 {
font-size: 2.0rem;
line-height: 1.5rem;
background-color: #7CB342;
padding: 0px 5%;
color: #fff;
}
.horizontal-list {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.item {
/* 横スクロール用 */
display: inline-block;
margin: 16px;
background: rgba(255, 0, 0, 0.4);
}
/** ヘッダの画像だけは横いっぱいに表示 */
.img-header {
width: 100%;
max-width: 100%;
height: auto;
}
완성도
완성도.얼굴은 가리는 것이니 탓하지 마십시오
총괄하다
이런 느낌으로 잠시 전시용 사이트를 만들었다.
너무 쉬워요.
다음은 도메인을 취득하고 외부 공개를 예약하는 방법입니다.
Reference
이 문제에 관하여(템플릿 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nokki0726/items/83711ea340217255a1d3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// ①HTTPサーバを作成するための必要
const express = require("express");
let app = express();
// ディレクトリ読み込み用
let fs = require('fs');
const IMG_PATH = 'img/img/';
// テンプレートエンジンの指定
app.set("view engine", "ejs");
// 静的ファイルを読み込めるようにする
app.use(express.static('css'));
app.use(express.static('img'));
app.get("/", function(req, res) {
let fileList = [];
try {
// img配下のファイルをすべて読み込む
let files = fs.readdirSync(IMG_PATH);
// jpgの画像を絞り込む
files.filter(function(file) {
return fs.statSync(IMG_PATH + file).isFile() && /.*\.jpg$/.test(file); //絞り込み
}).forEach(function(file) {
fileList.push(file);
});
let data = {
items : fileList
}
console.log(data);
// レンダリングを行う
res.render("./index.ejs", data);
} catch (err) {
// 読み込めない場合エラー画面に繊維
console.error(err);
res.render("./error.ejs");
}
});
// サーバ実行
app.listen(8081);
・index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<header class="header">
<!-- タイトルとヘッダ画像の挿入 -->
<h1>写真投稿サイト</h1>
<div class="header-img"><img class="img-header" src="header/header.jpg" alt="" />
</header>
<!-- UIkit CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 共有する写真のパスを渡して全部表示する -->
<%- include("./item.ejs", items) %>
</body>
</html>
<div>
<p>写真一覧</p>
<!-- 横スライドショーで表示 -->
<ul class="horizontal-list">
<% for (let item of items) { %>
<li class="item">
<!-- クリック時は正規のファイルをダウンロードさせる -->
<a href="img/" download="img/">
<!-- 画面に表示するのは小さくした画像（容量削減のため） -->
<img src="img_mini/s" alt="s">
</a>
</li>
<% } %>
</ul>
※写真全部で２G超えています。取得時はwifi環境で実施してください。
また、zipファイルのためダウンロード前に解凍環境を確認してください
<a href="136-231570-335954_photo_l_part1_of_2.zip" download>一括ダウンロードその１</a><br>
<a href="136-231570-335954_photo_l_part2_of_2.zip" download>一括ダウンロードその２</a><br>
## スタイル
/** ヘッダのスタイル*/
header h1 {
font-size: 2.0rem;
line-height: 1.5rem;
background-color: #7CB342;
padding: 0px 5%;
color: #fff;
}
.horizontal-list {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.item {
/* 横スクロール用 */
display: inline-block;
margin: 16px;
background: rgba(255, 0, 0, 0.4);
}
/** ヘッダの画像だけは横いっぱいに表示 */
.img-header {
width: 100%;
max-width: 100%;
height: auto;
}
완성도
완성도.얼굴은 가리는 것이니 탓하지 마십시오
총괄하다
이런 느낌으로 잠시 전시용 사이트를 만들었다.
너무 쉬워요.
다음은 도메인을 취득하고 외부 공개를 예약하는 방법입니다.
Reference
이 문제에 관하여(템플릿 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nokki0726/items/83711ea340217255a1d3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이런 느낌으로 잠시 전시용 사이트를 만들었다.
너무 쉬워요.
다음은 도메인을 취득하고 외부 공개를 예약하는 방법입니다.
Reference
이 문제에 관하여(템플릿 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nokki0726/items/83711ea340217255a1d3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
