Skip to content
On this page

005 前端开发周报

一条数据的增删改查全部完成. 基本雏形达成!

本周内容

  • 基于 MyForm 组件完成 PageForm 组件 #ezAdmin3
  • 增加 LayoutDialogPageConfirm 组件 #ezAdmin3
  • 尝试把无损音乐管理起来 #ezMusic

ezAdmin3

PageForm 又是什么鬼?

上周做的 MyForm 仅仅是基本的表单项+表单验证. 除了这些之外, 在实际应用中, 一个完整的表单往往还会包括一些其它内容, 如: 加载/提交表单数据, 抽屉/弹窗展示. 取消表单页面后退, 提交表单页面刷新等等. 为了进一步封装这些内容, PageForm 就诞生了.

默认 PageForm 会以抽屉的形式从页面右侧拉出, 同时路由也会前进. 如果设置 layout='dialog' 则会以对话框的形式弹出. 取消操作, 关闭表单并会回退路由 . 而提交操作除了关闭表单回退路由外, 还会刷新列表数据. 当设置了 fetchApi 时, 表单在打开时会去请求表单数据并自动赋值到表单. 后续还会持续增加一些特性.

LayoutDialog 对话框布局

以对话框的形式弹出内容. 常用于 confirm 确认. 与LayoutDrawer类似, 都是一种布局容器. 上面说到的设置layout='dialog'就是把默认的LayoutDrawer更换成LayoutDialog

PageConfirm 确认页

PageConfirm , 是对 LayoutDialog 的再封装, 进一步拓展了路由及异步请求等处理.

ezMusic

又开新坑. 一直有收集无损音乐的习惯. 但一直都找不到很好的播放方案. 试了一下, pc 的 chrome 浏览器, 和 android 的浏览器都可以直接播放 flac 文件, 所以就有了这个念头, 用网页去播放它们.

技术栈

选了最熟悉的一套方案:

  • 前端: nuxt3 + unocss + pinia
  • 后端: directus + mariadb + minio

数据结构

描述字段
artist歌手title: 名称
album专辑title: 名称
artist: 多对一, 关联artist表
date_publish: 发布时间
disk: 碟片数量
song歌曲title: 名称
album: 多对一, 关联album表
track: 音轨
disk: 碟片
file: 音频文件
playlist歌单title: 名称
song_id: 多对多, 关联song表

元数据

属于最基本的信息了. 而且可以说非常简陋. 什么封面图, 艺人图, 音频时长, 等等都没有.

尝试手工上传了几张专辑. 还是比较麻烦的. 还好有 musicbrainz , 尝试了一下api, 返回的数据不是很准确, 还在摸索传参方式.