溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用Node Express

發(fā)布時(shí)間：2020-07-27 14:56:26 來源：億速云 閱讀：132 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了如何使用Node Express，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

安裝

npm install --save express

基本使用

//引用express
var express = require('express');

//創(chuàng)建app
var app = express();

//羅列中間件
app.get('/',function( req,res ){
  res.send('index');
});

app.get('/new/:id',function( req,res ){
  res.send('news'+ res.params.id);
});

//開啟服務(wù)器，監(jiān)聽端口
app.listen(3000);

路由

express 路由

//路由小寫和大寫都可以。
var express = require('express');

var app = express();

app.get('/',function( req,res ) {
  res.send('get請(qǐng)求');
});
app.post('/',function( req,res ){  
  res.send('post請(qǐng)求');  
});
app.listen(1221);

get和post請(qǐng)求都可以

app.all('/',function( req,res ){
  res.send('get&post');
});
// 更推薦冒號(hào)寫法
app.get('/student/:id',function( req,res ){});
app.get('/:username/:id',function( req,res ){ res.write(username); res.end(id) });

有字符串正則系統(tǒng)

// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
 res.send('ab?cd');
});

// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
 res.send('ab+cd');
});

// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
 res.send('ab*cd');
});

// 匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');
});

正則表達(dá)式

// 匹配任何路徑中含有 a 的路徑：
app.get(/a/, function(req, res) {
 res.send('/a/');
});
// 路由中的正則表達(dá)式，可以使用分組捕獲，程序中使用req.params[0],req.params[1]來獲取
app.get(/student([\d]{1})\/class([\d]{2})$/,function( req,res ){
  console.log( req.params[0],req.params[1] );
});

表單提交

表單提交到本身頁(yè)面 // restful 路由設(shè)計(jì)

/* 
概念：
  /student 
    get // 讀取學(xué)生信息  // app.get('/student/:id',function(){});
    add // 添加學(xué)生信息   // app.add('/student/:id',function(){});
    delete // 刪除學(xué)生信息 // app.delete('/student/:id',function(){});
問題：web網(wǎng)頁(yè)中，大部分處理get和psot請(qǐng)求處理。
其它的服務(wù)，可以是從軟件，或者app發(fā)出請(qǐng)求。一般restful是提供給app。
*/
       
app.get('/',function( req,res ){
  res.render('form.ejs');
});
app.post('/',function( req,res ){
  res.send('form表單提交');
});

中間件

中間件middleware ，少了一層回調(diào)。
所有的中間件，都將作為http.createServer();的回調(diào)。

中間件特點(diǎn)：

app.js中的代碼，程序執(zhí)行的時(shí)候運(yùn)行，用戶來了之后，并不執(zhí)行。中間件中的代碼塊，每個(gè)用戶訪問的時(shí)候都會(huì)執(zhí)行一次。

具有跳樓現(xiàn)象，從上往下走，匹配一個(gè)就執(zhí)行，而不會(huì)執(zhí)行第二個(gè)。

app.get('/',function( req,res ){ res.send('A') });    
app.get('/',function( req,res ){ res.send('B') });   //執(zhí)行A，而不會(huì)執(zhí)行B

中間件的回調(diào)函數(shù)中有next參數(shù)，表示繼續(xù)執(zhí)行下一個(gè)匹配的中間件。 //利用next(),用兩段小程序，來同時(shí)處理同一個(gè)請(qǐng)求。 把業(yè)務(wù)分開。 next() , 影響MVC。

app.get('/',function( req,res,next ){
  res.send( 'A' );
  next();
})

app.get('/',function( req,res,next ){
  res.send( 'B' );
})

//這兩個(gè)路由，感覺沒關(guān)系，實(shí)際上沖突了。
app.get('/:username/:id',function( req,res ){
  console.log(1);
  res.send('用戶信息'+ req.params[username]);
});

app.get('/admin/login',function( req,res ){
  console.log(2);
  res.send('管理員登陸');
});

解決方法

方法1：
調(diào)整路由上下位置 //利用匹配就有跳樓現(xiàn)象。 express 中 所有的路由 都是中間件,具體的路由往上寫，抽象的往下寫。

app.get('/admin/login',function( req,res ){ 
  console.log(2);
  res.send('管理員登陸');
});

app.get('/:username/:id',function( req,res ){
  console.log(1);
  res.send('用戶信息'+ req.params[username]);
});

方法2： 匹配到最后，要有最終的路由來匹配于它。

//加上next()之后，匹配兩次，已經(jīng)被send()一次，會(huì)報(bào)錯(cuò)。通過數(shù)據(jù)的判斷適當(dāng)加next()

app.get('/:username/:id',function( req,res ){
  
  var username = req.paramse.username;
  //檢索數(shù)據(jù)庫(kù)，如果username不存在，那么才next()
  if( usernma ) {
    console.log(1);
    res.send('用戶信息'+ req.params[username]);
  } else {
    next();
  }

});

app.get('/admin/login',function( req,res ){
  console.log(2);
  res.send('管理員登陸');
});

app.use()

此時(shí)并不會(huì)進(jìn)行任何路由匹配，都是執(zhí)行。一般處理404，和總體的返回編碼和狀態(tài)的使用。

// 多個(gè)路由都能夠匹配
app.use('/admin',function( req,res ){
  console.log(req.originUrl); // '/admin/new'
  console.log(req.baseUrl); // 'admin'
  console.log(req.path); // '/new'
  next();
});
// 任何網(wǎng)址都是 '/' 的拓展
app.use('/',function( req,res ){});
app.use(function( req,res ){}); // 可以不用第一個(gè)參數(shù) 直接就是 '/',就是所有網(wǎng)址了。
app.use(); //增加一些特定功能的便利場(chǎng)所。
// 實(shí)際上app.use(); //基本上都從第三方能得到。 -- 路由順序(落路)
app.use(user);
function user( req,res,next ){   
  var filePath = req.originalUrl;
  fs.readFile('./public/'+filePath,function( err,data ){
    if( err ){
      //文件不存在
      next()
      return ;
  }
    res.send(data.toSting());
  });
}
// 靜態(tài)服務(wù)
app.use(express.static('./public'));

// 路由的上下關(guān)系,很有關(guān)系， 是否匹配第一個(gè)，是否需要next()

// 一般習(xí)慣把靜態(tài)服務(wù)寫在前頭，后面的路由處理，一般不沖突。

 // 返回編碼和狀態(tài)
 app.use(function( req,res,next ){
  
  res.status(200);
  res.set('Content-Type','text/html;charset=utf-8');
  next();

});
//404 
app.use(function( req,res ){
  res.status(404);
  res.send('sorry');
});

render() & send()

大多數(shù)情況下，渲染內(nèi)容用res.render(),將會(huì)根據(jù)views的模板文件進(jìn)行渲染，如果不想使用views文件夾，使用其它名字，

app.set('views','static');  
send(); //自動(dòng)設(shè)置了Content-Type 頭部和200狀態(tài)碼。和 mime類型。 send() 和 end() 一樣。

get & post

get請(qǐng)求的參數(shù)在url中，在原生node中，需要使用url模塊來識(shí)別參數(shù)字符串，在express中，不需要使用url模塊?？梢灾苯邮褂?code>req.query對(duì)象。

post請(qǐng)求在express中不能直接獲得，必須使用body-parser模塊。使用后，將可用req.body得到參數(shù)。但是如果表單中含有文件上傳，那么還是需要使用formidable模塊。

post使用到的第三方模塊：body-parser，formidable

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

// 設(shè)置模板
app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: false }));

// router
app.get('/',function( req,res ){
 res.render('form.ejs');
});

app.post('/',function( req,res ){
 console.log(req.body);
});

靜態(tài)化文件

利用expres.static(root); // root 參數(shù)指的是靜態(tài)資源文件所在的根目錄。

// app.use方法實(shí)際上是將中間件保存在一個(gè)數(shù)組中，注冊(cè)路由時(shí)，依次將數(shù)組的元素取出
app.use(express.static('./static'));
app.use('page',epxress.static('./static')); // page/index.html

模板引擎

和 express 結(jié)合的模板是：jade，ejs
(ejs)[https://www.npmjs.com/package/ejs%5D

var express = require('express');
var app = express();

// 設(shè)置模板引擎，設(shè)置為ejs
app.set('view engine','ejs');

// 路由
app.get('/',function( req,res ){
  //render: 第二個(gè)參數(shù)是，字典。
  res.render('index.ejs',{
    'name': [ting,daie]
  });
});  
app.listen(1221);

對(duì)應(yīng)的模板為：

<ul>
  <%
    for( var i=0; i<name.length; i++ ){
  %>
    <li><%=name[i]%></li>
  <%
    }
  %>
</ul>

默認(rèn)的視圖文件夾，views。如果不想使用默認(rèn)的 app.set('views','./shitu');

看完上述內(nèi)容，是不是對(duì)如何使用Node Express有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手