node之Express框架

　　Express是node的框架，通过Express我们快速搭建一个完整的网站，而不再只是前端了！所以Express还是非常值得学习的！

　　express有各种中间件，我们可以在官方网站查询其用法。

　　Express框架的核心特性如下：

通过中间件来响应http请求。
定义路由表来执行不同的HTTP请求动作。
通过向模板传递参数来动态渲染页面。

安装Express

首先新建一个文件夹expressTest，终端输入 npm init，生成package.json文件。内容如下；

{
  "name": "express",
  "version": "1.0.0",
  "description": "for Express test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "no"
  },
  "keywords": [
    "express"
  ],
  "author": "Johon Zhu",
  "license": "ISC"
}

View Code

使用cnpm安装express（注意：这里需要使用cnpm，使用npm会报错），

cnpm install express --save

执行之后，我们就可以发现在当前目录下多了一个node_modules文件，其中包含了express的相关文件。

在package.json文件中，可以发现多了依赖项express，如下：

"dependencies": {
    "express": "^4.15.2"
  }

安装下面几个重要的模块（安装express，就必须安装这几个配合使用）

body-parser - nodejs中间件，用于处理JSON、txt、Raw和Url编码的数据。
cookie-parser - 用于解析cookie。
multer - nodejs中间件，用于处理enctype="multipart/form-data"的表单数据。

cnpm install body-parser --save
cnpm install cookie-parser --save
cnpm install multer --save

　　此时，在package.json中我们就可以看到目前的依赖项已经包含了四项：

"dependencies": {
    "body-parser": "^1.17.1",
    "cookie-parser": "^1.4.3",
    "express": "^4.15.2",
    "multer": "^1.3.0"
  }

View Code

第一个Express框架实例

在express.js文件下输入下面的代码：

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("应用实例，访问地址为 http://%s:%s", host, port)
 });

在浏览器中输入127.0.0.1:8081，页面输出Hello world。

可以看出，最后如果我们不log，express的例子将会更加简单，如下：

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

var server = app.listen(8081);

同样在访问localhost:8081时可以看到页面显示Hello World。

重要：因为引入了express框架，所以我们不需要自行再建立server.js、client.js，只需要通过这么一个文件就可以完成了。并且也没有引入url、http等。

补充：有时gitbash汉字无法正常显示，可在gitbash中右键-> options -> text -> 设置charset为utf-8。即可解决问题。

Express 中的get、post

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

其中，app为express()，我们一般可以通过req和res来处理请求request和响应respond。

req对象包含了很多与请求相关的属性，重要的几个如下：

req.app 即访问express实例
req.body 获得请求主题
req.cookies 获得cookies
req.hostname获取主机名
req.ip获取主机ip
req.originalUrl 获取原始url
req.params 获取路由的parameters
req.path 获取请求路径
req.protocal 获取请求协议
req.query 获取url的查询字符串
req.accepts() 获取可接受的请求的文档类型
。。。

res对象包含了很多和响应有关的属性，重要的几个如下：

res.cookie() 设置cookie
res.json() 传送json响应
res.jsonp() 传送jsonp响应
res.send() 传送http响应
res.status() 设置状态码
res.type() 设置Content-Type的MIME类型

路由

之前我们通过app.get("/", function (req, res) {...}) 来处理的，但是他们每次访问的都默认是主页，而路由决定不同的页面，即路径不同，就响应不同。

var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
   res.send("主页get请求");
});
app.post('/', function (req, res) {
   res.send("主页post请求");
});
app.get('/delSomething', function (req, res) {
   res.send("删除页面get请求");
});
app.get('/addSomething', function (req, res) {
   res.send("添加页面get请求");
})

　　app.get('/g*d', function (req, res) {
　　　　res.send("输入g()d，可以正则匹配");
　　});

var server = app.listen(8081);

输出如下：

即路径不同，返回不同。这就是路由。

静态文件

nodejs提供了express.static中间件来设置css、js、图片等静态文件。

即使用 express.use(express.static("public")); 即使用public文件夹下的静态文件，我们再public文件夹下放置一些css和js就可以访问了。如下：

var express = require("express");
var app = express();
app.use(express.static("public"));
app.get("/", function (req, res) {
    res.send("hello");
});
app.listen(8081);

即首先需要引入express，然后app.use(express.static("public"))，表示需要使用静态资源，且在public文件中。然后监听端口就可以了。

注意：在请求时，不需要输入public，只需要输入public内的文件即可。

get请求

之前在使用node时，使用过类似的，是一个post请求，这里用express实现get请求，index.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <form action="http://127.0.0.1:8081/process_get" method="get">
        <input type="text" name="name" placeholder="name"><br>
        <input type="text" name="age" placeholder="age"><br>
        <input type="submit">
    </form>
</body>
</html>

注意到action，即将数据发送到action所在的接口上，在下面的modejs文件中我们定义了如果处理这个接口。

js如下：

var express = require("express");
var app = express();
app.get("/index.html", function (req, res) {
    res.sendFile(__dirname + "/" + "index.html");
});
app.get("/process_get", function (req, res) {
    var response = {
        name: req.query.name,
        age: req.query.age
    };
    res.send(response);
});
app.listen(8081);

即请求Index.html时，返回html，如果再通过get方式来发送表单，我们就把用户输入的以json字符串的形式返回。（注意这里sendFile和__dirname的应用）

post请求

get请求比较简单实现，但是安全性不高，所以可以使用post，使用post不会再url上添加查询字符串，而是直接发送，但是需要我们使用body-parser来编码。如下：

（注意：现在index.html的form内的method已经成了post, 如下：）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <form action="http://127.0.0.1:8081/process_get" method="post">
        <input type="text" name="name" placeholder="name"><br>
        <input type="text" name="age" placeholder="age"><br>
        <input type="submit">
    </form>
</body>
</html>

js如下所示：

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var urlEcode = bodyParser.urlencoded({extended: false});
app.get("/index.html", function (req, res) {
    res.sendFile(__dirname + "/" + "index.html");
});
app.post("/process_post",urlEcode, function (req, res) {
    var response = {
        name: req.body.name,
        age: req.body.age
    };
    res.send(response);
});
app.listen(8081);

即首先引入express，然后引入body-parser，为什么呢？我们在用get方法时直接传送查询字符串，但是post方法，就要传送数据了，而post方法就在body里，所以要使用body-parser将字符串解析为数据才能传送，最后，在处理post的接口process_post时，就要传入这个urlEcode作为参数用来解析，另外值得注意的是response中要用req.body.name要和get方法里的req.query.name区分开来。

文件上传：

文件上传需要将index.html中form的enctype设置为multipart/form-data，这样才可以上传文件，另外，input的type设置为file。

如下：

<html>
<head>
<title>文件上传表单</title>
</head>
<body>
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上传文件" />
</form>
</body>
</html>

在nodejs中不仅仅要引入express，还要引入fs来对文件进行操作，引入body-parser来对文件的类型进行操作（类似于post），实际上文件上传就是post，因为post是传送的意思。

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var multer = require("multer");
var fs = require("fs");

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

app.get("/index.html", function (req, res) {
    res.sendFile(__dirname + "/" + "index.html");
});
app.post("/file_post",function (req, res) {
    var des_file = __dirname + "/" + req.files[0].originalname;
    fs.readFile( req.files[0].path, function (err, data) {
           fs.writeFile(des_file, data, function (err) {
            if( err ){
                 console.log( err );
            }else{
                  response = {
                      message:'File uploaded successfully', 
                      filename:req.files[0].originalname
                 };
             }
             console.log( response );
             res.end( JSON.stringify( response ) );
          });
      });
});
app.listen(8081);

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);

引入cookie-parser，用于传递cookie，即向nodejs服务器发送cookie信息， req.cookies即客户端的cookie信息。

学习资源： http://study.163.com/category/nodejs?utm_source=baidu&utm_medium=cpc&utm_campaign=affiliate&utm_term=IT-419&utm_content=SEM

posted @ 2017-04-14 11:42 Wayne-Zhu 阅读(473) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

曾经，我非常羡慕那些人见人爱的人，我也想要变成那样，可是后来我才明白人见人爱也是需要天赋的，后来我开始默默努力，我想，就算我不能让每个人都喜欢我，至少因为我做的努力能得到别人的尊重。

Wayne Zhu

Keep looking, don't settle.