Express框架快速入门

能翔宇

2023-12-01

Express快速入门

Express介绍

Express学习资源
- Express中文网 http://www.expressjs.com.cn/
- Express英文网 http://expressjs.com/
Express作用
- Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
- Express框架是后台的Node框架，所以和jQuery、zepto、yui、bootstrap都不是一个东西。
- 使用 Express 可以快速地搭建一个完整功能的网站。
- Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
Express 框架核心特性：
- 可以设置中间件来响应 HTTP 请求。
- 定义了路由表用于执行不同的 HTTP 请求动作。
- 可以通过向模板传递参数来动态渲染 HTML 页面。

Express的使用

大致步骤：
- 创建项目
- 在项目下创建public目录，并在其中创建网页；
- 安装express;
- 引入express；
- 创建应用对象 var app = express();
- 启动服务器 express.listen(3000);
- 配置静态资源 app.use(express.static(“public”));
- 设置路由Route app.get(“/hello”,function (request , response) {});

Express使用详细介绍

创建目录；假定已经安装了npm，那么为你的应用创建一个目录，然后进入此目录并将其作为当前工作目录；
通过 npm init 命令为你的应用创建一个 package.json 文件；

$ npm init
//注意：此选项直接默认entry point: (index.js)；这是当前应用的入口文件。希望采用默认的 index.js 文件名，所以不需要更改，直接设为默认。

使用npm命令，安装express框架

npm install express --save
//save参数，表示自动修改package.json文件，自动添加依赖项。

创建hello world：进入 myapp 目录，创建一个名为 app.js 的文件，然后将下列代码复制进去：

//引入express框架
var express = require('express');
//创建应用对象
var app = express();
//对所有 (/) URL 或 路由 返回 “Hello World!” 字符串
app.get('/', function (req, res) {
    res.send('Hello World!');
});
//启动一个服务并监听从 3000端口进入的所有连接请求
app.listen(3000, function () {
    console.log('服务器开启成功');
});

创建应用
- 通过‘npm install express-generator -g’命令安装一个express应用生成器工具；
- 可以通过express myapp命令，在当前工作目录下创建一个名为myapp的命令；
- 通过“npm install”下载所有的依赖；

//通过 Express 应用生成器创建的应用一般都有如下目录结构：
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files

Express的路由

路由的介绍

在express中通过路由将请求地址和函数进行关联，这样当服务器收到请求时，可以直接调用函数去处理请求并返回响应；
可以为一个路径同时映射多个路由，这样当访问该路径时，多个路由都会被触发，触发顺序是按照路由的设置顺序触发的，多个路由只能返回一个响应；
同一次请求里的req和res一定是相同的对象，哪怕是配置的多个路由；
可以通过next来控制路由是否向下进行，如果不调用next，则不会向下继续，而调用next则会触发下一个路由；

app.get("/hello",function (req , res , next) {});
app.get("/hello",function (req , res , next) {});
app.get("/hello",function (req , res , next) {});

//===========================================
app.get("/hello",function (req , res , next) {},function (req , res , next) {},function (req , res , next) {});

路由决定了请求到达服务器以后，由哪些程序来处理；
- 主要使用的路由：get路由 post路由；

路由的设置

路由的设置方式：
```
app.<method>(path,callback);
```
- app是express的一个实例；
- < method>表示要处理的请求方式，可以是get post或all;
- path 是服务器端的路径，也是要映射的路径，以斜杠/开头，斜杠/代表根目录；
- callback是当路由匹配到时需要执行的函数，当path对应的地址被访问时，要调用的回调函数，回调函数中有三个参数；

//比如：
app.get("/hello",function (req , res , next) {});
// GET 方法请求路由
app.get('/', function (req, res) {
  res.send('GET request to the homepage');
});

// POST 方法请求路由
app.post('/', function (req, res) {
  res.send('POST request to the homepage');
});

get方式设置路由

app.get() 用来设置get()路由；
- 参数：
  - 1路由映射的请求地址
  - 2回调函数;
    - 当路由中的回调函数执行时，express的回调函数中有：request和response ;
    - next:第三个参数，代表是否执行下一个路由；
    - request 表示客户端发送的请求报文，如果想获取用户发送的信息就找它
    - response 表示服务器发送的响应报文，如果需要向用户返回内容则使用；
      - 通过response向客户端响应一个内容；
      - send() 用于设置响应体；

app.get('/example/b', function (req, res, next) {
  console.log('通过路由发送内容');
  next();
}, function (req, res) {
  res.send('你好，我是hello路由返回的内容');
});

可以将路由统一设置到Router上，这样方便对路由进行管理；
使用 express.Router 类创建模块化、可挂载的路由句柄。Router 实例是一个完整的中间件和路由系统，因此常称其为一个 “mini-app”。

var router = express.Router();      
router.get(...);
router.post(...);
router.all(...);
router.use(...);
app.use(router);

//示例代码

//在 app 目录下创建名为 birds.js 的文件，内容如下：
var express = require('express');
var router = express.Router();
// 该路由使用的中间件
router.use(function timeLog(req, res, next) {
  console.log('Time: ', Date.now());
  next();
});
// 定义网站主页的路由
router.get('/', function(req, res) {
  res.send('Birds home page');
});
// 定义 about 页面的路由
router.get('/about', function(req, res) {
  res.send('About birds');
});
module.exports = router;

//然后在应用中加载路由模块：
var birds = require('./birds');
...
app.use('/birds', birds);

路由路径

路由路径和请求方法一起定义了请求的端点，它可以是字符串、字符串模式或者正则表达式。
url地址的格式：
- 协议名：//域名/ip地址：端口号/路径/资源名？查询字符串
相对路径：
- 指相对于当前资源所在目录的位置；
- 在服务器中，路径都是相对于虚拟路径的；
- 相对路径使用.或..开头，或者直接写路径；“.”或直接写路径表示在当前文件夹中寻找；”..”表示去上一级文件夹中寻找；
绝对路径：
- 绝对路径使用“/”开头；
- /代表的是服务器中的根目录；
- 绝对路径永远相对于服务器的根目录，不会因为文件的位置的改变而改变；
- 在开发环境是服务器的时候，应该使用绝对路径，而不是用相对路径；

//使用字符串的路由路径示意
// 匹配根路径的请求
app.get('/', function (req, res) {
  res.send('root');
});
// 匹配 /about 路径的请求
app.get('/about', function (req, res) {
  res.send('about');
});

//使用字符串模式的路由路径示例：
// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');
});
// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});

//使用正则表达式的路由路径示例：
// 匹配任何路径中含有 a 的路径：
app.get(/a/, function(req, res) {
  res.send('/a/');
});

request 和 response 对象的具体介绍：

Request 对象
- request 对象表示 HTTP 请求，包含了请求查询字符串，参数，内容，HTTP 头部等属性。
- 常见属性：
  - req.hostname / req.ip：获取主机名和IP地址；
  - req.originalUrl：获取原始请求URL，请求首页的路径；
  - req.path：获取请求路径
  - req.protocol：获取协议类型
  - req.query：获取URL的查询参数串
    - query是一个对象，它将查询字符串中的参数名作为对象的属性，将参数值作为对应的属性值（把查询字符串转换为了对象），可以通过query来获取get请求的参数；
```
//访问请求：http://localhost:3010/hello?username=sunwukong&password=123123     
控制台返回结果：{ username: 'sunwukong', password: '123123' }
```
  - req.route：获取当前匹配的路由
  - req.header：所有的请求头
  - req.get()：获取指定的HTTP请求头
  - req.is()：判断请求头Content-Type的MIME类型
Response 对象
- response 对象表示 HTTP 响应，即在接收到请求时服务器向客户端发送的 HTTP 响应数据。
- 常见属性有：
  - res.app：同req.app一样
  - res.set()在res.append()后将重置之前设置的头；
  - res.set()：设置HTTP头，传入object可以一次设置多个头
  - res.download()：
    - 将文件设置为响应头并提供给客户端进行下载；
    - 使用该方法发送的文件，无论浏览器是否能打开，都会弹出下载窗口；
  - res.sendFile( pa th [,o pt io n s ] [，f n ] )：将文件设置响应体并发送给客户端；使用该方法发送的文件，如果浏览器能打开则自动打开，否则将会弹出下载窗口。
    - 将文件设置响应体并发送给客户端
    - 使用该方法发送的文件，如果浏览器能打开则自动打开，否则将会弹出下载窗口；
  - res.get()：返回指定的HTTP头
  - res.location()：只设置响应的Location HTTP头，不设置状态码或者close response
  - res.send()：传送HTTP响应，设置的仅仅只是响应体！而响应首行和响应响应头默认已经设置好了。注意，send请求只能调用一次！
  - res.sendStatus()服务器发送给浏览器的响应状态码；
  - res.status()：设置响应状态码；需要和send一起用，否则会一直转圈，没有响应。
    - 如果想使用不同的状态码，可以：res.status(404).send(‘Sorry, we cannot find that!’);
  - res.redirect()：重定向，浏览器跳转到其他页面。从一个地址重新定位到另一个地址。
    - 重定向的流程：
      - 1、浏览器向一个路由发送请求；
      - 2、这个路由会向浏览器发送一个特殊的响应，这个响应告诉浏览器再去向另一个地址发送请求；这个特殊的响应的响应状态码是302，表示重定向；同时还具有一个响应头：Location:/hello.html
      - 3、浏览器再次向新的地址发送请求；
回调函数中的第三个参数，next;
- next是一个回调函数，我们可以在路由中调用next，如果它一旦被调用，则请求会执行到下一个路由;
- 为同一个地址绑定多个路由
```
app.get(path,callback1,callback2,callback3);
//或者
app.get(path,callback1);
app.get(path,callback2);
app.get(path,callback3);
```

Express的中间件

中间件的介绍

Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。
中间件可以在请求到达路由之前，可以对请求做一些预处理操作，比如：可以在请求到达路由之前，判断请求是否需要加载静态资源；再比如：请求到达路由之前，去解析请求报文中的参数；
中间件是一个函数，它可以访问请求对象（request object (req)）, 响应对象（response object (res)）, 和 web 应用中处于请求-响应循环流程中的中间件，一般被命名为 next 的变量。
中间件的功能包括：
- 执行任何代码。
- 修改请求和响应对象。
- 终结请求-响应循环。
- 调用堆栈中的下一个中间件。

中间件分类

使用app.use()来配置中间件，中间件的效果和路由基本一致；

应用级中间件

解析post请求体的中间件
var bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({extended:false})); app.use(bodyParser.json());
如果中间件中的路径被省略，就相当于/，所有的请求都会触发回调函数；

var app = express();

// 没有挂载路径的中间件，应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
  res.send('USER');
});

路由级中间件

路由级中间件和应用级中间件一样，只是它绑定的对象为 express.Router()。

var router = express.Router();

路由级使用 router.use() 或 router.VERB() 加载。

var app = express();
var router = express.Router();

// 没有挂载路径的中间件，通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 一个中间件栈，显示任何指向 /user/:id 的 HTTP 请求的信息
router.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 一个中间件栈，处理指向 /user/:id 的 GET 请求
router.get('/user/:id', function (req, res, next) {
  // 如果 user id 为 0, 跳到下一个路由
  if (req.params.id == 0) next('route');
  // 负责将控制权交给栈中下一个中间件
  else next(); //
}, function (req, res, next) {
  // 渲染常规页面
  res.render('regular');
});

// 处理 /user/:id， 渲染一个特殊页面
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id);
  res.render('special');
});

// 将路由挂载至应用
app.use('/', router);

内置中间件

express.static 是 Express 唯一内置的中间件。它基于 serve-static，负责在 Express 应用中提托管静态资源。
静态资源的中间件
- app.use(express.static(‘静态目录’))；

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

Express的模版引擎

模板可以为我们提供一个格式化好的一端html代码或者是一个完整的html网页，但是模板和普通网页的区别是，普通网页是由浏览器进行渲染的；
模板必须有服务器渲染，然后发送给服务器；

Ejs

ejs是express中的一个模版引擎；
模版引擎可以为我们提供一个页面的基本结构，并且可以在需要时向页面中设置变量；
通过模版引擎可以在服务器端动态向客户端返回网页；

Ejs的使用：

需要在应用中进行如下设置才能让 Express 渲染模板文件：

views, 放模板文件的目录，比如： app.set('views', './views')
view engine, 模板引擎，比如： app.set('view engine', 'jade')

1、安装模板引擎 npm 软件包，安装Ejs：
```
npm install ejs --save
```

2、配置ejs

app.set("view engine" , "ejs");
app.set("views","views");

3、创建ejs模版

//在 views 目录下生成名为 test.ejs 的 ejs 模板文件，内容如下：
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<table width="40%" border="1" align="center">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>住址</td>
        <td>操作</td>
    </tr>

    <%
        for(var i=0 ; i<arr.length ; i++){
    %>
    <tr>
        <td><%=arr[i].name%></td>
        <td><%=arr[i].gender%></td>
        <td><%=arr[i].age%></td>
        <td><%=arr[i].address%></td>
        <td>
            <a href="javascript:;">删除</a>
            <a href="javascript:;">修改</a>
        </td>
    </tr>

    <% } %>
</table>
</body>
</html>

4、使用ejs

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

/*
    1.安装EJS
    2.在express中来配置ejs
        - 配置ejs为express的模板引擎
        - 配置模板的存放目录
 */
 //配置模版引擎
app.set("view engine" , "ejs");
app.set("views" , "views");

app.get("/testEJS",function (req , res) {
res.render("hello.ejs" , {username:"沙和尚"});});

app.get("/list",function (req , res) {
//创建一个数组
var arr = [
    {
        name:"孙悟空",
        age:18,
        gender:"男",
        address:"花果山"
    },
    {
        name:"沙和尚",
        age:38,
        gender:"男",
        address:"流沙河"
    },
    {
        name:"唐僧",
        age:16,
        gender:"男",
        address:"女儿国"
    },
    {
        name:"奔波霸",
        age:48,
        gender:"男",
        address:"碧波潭"
    },
    {
        name:"玉兔精",
        age:14,
        gender:"女",
        address:"月亮之上"
    }
];


res.render("test.ejs" , {arr:arr});});
app.listen(3000,function () {
    console.log("OK");
});

EJS的语法：
- 脚本（<% %>）
  - 在Ejs模版中<%%>中的内容都是由服务器进行解析执行的，服务器执行完毕才会将渲染的结果发送给浏览器；
  - 脚本中的代码会在服务器中执行，但是他不会向网页中输出任何内容；如果有标签，则会直接转义；
  - 在ejs中可以编写多个脚本，而且在我们脚本中可以编写任意的js代码，但是必须保证多个脚本的结构完整。
- 表达式（<%= %>，<%- %>）
  - 表达式中的代码会在服务器中执行，而且会将执行结果在页面中显示；
  - <%= %>：该表达式会自动对字符串中的html标签进行转义，也就是标签不会生效，而是在页面中直接显示；
  - <%- %>：该表达式不会自动对字符串中html标签进行转义，标签会在页面中不会直接显示而是直接生效。而且结果（返回值）会在页面中直接显示
向ejs中设置变量的方式：
- 通过render()的第二个参数来设置；
- 通过res.locals来设置
  - 通过该属性设置变量，只在一次请求中有效，一旦发送多次请求，则参数丢失；
  - 如果变量只在一次请求中使用，则可以使用res.locals。
- 通过app.locals来设置变量
  - 通过该属性设置变量，将在整个应用中有效，只要服务器不停，参数一直可以使用。
  - 如果希望变量在整个应用中全都使用，则可以使用app.locals；

Express框架快速入门

Express快速入门

Express介绍

Express的使用

Express使用详细介绍

Express的路由

路由的介绍

路由的设置

get方式设置路由

路由路径

request 和 response 对象的具体介绍：

Express的中间件

中间件的介绍

中间件分类

应用级中间件

路由级中间件

内置中间件

Express的模版引擎

Ejs

相关阅读

相关文章

相关问答

相关文档