LotosLabo

プログラミング技術とか気になった情報を載せていきます

Node.jsについて2

npmを使う

npmというのを使っていきます。
npmとは node package managerというテンプレートエンジンです。

npmのインストールはコマンドプロンプトより行えます。
そして今回はejsというのを使っていきます。


npm install ejs

これを実行すると今いるディレクトリにインストールファイルが作成されます。

f:id:lo25131:20140401165639j:plain


ejsを使ってページの表示

まず先ほどのpublic_htmlファイルに

hello.ejs というファイルを作成します。中身はhello.htmlをコピーしてもいいです。

そして中身をこのように変更します。

<body>
	<h1><%= title %></h1>
	<p><%- content %></p>
	<p><%= n %> views</p>
</body>



値を表示するには

<%= %> => エスケープする
<%- %> => エスケープしない
<%= n %> => Viewの数を表示

というのがあります。


では早速、server.jsの方を変更して表示させます。
全体から見るとこのように変更しました。

var http = require('http'),
	fs = require('fs'),
	ejs = require('ejs');
var settings = require('./settings');
var server = http.createServer();
var template = fs.readFileSync(__dirname + '/public_html/hello.ejs','utf-8');
var n = 0;
server.on('request', function(req,res) {
	n++;
	var data = ejs.render(template, {
		title: "hello",
		content: "<strong>world!</strong>",
		n: n
	});
	res.writeHead(200,{'content-Type': 'text/html'});
	res.write(data);
	res.end();
});
server.listen(settings.port, settings.host);
console.log("server listening ...");



3行目に ejs = require('ejs'); を追加しました。これは先ほどの記事で説明したとおり、ejfファイルを扱うための記述です。

6行目にtemplateファイルを読み込む為に,fs.readFileSyncというのを使って読み込ませま
す。

7行目にView数の初期値0の格納します。View数というのはサイトを見た回数です。

8行目からは一気に変わってejsファイルへ送る処理になります。
title: "hello" でタイトルを指定します。
content: で内容を指定し、nのView数はnを追加します。


ではブラウザに表示させてみましょう。サーバーを再起動して、ブラウザのアドレスを接続するとこんなかんじで表示されると思います。

f:id:lo25131:20140401170253j:plain


ejsで一行掲示板を作ってみる

では、ちょっと応用なのですが、簡易掲示板を作ってみます。

まず、bbs.ejsというのを作ります。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>BBS</title>
</head>
<body>
	<form method="post">
	<input type="text" name="name">
	<input type="submit" value="Post!">
	<ul>
		<% for (var i = 0; i < posts.length; i++) { %>
		<li><%= posts[i] %></li>
		<% } %>
	</ul>
</body>
</html>

フォームを作成します。
テキストボックスとサブミットボタンを配置します。
また下にはリストを作り、テキストボックスに入力された値をサブミットボタンで追加し、配列でリストに表示させていきます。


次にserver.jsの方を変更していきます。

var http = require('http'),
	fs = require('fs'),
	ejs = require('ejs'),
	qs = require('querystring');
var settings = require('./settings');
var server = http.createServer();
var template = fs.readFileSync(__dirname + '/public_html/bbs.ejs','utf-8');
var posts = [];
function renderForm(posts, res) {
	var data = ejs.render(template, {
		posts: posts
});
		res.writeHead(200,{'content-Type': 'text/html'});
		res.write(data);
		res.end();
}
server.on('request', function(req,res) {

	if (req.method === 'POST') {
		req.data = "";
		req.on("readable", function() {
			req.data += req.read();
		});
		req.on("end",function(){
			var query = qs.parse(req.data);
			posts.push(query.name);
			renderForm(posts,res);
		});
	} else {
		renderForm(posts, res);
	}
});
server.listen(settings.port, settings.host);
console.log("server listening ...");



4行目でqs = require('querystring') というフォームの投稿処理を使うモジュールを追加

8行目でpostの配列を使うので、空の配列を作成。

17行目のserver.onにて、送信がうまくいっているかの処理をします。
ここは決まり文句らしいのでこんなかんじで書きました。


完成版はこちらになります。


f:id:lo25131:20140401171941g:plain


mongodbと接続させる

では最後にmongodbと接続させる方法をやっていきましょう。
mongodbの環境が整ってない方はべつにやらなくても大丈夫です。

まずmongodbのサーバーをつなげましょう。

そしたら、mongodbへ送るjavascript文を作ります。

例:

var MongoClient = require('mongodb').MongoClient,
	settings = require('./settings');
MongoClient.connect("mongodb://"+settings.host+"/"+settings.db, function(err, db) {
	if (err) { return console.dir(err); }
		console.log("connected to db");
		db.collection("users",function(err, collection) {
			var docs =[
			{name: "lotos", score: 50},
			{name: "tos1", score: 70},
			{name: "lo2", score: 80}
			];
			collection.insert(docs, function(err, result) {
				console.dir(result);
		});
	});
});

こんなかんじで書いていきます。
var docs = のところにデータを書いていきます。
後は決まり文句らしいのでこのままです。


こんなかんじで表示されると思います。

f:id:lo25131:20140401173234g:plain