update:24-07-08 16:20:23 -AutoCommit

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

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 指令的值被访问到