Express 介绍

Express是一个最小的,灵活的Node.js Web应用程序框架,它提供了一套强大的功能来开发Web和移动应用程序。 它有助于基于Node Web应用程序的快速开发。下面是一些Express框架的核心功能:

  • 允许设立中间件响应HTTP请求

  • 定义了用于执行基于HTTP方法和URL不同动作的路由表

  • 允许动态渲染基于参数传递给模板HTML页面

安装Express

首先,安装Express 框架全局使用NPM,以便它可以被用来使用Node终端创建Web应用程序。

$ npm install express --save 

上面的命令在本地node_modules目录保存安装,并创建一个目录express在node_modules里边。还有,应该使用express安装以下几个重要的模块:

  • body-parser - 这是一个Node.js中间件处理JSON,Raw,文本和URL编码的表单数据

  • cookie-parser - 解析Cookie头和填充req.cookies通过cookie名字键控对象

  • multer - 这是一个Node.js的中间件处理multipart/form-data

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Hello world 示例

下面是一个非常基本的Express应用程序,它会启动服务器,并侦听端口3000等待连接。这个应用程序使用"Hello World! "回应!为请求网页。 对于所有其他路径,这将响应一个404表示未找到。

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

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

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

保存上面的代码中的一个文件名为server.js,并用以下命令运行它。

$ node server.js

你会看到以下的输出:

Example app listening at http://0.0.0.0:8081

在任何浏览器中打开http://127.0.0.1:8081/,看看下面的结果。

Request & Response

Express应用程序利用了一个回调函数,它的参数是request和response对象。

app.get('/', function (req, res) {
   // --
})

您可以查看两个对象更详细的信息:

  • Request对象 - 请求对象表示HTTP请求和具有用于请求查询字符串,参数,主体,HTTP报头,等等的属性。

  • Response对象 - 响应对象表示HTTP响应Express应用程序发送时,它得到一个HTTP请求。

您可以打印提供有关HTTP请求和响应,包括 cookies, sessions, URL 等信息req和res对象

基本的路由

我们已经看到它服务于网页的HTTP请求的基本应用。 路由指的是确定应用程序如何响应客户机请求到特定端点,这是一个URI(或路径)和特定的HTTP请求方法(GET,POST等)。

我们将扩大之前的Hello World程序添加功能,可以处理更多类型的HTTP请求。

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

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

保存上面的代码中的一个文件名为server.js,并用以下命令运行它。

$ node server.js

你会看到以下的输出:

Example app listening at http://0.0.0.0:8081

现在,你可以在http://127.0.0.1:8081尝试不同的请求看到server.js生成的输出。以下是几个屏幕显示为不同的URL不同的响应。

屏幕再次显示 http://127.0.0.1:8081/list_user

屏幕再次显示 http://127.0.0.1:8081/abcd

屏幕再次显示 http://127.0.0.1:8081/abcdefg

提供静态文件服务

Express提供了内置的中间件express.static用于处理静态文件,如图像,CSS,JavaScript等。

只需要在那里把你的静态资源,到express.static中间件开始直接服务于文件传递目录的名称。例如,如果把图片,CSS和JavaScript文件在指定的目录public,你可以这样做:

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

我们将继续添加几张图片到public/images子目录,如下所示:

node_modules
server.js
public/
public/images
public/images/logo.png

让我们修改“Hello Word”应用程序以添加处理静态文件的功能。

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

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

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

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

保存上面的代码中的一个文件名为server.js,并用以下命令运行它。

$ node server.js

GET 方法

下面是一个简单的例子,通过使用HTML表单使用GET方法传递两个值。我们将使用server.js路由器里面  process_get  来处理该输入。

<html>
<body>
<form action="http://127.0.0.1:8081/process_get" method="GET">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

让我们保存上面的代码index.html,并修改server.js处理首页请示以及输入HTML表单发送。

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

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

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

app.get('/process_get', function (req, res) {

   // Prepare output in JSON format
   response = {
       first_name:req.query.first_name,
       last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

现在使用 http://127.0.0.1:8081/index.html 访问HTML文档将产生以下表单:


First Name:
Last Name:

现在,您可以输入名字和姓氏,然后单击提交按钮查看结果,它应该给结果如下:

{"first_name":"John","last_name":"Paul"}

POST 方法

下面是一个简单的例子,通过使用HTML表单POST方法提交两个值。我们将使用 process_get 路由器里面server.js来处理该输入。

<html>
<body>
<form action="http://127.0.0.1:8081/process_post" method="POST">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

让我们保存上面index.html,并修改server.js处理首页要求以及输入的HTML表单发送。

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

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

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

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

app.post('/process_post', urlencodedParser, function (req, res) {

   // Prepare output in JSON format
   response = {
       first_name:req.body.first_name,
       last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

现在访问HTML文档使用 http://127.0.0.1:8081/index.html 将产生以下表单:


First Name:
Last Name:

现在,可以输入名字和姓氏,然后单击提交按钮查看结果,它应该给结果如下:

{"first_name":"John","last_name":"Paul"}

File 上传

下面的HTML代码创建一个文件上传表单。这种形式的方法属性设置为POST,以及enctype属性设置为 multipart/form-data

<html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form action="http://127.0.0.1:8081/file_upload" method="POST"
      enctype="multipart/form-data">
<input type="file" name="file" size="50" />
<br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>

让我们保存上面index.html,并修改server.js处理首页请求以及文件上传。

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

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

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

app.post('/file_upload', function (req, res) {

   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);

   var file = __dirname + "/" + req.files.file.name;
   fs.readFile( req.files.file.path, function (err, data) {
        fs.writeFile(file, data, function (err) {
         if( err ){
              console.log( err );
         }else{
               response = {
                   message:'File uploaded successfully',
                   filename:req.files.file.name
              };
          }
          console.log( response );
          res.end( JSON.stringify( response ) );
       });
   });
})

var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

现在访问HTML文档使用 http://127.0.0.1:8081/index.html 将产生以下表单:

File Upload:
Select a file to upload: 

NOTE: This is just dummy form and would not work, but it must work at your server.

Cookies 管理

可以发送cookie来Node.js加载服务器,它可以处理使用下面的中间件选项。下面是一个简单的例子来打印所有客户端发送的cookie。

var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
  console.log("Cookies: ", req.cookies)
})

app.listen(8081)
 

标签:Node    js    Express    框架

本站文章除注明转载外,均为本站原创或编译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创优秀实例教程
转载请注明:文章转载自:易百教程 [http:/www.yiibai.com]
本文标题:Node.js Express框架
本文地址:http://www.yiibai.com/nodejs/nodejs_express_framework.html

Node.js Express框架的更多相关文章

  1. Node.js Express 框架

    Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...

  2. Node.js Express 框架学习

    转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

  3. Node.js Express 框架 Express

    Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  4. 44.Node.js Express 框架--web框架

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 简介 Express 是一个简洁而灵活的 node.js W ...

  5. Node.js+Express框架+Mongo学习(一)第一个node.js实例

    1.在桌面新建一个空的文件夹,比如叫node,当然也可以在其它地方新建. 2.命令行进入到所新建的文件夹的目录,下载Express框架,再在这个文件夹里新建一个叫final的项目 3.在项目(fina ...

  6. Node.js Express 框架 POST方法

    POST 方法 以下实例演示了在表单中通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入: index.htm 文件代码修改如下: ...

  7. Node.js Express 框架 GET方法

    GET 方法 以下实例演示了在表单中通过 GET 方法提交两个参数,我们可以使用 server.js 文件内的 process_get 路由器来处理输入: index.htm 文件代码如下: < ...

  8. node.js+express框架 修改后自启【不需要再执行start】

    我们每次修改完后都需要重新启动下才能刷新,就很麻烦'nodemon'解决了这个问题. 这里直接进行全局安装 npm install -g nodemon 安装到本地 npm install nodem ...

  9. Node.js Express 框架2

    文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 enctype 属性设置为 multipart/form-data. index.html <html> < ...

随机推荐

  1. Latex笔记(参考文献) 分类: LaTex 2014-11-08 17:41 239人阅读 评论(0) 收藏

    当你用LaTeX来写文档,在管理参考文献时,你可能会用到bibtex, 也许你会嫌麻烦,会选择用 \begin{thebibliography}{10} \bibitem xxxx \bibitem ...

  2. Phonegap(Cordova)3.4 + Android 环境搭建

               PhoneGap是一个用基于HTML.CSS和JavaScript的,创建移动跨平台移动应用程序的高速开发平台. 它使开发人员可以利用iPhone,Android,WP7等多 ...

  3. mysql 存储过程项目小结

    1. false :0  true 1 切记 官方文档:http://dev.mysql.com/doc/refman/5.0/en/numeric-type-overview.html BOOL,  ...

  4. java中的mmap实现--转

    什么是mmap mmap对于c程序员很熟悉,对于java程序员有点陌生.简而言之,将文件直接映射到用户态的内存地址,这样对文件的操作不再是write/read,而是直接对内存地址的操作. 在c中提供了 ...

  5. Gitolite轻松部署/管理git server

    对于今天越来越受欢迎的Git,相信做开发的朋友都基本有所耳闻.它最大的便利就是分布式的开发库,让使用git作为源码管理库的开发者可以在本地提交代码的修改而不用提交到远程的库,同时需要和团队协作.同步代 ...

  6. 为什么你需要使用instancetype而不是id

    四年前Clang添加了关键字instancetype,目的在于取代-alloc和-init等方法的返回类型id,那么使用instancetype到底比id好在哪里? instancetype宣言 不管 ...

  7. VS 创建 使用C++ 静态类库(Dll)

    创建静态类库 Walkthrough: Creating and Using a Dynamic Link Library (C++) 1:菜单栏-->File, New, Project. 2 ...

  8. Android 控件 之 Menu 菜单

    http://www.cnblogs.com/Mrs-cc/archive/2012/07/21/2603042.html 1.OptionsMenu (选项菜单)用法总结   使用方法: 方法一:添 ...

  9. vs2010 web 发布

    1.在服务器上安装web deploy,这时iis中右侧功能中就多了“导入应用程序” 2.在代码的项目中,点击项目属性,将debug改为release,选择对应的平台.目标平台,主要用来区分32位还是 ...

  10. 【原创】ZeroClipboard的时代或许已经过去了

    曾经,一个网页上要用Javascript实现网页内容的复制,其实是很麻烦的一件事情.虽然在这个问题上IE有其高大上的 window.clipboardData 方法支持直接复制指定内容,Firefox ...