node.js第三方Express 框架

文章目录

  • [1、Express 简介](#1、Express 简介)
  • [2、Express 安装及使用](#2、Express 安装及使用)
    • [1.Express 安装](#1.Express 安装)
    • 2.Nodemon‌的使用
    • [3.Express 的使用](#3.Express 的使用)

1、Express 简介

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

在express中路由指的是客户端请求和服务器处理函数的映射关系,

路由有三部分组成:请求类型、请求url和处理函数。

Express的作用和Node.js内置的http内置模块类似,专门用来创建Web服务器的。

Express的本质:是一个npm上的第三方包,可以快速创建Web服务器的便捷方法。

Express的中文官网:http://www.expressjs.com.cn/

  1. Express 框架核心
    • 可以设置中间件来响应 HTTP 请求。
    • 定义了路由表用于执行不同的 HTTP 请求动作。
    • 可以通过向模板传递参数来动态渲染 HTML 页面。
  2. Express 能做什么
    于前端程序员来说,最常见的两种服务器,分别是: Web网站服务器:专门对外提供Web网页资源的服务器。

    API接口服务器:专门对外提供API接口的服务器。

    使用Express,可以方便、快速的创建Web网站的服务器或API接口的服务器。

2、Express 安装及使用

1.Express 安装

安装了 Node.js

通过 npm init 命令为你的应用创建一个 package.json 文件。

此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按"回车"键接受大部分默认设置即可,

javascript 复制代码
npm init

在项目的目录下安装 Express 并将其保存到依赖列表中

javascript 复制代码
npm install express --save

如果只是临时安装Express,不想将它添加到依赖列表中,

javascript 复制代码
npm install express --no-save

可以一起安装一下重要的模块

  • body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据,用于解析客户端发送的 POST 请求体,并将其存储在 req.body 对象中。。
  • cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
  • multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。
javascript 复制代码
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save

查看Express 的版本号

javascript 复制代码
npm list express

2.Nodemon‌的使用

  1. ‌Nodemon‌是一个基于Node.js构建的开发工具,主要用于自动监控项目文件的更改,并在检测到变化时自动重启Node.js服务器,从而提升开发效率。

Nodemon特别适合用于开发环境中,因为它可以减少手动重启服务器的繁琐操作,使开发者能够专注于代码编写‌

  1. Nodemon的工作原理
    通过监听项目目录中的文件变化来实现自动重启。它会监听指定类型的文件(如.js、.json等)的更改,并在检测到变化时自动执行指定的启动命令(通常是node app.js)。Nodemon支持通过命令行参数或配置文件的方式定制监听规则、忽略特定目录或文件等操作‌
  2. 安装
javascript 复制代码
// 全局安装
npm install -g nodemon
// 局部安装
npm install --save-dev nodemon
// 启动应用  server.js为应用文件
nodemon ./server.js

3.Express 的使用

  1. 创建服务器实例‌
    使用express()方法创建一个服务器实例

    javascript 复制代码
    // 导入express
    var express = require('express');
    // 创建web服务器
    var app = express();
    // 启动服务,端口号8081
    app.listen(8081, function () {
    	console.log('server启动')
    })
  2. 监听GET请求‌
    app.get() 函数是 Express 框架中用于定义 GET 请求路由的方法。当客户端向服务器发送 GET 请求,并且请求的路径与 app.get() 中定义的路径匹配时,就会执行该函数中指定的回调函数。

    javascript 复制代码
    // 第一个参数是路径字符串 第二个参数是一个回调函数,该函数接收两个参数req, res
    app.get('/start', function (req, res) {
    	/* 处理函数 */
     // 当客户端发送GET请求到/start时,执行此回调函数
     // req(请求对象)和 res(响应对象)
     // 在回调函数中,你可以使用 req 对象来获取客户端发送的请求数据,
     // 可以使用 res 对象来向客户端发送响应数据
    })
  3. 监听POST请求‌
    app.post() 函数是 Express 框架中用于定义 POST 请求路由的方法。当客户端向服务器发送 POST 请求,并且请求的路径与 app.post() 中定义的路径匹配时,就会执行该函数中指定的回调函数。

    javascript 复制代码
    // 定义一个POST请求路由
    var bodyParser = require('body-parser');
    // 创建 application/x-www-form-urlencoded 编码解析
    var urlencodedParser = bodyParser.urlencoded({ extended: false })
    app.post('/submit', urlencodedParser, (req, res) => {
      // 当客户端发送POST请求到/submit时,执行此回调函数
      const data = req.body; // 获取请求体中的数据
      console.log(data); // 在控制台打印数据
    });
  4. 响应请求‌
    res.send() 函数是 Express 框架中用于向客户端发送 HTTP 响应的方法。若要向客户端发送一些数据作为响应时,你可以使用这个函数

  • 发送字符串作为响应

    javascript 复制代码
    app.get('/hello', (req, res) => {
      res.send('hello'); // 发送一个字符串作为响应
    });
  • 发送JSON对象作为响应

    javascript 复制代码
    app.get('/hello', (req, res) => {
    	const obj = {
        id: 1,
        name: 'John Doe',
        email: 'johndoe@example.com'
      };
      res.send(obj); // 发送一个JSON对象作为响应
    });

当发送 JSON 对象时,Express 会自动将对象转换为 JSON 字符串,并设置正确的 Content-Type 响应头为 application/json。

  • 发送状态码和响应内容

    javascript 复制代码
    app.get('/error', (req, res) => {
      res.status(404).send('Page not found'); // 设置状态码为 404,并发送响应内容
    });
  • 发送文件作为响应
    res.send() 本身不直接用于发送文件,但你可以使用 res.sendFile() 方法来发送文件

    javascript 复制代码
    app.get('/file', (req, res) => {
      res.sendFile('/path/to/file'); // 发送指定路径的文件作为响应
    });

    res.send() 是 res.end() 的一个更高层次的封装,它提供了一些额外的功能和便利性。 如果只需要简单地结束响应而不发送任何内容,你=可以使用 res.end()。

    在大多数情况下,需要使用 res.send() 或其他更具体的响应方法(如 res.json()、res.jsonp()、res.sendFile() 等)来发送响应内容。

  1. 获取URL中携带的查询参数

    javascript 复制代码
    // 通过res.query对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数
    app.get('/', (req, res) => {
        // req.query默认是一个空对象
        // 客户端使用 ?name=zs&age=100这种查询字符串形式,发送到服务器的参数
        // 可以通过req.query对象访问到
        console.log(req.query);
    })
  2. 获取URL中的动态参数
    需要根据不同的参数来执行不同的逻辑。Express 提供了路由参数功能,可以方便地获取 URL 中的参数。

    javascript 复制代码
    // 通过res.params对象,可以访问到URL中,通过 : 匹配到的动态参数
    // URL地址中,可以通过 : 参数名的形式,匹配动态参数值
    app.get('/user/:id', (req, res) => {
        // req.params默认是一个空对象
        // 里面存放着通过 : 动态匹配到的参数值
        console.log(req.params);
    })
    html 复制代码
    <html>
      <body>
        GET <br>
        <form action="http://127.0.0.1:8081/login" method="GET">
          Name: <input type="text" name="name">  <br>
          Password: <input type="password" name="password">
          <input type="submit" value="Submit">
        </form>
        <br>
        POST <br>
        <form action="http://127.0.0.1:8081/login_POST" method="post">
          Name: <input type="text" name="name">  <br>
          Password: <input type="password" name="password">
          <input type="submit" value="Submit">
        </form>
        get携带参数 <br>
        <form action="http://127.0.0.1:8081/login_get/3" method="get">
          Name: <input type="text" name="name">  <br>
          Password: <input type="password" name="password">
          <input type="submit" value="Submit">
        </form> 
      </body>
    </html>
    javascript 复制代码
    var express = require('express');
    var app = express();
    var bodyParser = require('body-parser');
    const multer  = require('multer');
    // 创建 application/x-www-form-urlencoded 编码解析
    var urlencodedParser = bodyParser.urlencoded({ extended: false })
    // get请求
    app.get('/login', function (req, res) {
      const {query} = req
       // 输出 JSON 格式
       var response = {
           "name": query.name,
           "password": query.password
       };
       console.log(response);
       res.end(JSON.stringify(response));
    })
    // post请求
    app.post('/login_POST', urlencodedParser, function (req, res) {
      const {body} = req
      // 输出 JSON 格式
      var response = {
          "name":body.name,
          "password":body.password
      };
      res.end(JSON.stringify(response));
    })
    // get请求
    app.get('/login_get/:id', function (req, res) {
      const {query, params} = req
       // 输出 JSON 格式
       var response = {
           "name": query.name,
           "password": query.password,
           "id": params.id
       };
       res.end(JSON.stringify(response));
    })
     
    app.listen(8081, function () {
      console.log("服务启动")
    })



  3. Cookie 管理
    可以使用中间件向 Node.js 服务器发送 cookie-parser信息

    javascript 复制代码
    	var express = require('express');
    	var app = express();
    	var bodyParser = require('body-parser');
    	const cookieParser = require('cookie-parser');
    	var util = require('util');
    	// 使用中间件
    	app.use(cookieParser());
    	app.get('/set-cookie', (req, res) => {
    	  // 设置cookie
    	  res.cookie('token', 'werwewwej3457347593jsdsjkjsjkfsf');
    	  res.cookie('sex', '1');
    	  res.send('Cookie is set!');
    	});
    	
    	// get请求
    	app.get('/login', function (req, res) {
    	  const {query, cookies} = req
    	  let cookie = util.inspect(cookies)
    	  // 输出 JSON 格式
    	  var response = {
    	    "name": query.name,
    	    "password": query.password,
    	    "cookie": JSON.stringify(cookie)
    	  };
    	  console.log(response);
    	  res.end(JSON.stringify(response));
    	})
    	app.listen(8081, function () {
    	  console.log("服务启动")
    	})
相关推荐
鑫~阳1 小时前
html + css 淘宝网实战
前端·css·html
Catherinemin1 小时前
CSS|14 z-index
前端·css
2401_882727573 小时前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder3 小时前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂3 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand3 小时前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL3 小时前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿3 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫4 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
m0_748256144 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习