# 5/13 高レイヤ勉強会
## webアプリ入門
### 三章 16
workspaceでpugをローカルインストール
```
$ yarn add pug@2.0.0-rc.4
$ yarn global add pug-cli
```
pugが入ったか確かめる
```
$ echo "h1 Pug!" | pug
```
``` html:form.pug
doctype html
html(lang="ja")
head
meta(charset="UTF-8")
title アンケート
body
h1 どちらが食べたいですか？
form(method="post" action="/enquetes/yaki-shabu")
span 名前:
input(type="text" name="name")
input(type="radio" name="yaki-shabu" value="焼き肉")
span 焼き肉
input(type="radio" name="yaki-shabu" value="しゃぶしゃぶ")
span しゃぶしゃぶ
button(type="submit") 投稿
```
vscode場合は必要?
``` json:settings.json
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
// 1 つのタブに相当するスペースの数。`editor.detectIndentation` がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。
"editor.tabSize": 2,
// Tab キーを押すとスペースが挿入されます。`editor.detectIndentation` がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。
"editor.insertSpaces": true,
// エディターで空白文字を表示する方法を制御します。'none'、'boundary' および 'all' が使用可能です。'boundary' オプションでは、単語間の単一スペースは表示されません。
"editor.renderWhitespace": "boundary"
}
```
pugを読み込むindex.js
``` js:index.js
'use strict';
const http = require('http');
const pug = require('pug');
const server = http
.createServer((req, res) => {
const now = new Date();
console.info('[' + now + '] Requested by ' + req.connection.remoteAddress);
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
});
switch (req.method) {
case 'GET':
res.write(pug.renderFile('./form.pug'));
res.end();
break;
case 'POST':
let rawData = '';
req
.on('data', chunk => {
rawData = rawData + chunk;
})
.on('end', () => {
const qs = require('querystring');
const decoded = decodeURIComponent(rawData);
console.info('[' + now + '] 投稿: ' + decoded);
const answer = qs.parse(decoded);
res.write('<!DOCTYPE html><html lang="ja"><body><h1>' +
answer['name'] + 'さんは' + answer['yaki-shabu'] +
'に投票しました</h1></body></html>');
res.end();
});
break;
default:
break;
}
})
.on('error', e => {
console.error('[' + new Date() + '] Server Error', e);
})
.on('clientError', e => {
console.error('[' + new Date() + '] Client Error', e);
});
const port = 8000;
server.listen(port, () => {
console.info('[' + new Date() + '] Listening on ' + port);
});
```
アンケートをテンプレート化したindex.js
```
'use strict';
const http = require('http');
const pug = require('pug');
const server = http
.createServer((req, res) => {
const now = new Date();
console.info('[' + now + '] Requested by ' + req.connection.remoteAddress);
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
});
switch (req.method) {
case 'GET':
if (req.url === '/enquetes/yaki-shabu') {
res.write(
pug.renderFile('./form.pug', {
path: req.url,
firstItem: '焼き肉',
secondItem: 'しゃぶしゃぶ'
})
);
} else if (req.url === '/enquetes/rice-bread') {
res.write(
pug.renderFile('./form.pug', {
path: req.url,
firstItem: 'ごはん',
secondItem: 'パン'
})
);
}
res.end();
break;
case 'POST':
let rawData = '';
req
.on('data', chunk => {
rawData = rawData + chunk;
})
.on('end', () => {
const qs = require('querystring');
const decoded = decodeURIComponent(rawData);
console.info('[' + now + '] 投稿: ' + decoded);
const answer = qs.parse(decoded);
res.write('<!DOCTYPE html><html lang="ja"><body><h1>' +
answer['name'] + 'さんは' + answer['favorite'] +
'に投票しました</h1></body></html>');
res.end();
});
break;
default:
break;
}
})
.on('error', e => {
console.error('[' + new Date() + '] Server Error', e);
})
.on('clientError', e => {
console.error('[' + new Date() + '] Client Error', e);
});
const port = 8000;
server.listen(port, () => {
console.info('[' + new Date() + '] Listening on ' + port);
});
```
Sign in with Wallet
Connect another wallet