express web的一款mvc框架

express

express相關的網站
*http://expressjs.com/
*http://www.expressjs.com.cn/
*https://github.com/pugjs/pug
*https://pug.bootcss.com/api/g...css

web開發有這麼經常使用的四款mvc (model(數據層) view(視圖層) controller(控制層))框架,咱們今天說一下express

*express
*koa
*阿里的egg框架
*thinkjshtml

express()

Express 是一個自身功能極簡,徹底是由路由和中間件構成一個的 web 開發框架node

安裝

建立一個目錄git

$ mkdir myapp
$ cd myapp

經過 npm init 命令爲你的應用建立一個 package.json 文件。github

$ npm init

而後須要咱們本身在目錄下建立一個app.js 文件
接下來安裝 Express 並將其保存到依賴列表中:web

$ npm install express --save

Hello world 實例

app.js

var express = require('express');//引入模塊
var app = express();//調用函數

app.get('/', function (req, res) {
  res.send('Hello World!');
});//請求Hello World!

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});  //啓動

運行下面命令express

$ node app.js

而後在瀏覽器中打開 http://localhost:3000/ 並查看輸出結果。npm

express 應用生成器

經過應用生成器工具 express 能夠快速建立一個應用的腳手架。
命令行安裝json

$ npm install express-generator -g

在當前工做目錄下建立一個命名爲 myapp1 的應用。(和myapp同級)api

$ express myapp

安裝依賴包:

$ cd myapp 
$ npm install

啓動這個應用(MacOS 或 Linux 平臺):

$ DEBUG=myapp npm start

Windows 平臺使用以下命令:

set DEBUG=myapp & npm start

而後在瀏覽器中打開 http://localhost:3000/ 網址就能夠看到這個應用了

express路由

路由是指如何定義應用的端點(URIs)以及如何響應客戶端的請求

咱們能夠在routes這個文件夾下建立一個文件order.js來詳細的說一下路由的用法。
order.js

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

router.get('/', function(req, res, next) {
  res.render('order',{msg:'個人訂單'});
});
router.get('/list', function(req, res, next) {
  res.send('訂單列表');
});


module.exports = router;

app.js

var order = require('./routes/order');//引入roder.js
app.use('/order', order);

Express 模板引擎(本博客開頭有網址關於 pug(jade)的)

模板引擎有這麼幾類pug(jade) ejs handlerbars(擴展模塊)
須要在應用中進行以下設置才能讓 Express 渲染模板文件:
*views, 放模板文件的目錄,好比: app.set('views', './views')
*view engine, 模板引擎,好比: app.set('view engine', 'jade')

而後安裝相應的模板引擎 npm 軟件包。

$ npm install jade --save
$ npm install ejs --save

須要那種就在app.set('view engine', 'jade')裏將'jade'改爲那種。
在 views 目錄下生成名爲 order.jade 的 Jade 模板文件,內容以下:

doctype html
html
  head
    title 訂單
  body
    h1 #{msg}

而後使用路由渲染它:

router.get('/',function(req,res,nest){
    res.render('orders',{msg:'訂單首頁'})
})

Express 託管靜態文件

經過 Express 內置的 express.static 能夠方便地託管靜態文件,例如圖片、CSS、JavaScript 文件等。

將靜態資源文件所在的目錄做爲參數傳遞給 express.static 中間件就能夠提供靜態資源文件的訪問了。例如,假設在 public 目錄放置了圖片、CSS 和 JavaScript 文件,你就能夠:

app.use(express.static('public'));

若是你的靜態資源存放在多個目錄下面,你能夠屢次調用 express.static 中間件:

app.use(express.static('public'));
app.use(express.static('files'));

你就能夠經過帶有 「/static」 前綴的地址來訪問 public 目錄下面的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

中間件

中間件(Middleware) 是一個函數,它能夠訪問請求對象(request object (req)), 響應對象(response object (res)), 和 web 應用中處於請求-響應循環流程中的中間件,通常被命名爲 next 的變量。

中間件的功能包括:

*執行任何代碼。
*修改請求和響應對象。
*終結請求-響應循環。
*調

中間件種類:

*應用級中間件
*路由級中間件
*錯誤處理中間件
*內置中間件
*第三方中間件

應用級中間件

應用級中間件綁定到 app 對象 使用 app.use() 和 app.METHOD(), 其中, METHOD 是須要處理的 HTTP 請求的方法,例如 GET, PUT, POST 等等,所有小寫。例如:

var app = express();

// 沒有掛載路徑的中間件,應用的每一個請求都會執行該中間件
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 掛載至 /user/:id 的中間件,任何指向 /user/:id 的請求都會執行它
app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 路由和句柄函數(中間件系統),處理指向 /user/:id 的 GET 請求
app.get('/user/:id', function (req, res, next) {
  res.send('USER');
});

在下面的例子中,爲指向 /user/:id 的 GET 請求定義了兩個路由。第二個路由雖然不會帶來任何問題,但卻永遠不會被調用,由於第一個路由已經終止了請求-響應循環

// 一箇中間件棧,處理指向 /user/:id 的 GET 請求
app.get('/user/:id', function (req, res, next) {
  console.log('ID:', req.params.id);
  next();
}, function (req, res, next) {
  res.send('User Info');
});

// 處理 /user/:id, 打印出用戶 id
app.get('/user/:id', function (req, res, next) {
  res.end(req.params.id);
});

若是須要在中間件棧中跳過剩餘中間件,調用 next('route') 方法將控制權交給下一個路由。 注意: next('route') 只對使用 app.VERB() 或 router.VERB() 加載的中間件有效。

路由級中間件

路由級中間件和應用級中間件同樣,只是它綁定的對象爲 express.Router()。

var router = express.Router();

路由級使用 router.use() 或 router.VERB() 加載。

var app = express();
var router = express.Router();

// 沒有掛載路徑的中間件,經過該路由的每一個請求都會執行該中間件
router.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 一箇中間件棧,顯示任何指向 /user/:id 的 HTTP 請求的信息
router.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 一箇中間件棧,處理指向 /user/:id 的 GET 請求
router.get('/user/:id', function (req, res, next) {
  // 若是 user id 爲 0, 跳到下一個路由
  if (req.params.id == 0) next('route');
  // 負責將控制權交給棧中下一個中間件
  else next(); //
}, function (req, res, next) {
  // 渲染常規頁面
  res.render('regular');
});

// 處理 /user/:id, 渲染一個特殊頁面
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id);
  res.render('special');
});

// 將路由掛載至應用
app.use('/', router);
錯誤處理中間件

錯誤處理中間件和其餘中間件定義相似,只是要使用 4 個參數,而不是 3 個,其簽名以下: (err, req, res, next)。

app.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});
內置中間件

express.static(root, [options])

express.static 是 Express 惟一內置的中間件。它基於 serve-static,負責在 Express 應用中提託管靜態資源。

參數 root 指提供靜態資源的根目錄。
下面的例子使用了 express.static 中間件,其中的 options 對象通過了精心的設計。

var options = {
  dotfiles: 'ignore',
  etag: false,
  extensions: ['htm', 'html'],
  index: false,
  maxAge: '1d',
  redirect: false,
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now());
  }
}

app.use(express.static('public', options));
第三方中間件

經過使用第三方中間件從而爲 Express 應用增長更多功能。

安裝所需功能的 node 模塊,並在應用中加載,能夠在應用級加載,也能夠在路由級加載。

進程管理器

在編寫程序時,咱們發現,每次更改文件以後,都須要在命令行內中止當前的服務,而後輸入 npm start ,很麻煩。咱們須要一款自動刷新的工具

pm2

安裝:

npm install pm2 -gd

啓動

pm2 start ./bin/www --watch
PS D:\node.js\code\0505\myapp2> pm2 start ./bin/www --watch
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ user   │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼────────┼──────────┤
│ www      │ 0  │ fork │ 17480 │ online │ 0       │ 0s     │ 0%  │ 24.1 MB   │ lenovo │ enabled  │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴────────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app

當顯示 status 爲 online 時,說明程序啓動成功

如今能夠打開 http://localhost:3000 就能夠看到運行的程序了

中止應用:

pm2 stop 0

重啓

pm2 restart 0

顯示程序信息

pm2 show 0

刪除程序

pm2 delete 0

查看程序列表

pm2 list

這就是一些express的基本內容,喜歡的點個贊再走唄。

相關文章
相關標籤/搜索