以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

简介: 以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

开发背景

我们做完前端后做接口联调第一步是带token请求接口!因此本文详细讲解,

实战开始

获取token

以登录接口为例

简要描述:

  • 登录接口(非强制登录)

请求URL:

  • API_BASE + /login

请求方式:

  • POST

参数:

参数名

必选

类型

说明

username

string

账号(用户名/手机号/邮箱)

password

string

密码

flag

int

1:强制用户名 0:非强制

返回示例

{
    "code": 200,
    "msg": "success",
    "data": {
        "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC94aW54aW5nLWFwaS50ZXN0LmNvbVwvYXBpXC92MVwvbG9naW4iLCJpYXQiOjE1ODU5ODU2NTUsImV4cCI6MTU4NTk4OTI1NSwibmJmIjoxNTg1OTg1NjU1LCJqdGkiOiJEM3hwcXlTYWRCU3NFSjc5Iiwic3ViIjoxMDAwMCwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyJ9.spceIQnlkXs8oal7eiph6L9yJqOeWnhppXdzt6ulDdk",
        "expires_in": 3600
    }
}

返回参数说明

参数名

类型

说明

token

string

登录token

备注

  • 更多返回错误代码请看首页的错误代码描述

基础知识和思路如下

步骤 1:设置登录请求

  1. 打开 Postman: 打开 Postman 应用程序。
  2. 创建新的请求:
  • 点击左上角的 “New” 按钮。
  • 选择 “Request” 来创建一个新的请求。
  • 为请求命名,例如 “Login Request”。
  1. 设置请求方法和 URL:
  1. 设置请求体:
  • 点击 “Body” 选项卡。
  • 选择 “raw” 和 “JSON” 格式。
  • 输入登录请求的 JSON 数据,例如:

json

{
  "username": "your_username",
  "password": "your_password",
  "flag": 0
}
  1. 发送请求:
  • 点击 “Send” 按钮,发送请求。
  • 在响应部分,你会看到服务器返回的 Token,如下所示:

json

{
  "code": 200,
  "msg": "success",
  "data": {
    "token": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
    "expires_in": 3600
  }
}

实际操作,

跟着卓伊凡开始吧,输入请求地址,传入登录请求参数,用户名username 和password ,因为我这个是手机号账户,所以flag 非强制 int 写0

点击send直接请求

请求成功得到,token!这个我们复制出来先,暂存记事本之类

带token请求

以下为思路

步骤 2:使用 Token 进行后续请求

  1. 创建新的请求:
  • 点击左上角的 “New” 按钮。
  • 选择 “Request” 来创建一个新的请求。
  • 为请求命名,例如 “Protected Request”。
  1. 设置请求方法和 URL:
  1. 设置请求头:
  • 点击 “Headers” 选项卡。
  • 添加一个新的请求头,键为 Authorization,值为 Bearer your_token,其中 your_token 替换为上一步获取的实际 Token。
  1. 发送请求:
  • 点击 “Send” 按钮,发送请求。
  • 在响应部分,你会看到服务器返回的响应数据。

比如我们访问一个个人中心,个人中心页面就需要带token才能访问,以个人中心我的粉丝这个接口为实例:

简要描述:

  • 我的粉丝接口(强制登录)

请求URL:

  • API_BASE + /follow/fans

请求方式:

  • POST

参数:

返回示例

{
    "code": 200,
    "msg": "成功",
    "data": [
        {
            "id": 10023,
            "username": "123405896",
            "nickname": "",
            "avatar": ""
        },
        {
            "id": 10022,
            "username": "126174538",
            "nickname": "",
            "avatar": ""
        },
        {
            "id": 10024,
            "username": "102517346",
            "nickname": "",
            "avatar": ""
        }
    ]
}

返回参数说明

参数名

类型

说明

username

string

账号

nickname

string

昵称

avatar

string

头像

新建接口,

我们在 中 加入 token

添加一个新的请求头,键为 Authorization,值为 Bearer your_token,其中 your_token 替换为上一步获取的实际 Token,也就是获取卓伊凡让你放记事本的。

再次请求 send,返回成功

以下是返回的具体json数据

复制{
    "code": 200,
    "msg": "成功",
    "data": {
        "total": 1,
        "total_page": 1,
        "current_page": 1,
        "list": [
            {
                "id": 14,
                "user_id": 154,
                "follow_id": 9,
                "status": 1,
                "updated_at": "2020-12-25 14:49:56",
                "created_at": "2020-12-24 18:08:53",
                "username": "162504389",
                "nickname": "我还是你大哥",
                "avatar": "https://qingtingcun.youyacao.com/qiniu_202012251032165296122925.png?imageView2/1/w/800/h/800",
                "vip_end_time": 0,
                "desc": "",
                "is_vip": 0,
                "is_follow": 0,
                "same_tags": 0,
                "product_num": "0"
            }
        ]
    }
}
目录
打赏
0
5
6
0
201
分享
相关文章
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
Potpie.ai 是一个基于 AI 技术的开源平台,能够为代码库创建定制化的工程代理,自动化代码分析、测试和开发任务。
171 19
Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
Python 请求微店商品详情数据 API 接口
微店开放平台允许开发者通过API获取商品详情数据。使用Python请求微店商品详情API的主要步骤包括:1. 注册并申请API权限,获得app_key和app_secret;2. 确定API接口地址与请求参数,如商品ID;3. 生成签名确保请求安全合法;4. 使用requests库发送HTTP请求获取数据;5. 处理返回的JSON格式响应数据。开发时需严格遵循微店API文档要求。
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
从Postman到Apipost:我的动态参数测试实战踩坑记
作为一名全栈开发工程师,在开发用户中心模块时,我遇到了复杂参数API测试的挑战。最初使用Postman时,发现其在生成动态参数(如邮箱、手机号和日期)时存在诸多问题,导致测试效率低下甚至出错。例如,随机生成的邮箱格式无效等 后来,CTO推荐了Apipost,它提供了更智能的参数生成方式:支持真实邮箱、符合规范的手机号以及合法日期范围,极大提升了测试效率和准确性。通过对比,Apipost在处理复杂动态参数方面明显优于Postman,减少了维护成本并提高了团队协作效率。现在,我们已全面切换到Apipost,并利用其「参数组合测试」功能发现了多个边界条件bug。
利用Postman和Apipost进行API测试的实践与优化-动态参数
在API测试中,Postman和Apipost是常用的工具。Postman内置变量功能有限,面对复杂场景时需编写JavaScript脚本,增加了维护成本。而Apipost提供丰富的内置变量、可视化动态值配置和低代码操作,支持生成真实随机数据,如邮箱、手机号等,显著提升测试效率和灵活性。对于复杂测试场景,Apipost是更好的选择,能有效降低开发与维护成本,提高测试工作的便捷性和可维护性。
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
165 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
Windows用户必备:Postman v11详细安装指南与API测试入门教程(附官网下载
Postman是全球领先的API开发与测试工具,支持REST、SOAP、GraphQL等协议调试。2025年最新版v11新增AI智能生成测试用例、多环境变量同步等功能,适用于前后端分离开发、自动化测试、接口文档自动生成及团队协作共享API资源。本文详细介绍Postman的软件定位、核心功能、安装步骤、首次配置、基础使用及常见问题解答,帮助用户快速上手并高效利用该工具进行API开发与测试。
一个测试工程师的实战笔记:我是如何在Postman和Apipost之间做出选择的?
优秀的API测试工具应该具备: 分层设计:既有可视化操作,也开放代码层深度定制 场景感知:自动识别加密需求推荐处理方案 协议包容:不强迫开发者为了不同协议切换工具 数据主权:允许自主选择数据存储位置
52 7
深度解析淘宝商品评论API接口:技术实现与应用实践
淘宝商品评论API接口是电商数据驱动的核心工具,帮助开发者高效获取用户评价、画像及市场趋势。其核心功能包括多维度信息采集、筛选排序、动态更新、OAuth 2.0认证和兼容多种请求方式。通过该接口,开发者可进行商品优化、竞品分析、舆情监控等。本文详细解析其技术原理、实战应用及挑战应对策略,助力开启数据驱动的电商运营新篇章。
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。

热门文章

最新文章