【express-generator】02-路由基本使用+api工具测试路由

news/2024/12/26 18:38:53 标签: express, 经验分享, 前端, node.js

上篇回顾

上一篇，我们介绍了安装创建和初始化一个express-generator应用程序，并且给了一些注意点，相信跟着步骤，你也可以做到文章里呈现的效果。

这一篇，我们有两大主题：路由的基本使用、api工具测试路由。

首先进行：

一、express-generator路由的基本使用

依次讲一下常用的方法：GET 和 POST

（修改如:PUT方法，删除如:DELETE方法,后续引入数据库的时候再讲解，本篇主要讲GET和POST。）

GET方法

在讲之前，让我们看看创建和初始化一个e-g（express-generator，后续统一用e-g进行简化）应用程序，给我们的路由案例。

主要看这两部分的代码，其他代码已做省略。

//app.js
//....省略代码

//路由引入
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


//路由注册(使用)
app.use('/', indexRouter);
app.use('/users', usersRouter);


// ...省略代码

这个routes文件夹下的文件，用来写路由方法。 

//routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
//routes.users.js
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

根据默认案例给的路由代码，我们尝试访问这些默认的路由。

启动项目

nodemon npm start

默认路由（注意：我的启动端口号是3004，如果你是3000或其他，则需要对应替换，在bin/www中进行修改，上一篇有进行介绍。）

http://localhost:3004/

http://localhost:3004/users

我们可以按照已给的案例，修改路由方法或者撰写新的路由方法。

下面撰写一个新的路由。

/routes/blog.js
var express = require('express');
var router = express.Router();

//定义一个对数数组
var studentArray=[
    {
      "title": "探索人工智能的未来",
      "content": "本文将探讨人工智能的发展趋势，以及它如何影响我们的日常生活。",
      "id": 1
    },
    {
      "title": "健康饮食的重要性",
      "content": "了解健康饮食的重要性，以及它对提高生活质量的影响。",
      "id": 2
    },
    {
      "title": "旅行日记：环游世界",
      "content": "记录了作者环游世界的所见所闻，以及旅行中的文化体验和感悟。",
      "id": 3
    },
    {
      "title": "科技与教育的结合",
      "content": "本文讨论了科技如何改变教育行业，以及这种结合带来的机遇和挑战。",
      "id": 4
    },
    {
      "title": "环保生活：从我做起",
      "content": "介绍如何通过日常生活中的小改变来实践环保，保护我们的地球。",
      "id": 5
    }
  ]
/* GET home page. */
router.get('/', function(req, res, next) {
//在返回给前端这个对象数组。
 res.send(studentArray)
});

module.exports = router;

定义一个对象数组，并且通过res.send()在页面进行显示。

接着在app.js中引入和使用这个路由。

//..放在对应位置
var blogRouter=require('./routes/blog');


//...代码省略
//..放在对应位置
app.use('/blog', blogRouter);

启动服务

nodemon npm start

访问地址：localhost:30004/blog（对应替换成自己的路由）

（我用的是chrome浏览器）

POST方法

很多时候，我们需要收集前端的数据，比如发送前端的表单数据给后端进行校验等等。

接下来演示POST方法。

我在routes/index.js中，新增了一个post方法。

从前端接收两个变量：username和password，在后端进行校验，如果通过验证则返回data对象给前端，否则则返回“验证失败”。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


// 新增代码
router.post('/login',function(req, res, next){
  console.log("前端获取的值>>>",req.body.username,req.body.password);
  
  if(req.body.username=='root' && req.body.password=='root'){
    // const flag=true
    data={
      'flag':true,
      "message":"验证成功"
    }
    res.send(data)
  }else{
    res.send("验证失败");
  }
})
module.exports = router;

这里为了方便演示，我就不写一个html页面进行收集表单数据了。我们借助测试工具进行路由测试。 

打开apipost测试工具

关于apipost工具，可以直接在官网进行下载：Apipost-API 文档、设计、调试、自动化测试一体化协作平台

新增一个post方法（注意把地址写正确，我的启动服务端口是3004，如果没有做修改，那端口号一般就是3000）

 点击发送，则会得到以下结果：

测试发送非正确的数据(username==root,password==123123)

 

发送结果如下：

因为我们设置了以下这种情况，才能通过验证。

req.body.username=='root' && req.body.password=='root'

到此，一个post请求就完成了。

二、APIPOST的使用

API测试工具如Apipost的主要作用包括：

  1. 支持多种API类型与通信协议：Apipost支持HTTP、Websocket、TCP和GRPC等多种协议，能够模拟发送各种HTTP请求（如POST、GET、PUT等）。

  2. 自动化测试与调试：用户可以轻松创建、调试和测试API接口，生成高质量的API文档，并与团队成员进行实时协作和沟通。

  3. 团队协作与版本控制：Apipost支持多人同时编辑和管理API接口，团队成员之间的数据更新会实时同步。同时，它提供了版本控制功能，用户可以查看和管理接口的历史版本。

  4. Mock数据服务：Apipost能预先模拟Mock接口，让开发实现代码先行，后端可以通过先编写Mock数据给前端，从而让前端提前进入接口调用、前端开发状态。

  5. 文档生成与分享：Apipost可以自动生成精美的API文档，支持多种导出格式，方便团队成员查阅和分享。同时，提供了文档权限管理功能，确保文档的安全性。

  6. 丰富的调试工具：提供断点、变量监视和调试日志等丰富的调试工具，帮助用户更方便地进行API调试。

对于前端开发者在团队协作中的作用：

  1. 接口调试与测试：前端开发者可以使用Apipost进行常规的接口调试功能和接口自动化测试，利用断言和流程测试功能，进行接口的流程化测试。

  2. Mock数据使用：后端可以通过Apipost先编写Mock数据给前端，让前端提前进入接口调用和开发状态，实现前后端并行开发。

  3. 生成序号代码：Apipost提供主流语言代码自动生成功能，前端开发者每编写一个接口，Apipost都支持生成主流语言代码，提高开发效率。

  4. 文档共享与协作：Apipost支持API文档共享，前端开发者可以快速轻松地生成、查看和分享接口文档，大幅度节省了不必要的时间消耗，同时，也提高了沟通协作的效率。

  5. 项目进度同步：Apipost将API文档共享、个人资源同步、项目进度同步以及项目全局管控串联起来，通过统一、规范的协作打通所有工作流程，从而大幅度提升工作效率。

 这里发几张我平时练习使用到的常用方法（注意看各种参数）

POST方法

在后端的具体方法中，通过req.body.xx进行获取。比如req.body.id就是对象中的id

req 是 Node.js 中 Express 框架的一个内置对象，代表 HTTP 请求。它包含了请求的详细信息，如请求头、请求参数、请求体等。req.body 是 req 对象的一个属性，它包含了客户端通过 HTTP 请求发送的数据，通常是在 POST 或 PUT 请求中发送的数据。

注意：这里的 req.body 是通过 Express 的内置中间件 express.json() 或 express.urlencoded() 解析的，这些中间件能够解析 JSON 或 URL 编码的请求体，并将其存储在 req.body 中。如果你没有在 Express 应用中使用这些中间件，req.body 将不会被解析，你将无法访问请求体中的数据。

你创建一个express-generator应用程序，这些中间件就会自动帮我们生成，只要专心负责业务逻辑即可。

GET方法

（这里在header中添加content-type和authenrization）

Content-Type 是 HTTP 请求头（header）中的一个字段，用于指定发送给服务器的内容的媒体类型（也称为 MIME 类型）。这个字段告诉服务器，客户端发送的数据是什么类型的，这样服务器就可以正确地解析和处理这些数据。

Authorization 是 HTTP 请求头中的一个字段，用于在客户端请求中提供身份验证凭证，以便访问受保护的资源。 

 PUT方法

（这里的演示案例，需要携带authenrization给后端进行验证，验证通过才能进行修改）

 

 到此，APIPOST常用的方法已经介绍完毕。

接下来的express-generator更新内容，我们会尝试将express-generator应用程序跟热门的前端框架（如vue/react）建立联系（主要通过接口进行数据获取）以及跟数据库（mysql）建立联系（连接数据库、表的增删改查等等）

如果你喜欢这篇文章，可以点赞收藏。

关注我，了解更多实用的前端知识。


http://www.niftyadmin.cn/n/5800827.html

相关文章

云手机群控能用来做什么？

云手机群控能用来做什么？

随着云手机的发展，云手机群控技术逐渐从小众的游戏多开工具，发展为涵盖多个领域的智能操作平台。不论是手游搬砖、短视频运营，还是账号养成等场景，云手机群控都展现出了强大的应用潜力。本文将为大家详细解析云手机群控的应用场景…
阅读更多...
SQLSERVER、MYSQL LIKE查询特殊字符和转义字符相同与不同

SQLSERVER、MYSQL LIKE查询特殊字符和转义字符相同与不同

SQL Server 和 MySQL 都支持 LIKE 操作符进行模式匹配，但它们在处理特殊字符和转义字符方面有一些差异。尽管两者有很多相似之处，但在某些细节上并不完全通用。以下是 SQL Server 和 MySQL 在 LIKE 操作符使用上的比较： 通配符 百分号 %&am…
阅读更多...
RAGFlow 基于深度文档理解构建的开源 RAG引擎 - 安装部署

RAGFlow 基于深度文档理解构建的开源 RAG引擎 - 安装部署

RAGFlow 基于深度文档理解构建的开源 RAG引擎 - 安装部署 flyfish 1. 确保 vm.max_map_count ≥ 262144 这是指要调整Linux内核参数vm.max_map_count，以确保其值至少为262144。这个参数控制着进程可以映射的最大内存区域数量。对于某些应用程序（如Ela…
阅读更多...
IntelliJ IDEA 远程调试

IntelliJ IDEA 远程调试

IntelliJ IDEA 远程调试 在平时开发 JAVA 程序时，在遇到比较棘手的 Bug 或者是线上线下结果不一致的情况下，我们会通过打 Log 或者 Debug 的方式去定位并解决问题，两种方式各有利弊，今天就简要介绍下如何通过远程 Debug 的情况下…
阅读更多...
Unity3D用正则判断身份证号或邮箱

Unity3D用正则判断身份证号或邮箱

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、正则判断邮箱格式👉二、正则判断身份证号👉壁纸分享👉总结👉前言 C#正则表达式（Regex）是一种用来匹配字符串模式的强大工具。在C#中，可以使用System.Text.RegularExpressions命名空间下的Regex类来处…
阅读更多...
华为云国内版与国际版的主要区别解析

华为云国内版与国际版的主要区别解析

华为云作为全球领先的云计算服务提供商，提供了国内版和国际版两种服务。虽然它们都旨在为用户提供高效、可靠的云计算解决方案，但在功能、服务、合规性等方面存在一些显著的区别。我们九河云通过本文将详细分析华为云国内版与国际版的主要区别&#xff0…
阅读更多...
快速理解24种设计模式

快速理解24种设计模式

简单工厂模式 建立产品接口类，规定好要实现方法。 建立工厂类，根据传入的参数，实例化所需的类，实例化的类必须实现指定的产品类接口 创建型 单例模式Singleton 保证一个类只有一个实例，并提供一个访问他它的全局…
阅读更多...
Hbase的特点、特性

Hbase的特点、特性

Hbase是一种非关系型数据库，它的存储基于hdfs，是一种分布式的、稀疏的多维排序的映射。 （1）分布式。Hbase是分布式、可拓展的，以hdfs为数据存储 （2）稀疏。hbase中存储的表的每一行可以有不同数…
阅读更多...
最新文章

Copyright @ 2022~2023