Web前端最全Web项目乐淘（LeTao）前后段对接的接口文档，前端开发工程师培训机构

于 2024-05-09 16:12:03 发布
阅读量233 收藏 5
点赞数 3
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84411822/article/details/138618779
版权

HTTP

  • HTTP 报文结构是怎样的？

  • HTTP有哪些请求方法？

  • GET 和 POST 有什么区别？

  • 如何理解 URI？

  • 如何理解 HTTP 状态码？

  • 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

  • 对 Accept 系列字段了解多少？

  • 对于定长和不定长的数据，HTTP 是怎么传输的？

  • HTTP 如何处理大文件的传输？

  • HTTP 中如何处理表单数据的提交？

  • HTTP1.1 如何解决 HTTP 的队头阻塞问题？

  • 对 Cookie 了解多少？

  • 如何理解 HTTP 代理？

  • 如何理解 HTTP 缓存及缓存代理？

  • 为什么产生代理缓存？

  • 源服务器的缓存控制

  • 客户端的缓存控制

  • 什么是跨域？浏览器如何拦截响应？如何解决？

    开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    • 添加商品到购物车

  • 从购物车删除某件商品

  • 查询某个用户的购物车的信息

  • 上传模块

    • 上传用户头像

  • 上传商品的图片

端口号

===================================================================

8888

登录、注册模块

=======================================================================

登录

| 格式 | 说明 |

| — | — |

| 接口名 | /login |

| 请求方式 | POST |

| 请求参数 | 类型 ：JSON |

| 属性 | uid,pwd |

| 含义 | 用户学号、登录密码 |

| 返回 | 登录成功、登录失败 |

注册

| 格式 | 说明 |

| — | — |

| 接口名 | /users |

| 请求方式 | POST |

| 请求参数 | 类型 ：JSON |

| 属性 | uid pwd nickname phone area head_url |

| 含义 | 学号 密码 昵称 电话号码 校区 头像URL |

| 返回 | 1 |

  • 说明：

1：说明注册成功

错误

| 格式 | 说明 |

| — | — |

| 接口名 | /error |

| 请求方式 | POST |

| 请求参数 | 无 |

| 返回 | 错误 |

  • 说明:

除登录外，其他请求所有错误都会返回"错误"字样 前端可自由处理

用户模块

====================================================================

修改用户名

| 格式 | 说明 |

| — | — |

| 接口名 | /users |

| 请求方式 | PUT |

| 请求参数 | 类型 ：JSON |

| 属性 | uid pwd nickname phone area head_url |

| 含义 | 学号 密码 昵称 电话号码 校区 头像URL |

| 返回 | 1 |

  • 说明:

1说明修改成功

获取用户信息

| 格式 | 说明 |

| — | — |

| 接口名 | /users/{uid} |

| 请求方式 | GET |

| 请求参数 | 类型：整数 |

| 属性 | uid |

| 含义 | 学号 |

| 返回 | JSON |

返回样例：

{

“uid”: 201901,

“pwd”: “123456”,

“nickname”: “john”,

“phone”: “123456789”,

“area”: “ruanjianyuan”,

“head_url”: “www.baidu.com”

}

  • 字段说明

学号 密码 昵称 电话号码 校区 头像URL

订单模块

====================================================================

根据买家信息获取订单

| 格式 | 说明 |

| — | — |

| 接口名 | /orders/bid/{bid} |

| 请求方式 | GET |

| 请求参数 | 类型 ：整数 |

| 属性 | bid |

| 说明 | 买家学号 |

| 返回 | JSON |

URL:/orders/bid/{bid}

方式:GET

参数:

名称:bid

类型:int

说明:买家学号

返回样例:

{

“time”: “2018-08-02 22:05:52”,

“buyer”: {

“uid”: 201901,

“pwd”: null,

“nickname”: null,

“phone”: null,

“area”: null,

“head_url”: null

},

“seller”: {

“uid”: 201902,

“pwd”: null,

“nickname”: null,

“phone”: null,

“area”: null,

“head_url”: null

},

“goods”: {

“gid”: 101,

“gname”: null,

“description”: null,

“area”: null,

“price”: null,

“kind”: null,

“user”: null,

“time”: null,

“imgURLs”: null,

“comments”: null

}

}

  • 字段说明

time是时间,buyer是买家,seller是卖家,goods是商品

根据卖家信息获取订单

| 格式 | 说明 |

| — | — |

| 接口名 | /orders/sid/{sid} |

| 请求方式 | GET |

| 请求参数 | 类型 ：整数 |

| 属性 | sid |

| 说明 | 卖家学号 |

| 返回 | JSON |

  • 说明：

返回样例以及字段说明同上

提交订单

| 格式 | 说明 |

| — | — |

| 接口名 | /orders |

| 请求方式 | POST |

| 请求参数 | 类型 ：JSON |

| 属性 | time buyer_id seller_id gid |

| 含义 | 时间 买家ID 卖家ID 商品ID |

| 返回 | 1 |

  • 备注：

time(格式: yyyy-mm-dd hh:mm:ss)

  • 字段说明:1说明添加成功

商品模块

====================================================================

发布商品

| 格式 | 说明 |

| — | — |

| 接口名 | /goods |

| 请求方式 | POST |

| 请求参数 | 类型 ：JSON |

| 属性 | gname description area price kind time user imgURLs |

| 返回状态码 | 201 |

  • 参数样例

{

“gname”: “联想电脑”,

“description”: “白色”,

“area”: “中心”,

“price”: 2000,

“kind”: “电子产品”,

“time”: “2020-12-2 23:31:20”,

“user”: {

“uid”: 1

},

“imgURLs”: [

“h10-1”,

“h10-2”,

“h10-3”

]

}

随机获取商品列表

| 格式 | 说明 |

| — | — |

| 接口名 | /goods |

| 请求方式 | GET |

| 请求参数 | 无 |

| 返回状态码 | 200 |

| 返回值 | JSON数组 |

  • 返回值样例

[

{

“gid”: 6,

“gname”: “平板”,

“description”: “白色”,

“area”: “洪家楼”,

“price”: 20.0,

“kind”: “IPAD”,

“time”: “2020-12-02 23:31:20”,

“user”: null,

“imgURLs”: [],

“comments”: null

},

{

……

},

{

……

}

]

功能：

按时间顺序返回商品列表

| 格式 | 说明 |

| — | — |

| 接口名 | /goods-by-time |

| 请求方式 | GET |

| 请求参数 | 无 |

| 返回状态码 | 200 |

| 返回值 | JSON数组 |

返回值同上例。

搜索某个商品的详细信息

| 格式 | 说明 |

| — | — |

| 接口名 | /goods/{gid} |

| 请求方式 | GET |

| 请求参数 | gid |

| 类型 | 整数 |

| 含义 | 商品编号 |

| 返回状态码 | 200 |

| 返回值 | JSON对象 |

  • 返回样例

{

“gid”: 1,

“gname”: “耳机”,

“description”: “红色”,

“area”: “兴隆山”,

“price”: 20.0,

“kind”: “Mac”,

“time”: “2008-08-08 00:00:00”,

“user”: {

“uid”: 1,

“pwd”: null,

“nickname”: “小花”,

“phone”: “15662679012”,

“area”: “软件园”,

“head_url”: “小花的头像”

},

“imgURLs”: [

“h11”,

“h12”,

“h13”

],

“comments”: [

{

“comment_id”: 2,

“gid”: null,

“user”: {

“uid”: 1,

“pwd”: null,

“nickname”: “小花”,

“phone”: “15662679012”,

“area”: “软件园”,

“head_url”: “小花的头像”

},

“text”: “谢谢”,

“time”: “2020-12-02 21:40:00”

},

{

……

},

{

……

},

……

]

}

查询某个用户发布的所有商品

| 格式 | 说明 |

| — | — |

| 接口名 | /goods-by-user/{uid} |

| 请求方式 | GET |

| 请求参数 | uid |

| 类型 | 整数 |

| 含义 | 学生学号 |

| 返回状态码 | 200 |

| 返回值 | JSON数组 |

  • 返回样例:

[

{

“gid”: 3,

“gname”: “手机”,

“description”: null,

“area”: null,

“price”: 1000.0,

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

[外链图片转存中…(img-ISkUpey3-1715242299538)]

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-pAmdjqep-1715242299539)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-qtnwcLeo-1715242299539)]

2401_84411822
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端开发中的接口文档类型与要素解析
qq_44061998的博客
06-19 1745
接口文档在Web前端开发中起着至关重要的作用，本文将介绍常见的接口文档类型和接口要素，帮助前端开发人员更好地理解和处理接口文档，并提供相应的代码案例。
Web项目乐淘（LeTao）前后段对接的接口文档
SongyangJi
12-03 809
文章目录端口号登录、注册模块登录注册错误用户模块修改用户名获取用户信息订单模块根据买家信息获取订单根据卖家信息获取订单提交订单商品模块发布商品随机获取商品列表按时间顺序返回商品列表搜索某个商品的详细信息查询某个用户发布的所有商品根据商品的种类搜索商品按商品的名字模糊查询商品评论模块新增评论删除评论购物车模块添加商品到购物车从购物车删除某件商品查询某个用户的购物车的信息上传模块上传用户头像上传商品的图片 端口号 8888 登录、注册模块 登录 格式 说明 接口名 /login 请求方式 P
Web接口文档
HUBTOO的博客
04-23 220
接收词汇片段参数，加载词库，查询以该词汇片段开头的词汇，结果只返回前20个词汇，若未查询到词汇则返回空列表。若加载词库出错则返回“异常输出”。接收词汇，加载词库，查询该词汇的词性和中文释义，若未通过“参数检查”，加载词库出错或未查询到该词汇则返回“异常输出”。
Swagger介绍及使用
光脚丫思考的专栏
09-25 2万+
作者：wuqke 链接：https://www.jianshu.com/p/349e130e40d5 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 一、导语 相信无论是前端还是后端开发，都或多或少地被接口文档折磨过。前端经常抱怨后端给的接口文档与实际情况不一致。后端又觉得编写及维护接口文档会耗费不少精力，经常来不及更新。其实无论是前端调用后端，还是后端调用后端，都期望有一个好的接口文档。但是这个接口文档对于程序员来说，就跟注释一样，经常会抱怨别人写的代码没有写注.
小白开发微信小程序20--web api文档制作
hqwest的专栏
03-20 1151
SwaggerSwagger 项目已于 2015 年捐赠给 OpenAPI 计划，自此它被称为 OpenAPI。这两个名称可互换使用。不过，“OpenAPI”指的是规范。“Swagger”指的是来自使用 OpenAPI 规范的 SmartBear 的开放源代码和商业产品系列。简而言之：OpenAPI 是一种规范。Swagger 是一种使用 OpenAPI 规范的工具。例如，OpenAPIGenerator 和 SwaggerUIOpenAPI 规范是描述 API 功能的文档。
letao.rar_WEB开发_PHP_
08-11
【标题】"letao.rar" 是一个以"WEB开发_PHP_"为主题的压缩文件，暗示着它包含与Web开发相关的资源，特别是关于PHP编程语言的内容。PHP是一种广泛使用的服务器端脚本语言，尤其在构建动态网站方面非常流行。这个...
letao-windows:乐淘web app项目
05-13
乐淘电商移动端Mui介绍bootstrap 也是一个ui框架 响应式的ui框架 兼容不同终端 可以适配pc端 也可以适配 移动端Mui 是一个ui框架 针对移动端开发的ui框架 只能适配移动端（流式布局）学习官网官方文档组件展示特点最...
乐淘电商项目-letao.zip
最新发布
01-30
综上所述，乐淘电商项目涵盖了前端、后端、数据库、API设计、支付集成、安全措施等多个方面，涉及的技术广泛，开发流程严谨，旨在提供一个高效、安全、易用的在线购物环境。通过这样的项目实践，开发者可以提升自己...
乐淘电商项目-letao_my.zip
01-30
乐淘电商项目是一个典型的在线购物平台的实现，旨在提供一个完整的电子商务解决方案。在这个项目中，我们主要关注以下几个关键的知识点： 1. **前端框架与技术**：项目可能使用了诸如React、Vue或Angular等现代前端...
letao:一个乐淘小项目
05-14
乐淘电商 移动端 Mui介绍 bootstrap 也是一个ui框架 响应式的ui框架 兼容不同终端 可以适配pc端 也可以适配 移动端 Mui 是一个ui框架 针对移动端开发的ui框架 只能适配移动端（流式布局） 学习官网 官方文档 组件...
乐淘电商网站
04-21
具体到页面功能： 1.顶部通栏 2.轮播图 3.导航栏 4.运动生活专区 5.底部页签 - 静态页面 - 搜索表单 包含了搜索框和按钮 - 历史搜索 两种情况 没有历史记录的情况 显示没有搜索历史记录 有历史记录的情况 显示 历史记录 清空操作 历史列表 - 动态渲染 - 输入搜索关键字 点击搜索 跳转搜索列表页 （把关键字传递给搜索列表页 同时记录这一次的搜索记录） - 需要页面初始化的时候 渲染上一次的搜索记录 （获取本地存储的数据 转换成js可以使用的数据 进行渲染） - 点击搜索记录对应的删除按钮 删除当前对应的历史记录 （获取本机的记录删除一条从新记录到本地存储当中） - 点击情况历史记录 情况所有记录 （把本来存储的数据清空） 需求 记录10数据 如果超过加一条 删一条 如果有一样的删除 记录新的
letao888888:正式乐淘项目
03-23
乐淘电商 移动端 梅介绍 bootstrap也是一个ui框架响应式的ui框架兼容不同终端可以适配pc端也可以适应移动端 Mui是一个ui框架针对移动端开发的ui框架 学习官网 官方文档 组件展示 特色 最接近原生APP体验的高级前端框架 轻量追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征； MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100 + K和60 + K 原生UI针对之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 流畅体验拖放刷新为实现滚动刷新功能，主要是H5框架都是通过DIV模拟拖动回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解
letao18:乐淘项目18期
03-23
乐淘电商 移动端 梅介绍 bootstrap也是一个ui框架响应式的ui框架兼容不同终端可以适配pc端也可以适应移动端 Mui是一个ui框架针对移动端开发的ui框架 学习官网 官方文档 组件展示 特色 最接近原生APP体验的高级前端框架 轻量追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征； MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100 + K和60 + K 原生UI针对之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 流畅体验拖放刷新为实现滚动刷新功能，主要是H5框架都是通过DIV模拟拖动回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解
乐淘前后台项目
08-13
乐淘前后台项目
letao:这是我个人做的乐淘项目开源代码
03-23
<<<<<<< HEAD 乐淘电商 移动端 梅介绍 bootstrap也是一个ui框架响应式的ui框架兼容不同终端可以适配pc端也可以适应移动端 Mui是一个ui框架针对移动端开发的ui框架 学习官网 官方文档 组件展示 特色 最接近原生APP体验的高级前端框架 轻量追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征； MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100 + K和60 + K 原生UI针对之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 流畅体验拖放刷新为实现滚动刷新功能，主要是H5框架都是通过DIV模拟拖动回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； m
怎么获取网页上的接口--并使用
你只有踏出第一步，下一步才会跟着来，否则你将永远停留在原地。
11-18 1万+
在这里插入图片描述 关于代码方面，这个是用springboot 的方法来的 @Autowired private Environment environment; //首先注入这个环境 String name = environment.getProperty("username1");//用这个代码获取属性 拼接所用接口字符串的方法 /拼接url接口地址调用 //首先实例化一个字符缓冲区 StringBuffer stringBuffer = new StringBuffer(); ..
Web前端开发之前后端交互03——接口测试、接口文档
DRLDER的博客
04-05 829
接口测试： 在我们使用POST和GET方法请求数据时，常常不知道页面接口是否有效或无法调试，下面借助POSTMAN工具可以很好的解决这一问题。 get方法测试： post方法测试： 接口文档： 示例： ...
接口&接口文档
MrNoboday
09-02 2万+
一、接口简介 API（Application Programming Interface）即应用程序接口，可以任务是一个软件组件或一个Web服务与外界进行交互的接口，在这里接口可以和API划等号。 接口可以简单的理解为一个黑盒子，从一边输入参数，另外一遍输出参数，黑盒子中的逻辑控制输入输出。 在web后端开发中，接口接受前端（browser、app、client）传入的数据，处理之后...
前端接口文档范例
热门推荐
res_min的博客
05-11 4万+
公司主页接口信息按模块划分的接口1. 获取公司主页：顶部信息1.1 method: GET1.2 path: /api/homeTop-messages/:companyId1.3 options:1.4 response:type: jsonexample:{ id : 32967, name : '今日头条', img : 'http://oc3brgiv8.
前端与移动开发乐淘项目-day01
weixin_33943347的博客
11-12 206
1.开发模式：开发项目的方式。A.前后端协同开发：前端制作基本页面交给后台，后台将数据填入页面。B.前后端分离开发：前端制作基本页面并请求后台提供的接口，将数据填入页面。后台只需要制作接口提供数据即可。 2.项目的运行步骤：A.安装nodeB.安装wampC.在项目文件夹中打开 命令行窗口，执行命令“npm install”用来安装项目需要的库D.在项目文件夹中打开 命令行窗口，执行命令“npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值