美文网首页
ajax+接口文档

ajax+接口文档

作者: 妙音天女 | 来源:发表于2021-05-20 21:58 被阅读0次

1. 初始化接口

接口功能

前端把cars数据传给后端

URL

/init

HTTP请求方式

POST

请求参数
参数 必选 类型 说明
cars true array 所有cars组成的数组
  • cars举例:
[
  {
    "id": 1,
    "category": "sedan",
    "availability": true,
    "brand": "Toyota",
    "model": "Camry",
    "model_year": "2013",
    "mileage": "85364",
    "fuel_type": "Petrol",
    "seats": "5",
    "price_per_day": 240,
    "description": "The Toyota Camry is an automobile...",
    "img": "images/Camry.jpg"
  },
  {
    "id": 2,
    "category": "sedan",
    "availability": true,
    "brand": "Nissan",
    "model": "320i",
    "model_year": "2015",
    "mileage": "36782",
    "fuel_type": "Petrol",
    "seats": "7",
    "price_per_day": 360,
    "description": "The Nissan 320i is a compact cross...",
    "img": "images/320i.jpg"
  }
  // ......
]
返回字段

2. 检查car的availability

接口功能

在添加购物车之前检查car是否可用

URL

/checkAvailability

HTTP请求方式

GET

请求参数
参数 必选 类型 说明
id true number car的唯一id
返回字段
返回字段 字段类型 说明
availability boolean true:可用,false:不可用

3. 将某car添加到购物车

接口功能

点击“添加购物车”按钮,可以点击多次添加多个(若购物车里该car数量为0,则设置为1;若car数量>0,则+1)

URL

/addCar

HTTP请求方式

POST

请求参数
参数 必选 类型 说明
id true number car的id
返回字段

4. 获取购物车中的所有car列表

接口功能

点击“查看购物车”时调用

URL

/getCartList

HTTP请求方式

GET

请求参数

返回字段
返回字段 字段类型 说明
cartCars array 所有加入购物车的的cars组成的数组
  • cartCars举例:
[
  {
    "id": 1,
    "img": "images/Camry.jpg",
    "brand": "Toyota",
    "model": "Camry",
    "model_year": "2013",
    "price_per_day": 240,
        "rentalDays": 2
  },
  {
    "id": 2,
    "img": "images/320i.jpg",
    "brand": "Nissan",
    "model": "320i",
    "model_year": "2015",
    "price_per_day": 360,
    "rentalDays": 10
  },
  // ......
]

5. 将某car从购物车删除

URL

/deleteCar

HTTP请求方式

POST

请求参数
参数 必选 类型 说明
id true number car的id
返回字段

6. 批量修改购物车中所有car的天数

接口功能

在购物车页点击”Proceeding to Checkout“按钮

URL

/changeCarsDays

HTTP请求方式

POST

请求参数
参数 必选 类型 说明
cartCars true array

cartCar数组中的每一项都是{id: id, days: days}键值对

id true number car的id
days true number 该car租的天数(前端会传>0的数)
  • cartCars举例:
[{
  id: 1,
  days: '2'
}, {
  id: 2,
  days: '10'
}]
返回字段

7. 获取购物车总价格

接口功能

在Check Out页面底部显示用户要付的总价格

URL

/getCartTotalPrice

HTTP请求方式

GET

请求参数

返回字段
返回字段 字段类型 说明
totalPrice number 购物车内所有 car单价*数量 相加

8. 下单

接口功能

在Checkout页填写表单内容并传给后端,同时后端将购物车表内容放入订单表,并清空购物车

URL

/checkOutOrder

HTTP请求方式

POST

请求参数
参数 必选 类型 说明
firstName true string First Name
lastName true string Last Name
email true string Email address
address1 true string Address Line 1
address2 true string Address Line 2
city true string City
state true string State
postCode true string Post Code
paymentType true string Payment Type(例:VISA)
返回字段

9. 获取订单结果

接口功能

在Checkout页下单成功后,跳转的结果页显示用户的姓名、email、订单总额、订单列表

URL

/getResult

HTTP请求方式

GET

请求参数

返回字段
返回字段 字段类型 说明
firstName string First Name
lastName string Last Name
email string Email address
totalPrice number 订单总金额
orderedCars array 所有下单的cars组成的数组
  • orderedCars举例:
    • 和之前的cars比,去掉了id, availability, img,增加了rentalDays
[
  {
    "category": "sedan",
    "brand": "Toyota",
    "model": "Camry",
    "model_year": "2013",
    "mileage": "85364",
    "fuel_type": "Petrol",
    "seats": "5",
    "price_per_day": 240,
    "description": "The Toyota Camry is an automobile...",
        "rentalDays": 2
  },
  {
    "category": "sedan",
    "brand": "Nissan",
    "model": "320i",
    "model_year": "2015",
    "mileage": "36782",
    "fuel_type": "Petrol",
    "seats": 7,
    "price_per_day": 360,
    "description": "The Nissan 320i is a compact cross...",
    "rentalDays": 10
  },
  // ......
]

相关文章

  • ajax+接口文档

    1. 初始化接口 接口功能 前端把cars数据传给后端 URL /init HTTP请求方式 POST 请求参数 ...

  • Vue应用框架整合与实战--前后端分离后的开发模式篇

    开发流程 后台编写和维护接口文档,在 API 变化时更新接口文档 后台根据接口文档进行接口开发 前端根据接口文档进...

  • 接码平台汇总

    短租接口文档 火云接口文档 火云官网 神话接口文档

  • 接口测试--接口文档规范

    接口测试的依据,往往不是需求文档,而是接口文档。 那么,接口文档的准确性便至关重要,本文推荐apipost接口文档...

  • 谈谈单接口测试

    如果只是单个接口的测试还是归属于功能测试。 平时我们是怎么做接口测试的?接口文档、接口文档,一定要看接口文档。初学...

  • 工作总结 文章目录

    工作总结 文章目录 狼人杀拾旧后台接口文档 狼人杀俱乐部后台接口文档 狼人杀接口文档 OA使用文档(报表,人事) ...

  • drf框架接口文档

    drf框架接口文档 REST framework可以自动帮助我们生成接口文档。 接口文档以网页的方式呈现。 自动接...

  • 接口文档工具 apiPost

    ApiPost = 接口调试+接口文档快速生成+接口文档规范化管理+Mock API+接口流程测试。 生成Mock...

  • 接口文档

    接口文档 1.登录 请求地址:/account/login请求方式:post 成功示例:{"ok":1,"data...

  • 接口文档

    第6节(判断数据库中是否有此用户) post www.test.com/api api.test.com

网友评论

      本文标题:ajax+接口文档

      本文链接:https://www.haomeiwen.com/subject/qbnbjltx.html