diff --git a/aboutAETV.md b/aboutAETV.md index fb528a2..ed8152d 100644 --- a/aboutAETV.md +++ b/aboutAETV.md @@ -1,5 +1,80 @@ # 与星网项目相关 +* 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 diff --git a/aboutVUE3.md b/aboutVUE3.md index 3435cd8..c112540 100644 --- a/aboutVUE3.md +++ b/aboutVUE3.md @@ -1,5 +1,23 @@ # 与vue项目相关 + +--- +# 路由返回拦截hook +* 当点击返回键(浏览器或者是页面上的路由返回功能)时触发,形式如下: +```ts +import { onBeforeRouteLeave } from 'vue-router' +onBeforeRouteLeave((to, from, next) => { + ... + if (...) { + ...do something + next(false) + return + } + ... + next(true) +}) +``` +* 当next(false时,取消路由原有的返回功能) --- ## 具名作用域插槽 * 具名作用域插槽的工作方式也是类似的,插槽 props 可以作为 v-slot 指令的值被访问到