update:24-07-09 16:41:47 -remark:新增添加新页面笔记 -AutoCommit
This commit is contained in:
539943419 committed
1 parent
15b89ed0f5
commit
589e356f61
1 file changed
+106
-50
+106
-50
@@ -1,8 +1,58 @@
|
||||
# 与星网项目相关
|
||||
|
||||
* 如何去添加一个新的页面（addTabPage）
|
||||
可参考以下部分添加内容（部分文件、文件夹自行创建）：
|
||||
frame\frame.config.js
|
||||
```js
|
||||
// PAGES,appreciation
|
||||
singReplay: {
|
||||
entry: 'frame/singReplay/main.ts',
|
||||
template: 'frame/pages/index.html',
|
||||
filename: 'singReplay.html',
|
||||
title: '回放',
|
||||
minify: true
|
||||
},
|
||||
```
|
||||
frame\singReplay\main.ts
|
||||
```ts
|
||||
import SingReplay from '@/pages/singReplay/index.vue'
|
||||
import exception from '@/plugins/exception'
|
||||
import store from '@/store'
|
||||
import logger from '@evideo/logger'
|
||||
import { createApp } from 'vue'
|
||||
|
||||
Promise.resolve()
|
||||
.then(() => {
|
||||
logger.setNamespace('singReplay')
|
||||
})
|
||||
.then(() => {
|
||||
const app = createApp(SingReplay)
|
||||
app.use(store).use(exception)
|
||||
app.mount('#app')
|
||||
})
|
||||
```
|
||||
src\hooks\useAddTabsPage.ts
|
||||
```ts
|
||||
const goToSingReplay = _.debounce(
|
||||
(data: any, pageId?: string) => {
|
||||
const url = `${window.location.origin}/singReplay.html?id=${data.id}`
|
||||
const webPage: IWebPage = {
|
||||
name: `${data.name}`,
|
||||
url: url,
|
||||
data,
|
||||
pageId
|
||||
}
|
||||
addTabPage(webPage)
|
||||
},
|
||||
300,
|
||||
{ leading: true, trailing: false }
|
||||
)
|
||||
```
|
||||
---
|
||||
* apiFetch用法
|
||||
首先要在```@/services/api```中配置api，具体形式参考以下
|
||||
``` ts
|
||||
|
||||
首先要在```@/services/api```中配置api，具体形式参考以下
|
||||
``` ts
|
||||
getStudentRecords: {
|
||||
remark: '获取学生录音列表',
|
||||
url: '/teacher/student-records',
|
||||
@@ -19,17 +69,17 @@
|
||||
method: 'post',
|
||||
baseURL: ApiServices.User
|
||||
},
|
||||
```
|
||||
然后在代码中使用可参考如下
|
||||
```ts
|
||||
import useFetchApi from '@/hooks/useFetchApi'
|
||||
import api from '@/services/api'
|
||||
```
|
||||
然后在代码中使用可参考如下
|
||||
```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(
|
||||
const { fetchApi } = useFetchApi()
|
||||
const _api = api.Replay.setTeacherRecordStatus
|
||||
const _id = props.cardData.originData.id
|
||||
// 用法类似axios
|
||||
const result: any = await fetchApi(
|
||||
_api,
|
||||
{
|
||||
// body
|
||||
@@ -38,18 +88,25 @@ const result: any = await fetchApi(
|
||||
}
|
||||
},
|
||||
{ matchUrl: { id: _id } }
|
||||
)
|
||||
if (result?.message !== 'success') {
|
||||
)
|
||||
if (result?.message !== 'success') {
|
||||
throw result?.message
|
||||
}
|
||||
// result结果会自动json解析，如{message:'success'...}
|
||||
}
|
||||
// result结果会自动json解析，如{message:'success'...}
|
||||
|
||||
```
|
||||
```
|
||||
然后就可以在项目中以如下方式进行调用：
|
||||
```ts
|
||||
const { goToSingReplay } = useAddTabsPage()
|
||||
// 传参
|
||||
goToSingReplay(data)
|
||||
```
|
||||
---
|
||||
* apiFetch之结果预处理：
|
||||
代码可参考以下：
|
||||
```ts
|
||||
const afterResponse = (res: any) => {
|
||||
|
||||
代码可参考以下：
|
||||
```ts
|
||||
const afterResponse = (res: any) => {
|
||||
let _res = { ...res }
|
||||
res.data = {
|
||||
data: {
|
||||
@@ -59,10 +116,10 @@ const afterResponse = (res: any) => {
|
||||
}
|
||||
_res = null
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const Replay: { [key: string]: ApiConfOption } = {
|
||||
const Replay: { [key: string]: ApiConfOption } = {
|
||||
getStudentRecords: {
|
||||
remark: '获取学生录音列表',
|
||||
url: '/teacher/student-records',
|
||||
@@ -73,33 +130,35 @@ const Replay: { [key: string]: ApiConfOption } = {
|
||||
afterResponse
|
||||
}
|
||||
},
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
---
|
||||
* TabList用法
|
||||
```html
|
||||
<TabList v-model:value="activeTabName" :tabs="tabs"></TabList>
|
||||
```
|
||||
导入
|
||||
```ts
|
||||
import TabList from '@/components/tabList.vue'
|
||||
```
|
||||
其中tabs的格式如下
|
||||
```ts
|
||||
const tabs = ref([
|
||||
|
||||
```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
|
||||
|
||||
```html
|
||||
<ScrollLoad
|
||||
ref="scrollLoadRef"
|
||||
v-bind="scrollLoadProps"
|
||||
@fetchEnd="handleScrollDataFetchEnd">
|
||||
@@ -128,19 +187,16 @@ const tabs = ref([
|
||||
<template #no-data>
|
||||
<RemindEmptyResource class="result-no-data"></RemindEmptyResource>
|
||||
</template>
|
||||
</ScrollLoad>
|
||||
```
|
||||
其中scrollLoadProps的参数为如下
|
||||
```ts
|
||||
const scrollLoadProps = computed(() => {
|
||||
</ScrollLoad>
|
||||
```
|
||||
其中scrollLoadProps的参数为如下
|
||||
```ts
|
||||
const scrollLoadProps = computed(() => {
|
||||
return {
|
||||
apiConf: api.something,
|
||||
matchData: '@data.items@',
|
||||
params: {}
|
||||
}
|
||||
})
|
||||
```
|
||||
具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）
|
||||
|
||||
---
|
||||
# 接口使用相关
|
||||
})
|
||||
```
|
||||
具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）
|
||||
Reference in new issue
Block a user