Express(一) ——简单入门

已于 2022-03-01 14:17:20 修改
阅读量1.3w 收藏 66
点赞数 11
分类专栏： 后端 文章标签： postman 测试工具 node.js
于 2022-02-16 23:16:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chilanzi/article/details/122973889
版权

Express(一) ——简单入门

背景：参加的青训营项目，使用Express来实现后端，个人被分配到后端去。于是，简单速通了下Express。项目结束，回头写下笔记，沉淀一下。

个人博客：Express(一) ——简单入门

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

开始前可以先安装Postman，很好用的接口测试工具。

1. Hello World

首先，安装express到项目中npm i express

然后，开始代码世界。

// 1. 加载express
const express = require('express');

// 2. 调用express()获取。express()函数是express模块​​导出的顶级函数
const app = express();

// 3. 设置请求对应的处理函数。下面的例子中，当客户端以GET方法请求/时就会调用处理函数
app.get('/', (req, res) => {
  res.send('Hello World!');
})

// 4. 启动web服务
app.listen(8080, () => {
  console.log('http://localhost:8080/');
})

最后，命令行执行nodemon app.js或node app.js。nodemon支持热更新。

image-20220207151828081

2. 路由

路由是指服务器端应用程序如何响应特定端点的客户端请求。由一个URI(路径标识)和一个特定的HTTP方法(GET、POST等)组成的。

路由的定义结构：

app.METHOD(PATH, HANDLER);
  • app：express实例
  • METHOD：是一个HTTP请求方法
  • PATH：服务端路径
  • HANDLER：当路由匹配到时执行的处理函数。参数：request和response对象分别处理请求和响应数据
const express = require('express');

const app = express();

app.get('/', (req, res) => {	// GET请求
  res.send('Hello World!');
})

app.post('/', (req, res) => {	// POST请求
  res.send('post /');
})

app.put('/user', (req, res) => {	// PUT请求
  res.send('put user');
})

app.delete('/user', (req, res) => {	 // DELETE请求
  res.send('delete user');
})

app.listen(8080, () => {
  console.log('http://localhost:8080/');
})

image-20220207161937956

2.1 请求对象

req对象代表HTTP请求。

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  console.log("请求地址: ", req.url);
  console.log("请求方法: ", req.method);
  console.log("请求头: ", req.headers);
  console.log("请求参数: ", req.query);

  res.end();  // 结束响应。没有的话，客户端会一直等待回应
})

app.listen(8080, () => {
  console.log('http://localhost:8080/');
})

postman测试用：http://localhost:8080/?name=clz

image-20220207162928596

2.2 响应对象

res对象表示收到HTTP请求后发送的HTTP响应。

2.2.1 状态码及状态信息
const express = require('express');

const app = express();

app.get('/', (req, res) => {

  res.statusCode = 404;   // 设置响应状态码
  res.statusMessage = "test";    // 设置响应状态信息。这里是测试，理论上来说404应该对应Not Found，这样子才有意义

  res.end();  // 结束响应
})

app.listen(8080, () => {
  console.log('http://localhost:8080/');
})

image-20220207163814050

2.2.2 发送多段文本
const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.write('hello ');
  res.write('world');   // res.write()只是发送数据，还是需要res.end()来结束响应

  // res.end('hello world');   // 结束相应的同时发送数据

  res.end();  // 结束响应
})

app.listen(8080, () => {
  console.log('http://localhost:8080/');
})

image-20220207165808608

2.2.3 cookie
const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.cookie('name', 'clz');  // 设置cookie

  res.end();  // 结束响应
})

app.listen(8080, () => {
  console.log('http://localhost:8080/');
})

image-20220207164941307

2.3 路由路径

可以使用正则表达式语法

// 匹配根路径
app.get("/", function(req, res) {
  res.send("root");		
});

// 匹配/abc
app.get("/abc", function(req, res) {
  res.send("abc");		
});

// 匹配/test.text
app.get("/test.text", function(req, res) {
  res.send("test.text");		
});



// 匹配/acd、/abcd
app.get("/ab?cd", function(req, res) {
  res.send("ab?cd");
});

// 匹配/abcd、/abxxxxcd
app.get("/ab*cd", function(req, res) {
  res.send("ab?cd");
});

// 匹配/abe、/abcde
app.get("/ab(cd)?e", function(req, res) {
  res.send("ab?cd");
});

// 匹配所有包含a
app.get(/a/, function(req, res) {
  res.send("/a/");
});

// 匹配以fly结尾的，包括/test.fly，/test/aaa/fly等
app.get(/.*fly$/, function(req, res) {
  res.send("/.*fly$/");
});

2.4 动态路径

app.get("/users/:userId/books/:bookId", function(req, res) {
  res.send(req.params);
});


// 限制动态参数
app.get("/:a(\\d+)", function (req, res) {	
  res.send(req.params);
});

image-20220210123301562

3. 案例

创建一个简单的CRUD接口服务。增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)

  • 查询任务列表：GET /todos
  • 根据ID查询单个任务：GET /todos/:id
  • 添加任务：POST /todos
  • 修改任务：PATCH /todos
  • 删除任务：DELETE /todos/:id

3.1 路由设计

const express = require('express');

const app = express();


app.get('/todos', (req, res) => {
  res.send('查询任务列表');
})

app.get('/todos/:id', (req, res) => {
  res.send(`根据ID查询单个任务, id是${req.params.id}`);   // 通过req.params.id来获取动态的路径参数id
})

app.post('/todos', (req, res) => {
  res.send('添加任务');
})

app.patch('/todos/:id', (req, res) => {
  res.send(`修改任务, id是${req.params.id}`);
})

app.delete('/todos/:id', (req, res) => {
  res.send(`删除任务, id是${req.params.id}`);
})


app.listen(8080, () => {
  console.log('http://localhost:8080/');
})

image-20220207172638141

3.2 获取任务列表

数据文件db.json

{
  "todos": [
    {
      "id": 1,
      "title": "express"
    },
    {
      "id": 2,
      "title": "笔记"
    },
    {
      "id": 3,
      "title": "更新博客"
    }
  ]
}

app.get('/todos', (req, res) => {
  fs.readFile('./db.json', 'utf8', (err, data) => {
    if (err) {
      return res.status(500).json({  // res.json()专门发送json格式的数据，不是json格式会报错
        error: err.message
      })
    }

    const db = JSON.parse(data);    // 把字符串转成JSON对象
    res.status(200).json(db.todos);
  })
})

image-20220207184102851

3.3 根据ID查询单个任务

app.get('/todos/:id', (req, res) => {
  fs.readFile('./db.json', 'utf8', (err, data) => {
    if (err) {
      return res.status(500).json({
        error: err.message
      })
    }

    const db = JSON.parse(data);
    const todo = db.todos.find(todo => todo.id === Number.parseInt(req.params.id));   // url中的动态参数是字符串

    if (!todo) {    // 任务id不存在
      return res.status(404).end();   // 需要return阻止代码继续往下执行，否则会出现既发送404又发送200
    }

    res.status(200).json(todo);
  })
})

image-20220208231000242

3.4 封装db模块

从上面的代码中可以发现，读取数据文件部分逻辑一样，即可以封装成单独的模块db.js

db.js

const fs = require('fs');
const { promisify } = require('util');  // 把callback形式的异步api转化成promise形式的
const path = require('path');

const readFile = promisify(fs.readFile);

const dbPath = path.join(__dirname, './db.json');

exports.getDb = async () => {
  const data = await readFile(dbPath, 'utf8');

  return JSON.parse(data)
}

封装后的app.js(后面的路由没有变化)

const express = require('express');

const { getDb } = require('./db.js');

const app = express();


app.get('/todos', async (req, res) => {
  try {   // 处理异常的必要性：没有抛出异常的话，可能会一直在等待响应
    const db = await getDb();   // 因为getDb是async的，所以所有形式都会被封装成Promise，所以获取数据都要await
    res.status(200).json(db.todos);   // // res.json()专门发送json格式的数据，不是json格式会报错
  } catch (err) {
    res.status(500).json({
      error: err.message
    })
  }
})

app.get('/todos/:id', async (req, res) => {
  try {
    const db = await getDb();
    const todo = db.todos.find(todo => todo.id === Number.parseInt(req.params.id));   // url中的动态参数是字符串

    if (!todo) {    // 任务id不存在
      return res.status(404).end();   // 需要return阻止代码继续往下执行，否则会出现既发送404又发送200
    }

    res.status(200).json(todo);
  } catch (err) {
    res.status(500).json({
      error: err.message
    })
  }
})

3.5 添加任务

app.post('/todos', (req, res) => {
  // 1. 获取客户端请求体参数
  console.log(req.body);

  res.end();
})

然后，会发现很恐怖的事情

image-20220208231856994

那么，这个时候就需要配置表单请求体来解决上述问题

app.use(express.json())   // 配置解析表单请求体：application/json。将json格式转成js对象

image-20220208232402601

完美!!!(然而，并不是)

image-20220208233059259

换种形式，就要换汤了。因为express.json()只能解析json形式的

app.use(express.urlencoded())   // 配置解析表单请求体：application/x-www-form-urlencoded

然后，因为需要保存到db.json中，所以也应该在db.js中封装一个saveDb()方法（app.js自然也要引入saveDb，这部分就不行出来了）

db.js

const fs = require('fs');
const { promisify } = require('util');  // 把callback形式的异步api转化成promise形式的
const path = require('path');

const readFile = promisify(fs.readFile);
const writeFile = promisify(fs.writeFile);

const dbPath = path.join(__dirname, './db.json');

exports.getDb = async () => {
  const data = await readFile(dbPath, 'utf8');

  return JSON.parse(data)
}

exports.saveDb = async db => {
  const data = JSON.stringify(db);
  await writeFile(dbPath, data)
}

添加任务的代码部分

app.post('/todos', async (req, res) => {
  try {
    // 1. 获取客户端请求体参数
    const todo = req.body;

    // 2. 数据验证
    if (!todo.title) {
      return res.status(422).json({
        error: 'The field title is required.'
      })
    }

    // 3. 数据验证通过后，把数据存储到db.json中
    const db = await getDb();
    const lastTodo = db.todos[db.todos.length - 1];   // 获取最后一个todo

    todo.id = lastTodo ? lastTodo.id + 1 : 1;   // 如果一个todo都没有，则添加的todo的id是1
    db.todos.push(todo)

    await saveDb(db);

    // 4. 发送响应
    res.status(200).json(todo);
  } catch (err) {
    res.status(500).json({
      error: err.message
    })
  }
})

image-20220208235418267

小优化：上面可以发现，添加任务后，db.json格式很丑。其实就是把JavaScript 对象转换为 JSON 字符串时的问题，所以只需要在JSON.stringify()上下点功夫就行。

JSON.stringify()

exports.saveDb = async db => {
  const data = JSON.stringify(db, null, '  ');    // 这里第三个参数是两个空格，就是缩进按两个空格来
  await writeFile(dbPath, data)
}

image-20220209000445369

眼尖的同学可能发现，添加的任务id和之前的位置不太一样。那么，有点小强迫症的我自然还是要在微操一手。

image-20220209001337659

终于。。。

image-20220209001401680

3.6 修改任务

app.patch('/todos/:id', async (req, res) => {
  try {
    // 1. 获取客户端请求体参数
    const todo = req.body;

    // 2. 查找到要修改的todo
    const db = await getDb();
    const ret = db.todos.find(todo => todo.id === Number.parseInt(req.params.id))

    if (!ret) {   // 要修改的todo不存在
      return res.status(404).end();
    }

    Object.assign(ret, todo)    // 返回一个对象。如果添加的todo中有原本就有的属性，则修改属性值。如果没有，则新增属性

    await saveDb(db);
    res.status(200).json(ret);

  } catch (err) {
    res.status(500).json({
      error: err.message
    })
  }
})

修改原有属性：

image-20220209003447970

新增属性

image-20220209003636418

3.7 删除任务

app.delete('/todos/:id', async (req, res) => {
  try {
    const todoId = Number.parseInt(req.params.id);
    const db = await getDb();

    const index = db.todos.findIndex(todo => todo.id === todoId);   // 造出要删除的todo的索引

    if (index === -1) {   // 要删除的todo压根不存在
      return res.status(404).end();
    }

    db.todos.splice(index, 1);
    await saveDb(db);
    res.status(200).end()

  } catch (err) {
    res.status(500).json({
      error: err.message
    })
  }
})

image-20220209004455315

4. res.end()和res.send()区别

官方说明：

  • res.end() 终结响应处理流程。(不过，也可以在结束的同时发送响应)

  • res.send() 发送各种类型的响应。

4.1 res.end()

结束响应流程。用于在没有任何数据的情况下快速结束响应。

  • 参数可以是buffer对象、字符串
  • 只接受服务器响应数据，如果是中文会乱码

4.2 res.send()

发送HTTP响应。

  • 参数可以是buffer对象、字符串、对象、数组
  • 发送给服务端时，会自动发送更多的响应报文头，包括Content-Type: text/html;charset=utf-8，所以中文不会乱码

res.send()发送对象响应

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send({
    name: 'clz'
  })
})

app.listen(3000, () => {
  console.log('http://localhost:3000/');
})

image-20220209213846401

改为用res.end()发送

image-20220209214613515

res.send()发送中文(使用浏览器查看，postman可能自动设置了响应头)

res.send("测试")

image-20220209215019228

改为res.edn()：

image-20220209215053732

学习参考视频：

Node.js 系列教程之 Express

赤蓝紫
关注
  • 11
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Express
03-24
NULL 博文链接：https://pjun.iteye.com/blog/1064046
前端系列--前后端交互express(4)
Wong_ga_sum的博客
05-16 1563
我们之前直接通过node.js创建web十分麻烦，通过express可以进行简化，本篇主要介绍express内容： 1、express概念 Express是一个基于Node平台的web应用开发框架，其提供了一系列的强大特性，帮助开发者方便的创建各种web应用； 其使用必须通过npm install express进行下载； 其主要特点如下： 1、比如前面用到的router就是这里提取出去的 2、请求参数不再需要经过复杂的处理，直接拿到的就是对象（以前要经过data、end事件） 3、中间件可以如拦截请求等
【Node.js】Node.js入门（六）：Express中间件函数
郭老二
11-01 701
啥是中间件函数，先不百度，想象理解下：在web请求-响应的循环中，会根据请求调用回调函数，并返回响应，回调函数会有嵌套调用，把这些函数固定参数形式，就是中间件。以上是小白为了做心理上的假定合理性猜测，等深入了解后，再改正。也希望大神们留言指教。Express中间件函数接受三个参数：请求对象(req)、响应对象 (res)、next()函数。如果当前中间件函数没有结束请求-响应周期，它必须调用next()将控制传递给下一个中间件函数。否则，请求将被搁置。
express新手入门指南，含泪整理面经
2301_82244182的博客
04-03 804
通过上面的讲解，实现自定义的 404 和错误处理逻辑也就非常简单了。在 server.js 所有路由的后面添加如下代码：// 中间件和其他路由 …});});});提示在编写处理 404 的逻辑时，我们用到了模板引擎中的变量插值功能。具体而言，在res.render方法中将需要传给模板的数据作为第二个参数（例如这里的传入了用户访问的路径），在模板中就可以通过{{ url }}获取数据了。
express
Wang_0_的博客
01-14 1629
express 1.创建方式 （1）导入express模块 var express=require('express'); （2） 调用方法，返回app var app=express(); （3）端口监听 最后执行 app.listen(55555);//异步 2.定义方式 根据不同的客户端请求，返回不同的响应 3.app上的方法（app本质：请求监听函数） get app
Express 的使用
yezhihaobk的博客
06-20 617
官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似， 是专门用来创建Web 服务器的。对于前端程序员来说，最常见的两种服务器，分别是：使用 Express，我们可以更方便快捷的创建 Web 网站的服务器和 API 接口的服务器。在项目所处的目录中，运行如下的终端命令，即可将 express 安装到项目中使用：npm i express@4.17.1 （版本根据项目开发需求来定）
express框架中函数及内置中间件的使用
Rong姐姐好可爱
09-20 1112
本文已发表于个人公众号：Rong姐姐好可爱，若仓库访问速度受限，可以直接访问公众号文章https://mp.weixin.qq.com/s/uo0xb60lZ_quxj8aPRPbKQ express()函数 当你使用express框架的时候，一定会见过如下的引入： const express=require('express') 跟koa框架中，引入koa到方式是一样的，例如： const koa=require('koa') 而express官方提供express()函数来创建一个express.
Express框架快速入门
木头房子的格子铺
08-22 1237
Express框架 Express框架快速入门 Express框架的使用 Express的路由 Express的中间件 Express的模版引擎 Ejs模版
ExpressJS入门指南（二）
海瑟天涯
05-01 130
ExpressJS入门指南（二） 作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs 紧接前一篇《ExpressJS入门指南》 六、使用express(1)产生应用Express框架绑定了一个可执行脚本，名为express(1)。如果使用npm对Express框架进行全局安装，那么express到处都能使用。> npm install -g exp...
Express入门教程
day day up
07-21 2453
MongoDB是一个基于分布式文件存储的NoSQL（非关系型数据库）的一种，由C++语言编写，旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB支持的数据结构非常松散，是类似json的bjson格式，因此可以存储比较复杂的数据类型。MongoDB最大的特点是他支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。if(!err){console.log("数据库连接成功!");.........
Express快速入门
沐小侠
02-25 416
Express初体验 在Node.js后端开发中，使用官方提供的http模块可以创建一个Web服务器应用，但是此模块非常底层，要处理各种情形，比较繁琐，为此便有了 Express ,它是第三方模块，是一个基于Node.js的http模块而编写的高层模块，简化Web服务器端应用的开发。 Express基于 Node.js 平台，快速、开放、极简的 Web 开发框架。使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由用于
nodejs开发——express路由与中间件
01-02
路由 通常HTTP URL的格式是这样的： http://host[:port][path] http表示协议。 host表示主机。 port为端口，可选字段，不提供时默认为80。 path指定请求资源的URI(Uniform Resource ...来回顾我们在Node.js开发入门
C#入门经典 第五版高清 ——环境Visual Studio2010
08-27
C#经典教材，C#入门经典 第五版高清—— 环境Visual Studio2010
ASP.NET_2.0入门经典
08-09
ASP.NET_2.0入门经典 四合一教程 具体地说，本章包含以下5个主题： ● 简单介绍ASP.NET 2.0 ● 回顾ASP.NET 2.0解决的... ● 理解创建ASP.NET 2.0页面(ASPX)将要使用的工具—— Visual Web Developer Express(VWD)
Unmistakable-Blog:探索、写作、旅行、背包旅行、教育、创造——作为一个家庭
06-11
无误的网站 你好，我们是一个旅行的家庭。 我们想要一生难忘的冒险。 遵循一个想法到边缘。 并继续前进。 放弃传统。 相信我们的直觉。 做我们自己。... 快速入门安装 确保您已安装 Node.js - 我们推荐最新的N
ASP.NET 2.0入门经典(第4版) （中文版）PDF
07-23
　1.7 VWD Express——开发环境 　1.7.1 Cassini 　1.7.2 VWD的Solution Explorer 　1.7.3 使用VWD创建、打开和使用Web站点及页面 　1.7.4 示例代码目录 　1.7.5 运行页面 　1.7.6 设计区 　1.7.7 工具箱 　1.7.8 ...
SpringMVC进阶（过滤器解决中文乱码，处理json以及文件上传下载）
Sun的个人博客
04-28 1211
*** @author 孙显圣//在这里解决中文乱码问题 servletRequest . setCharacterEncoding("utf-8");//放行 filterChain . doFilter(servletRequest , servletResponse);} }/*** @author 孙显圣//在这里解决中文乱码问题 servletRequest . setCharacterEncoding("utf-8");
HttpCilent进行Post请求form-data接口，服务方接收不到参数
最新发布
试着奔跑的菜鸟的博客
05-05 207
使用HttpClient 4.5.6版本进行post请求contentType为form-data的接口，服务提供方却一直接收不到参数，是为什么，又该怎么解决呢？
了解 Postman：这个 API 工具的功能和用途是什么？
gdjnrc_com的博客
04-30 897
Postman 是一个流行的 API 开发工具，可用于创建、测试和管理 API，以及与其他开发人员共享 API 文档和代码。
db2express-c快速入门
01-11
db2express-c是IBM公司推出的一种轻量级数据库管理系统，适用于中小型企业和开发者。下面是使用db2express-c的快速入门流程： 第一步，下载和安装db2express-c。在IBM官方网站上找到db2express-c的下载链接，并按照...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值