Skip to content
On this page

003 前端开发周报

前两周都是周四就开始准备. 这次周五下午才开始写. 模式还在摸索中.

本周内容

ezMaths

恢复每页50题

前面因为增加连加/连减功能, 导致一行4道题有些拥挤, 所以就调整为一行3题, 48题正好16行一张纸. 再多一行就会导致最底部的二维码挤到第二页了. 缩小二维码又怕打印出来不清楚导致无法扫码.

所以为了保证一张纸和清晰二维码, 就减了两题. 但没想到有人因为这个提了需求, 要求恢复50道题. 原因是48题不好算分.

很开心有人用, 所以说干就干. 经过测试 100px 的二维码打印出来也能扫描成功. 最终调整了下整体结构. 恢复了50题/页.

ezAdmin3

接着写组件

大致为组件分了个类:

  • My 开头的就是普通小组件. 比如上周尝试做的 MyButton MyInput 等.
  • Layout 开头的会是一些大容器. 比如 LayoutContainer 是个白色盒子. LayoutDrawer 是个抽屉.
  • Page 开头的就是页面级别的组件. 保证一个组件解决一个页面. 比如 PageTable 就是表格列表页.

规划就是这么个规划, 但还需要去实践, 有些地方还比较模糊.

本周新写了两个组件 MyTable MySelect 都是一些最小实现的尝试. 还很粗糙. 主要目的是为了写后续组件. PageTablePageForm .

又bug了

 * [nuxt] [request error] __vite_ssr_import_0__.default is not a function
 * at $id_ugW7Jl6Lz5 (/C:/Users/NMTua/Documents/project/ezAdmin3/.nuxt/dist/server/server.mjs:7221:42)
 * at async __instantiateModule__ (/C:/Users/NMTua/Documents/project/ezAdmin3/.nuxt/dist/server/server.mjs:13290:3)

在写 PageTable 的时候, 异步接口拿数据渲染. 使用 const api = useApi() 就报错. 折腾了好久都无法解决, 而且找不到原因. 有很多奇怪现象. 比如: 同样的声明, 放在 app.vue 文件中; 放在 layouts 的布局文件中; 放在使用其它布局的页面中 等都没问题. 更奇怪的是, 我把 useApi 整个拷贝一份后, 跟其一起用, 就不报错了.

不管怎样, 不报错就先不深究了. 等有时间单独创建一个项目, 做个最小复现案例, 提交到 github 让大神解决吧.

部署演示站点

这次放弃 github pages 而尝试使用 vercel . 整体用下来非常丝滑.

由于后端数据支持选择的是 directus , 所以演示站点的部署大部分都是后端的一些服务部署.

整个部署包括: mysql nginx directus ezAdmin3

mysql

这个没啥好说的. 直接 docker 起一个就好了. 这里选择的是 mariaDB 为 directus 创建好数据库及账号即可.

directus

这是个 headless CMS, 可以简单理解为一个傻瓜的 http api 服务, 为我们的前端提供接口数据支撑.

它可支持多种数据库, 也支持 redis 缓存. 我一开始部署的是 postgers + redis , 后来还是换了 mysql.

docker 部署也不复杂. 除了一些默认配置外, 记得要配置一下跨域 CORS_ENABLED CORS_ORIGIN

nginx

这里主要用来做反向代理的, 毕竟node服务都没有正儿八经跑 80 端口的. 所以前面放一个nginx统一处理请求.

在搞 nginx 的时候发现两个神器.

  1. NGINXConfig | DigitalOcean 一个在线生成 nginx 配置的工具.
  2. nginxWebUI 一个国人开发的 nginx 配置服务. 如果选择它的 docker 则自带 nginx. 我这里就是用的它. 点点鼠标轻松配置.

ezAdmin3

前面三个都是部署在vps的. 最后这个尝试 vercel . 前两天 nuxt 官方刚说的 vercel 已经支持了 [email protected] 尝试了一下非常丝滑.

  1. 保证 github 中默认分支有基于 nuxt3 开发的内容.
  2. 在 vercel 中创建项目, 选择 github 该项目. 剩下的就都自动完成了.
  3. 最后绑定域名. 设置环境变量. 一通操作. 站点就起来了 https://ezadmin3.muyi.dev/