以项目登录接口为例-大前端之开发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"
            }
        ]
    }
}
目录
相关文章
|
XML 前端开发 测试技术
如何使用 Postman 发送 POST XML 请求?
使用 Postman 发送带有 XML 数据的 POST 请求。我们将引导您完成将 XML 数据有效发送到 Web 服务或 API 的步骤,使处理这种常见数据格式变得简单易行。
|
10月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
801 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
XML JSON API
掌握 Postman:高级 GET 请求技术与响应分析
本指南详细讲解了如何在 Postman 中发送 GET 请求并解析 API 响应,帮助开发者提升 API 测试与开发能力。Postman 是一款强大的工具,可简化请求发送和响应分析流程,并支持团队协作及多版本管理。通过创建集合、配置请求参数、设置身份验证与请求头等步骤,开发者能够高效测试 API。同时,理解响应体、Cookie、响应头等内容有助于深入分析 API 行为,确保高质量的软件交付。掌握 Postman 不仅提高效率,还能加深对 Web 通信机制的理解。
|
9月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
357 5
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
738 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
4067 64
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
677 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
运维 Cloud Native Java
postman发起post请求遇到报错:java.io.FileNotFoundException (文件名、目录名或卷标语法不正确。)
遇到bug报错,多猜可能的原因,控制变量反复测试,直至找到问题的关键,然后再思考如何解决或者回避。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
|
8月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
9月前
|
数据可视化 测试技术 API
从接口性能到稳定性:这些API调试工具,让你的开发过程事半功倍
在软件开发中,接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快,传统方式已难满足需求,专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具,对比其功能与适用场景,并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案,助力提升API开发与测试效率。