天天看點
傳回

Nodejs裡面的express的架構

Express的官網

http://expressjs.com/zh-cn/

<1>express 架構

Express是目前最流行的基于Node.js的Web開發架構，可以快速地搭建一個完整功能的網站。

Express上手非常簡單，首先建立一個項目目錄，假定叫做hello-world。

$ mkdir hello-world

進入該目錄，建立一個package.json檔案，内容如下。

{
  "name": "hello-world",
  "description": "hello world test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "4.x"
  }
}

上面代碼定義了項目的名稱、描述、版本等，并且指定需要4.0版本以上的Express。

然後，就可以安裝了。

$ npm install

執行上面的指令以後，在項目根目錄下，建立一個啟動檔案，假定叫做index.js。

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

app.use(express.static(__dirname + '/public'));

app.listen(8080);

然後，運作上面的啟動腳本。

$ node index

現在就可以通路

http://localhost:8080

，它會在浏覽器中打開目前目錄的public子目錄（嚴格來說，是打開public目錄的index.html檔案）。如果public目錄之中有一個圖檔檔案

my_image.png

，那麼可以用

http://localhost:8080/my_image.png

通路該檔案。

你也可以在index.js之中，生成動态網頁。

// index.js

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.listen(3000);

然後，在指令行下運作啟動腳本，就可以在浏覽器中通路項目網站了。

$ node index

上面代碼會在本機的3000端口啟動一個網站，網頁顯示Hello World。

啟動腳本index.js的

app.get

方法，用于指定不同的通路路徑所對應的回調函數，這叫做“路由”（routing）。上面代碼隻指定了根目錄的回調函數，是以隻有一個路由記錄。實際應用中，可能有多個路由記錄。

// index.js

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

app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.get('/customer', function(req, res){
  res.send('customer page');
});
app.get('/admin', function(req, res){
  res.send('admin page');
});

app.listen(3000);

這時，最好就把路由放到一個單獨的檔案中，比如建立一個routes子目錄。

// routes/index.js

module.exports = function (app) {
  app.get('/', function (req, res) {
    res.send('Hello world');
  });
  app.get('/customer', function(req, res){
    res.send('customer page');
  });
  app.get('/admin', function(req, res){
    res.send('admin page');
  });
};

然後，原來的index.js就變成下面這樣。

// index.js
var express = require('express');
var app = express();
var routes = require('./routes')(app);
app.listen(3000);

運作原理

底層：http子產品

Express架構建立在node.js内置的http子產品上。http子產品生成伺服器的原始代碼如下。

var http = require("http");

var app = http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hello world!");
});

app.listen(3000, "localhost");

上面代碼的關鍵是http子產品的createServer方法，表示生成一個HTTP伺服器執行個體。該方法接受一個回調函數，該回調函數的參數，分别為代表HTTP請求和HTTP回應的request對象和response對象。

Express架構的核心是對http子產品的再包裝。上面的代碼用Express改寫如下。

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

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

app.listen(3000);

比較兩段代碼，可以看到它們非常接近。原來是用

http.createServer

方法建立一個app執行個體，現在則是用Express的構造方法，生成一個Epress執行個體。兩者的回調函數都是相同的。Express架構等于在http子產品之上，加了一個中間層。

什麼是中間件

簡單說，中間件（middleware）就是處理HTTP請求的函數。它最大的特點就是，一個中間件處理完，再傳遞給下一個中間件。App執行個體在運作過程中，會調用一系列的中間件。

每個中間件可以從App執行個體，接收三個參數，依次為request對象（代表HTTP請求）、response對象（代表HTTP回應），next回調函數（代表下一個中間件）。每個中間件都可以對HTTP請求（request對象）進行加工，并且決定是否調用next方法，将request對象再傳給下一個中間件。

一個不進行任何操作、隻傳遞request對象的中間件，就是下面這樣。

function uselessMiddleware(req, res, next) {
  next();
}

上面代碼的next就是下一個中間件。如果它帶有參數，則代表抛出一個錯誤，參數為錯誤文本。

function uselessMiddleware(req, res, next) {
  next('出錯了！');
}

抛出錯誤以後，後面的中間件将不再執行，直到發現一個錯誤處理函數為止。

use方法

use是express注冊中間件的方法，它傳回一個函數。下面是一個連續調用兩個中間件的例子。

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  console.log("In comes a " + request.method + " to " + request.url);
  next();
});

app.use(function(request, response) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Hello world!\n");
});

http.createServer(app).listen(1337);

上面代碼使用

app.use

方法，注冊了兩個中間件。收到HTTP請求後，先調用第一個中間件，在控制台輸出一行資訊，然後通過

next

方法，将執行權傳給第二個中間件，輸出HTTP回應。由于第二個中間件沒有調用

next

方法，是以request對象就不再向後傳遞了。

use

方法内部可以對通路路徑進行判斷，據此就能實作簡單的路由，根據不同的請求網址，傳回不同的網頁内容。

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  if (request.url == "/") {
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Welcome to the homepage!\n");
  } else {
    next();
  }
});

app.use(function(request, response, next) {
  if (request.url == "/about") {
    response.writeHead(200, { "Content-Type": "text/plain" });
  } else {
    next();
  }
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

上面代碼通過

request.url

屬性，判斷請求的網址，進而傳回不同的内容。注意，

app.use

方法一共登記了三個中間件，隻要請求路徑比對，就不會将執行權交給下一個中間件。是以，最後一個中間件會傳回404錯誤，即前面的中間件都沒比對請求路徑，找不到所要請求的資源。

除了在回調函數内部判斷請求的網址，use方法也允許将請求網址寫在第一個參數。這代表，隻有請求路徑比對這個參數，後面的中間件才會生效。無疑，這樣寫更加清晰和友善。

app.use('/path', someMiddleware);

上面代碼表示，隻對根目錄的請求，調用某個中間件。

是以，上面的代碼可以寫成下面的樣子。

var express = require("express");
var http = require("http");

var app = express();

app.use("/home", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the homepage!\n");
});

app.use("/about", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the about page!\n");
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

Express的方法

all方法和HTTP動詞方法

針對不同的請求，Express提供了use方法的一些别名。比如，上面代碼也可以用别名的形式來寫。

var express = require("express");
var http = require("http");
var app = express();

app.all("*", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  next();
});

app.get("/", function(request, response) {
  response.end("Welcome to the homepage!");
});

app.get("/about", function(request, response) {
  response.end("Welcome to the about page!");
});

app.get("*", function(request, response) {
  response.end("404!");
});

http.createServer(app).listen(1337);

上面代碼的all方法表示，所有請求都必須通過該中間件，參數中的“*”表示對所有路徑有效。get方法則是隻有GET動詞的HTTP請求通過該中間件，它的第一個參數是請求的路徑。由于get方法的回調函數沒有調用next方法，是以隻要有一個中間件被調用了，後面的中間件就不會再被調用了。

除了get方法以外，Express還提供post、put、delete方法，即HTTP動詞都是Express的方法。

這些方法的第一個參數，都是請求的路徑。除了絕對比對以外，Express允許模式比對。

app.get("/hello/:who", function(req, res) {
  res.end("Hello, " + req.params.who + ".");
});

上面代碼将比對“/hello/alice”網址，網址中的alice将被捕獲，作為req.params.who屬性的值。需要注意的是，捕獲後需要對網址進行檢查，過濾不安全字元，上面的寫法隻是為了示範，生産中不應這樣直接使用使用者提供的值。

如果在模式參數後面加上問号，表示該參數可選。

app.get('/hello/:who?',function(req,res) {
	if(req.params.id) {
    	res.end("Hello, " + req.params.who + ".");
	}
    else {
    	res.send("Hello, Guest.");
	}
});

下面是一些更複雜的模式比對的例子。

app.get('/forum/:fid/thread/:tid', middleware)

// 比對/commits/71dbb9c
// 或/commits/71dbb9c..4c084f9這樣的git格式的網址
app.get(/^\/commits\/(\w+)(?:\.\.(\w+))?$/, function(req, res){
  var from = req.params[0];
  var to = req.params[1] || 'HEAD';
  res.send('commit range ' + from + '..' + to);
});

set方法

set方法用于指定變量的值。

app.set("views", __dirname + "/views");

app.set("view engine", "jade");

上面代碼使用set方法，為系統變量“views”和“view engine”指定值。

response對象

（1）response.redirect方法

response.redirect方法允許網址的重定向。

response.redirect("/hello/anime");
response.redirect("http://www.example.com");
response.redirect(301, "http://www.example.com");

（2）response.sendFile方法

response.sendFile方法用于發送檔案。

response.sendFile("/path/to/anime.mp4");

（3）response.render方法

response.render方法用于渲染網頁模闆。

app.get("/", function(request, response) {
  response.render("index", { message: "Hello World" });
});

上面代碼使用render方法，将message變量傳入index模闆，渲染成HTML網頁。

requst對象

（1）request.ip

request.ip屬性用于獲得HTTP請求的IP位址。

（2）request.files

request.files用于擷取上傳的檔案。

搭建HTTPs伺服器

使用Express搭建HTTPs加密伺服器，也很簡單。

var fs = require('fs');
var options = {
  key: fs.readFileSync('E:/ssl/myserver.key'),
  cert: fs.readFileSync('E:/ssl/myserver.crt'),
  passphrase: '1234'
};

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

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

var server = https.createServer(options, app);
server.listen(8084);
console.log('Server is running on port 8084');

項目開發執行個體

編寫啟動腳本

上一節使用express指令自動建立項目，也可以不使用這個指令，手動建立所有檔案。

先建立一個項目目錄（假定這個目錄叫做demo）。進入該目錄，建立一個package.json檔案，寫入項目的配置資訊。

{
   "name": "demo",
   "description": "My First Express App",
   "version": "0.0.1",
   "dependencies": {
      "express": "3.x"
   }
}

在項目目錄中，建立檔案app.js。項目的代碼就放在這個檔案裡面。

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

上面代碼首先加載express子產品，賦給變量express。然後，生成express執行個體，賦給變量app。

接着，設定express執行個體的參數。

// 設定port變量，意為通路端口
app.set('port', process.env.PORT || 3000);

// 設定views變量，意為視圖存放的目錄
app.set('views', path.join(__dirname, 'views'));

// 設定view engine變量，意為網頁模闆引擎
app.set('view engine', 'jade');

app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);

// 設定靜态檔案目錄，比如本地檔案
// 目錄為demo/public/images，通路
// 網址則顯示為http://localhost:3000/images
app.use(express.static(path.join(__dirname, 'public')));

上面代碼中的set方法用于設定内部變量，use方法用于調用express的中間件。

最後，調用執行個體方法listen，讓其監聽事先設定的端口（3000）。

app.listen(app.get('port'));

這時，運作下面的指令，就可以在浏覽器通路http://127.0.0.1:3000。

node app.js

網頁提示“Cannot GET /”，表示沒有為網站的根路徑指定可以顯示的内容。是以，下一步就是配置路由。

配置路由

所謂“路由”，就是指為不同的通路路徑，指定不同的處理方法。

（1）指定根路徑

在app.js之中，先指定根路徑的處理方法。

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

上面代碼的get方法，表示處理用戶端發出的GET請求。相應的，還有app.post、app.put、app.del（delete是JavaScript保留字，是以改叫del）方法。

get方法的第一個參數是通路路徑，正斜杠（/）就代表根路徑；第二個參數是回調函數，它的req參數表示用戶端發來的HTTP請求，res參數代表發向用戶端的HTTP回應，這兩個參數都是對象。在回調函數内部，使用HTTP回應的send方法，表示向浏覽器發送一個字元串。然後，運作下面的指令。

node app.js

此時，在浏覽器中通路http://127.0.0.1:3000，網頁就會顯示“Hello World”。

如果需要指定HTTP頭資訊，回調函數就必須換一種寫法，要使用setHeader方法與end方法。

app.get('/', function(req, res){
  var body = 'Hello World';
  res.setHeader('Content-Type', 'text/plain');
  res.setHeader('Content-Length', body.length);
  res.end(body);
});

（2）指定特定路徑

上面是處理根目錄的情況，下面再舉一個例子。假定使用者通路/api路徑，希望傳回一個JSON字元串。這時，get可以這樣寫。

app.get('/api', function(request, response) {
   response.send({name:"張三",age:40});
});

上面代碼表示，除了發送字元串，send方法還可以直接發送對象。重新啟動node以後，再通路路徑/api，浏覽器就會顯示一個JSON對象。

{
  "name": "張三",
  "age": 40
}

我們也可以把app.get的回調函數，封裝成子產品。先在routes目錄下面建立一個api.js檔案。

// routes/api.js

exports.index = function (req, res){
  res.json(200, {name:"張三",age:40});
}

然後，在app.js中加載這個子產品。

// app.js

var api = require('./routes/api');
app.get('/api', api.index);

現在通路時，就會顯示與上一次同樣的結果。

如果隻向浏覽器發送簡單的文本資訊，上面的方法已經夠用；但是如果要向浏覽器發送複雜的内容，還是應該使用網頁模闆。

靜态網頁模闆

在項目目錄之中，建立一個子目錄views，用于存放網頁模闆。

假定這個項目有三個路徑：根路徑（/）、自我介紹（/about）和文章（/article）。那麼，app.js可以這樣寫：

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

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/views/index.html');
});

app.get('/about', (req, res) => {
    res.sendFile(__dirname + '/views/about.html');
});

app.get('/article', (req, res) => {
    res.sendFile(__dirname + '/views/article.html');
});

app.listen(3000);

上面代碼表示，三個路徑分别對應views目錄中的三個模闆：index.html、about.html和article.html。另外，向伺服器發送資訊的方法，從send變成了sendfile，後者專門用于發送檔案。

假定index.html的内容如下：

<html>
<head>
   <title>首頁</title>
</head>

<body>
<h1>Express Demo</h1>

<footer>
<p>
   <a href="/" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >首頁</a> - <a href="/about" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >自我介紹</a> - <a href="/article" target="_blank" rel="external nofollow" >文章</a>
</p>
</footer>

</body>
</html>

上面代碼是一個靜态網頁。如果想要展示動态内容，就必須使用動态網頁模闆。

動态網頁模闆

網站真正的魅力在于動态網頁，下面我們來看看，如何制作一個動态網頁的網站。

安裝模闆引擎

Express支援多種模闆引擎，這裡采用Handlebars模闆引擎的伺服器端版本hbs模闆引擎。

先安裝hbs。

npm install hbs --save-dev

上面代碼将hbs子產品，安裝在項目目錄的子目錄node_modules之中。save-dev參數表示，将依賴關系寫入package.json檔案。安裝以後的package.json檔案變成下面這樣：

// package.json檔案

{
  "name": "demo",
  "description": "My First Express App",
  "version": "0.0.1",
  "dependencies": {
    "express": "3.x"
  },
  "devDependencies": {
    "hbs": "~2.3.1"
  }
}

安裝模闆引擎之後，就要改寫app.js。

// app.js檔案

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

// 加載hbs子產品
var hbs = require('hbs');

// 指定模闆檔案的字尾名為html
app.set('view engine', 'html');

// 運作hbs子產品
app.engine('html', hbs.__express);

app.get('/', function (req, res){
	res.render('index');
});

app.get('/about', function(req, res) {
	res.render('about');
});

app.get('/article', function(req, res) {
	res.render('article');
});

上面代碼改用render方法，對網頁模闆進行渲染。render方法的參數就是模闆的檔案名，預設放在子目錄views之中，字尾名已經在前面指定為html，這裡可以省略。是以，res.render(‘index’) 就是指，把子目錄views下面的index.html檔案，交給模闆引擎hbs渲染。

建立資料腳本

渲染是指将資料代入模闆的過程。實際運用中，資料都是儲存在資料庫之中的，這裡為了簡化問題，假定資料儲存在一個腳本檔案中。

在項目目錄中，建立一個檔案blog.js，用于存放資料。blog.js的寫法符合CommonJS規範，使得它可以被require語句加載。

// blog.js檔案

var entries = [
	{"id":1, "title":"第一篇", "body":"正文", "published":"6/2/2013"},
	{"id":2, "title":"第二篇", "body":"正文", "published":"6/3/2013"},
	{"id":3, "title":"第三篇", "body":"正文", "published":"6/4/2013"},
	{"id":4, "title":"第四篇", "body":"正文", "published":"6/5/2013"},
	{"id":5, "title":"第五篇", "body":"正文", "published":"6/10/2013"},
	{"id":6, "title":"第六篇", "body":"正文", "published":"6/12/2013"}
];

exports.getBlogEntries = function (){
   return entries;
}

exports.getBlogEntry = function (id){
   for(var i=0; i < entries.length; i++){
      if(entries[i].id == id) return entries[i];
   }
}

建立網頁模闆

接着，建立模闆檔案index.html。

<!-- views/index.html檔案 -->

<h1>文章清單</h1>

{{#each entries}}
   <p>
      <a href="/article/{{id}}" target="_blank" rel="external nofollow" >{{title}}</a><br/>
      Published: {{published}}
   </p>
{{/each}}

模闆檔案about.html。

<!-- views/about.html檔案 -->

<h1>自我介紹</h1>

<p>正文</p>

模闆檔案article.html。

<!-- views/article.html檔案 -->

<h1>{{blog.title}}</h1>
Published: {{blog.published}}

<p/>

{{blog.body}}

可以看到，上面三個模闆檔案都隻有網頁主體。因為網頁布局是共享的，是以布局的部分可以單獨建立一個檔案layout.html。

<!-- views/layout.html檔案 -->

<html>

<head>
   <title>{{title}}</title>
</head>

<body>

	{{{body}}}

   <footer>
      <p>
         <a href="/" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >首頁</a> - <a href="/about" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >自我介紹</a>
      </p>
   </footer>

</body>
</html>

渲染模闆

最後，改寫app.js檔案。

// app.js檔案

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

var hbs = require('hbs');

// 加載資料子產品
var blogEngine = require('./blog');

app.set('view engine', 'html');
app.engine('html', hbs.__express);
app.use(express.bodyParser());

app.get('/', function(req, res) {
   res.render('index',{title:"最近文章", entries:blogEngine.getBlogEntries()});
});

app.get('/about', function(req, res) {
   res.render('about', {title:"自我介紹"});
});

app.get('/article/:id', function(req, res) {
   var entry = blogEngine.getBlogEntry(req.params.id);
   res.render('article',{title:entry.title, blog:entry});
});

app.listen(3000);

上面代碼中的render方法，現在加入了第二個參數，表示模闆變量綁定的資料。

現在重新開機node伺服器，然後通路http://127.0.0.1:3000。

node app.js

可以看得，模闆已經使用加載的資料渲染成功了。

指定靜态檔案目錄

模闆檔案預設存放在views子目錄。這時，如果要在網頁中加載靜态檔案（比如樣式表、圖檔等），就需要另外指定一個存放靜态檔案的目錄。

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

上面代碼在檔案app.js之中，指定靜态檔案存放的目錄是public。于是，當浏覽器發出非HTML檔案請求時，伺服器端就到public目錄尋找這個檔案。比如，浏覽器發出如下的樣式表請求：

<link href="/bootstrap/css/bootstrap.css" target="_blank" rel="external nofollow"  rel="stylesheet">

伺服器端就到public/bootstrap/css/目錄中尋找bootstrap.css檔案。

Express.Router用法

從Express 4.0開始，路由器功能成了一個單獨的元件

Express.Router

。它好像小型的express應用程式一樣，有自己的use、get、param和route方法。

基本用法

首先，

Express.Router

是一個構造函數，調用後傳回一個路由器執行個體。然後，使用該執行個體的HTTP動詞方法，為不同的通路路徑，指定回調函數；最後，挂載到某個路徑。

var router = express.Router();

router.get('/', function(req, res) {
  res.send('首頁');
});

router.get('/about', function(req, res) {
  res.send('關于');
});

app.use('/', router);

上面代碼先定義了兩個通路路徑，然後将它們挂載到根目錄。如果最後一行改為app.use(‘/app’, router)，則相當于為

/app

和

/app/about

這兩個路徑，指定了回調函數。

這種路由器可以自由挂載的做法，為程式帶來了更大的靈活性，既可以定義多個路由器執行個體，也可以為将同一個路由器執行個體挂載到多個路徑。

router.route方法

router執行個體對象的route方法，可以接受通路路徑作為參數。

var router = express.Router();

router.route('/api')
	.post(function(req, res) {
		// ...
	})
	.get(function(req, res) {
		Bear.find(function(err, bears) {
			if (err) res.send(err);
			res.json(bears);
		});
	});

app.use('/', router);

router中間件

use方法為router對象指定中間件，即在資料正式發給使用者之前，對資料進行處理。下面就是一個中間件的例子。

router.use(function(req, res, next) {
	console.log(req.method, req.url);
	next();
});

上面代碼中，回調函數的next參數，表示接受其他中間件的調用。函數體中的next()，表示将資料傳遞給下一個中間件。

注意，中間件的放置順序很重要，等同于執行順序。而且，中間件必須放在HTTP動詞方法之前，否則不會執行。

對路徑參數的處理

router對象的param方法用于路徑參數的處理，可以

router.param('name', function(req, res, next, name) {
	// 對name進行驗證或其他處理……
	console.log(name);
	req.name = name;
	next();
});

router.get('/hello/:name', function(req, res) {
	res.send('hello ' + req.name + '!');
});

上面代碼中，get方法為通路路徑指定了name參數，param方法則是對name參數進行處理。注意，param方法必須放在HTTP動詞方法之前。

app.route

假定app是Express的執行個體對象，Express 4.0為該對象提供了一個route屬性。app.route實際上是express.Router()的縮寫形式，除了直接挂載到根路徑。是以，對同一個路徑指定get和post方法的回調函數，可以寫成鍊式形式。

app.route('/login')
	.get(function(req, res) {
		res.send('this is the login form');
	})
	.post(function(req, res) {
		console.log('processing');
		res.send('processing the login form!');
	});

上面代碼的這種寫法，顯然非常簡潔清晰。

上傳檔案

首先，在網頁插入上傳檔案的表單。

<form action="/pictures/upload" method="POST" enctype="multipart/form-data">
  Select an image to upload:
  <input type="file" name="image">
  <input type="submit" value="Upload Image">
</form>

然後，伺服器腳本建立指向

/upload

目錄的路由。這時可以安裝multer子產品，它提供了上傳檔案的許多功能。

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

var uploading = multer({
  dest: __dirname + '../public/uploads/',
  // 設定限制，每次最多上傳1個檔案，檔案大小不超過1MB
  limits: {fileSize: 1000000, files:1},
})

router.post('/upload', uploading, function(req, res) {

})

module.exports = router

上面代碼是上傳檔案到本地目錄。下面是上傳到Amazon S3的例子。

首先，在S3上面新增CORS配置檔案。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

上面的配置允許任意電腦向你的bucket發送HTTP請求。

然後，安裝aws-sdk。

$ npm install aws-sdk --save

下面是伺服器腳本。

var express = require('express');
var router = express.Router();
var aws = require('aws-sdk');

router.get('/', function(req, res) {
  res.render('index')
})

var AWS_ACCESS_KEY = 'your_AWS_access_key'
var AWS_SECRET_KEY = 'your_AWS_secret_key'
var S3_BUCKET = 'images_upload'

router.get('/sign', function(req, res) {
  aws.config.update({accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_KEY});

  var s3 = new aws.S3()
  var options = {
    Bucket: S3_BUCKET,
    Key: req.query.file_name,
    Expires: 60,
    ContentType: req.query.file_type,
    ACL: 'public-read'
  }

  s3.getSignedUrl('putObject', options, function(err, data){
    if(err) return res.send('Error with S3')

    res.json({
      signed_request: data,
      url: 'https://s3.amazonaws.com/' + S3_BUCKET + '/' + req.query.file_name
    })
  })
})

module.exports = router

上面代碼中，使用者通路

/sign

路徑，正确登入後，會收到一個JSON對象，裡面是S3傳回的資料和一個暫時用來接收上傳檔案的URL，有效期隻有60秒。

浏覽器代碼如下。

// HTML代碼為
// <br>Please select an image
// <input type="file" id="image">
// <br>
// <img id="preview">

document.getElementById("image").onchange = function() {
  var file = document.getElementById("image").files[0]
  if (!file) return

  sign_request(file, function(response) {
    upload(file, response.signed_request, response.url, function() {
      document.getElementById("preview").src = response.url
    })
  })
}

function sign_request(file, done) {
  var xhr = new XMLHttpRequest()
  xhr.open("GET", "/sign?file_name=" + file.name + "&file_type=" + file.type)

  xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText)
      done(response)
    }
  }
  xhr.send()
}

function upload(file, signed_request, url, done) {
  var xhr = new XMLHttpRequest()
  xhr.open("PUT", signed_request)
  xhr.setRequestHeader('x-amz-acl', 'public-read')
  xhr.onload = function() {
    if (xhr.status === 200) {
      done()
    }
  }

  xhr.send(file)
}

上面代碼首先監聽file控件的change事件，一旦有變化，就先向伺服器要求一個臨時的上傳URL，然後向該URL上傳檔案。

參考連結

  • Raymond Camden, Introduction to Express
  • Christopher Buecheler, Getting Started With Node.js, Express, MongoDB
  • Stephen Sugden, A short guide to Connect Middleware
  • Evan Hahn, Understanding Express.js
  • Chris Sevilleja, Learn to Use the New Router in ExpressJS 4.0
  • Stefan Fidanov, Limitless file uploading to Amazon S3 with Node & Express

<2>nodejs+express

環境配置要求

  1. 安裝Node.js環境，具體方法不做細說，可參考阮一峰的官方網站
  2. 安裝express(都為全局安裝)，npm有時候太慢，可安裝淘寶鏡像cnpm 
npm install express -g
    npm install express-generator -g
  1. 初始化項目 
cd 你的檔案目錄
    express 項目名稱（我設為APIServer）
Nodejs裡面的express的架構

2.JPG

得到的目錄結構如下

Nodejs裡面的express的架構

3.JPG

  • /bin:用來啟動應用（伺服器）
  • /public: 存放靜态資源目錄
  • /routes：路由用于确定應用程式如何響應對特定端點的客戶機請求，包含一個URI（或路徑）和一個特定的 HTTP 請求方法（GET、POST等）。每個路由可以具有一個或多個處理程式函數，這些函數在路由比對時執行
  • /views: 模闆檔案所在目錄 檔案格式為.jade
  • 目錄app.js程式main檔案 這個是伺服器啟動的入口

啟動伺服器

在終端最後的位置輸出了如下兩個指令

install dependencies:
     $ cd APIServer && npm install  //進入項目并安裝環境

    run the app:
     $ DEBUG=apiserver:* npm start //啟動伺服器
  • 啟動伺服器 
npm start
Nodejs裡面的express的架構

4.JPG

+在浏覽器中通路http://localhost:3000/

Nodejs裡面的express的架構

1.png

基本使用

  • 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 app = express();
    ///=======路由資訊 （接口位址）開始 存放在./routes目錄下===========//

    var routes = require('./routes/index');//home page接口
    var users = require('./routes/users'); //使用者接口

    app.use('/', routes); //在app中注冊routes該接口 
    app.use('/users', users);//在app中注冊users接口
    ///=======路由資訊 （接口位址 介紹===========//

    ///=======模闆 開始===========//
    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    ///=======模闆 結束===========//
  • index.js 
var express = require('express');
    var router = express.Router();


    //定義一個get請求 path為根目錄
    /* GET home page. */
    router.get('/', function(req, res, next) {
        res.render('index', { title: 'Express' });
    });

    module.exports = router;

定義一個路由的基本格式為

app.METHOD(PATH, HANDLER)

其中

  • app: express的執行個體
  • METHOD: HTTP 請求方法(get/post之類)。
  • PATH: 伺服器上的路徑。
  • HANDLER: 在路由比對時執行的函數。

簡單實作一個擷取使用者資訊接口

  • 建立一個user.js檔案,/routes/user.js
  • 定義一個User模型 
function User(){
    this.name;
    this.city;
    this.age;
}
module.exports = User;

  • 切換到users.js

    頭部添加

var URL = require('url'); //請求url子產品
var User = require('./user'); //引入user.js

并繼續添加

router.get('/getUserInfo',function(req,res,next){
    var user = new User();
    var params = URL.parse(req.url,true).query;

    if(params.id == '1'){
        user.name = "ligh";
        user.age = "1";
        user.city = "北京市";
    }else{
        user.name = "SPTING";
        user.age = "1";
       user.city = "杭州市";
    }

    var response = {status:1,data:user};
    res.send(JSON.stringify(response));
})

其中

擷取url參數 依賴于url子產品 使用前需要使用  require('url')
var params = URL.parse(req.url, true).query;
Nodejs裡面的express的架構

5.JPG

由于users.js路由資訊已經在app.js注冊

停止伺服器 重新start伺服器即可直接通路

  • 調用方式

    http://localhost:3000/users/getUserInfo?id=1

    或者

    http://localhost:3000/users/getUserInfo?id=2

Nodejs裡面的express的架構

6.JPG

Nodejs裡面的express的架構

7.JPG

注意我們通路的方式為users/getUserInfo?id=1 而不是基于根

原因是我們在app.js注冊方式為app.use('/users', users);

我們可以利用這種方式 開發子產品功能 比如 你有另外一個子產品為msg

我們注冊為：app.use('/msgs', msgs);

調用方式為

http://localhost:3000/msgs/getUserMsgs?id=1

<3>什麼是express架構

express 架構是什麼

Express 是一個基于 Node.js 平台的極簡、靈活的 web 應用開發架構，它提供一系列強大的特性，幫助你建立各種 Web 和移動裝置應用。

Express 有什麼用 優勢

允許設立中間件響應HTTP請求

定義了用于執行基于HTTP方法和URL不同動作的路由表

允許動态渲染基于參數傳遞給模闆HTML頁面

Express 怎麼用:

官網

阮一峰Express架構

Nodejs初階之express

node.js基于express架構搭建一個簡單的注冊登入Web功能

Node.js利用Express架構搭建小型網站(上)

Node.js利用Express架構搭建小型網站(下)

Node.js Express 架構

express.router()

node.js express 4.x Router學習心得

node.js module初步了解

exports 和 module.exports 的差別

nodeJs學習筆記 module.exports 和 exports

前端環境 NodeJS裡面的express架構
上一篇: 驕傲的代價_JAVA
下一篇: linux df指令功能,Linux df指令使用執行個體彙總

繼續閱讀