Express 是基于 Node.js 平台,快速、开放、极简的 web 开发框架。

Express 的安装方法:

  • 通过命令 npm install express --save 去安装
  • 效果截图如下:
  • pic
    Express的安装
  • pic
    版本等信息

基于Express的简单例子-hello world

  • 首先肯定是安装 Express
  • app.js 代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var express = require('express');//引入express模块
    var app = express();

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

    app.use('/1.html',function(req,res){
    res.send('abc');
    res.end();
    });

    app.use('/2.html',function(req,res){
    res.send('1234');
    res.end();
    });
    //监听3000端口
    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 应用,并且仅仅只有一个文件 — 和通过 Express 应用生成器 所创建的应用完全不一样Express 应用生成器所创建的应用框架包含多个 JavaScript 文件、Jade 模板和针对不同用途的子目录。

  • Express非侵入式 的 或者叫 非破坏式的,它保留了原生 Node.js 里面的东西,比如 res.write() ,它只是在其基础之上增强了一些方法: res.send() 。以前的write 只能接受字符串和 Buffersend 可以是数组,json 等。
  • 总结下用 Express 只需要 3 步。1 创建服务 var app = express(); 2 监听端口 app.listen(3000); 3 处理请求 app.use('地址',function(req,res){});
  • Express 里面有3 种方式能够接收到用户的请求 app.get('/',function(req,res){}) 可以接受用户的 GET 请求,而 app.post('/',function(req,res){}) 是用来接收用户的 POST 请求的,而 app.use('/',function(req,res){}) 通吃
  • Express 本身只提供了基本的功能,我们可以通过安装一些中间件去提高效率 比如 express-static 中间件(可以帮我们去读取静态文件),我们通过安装如:npm install express-static --save 使用时如下:我们在 www 目录下存放静态 html 文件,当浏览器访问该静态文件时,服务器将自动去 www 目录去寻找
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var express = require('express');
    const express_static = require('express-static');//引入中间件
    var app = express();//创建服务器

    //监听端口3000
    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);
    });
    app.use(express_static('./www'));//指定静态文件目录

Express 前后台数据交互之 get 数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//app.js
const express = require('express');
const express_static = require('express-static');

const server = express();

server.listen(3000);
server.get('/',function(req,res){
console.log(req.query);
res.send(req.query);
res.end();
});
server.use(express_static('./staticHTML'));//指定静态文件目录

//staticHTML 下面的静态文件 index.html 测试时这两个文件都是放在服务器上的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>

</style>
</head>
<body>
<form action="./" method="get">
用户名:<input name="user" id="user" />
密码:<input name="pass" type="password" id="pass" />
<button type="submit">提交</button>

</form>
<script>

</script>
</body>
</html>
  • 开启服务器,我们去访问index.html,效果图如下:
  • pic
    表单
  • pic
    服务器返回的json对象

Express 前后台数据交互之 post 数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//app1.js
const express = require('express');
const body_parser = require('body-parser');

const server = express();

server.listen(3000);
server.use(body_parser.urlencoded({}));

server.use('/',function(req,res){
console.log(req.body);
res.send(req.body);
res.end();
});

//index.html 该文件没有放服务器,就一个表单,往服务器发post数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>

</style>
</head>
<body>
<form action="http://xxx.xxx.xxx.xxx:3000/" method="post">
用户名:<input name="user" id="user" />
密码:<input name="pass" type="password" id="pass" />
<button type="submit">提交</button>

</form>
<script>

</script>
</body>
</html>
  • 效果如图:
  • pic
    post请求

Node 封装自己的中间件

  • 封装一个中间件类似 server.use(body_parser.urlencoded({})); 的功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    const express = require('express');//引入 express
    const my_body_parser = require('./myPackage/myBodyParser');//引入自己的中间件

    const server = express();//创建服务器

    server.listen(3000);//监听3000端口

    server.use(my_body_parser.aaa());//使用自己的中间件里面的函数,成为链式操作里的一环

    server.use('/',function(req,res){
    console.log(req.body);
    res.send(req.body);
    res.end();
    });

    //中间件文件
    const querystring = require('querystring');
    module.exports = {
    aaa:function(){
    return function(req,res,next) {
    var str = '';
    req.on('data',function(data){
    str += data;
    });
    req.on('end',function(){
    req.body = querystring.parse(str);
    next();
    });
    };
    }
    };
    • 效果图如下:
    • pic
      自己写中间件