# 与星网项目相关

* 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的格式）

---
# 接口使用相关