僅僅入門如何用Node.js和Express搭建一個web服務器，沒有說明太多概念性的東西。
一、 Nodejs簡介
==Node是JavaScript語言的服務器運行環境。==
所謂“運行環境”有兩層意思：首先，JavaScript語言通過Node在服務器運行，在這個意義上，Node有點像JavaScript虛擬機；其次，Node提供大量工具庫，使得JavaScript語言與操作系統互動（比如讀寫文件、新建子進程），在這個意義上，Node又是JavaScript的工具庫。
Node內部采用Google公司的V8引擎，作為JavaScript語言解釋器；通過自行開發的libuv庫，調用操作系統資源。
二、Node.js的下載和安裝
2.1 Node.js下載
node.js官網下載：//m.survivalescaperooms.com/softs/504128.html
官網會根據你當前的操作系統，提供給你最合適的版本去下載。
2.2 安裝
下載成功之后是一個msi文件，雙擊安裝即可。安裝成功后，相應的環境變量都會自動配置，不需要我們再去手動配置。
一路next就可以安裝成功。
2.3 測試Node.js是否安裝成功
安裝成功之后，可以在window控制臺查看是否安裝成功。
輸入下面的命令查看node的版本。
node -v
直接輸入node然后回車，就可以讓node去執行我們的js代碼了。
node
2.4 使用Node.js運行JavaScript代碼
新建一個nodeproject目錄，新建一個js文件。01_hello.js
var num1 = 10;var num2 = 20;console.log(num1 + num2);
在windows控制臺中，切換目錄到js文件所在目錄。然后輸入
node 01_hello.js
三、Node.js中的一些基本概念澄清
3.1 Node.js不是JS應用、而是JS運行平臺
看到Node.js這個名字，初學者可能會誤以為這是一個Javascript應用，事實上，Node.js采用C++語言編寫而成，是一個Javascript的運行環境。
既然不是Javascript應用，為何叫.js呢？因為Node.js是一個Javascript的運行環境。提到Javascript，大家首先想到的是日常使用的瀏覽器，現代瀏覽器包含了各種組件，包括渲染引擎、JavaScript引擎等，其中Javascript引擎負責解釋執行網頁中的Javascript代碼。作為Web前端最重要的語言之一，Javascript一直是前端工程師的專利。不過，Node.js是一個后端的Javascript運行環境（支持的系統包括Linux、Windows），這意味著你可以編寫系統級或者服務器端的Javascript代碼，交給Node.js來解釋執行，
3.2 Node.js與JavaScript的關系
JavaScript包括3個部分：ECMAScript-262、BOM、DOM。BOM與瀏覽器相關，DOM和HTML頁面相關。Node.js中只是包括了ECMAScript-262。所以我們以前的一些關于BOM的操作和DOM的操作都是基于瀏覽器端運行的，在Node.js中是無法使用的。
3.3 Node.js中幾個全局變量
3.4 Node.js中的幾個全局函數
3.5 Node.js的核心模塊
如果只是在服務器運行JavaScript代碼，用處并不大，因為服務器腳本語言已經有很多種了。Node.js的用處在于，它**本身**還提供了一系列功能模塊，與操作系統互動。這些核心的功能模塊，不用安裝就可以使用，下面是它們的清單。
三、搭建web應用
使用Node.js搭建web服務器，一般使用一些框架來幫助完成。
express 是一個開源的node.js項目框架，初學者使用express可以快速的搭建一個Web項目，express中已經集成了Web的http服務器創建、請求和文件管理以及Session的處理等功能，所以express是非常適合初學者的入門學習。
3.1 安裝Express框架
使用node.js自帶的包管理器npm安裝。
創建一個項目目錄，Node_Hello。進入該目錄，創建一個package.json文件，文件內容如下：
{ "name": "Node_Hello", "description": "nodejs hello world app", "version": "0.0.1", "private": true, "dependencies": { "express": "4.x" }}上面代碼定義了項目的名稱、描述、版本等，并且指定需要4.0版本以上的Express。
==從控制臺首先進入剛才的項目目錄==，然后輸入如下命令，則會開始下載Express。
npm install
下載完成
3.2 創建啟動文件
在上面的項目目錄下，新建一個啟動文件，名字暫叫 ==index.js== 。書寫如下代碼：
var express = require('express');var app = express();app.get('/', function (req, res) { res.send('<h1>你好，這是我們的第一個nodejs項目</h1>');});app.listen(8080);3.3 運行index.js文件
node index.js
3.4 使用瀏覽器訪問
在瀏覽器輸入下面的地址就可以訪問我們剛剛搭建的web網站了。
http://127.0.0.1:8080
四、使用Webstorm搭建Node.js web應用
使用webstorm搭建Node.js應用更加方便。
4.1 下載WebStorm，并安裝
下載Webstorm：//m.survivalescaperooms.com/softs/507325.html
下載完成后，直接安裝即可。
4.2 創建Node + Express應用
4.3 Project目錄結構
app.js：啟動文件，或者說入口文件
package.json：存儲著工程的信息及模塊依賴，當在 dependencies 中添加依賴的模塊時，運行 npm install ，npm 會檢查當前目錄下的 package.json，并自動安裝所有指定的模塊
node_modules：存放 package.json 中安裝的模塊，當你在 package.json 添加依賴的模塊并安裝后，存放在這個文件夾下
public：存放 image、css、js 等文件
routes：存放路由文件
views：存放視圖文件或者說模版文件
bin：存放可執行文件(www)
4.4 各個主要文件的說明
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');// 生產一個express的實例var app = express();// view engine setup/*設置 views 文件夾為存放視圖文件的目錄,即存放模板文件的地方,__dirname 為全局變量,存儲當前正在執行的腳本所在的目錄。 */app.set('views', path.join(__dirname, 'views'));//設置模板引擎為ejsapp.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請求體的中間件。 post請求app.use(bodyParser.urlencoded({extended: false}));//加載解析cookie的中間件app.use(cookieParser());//設置public文件夾為放置靜態文件的目錄app.use(express.static(path.join(__dirname, 'public')));// 路由控制器。app.use('/', index); // http://localhost:3000app.use('/users', users); //http://localhost:3000/users// catch 404 and forward to error handlerapp.use(function (req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err);});// error handlerapp.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');});//把app導出。 別的地方就可以通過 require("app") 獲取到這個對象module.exports = app;4.4.2 bin/www
#!/usr/bin/env node //表明是node可執行文件/** * Module dependencies. *///引入我們在app.js中導出的app模塊var app = require('../app');//引入debuger模塊，打印調試日志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); //設置端口號/** * Create HTTP server. *///創建Http服務器var server = http.createServer(app);/** * Listen on provided port, on all network interfaces. *///監聽指定的端口server.listen(port);//監聽error事件。 onError是發生錯誤的時候的回調函數server.on('error', onError);//監聽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: '育知同創' });});module.exports = router;/* 生成一個路由實例用來捕獲訪問主頁的GET請求， 導出這個路由并在app.js中通過app.use('/', routes); 加載。這樣，當訪問主頁時，就會調用res.render('index', { title: '育知同創' }); 渲染views/index.ejs模版并顯示到瀏覽器中。 */4.4.4 對路由寫法的優化
在前面的==app.js中==，每個模板都有添加一次路由比較麻煩，其實應該把添加路由的事情專門交給index.js來做。也就是可以把多個路由放在一個路由文件中。
//加載路由文件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==文件優化成： 這樣管理起來就方便很多
module.exports = function (app) { //一個get請求的路由 http://localhost:3000 app.get("/", function (req, res) { res.render("index", {title:"育知同創abc"}) }); //又一個請求路由：http://localhost:3000/abc app.get("/abc", function (req, res) { res.render("index", {title:"育知同創" + req.path}) });}4.4.5 ejs模板
模板引擎（Template Engine）是一個將頁面模板和要顯示的數據結合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當于 MVC 中的控制器的話，那模板引擎就相當于 MVC 中的視圖。
模板引擎的功能是將頁面模板和要顯示的數據結合起來生成 HTML 頁面。它既可以運 行在服務器端又可以運行在客戶端，大多數時候它都在服務器端直接被解析為 HTML，解析完成后再傳輸給客戶端，因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以運行在客戶端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶端生成 HTML 頁面。但是由于瀏覽器兼容性問題，XSLT 并不是很流行。目前的主流還是由服務器運行模板引擎。
在 MVC 架構中，模板引擎包含在服務器端。控制器得到用戶請求后，從模型獲取數據，調用模板引擎。模板引擎以數據和頁面模板為輸入，生成 HTML 頁面，然后返回給控制器，由控制器交回客戶端。
==ejs 是模板引擎的一種，它使用起來十分簡單，而且與 express 集成良好。==
我們通過以下兩行代碼設置了模板文件的存儲位置和使用的模板引擎：(app.js文件中進行的設置)
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>
說明：
ejs 的標簽系統非常簡單，它只有以下三種標簽：
路由代碼：
router.get('/', function(req, res, next) { res.render('index', { title: "<a >百度 </a>"});});// 則會用title的值去替換ejs中的相應的代碼。則生成的代碼：
<!DOCTYPE html><html> <head> <title><a href='http://www.baidu.com'>百度 </a></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><a href='http://www.baidu.com'>百度 </a></h1> <p>Welcome to <a >百度 </a></p> </body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
