Skip to content
On this page

006 前端开发周报

感冒, 各种难受.

本周内容

  • 修复了一个打包后才会出现的 js 报错 #ezAdmin3
  • 优化异步方法, 提升响应速度 #ezAdmin3
  • 展示歌单并随机播放歌单内容 #ezMusic
  • 修改配置逻辑, 改为公共前端 #ezMusic
  • 完成首页样式 #ezMusic

ezAdmin3

打包上线后, 发现线上报错???

上周内容发布后发现线上环境报错, 但本地开发环境没任何问题. 经排查, 是因为 modelValue 在两个组件内二次传递, v-model 异常导致的. 所以在中间用 computed 中转了一下, 算是解决.

const formData = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emits('update:modelValue', val)
    }
})

https://github.com/NMTuan/ezAdmin3/commit/b1b7fbe8df0034b4f803c54166ab94832e510df6

网络不好的时候, 异步请求会卡住页面

异步请求, 使用的是 nuxt3 自带的 useAsyncData, 起初使用的是 useFetch 后来发现这货会缓存请求. 配置项 initialCache 只有 useAsyncData 才有(nuxt3文档更新了, useFetch 同样有 initialCache 配置).

但不论是 useFetch 还是 useAsyncData , 在使用的时候, 会阻塞页面, 直到拿到返回数据后, 页面才会响应. 这也就导致了在网络环境不佳的情况下, 点击一个操作后页面上没有一个即时反馈, 从而导致体验不佳.

要想改善这个问题, 就要用到 nuxt3 提供的另外两个方法 useLazyFetchuseLazyAsyncData 或者直接在原方法中配置 lazy: true 也行.

更换后需要自行处理 loading 状态, 方法会返回 {pending, error, data} 等数据. 我这里用的方法如下:

const loading = ref(false)
const res = useLazyFetch('url')
watchEffect(()=>{
    loading.value = res.pending.value
})
watch(res.error, ()=>{})
watch(res.data, ()=>{})

ezMusic

展示并播放歌单

本想着直接拿歌单当播放列表用, 但实际做下来发现还是需要有一个播放列表去展示当前正在播放的音乐列表. 所以把当前播放列表放到了 pinia 的状态里面, 其他歌单仅仅是在当前页面展示.

公共前端

本来考虑的是通过 .env 文件去配置后端信息. 但如果是这样的话, 还是需要搭建一个 web 环境去跑 ezMusic. 虽然搭一个不麻烦, 但已经要搭后端了, 前端能省就省吧. 所以调整了下逻辑, 使用 useCookie 方法把配置信息保存在本地 cookie 中. 同时, 如果配置了 .env 则忽略配置 cookie.

给首页做了个设计

基于 unocss 现成的颜色, 简单做了个效果.