Главная страница   /   13.1. Подготовка сервера Node.js (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

13.1. Подготовка сервера Node.js

В этой главе вы будете использовать Node.js, для получения и обработки данных формы из браузера. Я не хочу вдаваться в подробности о том, как работает Node.js, но одной из причин, почему я выбрал его для этой книги, является то, что Node.js выстроен вокруг JavaScript, что обозначает, что можно использовать те же самые навыки программирования для серверной части, как и клиентской части.

Совет

Если вы хотите воспроизвести пример из этой главы, вам стоит посмотреть главу 1, чтобы освежить информацию о Node.js. Серверный скрипт, также как и все HTML документы, можно скачать на Apress.com.

В листинге 13-1 показан серверный скрипт, который мы будем использовать в этой главе. В данном случае я представляю его как черный ящик и объясню только входные данные и результат.

Листинг 13-1: Скрипт formserver.js Node.js
var http = require('http');
var querystring = require('querystring');

http.createServer(function (req, res) {
	console.log("[200 OK] " + req.method + " to " + req.url);

	if (req.method == 'POST') {
		var dataObj = new Object();
		var contentType = req.headers["content-type"];
		var fullBody = '';

		if (contentType) {
			if (contentType.indexOf("application/x-www-form-urlencoded") > -1) {
				req.on('data', function (chunk) { fullBody += chunk.toString(); });
				req.on('end', function () {
					res.writeHead(200, "OK", { 'Content-Type': 'text/html' });
					res.write('<html><head><title>Post data</title></head><body>');
					res.write('<style>th, td {text-align:left; padding:5px; color:black}\n');
					res.write('th {background-color:grey; color:white; min-width:10em}\n');
					res.write('td {background-color:lightgrey}\n');
					res.write('caption {font-weight:bold}</style>');
					res.write('<table border="1"><caption>Form Data</caption>');
					res.write('<tr><th>Name</th><th>Value</th>');
					var dBody = querystring.parse(fullBody);
					for (var prop in dBody) {
						res.write("<tr><td>" + prop + "</td><td>" + dBody[prop] + "</td></tr>");
					}
					res.write('</table></body></html>');
					res.end();
				});
			}
		}
	}
}).listen(80);
console.log("Ready on port 80");

Чтобы запустить скрипт, в командной строке я ввожу следующее:

node.exe formserver.js

Командная строка будет другой, если вы используете другую операционную систему. Для информации посмотрите документацию по Node.js. Чтобы продемонстрировать функционал Node.js, который вы будете использовать в этой главе, вам нужно вернуться к примеру документа, который будет показан в листинге 13-2.

Листинг 13-2: Пример документа для этой главы
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<script src="jquery.tmpl.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(function () {
			var data = [
				{ name: "Astor", product: "astor", stocklevel: "10", price: "2.99" },
				{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99" },
				{ name: "Rose", product: "rose", stocklevel: "2", price: "4.99" },
				{ name: "Peony", product: "peony", stocklevel: "0", price: "1.50" },
				{ name: "Primula", product: "primula", stocklevel: "1", price: "3.12" },
				{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99" },
			];
			var templResult = $('#flowerTmpl').tmpl(data);
			templResult.slice(0, 3).appendTo('#row1');
			templResult.slice(3).appendTo("#row2");
		});
	</script>
	<script id="flowerTmpl" type="text/x-jquery-tmpl">
		<div class="dcell">
			<img src="${product}.png" />
			<label for="${product}">${name}: </label>
			<input name="${product}" value="0" required />
		</div>
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post" action="http://node.jacquisflowershop.com/order">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
				</div>
				<div id="row2" class="drow">
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

Отдельные элементы продукции сгенерированы при помощи шаблона данных (как описано в главе 12). Я указал значение для атрибута action элемента form, что обозначает, форма будет отправлять данные методом POST на следующий URL:

http://node.jacquisflowershop.com/order

Я использую два различных сервера. Первый сервер (www.jacquisflowershop.com) вы используете на протяжении всей книги. Он передает статический контент, такой как HTML документы, скриптовые файлы и картинки. Для меня это Microsoft’s IIS 7.5, но вы можете использовать любой другой сервер, который вам нравится (я использую IIS, потому что множество моих книг написаны о технологиях веб программирования Microsoft, и мой сервер уже настроен и запущен).

Второй сервер (node.jacquisflowershop.com) запускает Node.js (используя скрипт, показанный выше), и когда вы отправляете form из примера документа, серверу будут отправлены данные. В этой главе меня не особо интересует то, что делает сервер, когда получает данные. Мы сфокусируемся на самой форме. На рисунке 13-1 видно, что я вставил в элементы input документа некоторые значения.

Рисунок 13-1: Добавление данных в элементы input

Когда я нажимаю на кнопку Place Order, форма отправляется на сервер Node.js, и обратно браузеру приходит простой ответ, как показано на рисунке 13-2.

Рисунок 13-2: Ответ от сервера Node.js

Я знаю, что это не очень захватывающий ответ, но сейчас нам нужно просто куда-то отправить данные, и я не хочу отходить от темы и углубляться в мир разработки серверных приложений.