僅僅入門如何用Node.js和Express搭建一個(gè)web服務(wù)器，沒(méi)有說(shuō)明太多概念性的東西。

一、 Nodejs簡(jiǎn)介

​ ==Node是JavaScript語(yǔ)言的服務(wù)器運(yùn)行環(huán)境。==

​ 所謂“運(yùn)行環(huán)境”有兩層意思：首先，JavaScript語(yǔ)言通過(guò)Node在服務(wù)器運(yùn)行，在這個(gè)意義上，Node有點(diǎn)像JavaScript虛擬機(jī)；其次，Node提供大量工具庫(kù)，使得JavaScript語(yǔ)言與操作系統(tǒng)互動(dòng)（比如讀寫(xiě)文件、新建子進(jìn)程），在這個(gè)意義上，Node又是JavaScript的工具庫(kù)。

​ Node內(nèi)部采用Google公司的V8引擎，作為JavaScript語(yǔ)言解釋器；通過(guò)自行開(kāi)發(fā)的libuv庫(kù)，調(diào)用操作系統(tǒng)資源。

二、Node.js的下載和安裝

2.1 Node.js下載

node.js官網(wǎng)下載：http://chabaoo.cn/softs/504128.html

官網(wǎng)會(huì)根據(jù)你當(dāng)前的操作系統(tǒng)，提供給你最合適的版本去下載。

2.2 安裝

​ 下載成功之后是一個(gè)msi文件，雙擊安裝即可。安裝成功后，相應(yīng)的環(huán)境變量都會(huì)自動(dòng)配置，不需要我們?cè)偃ナ謩?dòng)配置。

​ 一路next就可以安裝成功。

2.3 測(cè)試Node.js是否安裝成功

安裝成功之后，可以在window控制臺(tái)查看是否安裝成功。

輸入下面的命令查看node的版本。

node -v

直接輸入node然后回車，就可以讓node去執(zhí)行我們的js代碼了。

node

2.4 使用Node.js運(yùn)行JavaScript代碼

新建一個(gè)nodeproject目錄，新建一個(gè)js文件。01_hello.js

var num1 = 10;
var num2 = 20;
console.log(num1 + num2);

在windows控制臺(tái)中，切換目錄到j(luò)s文件所在目錄。然后輸入

node 01_hello.js

三、Node.js中的一些基本概念澄清

3.1 Node.js不是JS應(yīng)用、而是JS運(yùn)行平臺(tái)

​ 看到Node.js這個(gè)名字，初學(xué)者可能會(huì)誤以為這是一個(gè)Javascript應(yīng)用，事實(shí)上，Node.js采用C++語(yǔ)言編寫(xiě)而成，是一個(gè)Javascript的運(yùn)行環(huán)境。

​ 既然不是Javascript應(yīng)用，為何叫.js呢？因?yàn)镹ode.js是一個(gè)Javascript的運(yùn)行環(huán)境。提到Javascript，大家首先想到的是日常使用的瀏覽器，現(xiàn)代瀏覽器包含了各種組件，包括渲染引擎、JavaScript引擎等，其中Javascript引擎負(fù)責(zé)解釋執(zhí)行網(wǎng)頁(yè)中的Javascript代碼。作為Web前端最重要的語(yǔ)言之一，Javascript一直是前端工程師的專利。不過(guò)，Node.js是一個(gè)后端的Javascript運(yùn)行環(huán)境（支持的系統(tǒng)包括Linux、Windows），這意味著你可以編寫(xiě)系統(tǒng)級(jí)或者服務(wù)器端的Javascript代碼，交給Node.js來(lái)解釋執(zhí)行，

3.2 Node.js與JavaScript的關(guān)系

​ JavaScript包括3個(gè)部分：ECMAScript-262、BOM、DOM。BOM與瀏覽器相關(guān)，DOM和HTML頁(yè)面相關(guān)。Node.js中只是包括了ECMAScript-262。所以我們以前的一些關(guān)于BOM的操作和DOM的操作都是基于瀏覽器端運(yùn)行的，在Node.js中是無(wú)法使用的。

3.3 Node.js中幾個(gè)全局變量

1. global：表示Node所在的全局環(huán)境，類似于瀏覽器的window對(duì)象。需要注意的是，如果在瀏覽器中聲明一個(gè)全局變量，實(shí)際上是聲明了一個(gè)全局對(duì)象的屬性，比如var x = 1等同于設(shè)置window.x = 1，但是Node不是這樣，至少在模塊中不是這樣（REPL環(huán)境的行為與瀏覽器一致）。在模塊文件中，聲明var x = 1，該變量不是global對(duì)象的屬性，global.x等于undefined。這是因?yàn)槟K的全局變量都是該模塊私有的，其他模塊無(wú)法取到。
2. process：該對(duì)象表示Node所處的當(dāng)前進(jìn)程，允許開(kāi)發(fā)者與該進(jìn)程互動(dòng)。
3. console：指向Node內(nèi)置的console模塊，提供命令行環(huán)境中的標(biāo)準(zhǔn)輸入、標(biāo)準(zhǔn)輸出功能。

3.4 Node.js中的幾個(gè)全局函數(shù)

1. setTimeout()：用于在指定毫秒之后，運(yùn)行回調(diào)函數(shù)。實(shí)際的調(diào)用間隔，還取決于系統(tǒng)因素。間隔的毫秒數(shù)在1毫秒到2,147,483,647毫秒（約24.8天）之間。如果超過(guò)這個(gè)范圍，會(huì)被自動(dòng)改為1毫秒。該方法返回一個(gè)整數(shù)，代表這個(gè)新建定時(shí)器的編號(hào)。
2. clearTimeout()：用于終止一個(gè)setTimeout方法新建的定時(shí)器。
3. setInterval()：用于每隔一定毫秒調(diào)用回調(diào)函數(shù)。由于系統(tǒng)因素，可能無(wú)法保證每次調(diào)用之間正好間隔指定的毫秒數(shù)，但只會(huì)多于這個(gè)間隔，而不會(huì)少于它。指定的毫秒數(shù)必須是1到2,147,483,647（大約24.8天）之間的整數(shù)，如果超過(guò)這個(gè)范圍，會(huì)被自動(dòng)改為1毫秒。該方法返回一個(gè)整數(shù)，代表這個(gè)新建定時(shí)器的編號(hào)。
4. clearInterval()：終止一個(gè)用setInterval方法新建的定時(shí)器。
5. require()：用于加載模塊。
6. Buffer()：用于操作二進(jìn)制數(shù)據(jù)。

3.5 Node.js的核心模塊

如果只是在服務(wù)器運(yùn)行JavaScript代碼，用處并不大，因?yàn)榉?wù)器腳本語(yǔ)言已經(jīng)有很多種了。Node.js的用處在于，它**本身**還提供了一系列功能模塊，與操作系統(tǒng)互動(dòng)。這些核心的功能模塊，不用安裝就可以使用，下面是它們的清單。

1. http：提供HTTP服務(wù)器功能。
2. url：解析URL。
3. fs：與文件系統(tǒng)交互。
4. querystring：解析URL的查詢字符串。
5. child_process：新建子進(jìn)程。
6. util：提供一系列實(shí)用小工具。
7. path：處理文件路徑。
8. crypto：提供加密和解密功能，基本上是對(duì)OpenSSL的包裝。
   

三、搭建web應(yīng)用

​ 使用Node.js搭建web服務(wù)器，一般使用一些框架來(lái)幫助完成。

​ express 是一個(gè)開(kāi)源的node.js項(xiàng)目框架，初學(xué)者使用express可以快速的搭建一個(gè)Web項(xiàng)目，express中已經(jīng)集成了Web的http服務(wù)器創(chuàng)建、請(qǐng)求和文件管理以及Session的處理等功能，所以express是非常適合初學(xué)者的入門學(xué)習(xí)。

3.1 安裝Express框架

使用node.js自帶的包管理器npm安裝。

創(chuàng)建一個(gè)項(xiàng)目目錄，Node_Hello。進(jìn)入該目錄，創(chuàng)建一個(gè)package.json文件，文件內(nèi)容如下：

{
 "name": "Node_Hello",
 "description": "nodejs hello world app",
 "version": "0.0.1",
 "private": true,
 "dependencies": {
  "express": "4.x"
 }
}

 上面代碼定義了項(xiàng)目的名稱、描述、版本等，并且指定需要4.0版本以上的Express。

==從控制臺(tái)首先進(jìn)入剛才的項(xiàng)目目錄==，然后輸入如下命令，則會(huì)開(kāi)始下載Express。

npm install

下載完成

3.2 創(chuàng)建啟動(dòng)文件

​ 在上面的項(xiàng)目目錄下，新建一個(gè)啟動(dòng)文件，名字暫叫 ==index.js== 。書(shū)寫(xiě)如下代碼：

var express = require('express');
var app = express();
app.get('/', function (req, res) {
 res.send('<h1>你好，這是我們的第一個(gè)nodejs項(xiàng)目</h1>');
});
app.listen(8080);

 3.3 運(yùn)行index.js文件

node index.js

3.4 使用瀏覽器訪問(wèn)

在瀏覽器輸入下面的地址就可以訪問(wèn)我們剛剛搭建的web網(wǎng)站了。

http://127.0.0.1:8080

四、使用Webstorm搭建Node.js web應(yīng)用

​ 使用webstorm搭建Node.js應(yīng)用更加方便。

4.1 下載WebStorm，并安裝

下載Webstorm：http://chabaoo.cn/softs/507325.html

下載完成后，直接安裝即可。

4.2 創(chuàng)建Node + Express應(yīng)用

4.3 Project目錄結(jié)構(gòu)

app.js：?jiǎn)?dòng)文件，或者說(shuō)入口文件

package.json：存儲(chǔ)著工程的信息及模塊依賴，當(dāng)在 dependencies 中添加依賴的模塊時(shí)，運(yùn)行 npm install ，npm 會(huì)檢查當(dāng)前目錄下的 package.json，并自動(dòng)安裝所有指定的模塊

node_modules：存放 package.json 中安裝的模塊，當(dāng)你在 package.json 添加依賴的模塊并安裝后，存放在這個(gè)文件夾下

public：存放 image、css、js 等文件

routes：存放路由文件

views：存放視圖文件或者說(shuō)模版文件

bin：存放可執(zhí)行文件(www)

 4.4 各個(gè)主要文件的說(shuō)明

4.4.1 app.js

//加載模塊
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
//加載路由文件
var index = require('./routes/index');
var users = require('./routes/users');

// 生產(chǎn)一個(gè)express的實(shí)例
var app = express();

// view engine setup
/*
設(shè)置 views 文件夾為存放視圖文件的目錄,
即存放模板文件的地方,__dirname 為全局變量,
存儲(chǔ)當(dāng)前正在執(zhí)行的腳本所在的目錄。
 */
app.set('views', path.join(__dirname, 'views'));
//設(shè)置模板引擎為ejs
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
//加載日志中間件
app.use(logger('dev'));
//加載解析json的中間件
app.use(bodyParser.json());
//加載解析urlencoded請(qǐng)求體的中間件。 post請(qǐng)求
app.use(bodyParser.urlencoded({extended: false}));
//加載解析cookie的中間件
app.use(cookieParser());
//設(shè)置public文件夾為放置靜態(tài)文件的目錄
app.use(express.static(path.join(__dirname, 'public')));

// 路由控制器。
app.use('/', index); // http://localhost:3000
app.use('/users', users);  //http://localhost:3000/users


// catch 404 and forward to error handler
app.use(function (req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

//把a(bǔ)pp導(dǎo)出。 別的地方就可以通過(guò) require("app") 獲取到這個(gè)對(duì)象
module.exports = app;

 4.4.2 bin/www

#!/usr/bin/env node //表明是node可執(zhí)行文件

/**
 * Module dependencies.
 */
//引入我們?cè)赼pp.js中導(dǎo)出的app模塊
var app = require('../app');
//引入debuger模塊，打印調(diào)試日志
var debug = require('debug')('hello:server');
//引入http模塊
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port); //設(shè)置端口號(hào)

/**
 * Create HTTP server.
 */
//創(chuàng)建Http服務(wù)器
var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
//監(jiān)聽(tīng)指定的端口
server.listen(port);
//監(jiān)聽(tīng)error事件。 onError是發(fā)生錯(cuò)誤的時(shí)候的回調(diào)函數(shù)
server.on('error', onError);
//監(jiān)聽(tīng)listening事件
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
 var port = parseInt(val, 10);

 if (isNaN(port)) {
  // named pipe
  return val;
 }

 if (port >= 0) {
  // port number
  return port;
 }

 return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
 if (error.syscall !== 'listen') {
  throw error;
 }

 var bind = typeof port === 'string'
  ? 'Pipe ' + port
  : 'Port ' + port;

 // handle specific listen errors with friendly messages
 switch (error.code) {
  case 'EACCES':
   console.error(bind + ' requires elevated privileges');
   process.exit(1);
   break;
  case 'EADDRINUSE':
   console.error(bind + ' is already in use');
   process.exit(1);
   break;
  default:
   throw error;
 }
}
/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
 var addr = server.address();
 var bind = typeof addr === 'string'
  ? 'pipe ' + addr
  : 'port ' + addr.port;
 debug('Listening on ' + bind);
}

4.4.3 routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: '育知同創(chuàng)' });
});

module.exports = router;
/*
 生成一個(gè)路由實(shí)例用來(lái)捕獲訪問(wèn)主頁(yè)的GET請(qǐng)求，
 導(dǎo)出這個(gè)路由并在app.js中通過(guò)app.use('/', routes);
 加載。這樣，當(dāng)訪問(wèn)主頁(yè)時(shí)，就會(huì)調(diào)用res.render('index', { title: '育知同創(chuàng)' });
 渲染views/index.ejs模版并顯示到瀏覽器中。
 */

 4.4.4 對(duì)路由寫(xiě)法的優(yōu)化

​ 在前面的==app.js中==，每個(gè)模板都有添加一次路由比較麻煩，其實(shí)應(yīng)該把添加路由的事情專門交給index.js來(lái)做。也就是可以把多個(gè)路由放在一個(gè)路由文件中。

//加載路由文件
var index = require('./routes/index'); //去掉
var users = require('./routes/users'); //去掉
// 路由控制器。
app.use('/', index); // http://localhost:3000 //去掉
app.use('/users', users);  //http://localhost:3000/users  //去掉

 可以改成：

var routes = require('./routes/index');
routes(app);

==index.js==文件優(yōu)化成： 這樣管理起來(lái)就方便很多

module.exports = function (app) {
 //一個(gè)get請(qǐng)求的路由 http://localhost:3000
 app.get("/", function (req, res) {
   res.render("index", {title:"育知同創(chuàng)abc"})
 });
 //又一個(gè)請(qǐng)求路由：http://localhost:3000/abc
 app.get("/abc", function (req, res) {
   res.render("index", {title:"育知同創(chuàng)" + req.path})
 });
}

4.4.5 ejs模板

模板引擎（Template Engine）是一個(gè)將頁(yè)面模板和要顯示的數(shù)據(jù)結(jié)合起來(lái)生成 HTML 頁(yè)面的工具。如果說(shuō)上面講到的 express 中的路由控制方法相當(dāng)于 MVC 中的控制器的話，那模板引擎就相當(dāng)于 MVC 中的視圖。

模板引擎的功能是將頁(yè)面模板和要顯示的數(shù)據(jù)結(jié)合起來(lái)生成 HTML 頁(yè)面。它既可以運(yùn) 行在服務(wù)器端又可以運(yùn)行在客戶端，大多數(shù)時(shí)候它都在服務(wù)器端直接被解析為 HTML，解析完成后再傳輸給客戶端，因此客戶端甚至無(wú)法判斷頁(yè)面是否是模板引擎生成的。有時(shí)候模板引擎也可以運(yùn)行在客戶端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶端生成 HTML 頁(yè)面。但是由于瀏覽器兼容性問(wèn)題，XSLT 并不是很流行。目前的主流還是由服務(wù)器運(yùn)行模板引擎。

在 MVC 架構(gòu)中，模板引擎包含在服務(wù)器端。控制器得到用戶請(qǐng)求后，從模型獲取數(shù)據(jù)，調(diào)用模板引擎。模板引擎以數(shù)據(jù)和頁(yè)面模板為輸入，生成 HTML 頁(yè)面，然后返回給控制器，由控制器交回客戶端。

==ejs 是模板引擎的一種，它使用起來(lái)十分簡(jiǎn)單，而且與 express 集成良好。==

我們通過(guò)以下兩行代碼設(shè)置了模板文件的存儲(chǔ)位置和使用的模板引擎：(app.js文件中進(jìn)行的設(shè)置)

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

<!DOCTYPE html>
<html>
 <head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body>
  <h1><%= title %></h1>
  <p>Welcome to <%- title %></p>
 </body>
</html>

說(shuō)明：

ejs 的標(biāo)簽系統(tǒng)非常簡(jiǎn)單，它只有以下三種標(biāo)簽：

1. <% code %>：JavaScript 代碼。
2. <%= code %>：顯示替換過(guò) HTML 特殊字符的內(nèi)容。(也就是說(shuō)如果code中有標(biāo)簽，則會(huì)原樣輸出，不會(huì)讓瀏覽器解析)
3. <%- code %>：顯示原始 HTML 內(nèi)容。(如果有a標(biāo)簽，在瀏覽器端這則會(huì)看到一個(gè)超鏈接)
   

路由代碼：

router.get('/', function(req, res, next) {
 res.render('index', { title: "<a >百度 </a>"});
});

// 則會(huì)用title的值去替換ejs中的相應(yīng)的代碼。

則生成的代碼：

<!DOCTYPE html>
<html>
 <head>
  <title>&lt;a href=&#39;http://www.baidu.com&#39;&gt;百度 &lt;/a&gt;</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body>
  <h1>&lt;a href=&#39;http://www.baidu.com&#39;&gt;百度 &lt;/a&gt;</h1>
  <p>Welcome to <a >百度 </a></p>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論