Node.js和Express簡單入門介紹
僅僅入門如何用Node.js和Express搭建一個web服務器,沒有說明太多概念性的東西。
一、 Nodejs簡介
==Node是JavaScript語言的服務器運行環(huán)境。==
所謂“運行環(huán)境”有兩層意思:首先,JavaScript語言通過Node在服務器運行,在這個意義上,Node有點像JavaScript虛擬機;其次,Node提供大量工具庫,使得JavaScript語言與操作系統(tǒng)互動(比如讀寫文件、新建子進程),在這個意義上,Node又是JavaScript的工具庫。
Node內(nèi)部采用Google公司的V8引擎,作為JavaScript語言解釋器;通過自行開發(fā)的libuv庫,調(diào)用操作系統(tǒng)資源。
二、Node.js的下載和安裝
2.1 Node.js下載
node.js官網(wǎng)下載:http://www.dbjr.com.cn/softs/504128.html
官網(wǎng)會根據(jù)你當前的操作系統(tǒng),提供給你最合適的版本去下載。

2.2 安裝
下載成功之后是一個msi文件,雙擊安裝即可。安裝成功后,相應的環(huán)境變量都會自動配置,不需要我們再去手動配置。

一路next就可以安裝成功。
2.3 測試Node.js是否安裝成功
安裝成功之后,可以在window控制臺查看是否安裝成功。
輸入下面的命令查看node的版本。
node -v
直接輸入node然后回車,就可以讓node去執(zhí)行我們的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的運行環(huán)境。
既然不是Javascript應用,為何叫.js呢?因為Node.js是一個Javascript的運行環(huán)境。提到Javascript,大家首先想到的是日常使用的瀏覽器,現(xiàn)代瀏覽器包含了各種組件,包括渲染引擎、JavaScript引擎等,其中Javascript引擎負責解釋執(zhí)行網(wǎng)頁中的Javascript代碼。作為Web前端最重要的語言之一,Javascript一直是前端工程師的專利。不過,Node.js是一個后端的Javascript運行環(huán)境(支持的系統(tǒng)包括Linux、Windows),這意味著你可以編寫系統(tǒng)級或者服務器端的Javascript代碼,交給Node.js來解釋執(zhí)行,
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中幾個全局變量
- global:表示Node所在的全局環(huán)境,類似于瀏覽器的window對象。需要注意的是,如果在瀏覽器中聲明一個全局變量,實際上是聲明了一個全局對象的屬性,比如var x = 1等同于設置window.x = 1,但是Node不是這樣,至少在模塊中不是這樣(REPL環(huán)境的行為與瀏覽器一致)。在模塊文件中,聲明var x = 1,該變量不是global對象的屬性,global.x等于undefined。這是因為模塊的全局變量都是該模塊私有的,其他模塊無法取到。
- process:該對象表示Node所處的當前進程,允許開發(fā)者與該進程互動。
- console:指向Node內(nèi)置的console模塊,提供命令行環(huán)境中的標準輸入、標準輸出功能。
3.4 Node.js中的幾個全局函數(shù)
- setTimeout():用于在指定毫秒之后,運行回調(diào)函數(shù)。實際的調(diào)用間隔,還取決于系統(tǒng)因素。間隔的毫秒數(shù)在1毫秒到2,147,483,647毫秒(約24.8天)之間。如果超過這個范圍,會被自動改為1毫秒。該方法返回一個整數(shù),代表這個新建定時器的編號。
- clearTimeout():用于終止一個setTimeout方法新建的定時器。
- setInterval():用于每隔一定毫秒調(diào)用回調(diào)函數(shù)。由于系統(tǒng)因素,可能無法保證每次調(diào)用之間正好間隔指定的毫秒數(shù),但只會多于這個間隔,而不會少于它。指定的毫秒數(shù)必須是1到2,147,483,647(大約24.8天)之間的整數(shù),如果超過這個范圍,會被自動改為1毫秒。該方法返回一個整數(shù),代表這個新建定時器的編號。
- clearInterval():終止一個用setInterval方法新建的定時器。
- require():用于加載模塊。
- Buffer():用于操作二進制數(shù)據(jù)。
3.5 Node.js的核心模塊
如果只是在服務器運行JavaScript代碼,用處并不大,因為服務器腳本語言已經(jīng)有很多種了。Node.js的用處在于,它**本身**還提供了一系列功能模塊,與操作系統(tǒng)互動。這些核心的功能模塊,不用安裝就可以使用,下面是它們的清單。
- http:提供HTTP服務器功能。
- url:解析URL。
- fs:與文件系統(tǒng)交互。
- querystring:解析URL的查詢字符串。
- child_process:新建子進程。
- util:提供一系列實用小工具。
- path:處理文件路徑。
- crypto:提供加密和解密功能,基本上是對OpenSSL的包裝。
三、搭建web應用
使用Node.js搭建web服務器,一般使用一些框架來幫助完成。
express 是一個開源的node.js項目框架,初學者使用express可以快速的搭建一個Web項目,express中已經(jīng)集成了Web的http服務器創(chuàng)建、請求和文件管理以及Session的處理等功能,所以express是非常適合初學者的入門學習。
3.1 安裝Express框架
使用node.js自帶的包管理器npm安裝。
創(chuàng)建一個項目目錄,Node_Hello。進入該目錄,創(chuàng)建一個package.json文件,文件內(nèi)容如下:
{
"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 創(chuàng)建啟動文件
在上面的項目目錄下,新建一個啟動文件,名字暫叫 ==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網(wǎng)站了。
http://127.0.0.1:8080
四、使用Webstorm搭建Node.js web應用
使用webstorm搭建Node.js應用更加方便。
4.1 下載WebStorm,并安裝
下載Webstorm:http://www.dbjr.com.cn/softs/507325.html
下載完成后,直接安裝即可。
4.2 創(chuàng)建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:存放可執(zhí)行文件(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');
// 生產(chǎn)一個express的實例
var app = express();
// view engine setup
/*
設置 views 文件夾為存放視圖文件的目錄,
即存放模板文件的地方,__dirname 為全局變量,
存儲當前正在執(zhí)行的腳本所在的目錄。
*/
app.set('views', path.join(__dirname, 'views'));
//設置模板引擎為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請求體的中間件。 post請求
app.use(bodyParser.urlencoded({extended: false}));
//加載解析cookie的中間件
app.use(cookieParser());
//設置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');
});
//把app導出。 別的地方就可以通過 require("app") 獲取到這個對象
module.exports = app;
4.4.2 bin/www
#!/usr/bin/env node //表明是node可執(zhí)行文件
/**
* Module dependencies.
*/
//引入我們在app.js中導出的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); //設置端口號
/**
* Create HTTP server.
*/
//創(chuàng)建Http服務器
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
//監(jiān)聽指定的端口
server.listen(port);
//監(jiān)聽error事件。 onError是發(fā)生錯誤的時候的回調(diào)函數(shù)
server.on('error', onError);
//監(jiān)聽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;
/*
生成一個路由實例用來捕獲訪問主頁的GET請求,
導出這個路由并在app.js中通過app.use('/', routes);
加載。這樣,當訪問主頁時,就會調(diào)用res.render('index', { title: '育知同創(chuàng)' });
渲染views/index.ejs模版并顯示到瀏覽器中。
*/
4.4.4 對路由寫法的優(yōu)化
在前面的==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==文件優(yōu)化成: 這樣管理起來就方便很多
module.exports = function (app) {
//一個get請求的路由 http://localhost:3000
app.get("/", function (req, res) {
res.render("index", {title:"育知同創(chuàng)abc"})
});
//又一個請求路由:http://localhost:3000/abc
app.get("/abc", function (req, res) {
res.render("index", {title:"育知同創(chuàng)" + req.path})
});
}
4.4.5 ejs模板
模板引擎(Template Engine)是一個將頁面模板和要顯示的數(shù)據(jù)結合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當于 MVC 中的控制器的話,那模板引擎就相當于 MVC 中的視圖。
模板引擎的功能是將頁面模板和要顯示的數(shù)據(jù)結合起來生成 HTML 頁面。它既可以運 行在服務器端又可以運行在客戶端,大多數(shù)時候它都在服務器端直接被解析為 HTML,解析完成后再傳輸給客戶端,因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以運行在客戶端,即瀏覽器中,典型的代表就是 XSLT,它以 XML 為輸入,在客戶端生成 HTML 頁面。但是由于瀏覽器兼容性問題,XSLT 并不是很流行。目前的主流還是由服務器運行模板引擎。
在 MVC 架構中,模板引擎包含在服務器端。控制器得到用戶請求后,從模型獲取數(shù)據(jù),調(diào)用模板引擎。模板引擎以數(shù)據(jù)和頁面模板為輸入,生成 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 的標簽系統(tǒng)非常簡單,它只有以下三種標簽:
- <% code %>:JavaScript 代碼。
- <%= code %>:顯示替換過 HTML 特殊字符的內(nèi)容。(也就是說如果code中有標簽,則會原樣輸出,不會讓瀏覽器解析)
- <%- code %>:顯示原始 HTML 內(nèi)容。(如果有a標簽,在瀏覽器端這則會看到一個超鏈接)
路由代碼:
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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用?Node-RED對?MQTT?數(shù)據(jù)流處理
本文將介紹使用 Node-RED 連接到 MQTT 服務器,并對 MQTT 數(shù)據(jù)進行過濾和處理后再將其發(fā)送至 MQTT 服務器的完整操作流程。讀者可以快速了解如何使用 Node-RED 對 MQTT 數(shù)據(jù)進行簡單的流處理2022-05-05
nodejs require js文件入口,在package.json中指定默認入口main方法
今天小編就為大家分享一篇nodejs require js文件入口,在package.json中指定默認入口main方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10

