接口须知
后端技术栈
- Spring
- SpringBoot
- junit
- aliyun-oss
- spring-session
- mysql
- lombok
- hutool-http
- fastjson
- mybatis-plus
- JWT
- pagehelper
- jackson
- aspectjrt
关于响应结果
-
返回数据采用统一响应结果,使接口更加规范
{ "code": int, "msg": String, "data": Object? }
-
这里code为int类型,作为响应码
-
msg为String类型,作为后端消息返回
-
data为后端数据返回,可能为任意类型或Object对象
关于权限校验
-
在初始开发阶段,不对接口进行权限校验。
-
接口的权限校验基于SpringSecurity和JWT。
-
在登录后收到JWT令牌,存入本地存储。
-
此后所有的接口访问都需要在请求头(Header)中添加Authorization参数
-
Authorization的内容为:Bearer
-
后端在收到令牌后会对请求的身份进行校验。
-
若校验不通过,则返回如下数据:
-
{ "code": 500, "msg": "NO_LOGIN", "data": null }
-
关于会话验证
- 考虑到跨域请求的问题,不使用传统session和cookie进行验证是否为同一请求。
- 使用jwt技术和redis相结合进行会话校验。
- 所以在第一次请求后一定会包含sessionId或者token来标识客户端,前端需要妥善保管这两个值。
发布页面
-
我是失者
-
表单信息上传
-
发送数据示例
-
{ "postType": 1, "name": "手机", "color": "红色", "place": "劲竹", "type": "电子产品", "time": 1682298082, "phone": "13412345678", "studentId": "1220204000", "details": "测试测试测试测试" }
-
接口地址:/posts/release
-
参数格式:application/json
-
参数说明:
参数名称 参数类型 是否必须 备注 postType int 是 帖子类型 name String 是 失物名称 color String 否 物品颜色 place String 是 丢失地点 type String 否 物品类型 timestamp timestamp(Long) 是 丢失时间 phone String 否 手机账号 studentId String 是 校园学号 details String 是 失物详情 image String 是 图片Id集合 -
这里的postType类型最为重要,0表示失者,1表示拾者,后期还能拓展帖子类型
-
请求方式:POST
-
返回数据:
- 格式:application/json
{ "code": 200, "msg": "发布成功", "data": null }
其中code表示服务器响应结果,200表示正常响应请求,4xx表示请求体异常,5xx表示服务器内部异常
msg表示服务器响应消息,可以作为提示框内的信息
data表示返回的数据,此处为null,表示服务器不返回任何对象。
注意:此处的code和http响应码不同,为自定义的数字。
-
-
图片上传
-
接口:/common/upload
-
请求方式:POST
-
请求参数:
- 格式:multipart/form-data
参数名称 参数类型 是否必须 备注 image file 是 上传文件 -
响应数据:
- 格式:application/json
{ "code": 200, "msg": "文件上传成功", "data": { "id": "1651459176052879362", "originalFilename": "logo 拷贝.jpg", "url": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-27/logo%20%E6%8B%B7%E8%B4%9D1682573524722.jpg", "uploadUser": "1651172985932300290", "uploadTime": "2023-04-27 13:32:04" } }
{ "code": 200, "msg": "重复的文件", "data": { "id": "1651459176052879362", "originalFilename": "logo 拷贝.jpg", "url": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-27/logo%20%E6%8B%B7%E8%B4%9D1682573524722.jpg", "uploadUser": "1651172985932300290", "uploadTime": "2023-04-27 13:32:05" } }
-
注意:msg为success表示响应成功,data中返回图片的相关信息,其中url可以作为图片的src进行回显,在表单上传时也需要这个链接地址。如果文件已经存在,则直接返回数据库中的信息。
-
文件下载接口
-
接口地址:/common/download
请求参数:queryString
接口描述:根据文件名或者id查询图片链接
-
请求参数:
参数名 类型 是否必须 备注 name String 二选一 文件名 id String 二选一 文件id 请求示例:zswzl.zust.online/common/download?id=2132762627
-
响应数据:
-
格式:application/json
-
响应示例:
{ "code": 200, "msg": "success", "data": { "id": "1651460220963106818", "originalFilename": "logo.png", "url": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-27/logo1682573757866.png", "uploadUser": "1651172985932300290", "uploadTime": "2023-04-27 13:35:58" } }
-
请求失败示例(没有提供请求参数):
{ "code": 500, "msg": "参数不合法", "data": null }
-
-
注意:name或者id必须提供其中之一,用于作为查找信息的标识。返回文件的详细信息。
-
当文件名和id同时存在时,优先使用文件名查询文件。
-
-
-
用户操作流程:
- 用户填写上方表单数据
- 用户点击进行文件上传
- 在获取到图片链接后,自动进行回显
- 点击发布按钮
- 前端校验表单数据,若不合法则出现警告框
- 提交数据至服务器。
- 服务器返回操作结果
- 若操作失败则前端页面将服务器返回是msg显示在警告框
- 若操作成功则前端返回上一页面
-
我是拾者
-
接口地址(与我是失者使用同一接口):/posts/release
-
参数格式:application/json
-
参数说明:
参数名称 参数类型 是否必须 备注 postType int 是 帖子类型 name String 是 拾物名称 place String 是 拾到地点 color String 否 物品颜色 type String 否 物品类型 timestamp timestamp(Long) 是 拾到时间 phone String 否 手机账号 studentId String 是 校园学号 details String 是 拾物详情 image String 是 图片链接 -
图片上传、返回数据、操作逻辑等与上面类似。
-
只需要postType为1则是拾者类型的帖子
-
首页界面
-
需求分析
-
在首次打开首页时,前端自动向服务器发起请求,获取需要认领的物品和未找到的物品。
-
失和拾数据都从同一个接口获取,由postType来确定类型
-
/posts/list 获取列表
-
请求格式:
- 请求地址:/posts/list
- 请求方式:GET
- 请求参数:无
-
响应格式:
- 类型:application/json
- 参数说明:
参数名 类型 是否必须 备注 code number 是 响应码 msg String 否 提示信息 data Object[] 否 返回的数据 |-id String 是 信息的标识ID |-author String 是 发帖人ID |-postType int 是 失?拾 |-name String 是 物品名称 |-color String 是 物品颜色 |-place String 是 地点 |-image String(URL) 是 图片链接 |-type String 是 类型 |-timestamp String 是 发现时间 |-phone String 否 联系电话 |-studentId String 是 学生id |-details String 是 详细信息 |-status int 是 帖子状态 |-createTime String 是 发帖时间 |-authorName String 是 发帖人 -
数据响应案例:
{ "code": 200, "msg": "success", "data": [ { "id": "1", "author": "1111", "postType": 0, "name": "手机", "color": null, "place": "劲竹", "image": "1651460220963106818", "type": "电子产品", "timestamp": "2023-04-27 13:39:19.0", "phone": "13412345678", "studentId": "1234567897", "details": "测试测试测试测试测试", "status": 0, "createTime": "2023-04-27 14:12:14.0", "authorName": "微信用户" }, { "id": "1651471690920689666", "author": "1651172985932300290", "postType": 0, "name": "手机", "color": null, "place": "劲竹", "image": null, "type": "电子产品", "timestamp": "2023-04-27 14:21:48.0", "phone": "13412345678", "studentId": "1220204000", "details": "测试测试测试测试", "status": 0, "createTime": "2023-04-27 14:21:48.0", "authorName": "前程QCQCQC" } ] }
-
-
用户操作逻辑
- 当用户进入首页,前端自动发送请求获取数据
- 前端将获取到的数据显示在页面中
- 当用户点击相关信息时,通过id跳转到详情页面。
大厅界面
瀑布流效果实现原理
具体前端实现思路并不复杂,主要是数据的获取处理,这里进行分页获取数据。
实现思路:
-
在大厅界面首次加载时,获取以下数据:
- 物品类型列表
- 物品颜色列表
- 进行第一次分页查询(page=1,size=10)
-
当用户选择完成上面的分类信息或者输入了关键字,在下一次分页查询时需要包含以下数据
- 物品类型:type=“类型”(可选)
- 物品颜色:color=“颜色”(可选)
- 关键词:name=“关键词”(可选)
-
当用户输入完成搜索相关信息,重新发起分页查询请求
- 分页查询(page=1,size=10,type=“”,color=“”,name=“”)这里后面三个参数可选
-
当用户下拉到尾部时。
- 显示加载中图标
- 发起第二次分页请求(page=2,size=10,type=“”,color=“”,name=“”)这里后面三个参数可选
- 将新获取到的数据追加显示到页面中
-
注意:
- 第一次分页查询在首次加载完成时,用于页面的初步显示
- 后面的查询时,可以不携带后面三个参数
- 如果后面三个参数都不携带,就是正常的浏览操作
- 所以本质上搜索不搜索,只是服务端返回的数据不同,前端的执行逻辑是类似的。
-
分页查询接口
-
基本信息
请求路径:/posts/page
请求方式:GET
接口描述:该接口用于大厅页面的条件分页查询
-
请求参数
-
参数格式:queryString
-
参数说明:
-
参数名称 是否必须 示例 备注 page 否 1 第几页 size 否 10 单页数据量 type 否 电子产品 类型关键词 color 否 红色 颜色关键词 name 否 手机 查询关键词 -
请求数据示例:
/posts/page?page=1&size=10&type=电子产品&color=红色&name=手机
-
-
响应格式:
- 类型:application/json
- 参数说明:
参数名 类型 是否必须 备注 code number 是 响应码 msg String 否 提示信息 data Object[] 否 返回的数据 |-total Long 是 数据条数 |-records Object[] 是 对象数组 |-|-id String 是 信息的标识ID |-|-author String 是 发帖人ID |-|-postType int 是 失?拾 |-|-name String 是 物品名称 |-|-color String 是 物品颜色 |-|-place String 是 地点 |-|-image String(URL) 是 图片链接 |-|-type String 是 类型 |-|-timestamp String 是 发现时间 |-|-phone String 否 联系电话 |-|-studentId String 是 学生id |-|-details String 是 详细信息 |-|-status int 是 帖子状态 |-|-createTime String 是 发帖时间 |-|-authorName String 是 发帖人
-
{
"code": 200,
"msg": "success",
"data": {
"total": "3",
"records": [
{
"id": "1651470555862335490",
"author": "1651172985932300290",
"postType": 1,
"name": "手机",
"color": null,
"place": "劲竹",
"image": null,
"type": "电子产品",
"timestamp": "2023-04-27 14:17:18.0",
"phone": "13412345678",
"studentId": "1220204000",
"details": "测试测试测试测试",
"status": 0,
"createTime": "2023-04-27 14:17:18.0",
"authorName": "前程QCQCQC"
},
{
"id": "1",
"author": "1111",
"postType": 0,
"name": "手机",
"color": null,
"place": "劲竹",
"image": "1651460220963106818",
"type": "电子产品",
"timestamp": "2023-04-27 13:39:19.0",
"phone": "13412345678",
"studentId": "1234567897",
"details": "测试测试测试测试测试",
"status": 0,
"createTime": "2023-04-27 14:12:14.0",
"authorName": "微信用户"
},
{
"id": "2",
"author": "2222",
"postType": 1,
"name": "耳机",
"color": null,
"place": "新竹",
"image": "1651460220963106818",
"type": "电子产品",
"timestamp": "2023-04-27 13:40:53.0",
"phone": "12345678123",
"studentId": "1234567845",
"details": "测试测试测试测试测试",
"status": 0,
"createTime": "2023-04-27 14:12:14.0",
"authorName": "微信用户"
}
]
}
}
- 这里返回的数据和list接口的类似,但是经过分页和筛选。
用户界面
登录功能实现
-
官方文档中的流程图
根据流程图描述,主要步骤有以下几步
- 小程序端调用 wx.login()向微信接口服务获取 临时登录凭证code ,并上传至开发者服务端。
- 开发者服务端向微信服务接口服务调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。
- 开发者服务端根据session_key等信息,基于JWT标准,生成自定义的网络令牌token,返回至小程序端存储。
-
前端操作流程
- 调用微信官方wx.login接口获取临时凭证code
- 页面加载完成调用后端的getSessionId接口,传入code
- 将获取到的sessionId中的值记录下来。
- 当用户点击登录按钮时,调用官方的wx.getUserProfile,传入得到的sessionId值。
- 调用完成官方接口后,会得到加密的数据encryptedData,加密初始向量:iv。
- 继续调用后端的authLogin接口,传入encryptedData,iv,还有开始得到的sessionId
- 验证登录成功后返回用户信息。
- 在用户信息中包含JWT令牌,前端需要将JWT令牌存储在本地,作为接口访问的权限验证。
- 用户可以上传自己的头像和设置自己的昵称。
- 当设置完成点击保存时,自动调用更新用户数据接口,更新用户信息。
-
getSessionId接口
-
基本信息:
请求路径:/user/getSessionId
请求方式:GET
接口描述:获取后端登录凭证
-
请求参数:
- 参数类型:queryString
- 参数说明:
参数名 参数类型 是否必须 备注 code String 是 官方登录凭证 -
请求示例:
/user/getSessionId?code=abc123456789
-
响应数据:
-
格式:application/json
-
参数说明:
参数名 参数类型 是否必须 备注 code String 是 响应码 msg String 是 消息 data Object 是 返回数据 |-sessionId String 是 登录凭证 -
响应示例:
{ "code": 200, "msg": "success", "data": { "sessionId": "1ed57a89-a550-409a-baf1-8b6ef1582600" } }
-
请求失败返回示例:
{ "code": 500, "msg": "invalid appid", "data": null }
-
-
-
authLogin接口
-
基本信息
请求路径:/user/authLogin
请求方式:POST
接口描述:上传加密的用户信息,后端进行解密验证登录
-
请求参数
-
参数类型:application/json
-
参数说明:
参数名 参数类型 是否必须 备注 encryptedData String 是 加密的用户信息 iv String 是 加密初始向量 sessionId String 是 后端登录凭证 -
请求示例
{ "encryptedData": "2fvjouA8ykrvyhfIhPwsuE6JhA9UrAQrDJCl8pemYLFBmW7sQJtCGfTck5wy3ATTn1Ig5tt3c+YirtyAo0r+7omK/RM8si+cakQ6rrcfcgeOFvh5DPJFdtPiE4sdfbHLk2zL2G0AEL0wZuenr5edxlQIHiqEzAui0Wj4ml2W9BPkVxs3J0KbfDr8x7gkUgmQq5rNgZP4goMXTSzEguRbuOX09OGLryJKFGRhOEiUexcHWnMPgOyQYrI7d2pJxTHOHJwPI6vvsmjaxr9oUmZEDqnNhA7Z2oMRxW64u0onRKvZRxU8iR/SO7BHTyed0PHp4eUaDFt1ICmlCSSinH1KVDhOBqBhOsCbnW0wSixx0j4oe3npuEr4oL0mw5UgNQDJsRFYcUNZH4Bu798OLnxj+RuBqlSbI/UU9Bd7PwfnkTcJy2WczZnTuqxXvWgsTDfa", "iv": "Ebefqfdxp03bW+lAoXBPPA==", "sessionId": "1ed57a89-a550-409a-baf1-8b6ef1582600" }
-
-
响应数据
-
格式:application/json
-
参数说明:
参数名 参数类型 是否必须 备注 code String 是 响应码 msg String 是 消息 data Object 是 数据 |-id String 是 用户标识 |-nickName String 是 用户名 |-city String 是 城市 |-province String 是 省份 |-country String 是 国家 |-avatar String 是 头像URL |-token String 是 JWT身份凭证 |-status int 是 启用状态 -
响应示例
{ "code": 200, "msg": "success", "data": { "id": "1651172985932300290", "nickName": "前程QCQCQC", "city": "温州", "province": "浙江", "country": "中国", "avatar": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-20/%E5%A4%B4%E5%83%8F1681999217002.jpg", "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODMxMTQ2NjB9.aIVO88dVCrkJcTFGbDFXWP5vNTu8MRZaLg3c-hNmM6g", "status": 1 } }
- 请求失败案例
{ "code": 500, "msg": "获取用户信息失败,请重新登录", "data": null }
-
-
注意:此处token最为重要,需要存储到本地,作为登录后所有接口的权限校验凭据。
-
-
获取用户数据接口
-
接口地址:zswzl.zust.online/user/userinfo
请求方式:GET
接口描述:鉴权接口获取用户信息
-
请求参数
- 参数类型:application/json
- 参数说明
参数名 参数类型 是否必须 备注 refresh int 否 是否刷新token - 请求示例:zswzl.zust.online/user/userinfo?refresh=1
-
响应数据
-
格式:application/json
-
参数说明:
参数名 参数类型 是否必须 备注 code String 是 响应码 msg String 是 消息 data Object 是 数据 |-id String 是 用户标识 |-nickName String 是 用户名 |-city String 是 城市 |-province String 是 省份 |-country String 是 国家 |-avatar String 是 头像URL |-token String 是 JWT身份凭证 |-status int 是 启用状态 -
响应示例
{ "code": 200, "msg": "success", "data": { "id": "1651172985932300290", "nickName": "前程QCQCQC", "city": "温州", "province": "浙江", "country": "中国", "avatar": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-20/%E5%A4%B4%E5%83%8F1681999217002.jpg", "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODMxMjUxNzZ9.O9wt87YGm83NdTp0Oj9ZxpBlGbbX8yXWU1G8c6Xy19E", "status": 1 } }
{ "code": 200, "msg": "success", "data": { "id": "1651172985932300290", "nickName": "前程QCQCQC", "city": "温州", "province": "浙江", "country": "中国", "avatar": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-20/%E5%A4%B4%E5%83%8F1681999217002.jpg", "token": null, "status": 1 } }
-
-
注意:如果refresh为1则表示需要刷新token,则会返回新的token,如果为0则token为null
-
在更新后旧的token已经废用,下一次访问需要新的token
-
-
更新用户信息接口
-
接口地址:zswzl.zust.online/user/userinfo
请求方式:PUT
接口描述:提交需要更改的用户信息,id为必须字段,其他可以没有
-
请求参数
- 参数类型:application/json
- 参数说明
参数名 参数类型 是否必须 备注 id String 是 用户标识 nickName String 否 用户名 city String 否 城市 province String 否 省份 country String 否 国家 avatar String 否 头像地址 gender int 否 性别 status int 否 启用状态 - 请求示例
{ "id": "1651172985932300290", "nickName": "前程QCQCQC", "city": "温州", "province": "浙江", "country": "中国", "avatar": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-20/%E5%A4%B4%E5%83%8F1681999217002.jpg", "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODMxMTMzMzZ9.KdbgmoC5guQgpnQrwnxzbCRYXBWvva0EShGivH7m9U8", "status": 1 }
-
响应数据
-
格式:application/json
-
参数说明:
参数名 参数类型 是否必须 备注 code String 是 响应码 msg String 是 消息 data Object 是 数据 |-id String 是 用户标识 |-nickName String 是 用户名 |-city String 是 城市 |-province String 是 省份 |-country String 是 国家 |-avatar String 是 头像URL |-token String 是 JWT身份凭证 |-status int 是 启用状态 -
请求成功示例
{ "code": 200, "msg": "success", "data": { "id": "1651172985932300290", "nickName": "前程QCQCQC", "gender": 0, "city": "温州", "province": "浙江", "country": "中国", "avatar": "http://web-myapp.oss-cn-beijing.aliyuncs.com/2023-04-20/%E5%A4%B4%E5%83%8F1681999217002.jpg", "status": 1 } }
- 请求失败示例
{ "code": 500, "msg": "更新失败", "data": null }
-
-
注意:这里的更新用户数据接口可以复用,比如开发禁用某个用户时,只需要将status设为0,后端会自动进行鉴权等操作,若status为0则返回用户已经禁用。
-
通过手机号注册或登录
-
获取短信验证码
-
接口地址:/user/sendSms
请求方式:GET
接口描述:提供openid与手机号,用于注册用户
-
请求参数
- 请求类型:queryString
- 参数说明:
参数名 参数类型 是否必须 备注 phone String 是 电话号 openId String 是 微信标识 -
示例:
zswzl,zust.online/user/sendSms?phone=13412345678&openId=aisdfgbuywaevbyuas123123
-
响应数据
- 格式:application/json
- 参数说明:
参数名 参数类型 是否必须 备注 code int 是 响应码 msg String 是 服务器信息 data Object 是 返回数据 |-sessionId String 是 会话标识 成功示例:
{ "code": 200, "msg": "success", "data": { "sessionId": "21533ea6-db3b-4c03-800e-11eb10836424" } }
失败示例:
{ "code": 500, "msg": "验证码已发送,请勿重复发送", "data": null }
注意:前端一定要妥善保管sessionId,在提交验证时会使用到,短信验证接口,对于每一个号码的发送间隔时限为1分钟,每一个验证码的有效期为5分钟。
值得一提的是这里的openId是必须的,作为注册或者登录的用户唯一标识,前端可以通过wx.login来获取这个openId将其发送给后端。
-
-
验证短信进行注册或登录接口
-
接口地址:/user/smsLogin
请求方式:POST
接口描述:校验验证码进行注册或登录
-
请求参数:
- 参数类型:application/json
- 参数说明:
参数名 参数类型 是否必须 备注 code String 是 验证码 sessionId String 是 会话标识 示例:
{ "code": "278042", "sessionId": "aca85665-cf8e-4c2a-b05d-33ecaf4934f8" }
-
响应数据:
- 格式:application/json
- 参数说明:
-
响应数据
-
格式:application/json
-
参数说明:
参数名 参数类型 是否必须 备注 code String 是 响应码 msg String 是 消息 data Object 是 数据 |-id String 是 用户标识 |-nickName String 是 用户名 |-city String 是 城市 |-province String 是 省份 |-country String 是 国家 |-avatar String 是 头像URL |-token String 是 JWT身份凭证 |-status int 是 启用状态 -
成功示例:
{ "code": 200, "msg": "success", "data": { "id": "1651939555080683522", "nickName": "18357789776", "city": null, "province": null, "country": null, "avatar": null, "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODMzNDc3MDN9.EfiiYDH8IVYOVFxIK-JGpj362MyTMJRGwNPW3rVZBCk", "status": 0 } }
- 失败示例:
{ "code": 500, "msg": "验证码已过期,请重新获取", "data": null }
注意:新注册的用户,用户名为手机号,头像为空,前端需要处理好头像为null的情况,登录成功后返回用户信息,这里的token在此后作为后端其它接口的访问凭证。
这里的短信验证接口和使用微信登录时调用的authLogin接口返回结果类似。
-
-