当前位置: 首页 > 工具软件 > Express YUI > 使用案例 >

Express框架快速入门

能翔宇
2023-12-01

Express快速入门

Express介绍

  • Express学习资源
  • 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;
 类似资料: