Vue 网络请求教学后端 — 接口文档

基于 FastAPI 的极简接口,供《网络请求》讲义本地联调使用

服务地址:http://127.0.0.1:8000

一、启动方式

两种方式任选其一:

启动成功后,浏览器访问 http://127.0.0.1:8000 可看到接口清单。

二、接口一览

#方法地址用途
1GET/api/banner首页轮播图
2GET/api/song?song=mo带参数获取歌曲信息
3GET/api/chating并发请求数据
4POST/api/login登录(表单)
5GET/api/list指纹联盟列表

三、接口详情

GET 首页轮播图
http://127.0.0.1:8000/api/banner
无参数,对应讲义《Axios网络请求_GET》

返回示例

{
  "banner": [
    { "title": "Vue3 从入门到实战", "content": "组合式 API 与工程化开发" },
    { "title": "前后端分离开发", "content": "前端 Vue + 后端 FastAPI 实战联调" },
    { "title": "axios 网络请求", "content": "GET / POST / 并发 / 封装 全掌握" }
  ]
}
GET 带参数获取歌曲信息
http://127.0.0.1:8000/api/song?song=mo
参数 song 可选,默认 mo;可取 mo / yes / me

参数

参数必填可选值说明
song否mo / yes / me歌曲标识

返回示例

{
  "songInfo": {
    "song_title": "晴天",
    "song_intro_cont": "周杰伦经典歌曲,收录于专辑《叶惠美》"
  }
}
GET 并发请求数据
http://127.0.0.1:8000/api/chating
无参数,配合 /api/banner 做并发请求演示,对应讲义《Axios网络请求_并发请求》

返回示例

{
  "chating": [
    { "id": 1, "nickname": "张三", "msg": "接口返回成功啦!" },
    { "id": 2, "nickname": "李四", "msg": "并发请求两个接口同时拿到数据" }
  ]
}
POST 登录
http://127.0.0.1:8000/api/login
表单提交,对应讲义《Axios网络请求_POST》。测试账号:zhengjing / 密码:123456

参数(表单)

参数必填说明
user_id是账号
password是密码
verification_code否验证码(可不传)

登录成功返回

{
  "status": 200,
  "message": "登录成功,欢迎 zhengjing"
}

账号或密码错误返回

{
  "status": 400,
  "message": "账号或密码错误"
}
GET 指纹联盟列表
http://127.0.0.1:8000/api/list
无参数,对应讲义《Axios跨域配置》

返回示例

{
  "data": [
    { "id": 1001, "title": "前端开发课程" },
    { "id": 1002, "title": "后端开发课程" },
    { "id": 1003, "title": "数据库课程" }
  ]
}

四、讲义用法对照

讲义章节请求示例
GET 请求axios.get("http://127.0.0.1:8000/api/banner")
带参数 GETaxios.get("http://127.0.0.1:8000/api/song?song=mo")
POST 请求axios.post("http://127.0.0.1:8000/api/login", qs.stringify({...}))
并发请求axios.all([getBanner(), getChating()])
封装baseURL: "http://127.0.0.1:8000",接口 "/api/banner"
跨域配置请求 /api/list,vite 代理 target 指向 http://127.0.0.1:8000

五、常见问题