以项目登录接口为例-大前端之开发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"
            }
        ]
    }
}
目录
相关文章
|
9月前
|
机器学习/深度学习 人工智能 测试技术
EdgeMark:嵌入式人工智能工具的自动化与基准测试系统——论文阅读
EdgeMark是一个面向嵌入式AI的自动化部署与基准测试系统,支持TensorFlow Lite Micro、Edge Impulse等主流工具,通过模块化架构实现模型生成、优化、转换与部署全流程自动化,并提供跨平台性能对比,助力开发者在资源受限设备上高效选择与部署AI模型。
789 9
EdgeMark:嵌入式人工智能工具的自动化与基准测试系统——论文阅读
|
11月前
|
人工智能 前端开发 测试技术
如何让AI帮你做前端自动化测试?我们这样落地了
本文介绍了一个基于AI的UI自动化测试框架在专有云质量保障中的工程化实践。
4515 24
如何让AI帮你做前端自动化测试?我们这样落地了
|
人工智能 缓存 自然语言处理
别再手搓测试数据了!AE测试数据智造系统揭秘
本文介绍如何通过构建基于大语言模型的测试数据智造Agent,解决AliExpress跨境电商测试中数据构造复杂、低效的问题,推动测试效率提升与智能化转型。
别再手搓测试数据了!AE测试数据智造系统揭秘
|
数据采集 算法 数据管理
频标频稳比对测试系统重新定义测量边界
在上海张江实验室的超净间里,一束激光正以每秒 30 万公里的速度穿越真空腔,与原子跃迁频率进行着纳米级的较量。而在千里之外的西安高新区,一台黑色金属机箱内,SYN5609A 型频标比对测量系统正以同样的精度,为这场量子级的时间竞赛提供着基准坐标。这台看似普通的仪器,正在用双混频时差技术,将人类对时间的掌控精度推向新的维度。
|
jenkins 测试技术 Shell
利用Apipost轻松实现用户充值系统的API自动化测试
API在现代软件开发中扮演着连接不同系统与模块的关键角色,其测试的重要性日益凸显。传统API测试面临效率低、覆盖率不足及难以融入自动化工作流等问题。Apipost提供了一站式API自动化测试解决方案,支持零代码拖拽编排、全场景覆盖,并可无缝集成CI/CD流程。通过可视化界面,研发与测试人员可基于同一数据源协作,大幅提升效率。同时,Apipost支持动态数据提取、性能压测等功能,满足复杂测试需求。文档还以用户充值系统为例,详细介绍了从创建测试用例到生成报告的全流程,帮助用户快速上手并提升测试质量。
1335 18
|
SQL 测试技术
除了postman还有什么接口测试工具
最好还是使用国内的接口测试软件,其实国内替换postman的软件有很多,这里我推荐使用yunedit-post这款接口测试工具来代替postman,因为它除了接口测试功能外,在动态参数的支持、后置处理执行sql语句等支持方面做得比较好。而且还有接口分享功能,可以生成接口文档给团队在线浏览。
699 2
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1040 0
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
1111 0
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1620 14

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1209
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    539
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    419
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    414
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    527
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    708
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1309
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    302
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1097
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    491