搭建環(huán)境

善右網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,善右網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為善右上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的善右做網(wǎng)站的公司定做！

1.安裝Express

按鍵：Windows+R=>輸入cmd，打開命令行，輸入

npm install -g express@3

我們需要用全局模式安裝Express,因?yàn)橹挥羞@樣，我們才能在命令行中使用它

注意：這里我只選用Express 3.x版本，要是你對(duì)Express3x版本熟悉了的話，你只需看一下Migrating from 3.x to 4.x 的文檔即可過(guò)渡到Express 4.x

2.新建一個(gè)工程

繼續(xù)打開命令行，輸入

express -e murenziwei

注意：Express 3.x中使用ejs時(shí)不再是-t ejs,而是-e,可以輸入express -h查看

繼續(xù)輸入：（路徑切換到文件夾murenziwei）

cd murenziwei

繼續(xù)輸入：（安裝所需模塊）

npm install

如圖所示

安裝成功后輸入：

node app

在瀏覽器上訪問ocalhost:3000，如圖以下：

3.項(xiàng)目結(jié)構(gòu)

我們回頭看看生成的項(xiàng)目目錄里面都有什么，打開我們的murenziwei文件夾，如圖

• node_modules：存放package.json中安裝的模塊，當(dāng)你在package.json中添加依賴的模塊并安裝后，該模塊會(huì)存放在這個(gè)文件夾
• public：存放圖片/樣式/腳本等文件
• routes：存放路由文件
• views：存放視圖文件，或者說(shuō)是模板文件
• app.js：?jiǎn)?dòng)文件，或者說(shuō)入口文件
• package.json：存儲(chǔ)項(xiàng)目的信息及模塊依賴，當(dāng)在dependencies中添加依賴的模塊時(shí)，運(yùn)行npm install，npm會(huì)檢查當(dāng)前目錄下的package.json，并自動(dòng)安裝所有指定的模塊
• package-lock.json：記錄整個(gè)node_modules文件夾的樹狀結(jié)構(gòu)，加快安裝模塊的速度
  

讓我們來(lái)看一看，打開app.js，究竟是什么代碼組成？

/*

 Module dependencies.

 */

var express = require('express');

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

var user = require('./routes/user');

var http = require('http');

var path = require('path');

var app = express();


// all environments

app.set('port', process.env.PORT || 3000);

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

app.use(express.favicon());

app.use(express.logger('dev'));

app.use(express.json());

app.use(express.urlencoded());

app.use(express.methodOverride());

app.use(app.router);

app.use(express.static(path.join(__dirname, 'public')));
 

// development only

if ('development' == app.get('env')) {

 app.use(express.errorHandler());

}


app.get('/', routes.index);

app.get('/users', user.list);

 

http.createServer(app).listen(app.get('port'), function(){

 console.log('Express server listening on port ' + app.get('port'));

});　　

這里我們通過(guò)require()加載了express，http，path模塊，還有routes文件夾下的index.js和user.js

1.app.set('port', process.env.PORT || 3000)：設(shè)置端口為process.env.PORT或者3000；

2.app.set('views', path.join(__dirname, 'views'))：設(shè)置views文件夾為存放視圖文件的目錄，即存放模板文件的地方，__dirname為全局變量，存儲(chǔ)當(dāng)前正在執(zhí)行的js所在的目錄；

3.app.set('view engine','ejs')：設(shè)置視圖模塊引擎為ejs

4.app.use(express.favicon())：connect內(nèi)建的中間件，使用默認(rèn)的favicon圖標(biāo)，如果想使用自己的圖標(biāo)，需改為app.use(express.favicon(__dirname+"/public/images/favicon.ico"))，這里我們把自定義的favicon.icon放到/public/images文件夾下

5.app.use(express.logger('dev'))：connect內(nèi)建的中間件，在開發(fā)環(huán)境下使用，在終端顯示簡(jiǎn)單的日志，例如在啟動(dòng)app.js后訪問localhost:3000，終端會(huì)輸出：

如果沒有這一行代碼，不管你怎么刷新頁(yè)面，終端都只有一行Express sever listening on port 3000

6.app.use(express.json());

app.use(urlencoded());

用來(lái)解析請(qǐng)求體，支持application/json，application/x-www-form-urlencoded

7.app.use(express.methodOverride())：connect內(nèi)建的中間件，可以協(xié)助處理POST請(qǐng)求，偽裝成 PUT，DELETE和其它HTTP方法

8.app.use(app.router)：調(diào)用路由解析的規(guī)則

9.app.use(express.static(path.join(__dirname, 'public')))：connect內(nèi)創(chuàng)建的中間件，將根目錄下的public文件夾設(shè)置為存放images，css，js等靜態(tài)文件的目錄

if ('development' == app.get('env')) {
 app.use(express.errorHandler());
}

此段代碼可理解為：配置開發(fā)環(huán)境下的錯(cuò)誤處理，輸出錯(cuò)誤信息

10.app.get('/', routes.index)：路由控制器，如果用戶訪問/（主頁(yè)），則由routes.index來(lái)處理，routes/index.js的內(nèi)容如下：

exports.index = function(req, res){
 res.render('index', { title: 'Express' });
};

通過(guò)exports.index導(dǎo)出index函數(shù)接口，app.get('/',routes.index)相當(dāng)于：

app.get("/",function(res,rep){

res.render("index",{title:"Express"});

})

解釋一下上行的res.render("index",{title:"Express"})：使用ejs模板引擎解析views/index.ejs（因?yàn)槲覀冎巴ㄟ^(guò)app.set("views",__dirname+"/views")設(shè)置了模板文件默認(rèn)存儲(chǔ)在views文件夾下），并傳入一個(gè)對(duì)象，這個(gè)對(duì)象只有一個(gè)title屬新，它的值為字符串Express，即用字符串Express替換views/index.ejs中所有的title變量，這就是我們所說(shuō)的渲染視圖，或者說(shuō)渲染模板。

11.

http.createServer(app).listen(app.get('port'), function(){
 console.log('Express server listening on port ' + app.get('port'));
});

這段代碼可以這樣理解：創(chuàng)建http服務(wù)器并監(jiān)聽3000端口，創(chuàng)建成功后，終端顯示如下

然后我們就可以在瀏覽器中訪問localhost:3000了

最后總結(jié)一下我所講的知識(shí)點(diǎn)：如何創(chuàng)建一個(gè)node項(xiàng)目并啟動(dòng)它，了解了項(xiàng)目的大體結(jié)構(gòu)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)標(biāo)題：詳解如何使用node.js的開發(fā)框架express創(chuàng)建一個(gè)web應(yīng)用
標(biāo)題來(lái)源：http://www.chinadenli.net/article4/jogcoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、軟件開發(fā)、網(wǎng)站建設(shè)、小程序開發(fā)、全網(wǎng)營(yíng)銷推廣、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)