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("服务启动")
    	})
相关推荐
y先森23 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy23 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891126 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端