147 lines
3.4 KiB
Markdown
147 lines
3.4 KiB
Markdown
# 与星网项目相关
|
|
|
|
* apiFetch用法
|
|
首先要在```@/services/api```中配置api，具体形式参考以下
|
|
``` ts
|
|
getStudentRecords: {
|
|
remark: '获取学生录音列表',
|
|
url: '/teacher/student-records',
|
|
method: 'get',
|
|
baseURL: ApiServices.User,
|
|
apiServiceOption: {
|
|
// 这里对后端接口发来的数据进行预处理。
|
|
afterResponse
|
|
}
|
|
},
|
|
setStudentRecordStatus: {
|
|
remark: '设置学生录音状态（是否隐藏）',
|
|
url: '/teacher/student-records/{id}/setStatus',
|
|
method: 'post',
|
|
baseURL: ApiServices.User
|
|
},
|
|
```
|
|
然后在代码中使用可参考如下
|
|
```ts
|
|
import useFetchApi from '@/hooks/useFetchApi'
|
|
import api from '@/services/api'
|
|
|
|
const { fetchApi } = useFetchApi()
|
|
const _api = api.Replay.setTeacherRecordStatus
|
|
const _id = props.cardData.originData.id
|
|
// 用法类似axios
|
|
const result: any = await fetchApi(
|
|
_api,
|
|
{
|
|
// body
|
|
data: {
|
|
status: 0
|
|
}
|
|
},
|
|
{ matchUrl: { id: _id } }
|
|
)
|
|
if (result?.message !== 'success') {
|
|
throw result?.message
|
|
}
|
|
// result结果会自动json解析，如{message:'success'...}
|
|
|
|
```
|
|
---
|
|
* apiFetch之结果预处理：
|
|
代码可参考以下：
|
|
```ts
|
|
const afterResponse = (res: any) => {
|
|
let _res = { ...res }
|
|
res.data = {
|
|
data: {
|
|
items: _res.data.data,
|
|
meta: _res.data.meta
|
|
}
|
|
}
|
|
_res = null
|
|
return res
|
|
}
|
|
|
|
|
|
const Replay: { [key: string]: ApiConfOption } = {
|
|
getStudentRecords: {
|
|
remark: '获取学生录音列表',
|
|
url: '/teacher/student-records',
|
|
method: 'get',
|
|
baseURL: ApiServices.User,
|
|
apiServiceOption: {
|
|
// 这里对后端接口发来的数据进行预处理。
|
|
afterResponse
|
|
}
|
|
},
|
|
}
|
|
```
|
|
---
|
|
* TabList用法
|
|
```html
|
|
<TabList v-model:value="activeTabName" :tabs="tabs"></TabList>
|
|
```
|
|
导入
|
|
```ts
|
|
import TabList from '@/components/tabList.vue'
|
|
```
|
|
其中tabs的格式如下
|
|
```ts
|
|
const tabs = ref([
|
|
{
|
|
label: '教师作品',
|
|
value: 'teacherWorks'
|
|
}
|
|
])
|
|
```
|
|
作用为生成一个标签页
|
|
|
|
---
|
|
|
|
* ScrollLoad用法
|
|
```html
|
|
<ScrollLoad
|
|
ref="scrollLoadRef"
|
|
v-bind="scrollLoadProps"
|
|
@fetchEnd="handleScrollDataFetchEnd">
|
|
<!-- 这里直接使用elementplus的组件构建骨架屏 -->
|
|
<template #skeleton>
|
|
<el-skeleton
|
|
:count="11"
|
|
:throttle="500"
|
|
animated
|
|
class="result-skeleton">
|
|
<template #template>
|
|
<el-skeleton-item
|
|
variant="rect"
|
|
class="result-item-skeleton result-item"></el-skeleton-item>
|
|
</template>
|
|
</el-skeleton>
|
|
</template>
|
|
<!-- 这里为懒加载列表的内容，此处data未使用 -->
|
|
<template #default={data}>
|
|
<replayCard
|
|
v-for="data of testData.testData"
|
|
:key="data.title"
|
|
:cardData="data"></replayCard>
|
|
</template>
|
|
<!-- 无数据时显示 -->
|
|
<template #no-data>
|
|
<RemindEmptyResource class="result-no-data"></RemindEmptyResource>
|
|
</template>
|
|
</ScrollLoad>
|
|
```
|
|
其中scrollLoadProps的参数为如下
|
|
```ts
|
|
const scrollLoadProps = computed(() => {
|
|
return {
|
|
apiConf: api.something,
|
|
matchData: '@data.items@',
|
|
params: {}
|
|
}
|
|
})
|
|
```
|
|
具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）
|
|
|
|
---
|
|
# 接口使用相关
|