Node js之express框架

1,940 阅读3分钟

一、express简介

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

Web 应用:Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助创建各种 Web 和移动设备应用。 API:丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单。 性能:Express 不对 Node.js 已有的特性进行二次抽象,只是在它之上扩展了 Web 应用所需的基本功能。

Express 框架核心特性:

  • 可以设置中间件来响应 HTTP 请求。
  • 定义了路由表用于执行不同的 HTTP 请求动作。
  • 可以通过向模板传递参数来动态渲染 HTML 页面。

二、安装 Express

Step1:为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录,如在D盘创建node-test文件夹。

image.png

Step2:通过 npm init 命令为你的应用创建一个 package.json 文件,此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按“回车”键接受默认设置即可。

image.png

Step3:接下来安装 Express 并将其保存到依赖列表中:

image.png

以上命令会将 Express 框架安装在当前目录的 node_modules 目录中, node_modules 目录下会自动创建 express 目录。

注释:安装 Node 模块时,如果指定了 --save 参数,那么此模块将被添加到 package.json 文件中 dependencies 依赖列表中。 然后通过 npm install 命令即可自动安装依赖列表中所列出的所有模块。

创建完成后的工作目录:

image.png

同时你也会发现,多了一个目录,叫 node_modules,这就是存放刚才安装的 express 库所有要用到的源码文件。 如果你使用的是 npm 5,可能还会在目录中看到一个 package-lock.json 文件。

以下几个重要的模块需要与 express 框架一起安装:

  • body-parser 用于处理 JSON, Raw, Text 和 URL 编码的数据。
  • cookie-parser 解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
  • multer 用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。

安装方法:

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

安装后的配置文件:

image.png

三、简单实例

1、hello world例子

在项目根目录下创建express.js文件,并输入如下代码:

//express.js
var express=require('express');
var app=express();
//主页输出 "Hello World"
app.get('/',function (req,res) {
    res.send('Hello World');
})
//创建服务并监听8081端口
var server=app.listen(8081,function () {
    var host=server.address().address;
    var port=server.address().port;
    console.log("应用实例,访问地址为 http://%s:%s", host, port)
})

启动服务,打开命令行,输入node express.js执行命令:

image.png

在浏览器中访问 http://127.0.0.1:8081,结果如图:

image.png

2、路由和静态文件

在项目根目录下创建express2.js文件,并输入如下代码:

//express2.js
var express =require('express');
var app=express();
//访问静态文件
app.use(express.static('public'));

//主页输出hello world
app.get('/',function (req,res) {
    console.log('主页get请求');
    res.send('hello get');
})
//post请求
app.post('/',function (req,res) {
    console.log('主页post请求');
    res.send('hello post');
})
//del_user页面相应
app.get('/del_user',function (req,res) {
    console.log('/del_user响应delete请求');
    res.send('删除页面');
})
//list_user页面
app.get('/list_user',function (req,res) {
    console.log('/list_user响应');
    res.send('用户列表页面');
})
//对页面abcd,abxcd,ab123cd等响应get请求
app.get('/ab*cd',function (req,res) {
    console.log('/ab*cd请求页面');
    res.send('正则匹配页面');
})
//创建服务并监听8081端口
var server=app.listen(8081,function () {
    var host=server.address().address;
    var port=server.address().port;
    console.log('应用实例,访问地址为http://%s:%s',host,port);
})

打开命令行,输入node express2.js执行命令:

image.png

在浏览器中访问 http://127.0.0.1:8081,结果如下图所示:

image.png

在浏览器中访问 http://127.0.0.1:8081/list_user,结果如下图所示:

image.png

在浏览器中访问 http://127.0.0.1:8081/abcd,结果如下图所示:

image.png

Express 提供了内置的中间件 express.static 来设置静态文件如:图片, CSS, JavaScript 等。可以使用 express.static 中间件来设置静态文件路径。例如,如果将图片, CSS, JavaScript 文件放在 public 目录下,可以这么写:

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

在浏览器中访问 http://127.0.0.1:8081/111.png,结果如下图所示:

image.png

参考:express中文网
nodejs教程