与星网项目相关

写项目时注意的：
- 使用如loading这样可能可以复用的函数之前，记得去hook里面看看有没有，没必要什么都去自己实现。
- 静态资源使用css去展示，不要import进去使用，能复用就复用，不能复用的话用tinypng去压缩一下。
- 组件能不用就不要用，不然会造成一定的性能消耗（其实感觉也不是很多但是这样做就对了）。
- 接口请求写在生命周期里，不要用闭包游离出去。

如何去添加一个新的页面（addTabPage）可参考以下部分添加内容（部分文件、文件夹自行创建）： frame\frame.config.js

// PAGES,appreciation
singReplay: {
  entry: 'frame/singReplay/main.ts',
  template: 'frame/pages/index.html',
  filename: 'singReplay.html',
  title: '回放',
  minify: true
},

frame\singReplay\main.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

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 }
)

然后就可以在项目中以如下方式进行调用：

const { goToSingReplay } = useAddTabsPage()
// 传参
goToSingReplay(data)

此处传递的参数可以通过以下过程在新页面进行接收

const initData = () => {
  onHostMessage('onload', async (data: any) => {
    // data即为传递过来的参数
    ...
  })
}
// 必须在此生命周期进行
onMounted(async () => {
  initData()
})

apiFetch用法

首先要在@/services/api中配置api，具体形式参考以下

  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
  },

然后在代码中使用可参考如下

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之结果预处理：

代码可参考以下：

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用法

<TabList v-model:value="activeTabName" :tabs="tabs"></TabList>

导入

import TabList from '@/components/tabList.vue'

其中tabs的格式如下

const tabs = ref([
  {
    label: '教师作品',
    value: 'teacherWorks'
  }
])

作用为生成一个标签页

ScrollLoad用法

<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的参数为如下

const scrollLoadProps = computed(() => {
  return {
    apiConf: api.something,
    matchData: '@data.items@',
    params: {}
  }
})

具体为到底时使用传入的api请求一组数据，然后传回的data可以通过fetchEnd或是default插槽进行处理，有时候需要对传回的数据进行预处理才不会报错（因为后端的数据格式可能不会对上scroolList的格式）

5.9 KiB Raw Permalink Blame History

与星网项目相关

5.9 KiB

Raw Permalink Blame History