学习使用Astro
2023-5-15|2023-5-27
AlphaBoom
type
status
date
slug
summary
tags
category
icon
password
这是一个零前端基础使用Astro编写Web应用的学习记录，目标是搭建一个聚合搜图的工具网站以及了解下目前前端的开发流程，以下内容是过程的记录。
TypeScript
在学习Astro前先过下TypeScript:菜鸟教程，获得一些特征内容如下：
- 类型声明在变量后面
- 支持类、接口、继承、重写、访问权限等
- 支持命名空间
- 有一个声明文件机制，处理引入原生js库无类型的问题
- 变量声明有var及let
- 支持Switch case语法
补充个人总结内容：
这个interface和其他语言的看起来不大一样
查阅手册，TypeScript的接口更倾向于定义属性名及属性类型或者可以说描述这个结构的约束。
- 可选属性，通过加入？表示。这段也可以理解为可空这样和其他语言也是对应的。
- 只读属性，readonly关键字。只能创建对象时设置
- Index Signatures,这是一个对应数组或字典的类型定义。通常数组就是一个通过索引来获取值得结构，而字典是一个通过一个key获取Value的结构。
另外注意obj.prop和obj[’prop’]实际是一样的,所以定义其他属性时返回值是要被Index Signatures的定义限制的，像下面这样就冲突了。
这个只有index是string才会触发这个场景，我觉得这个东西更适合用于声明dictionary这个场景（或许就是从这个场景弄到interface里的),这个index还是key都是自己随便起的不是关键字。
更多例子可以查看该文章。
编写完应用后感觉到一些重要的特征
在JavaScript中很多奇怪现象的背后都是因为他各种元素（数组、对象、方法）本质都是一个key:value的字典来表示的。例如
for…in遍历数组会拿到字符串这种奇怪现象:另一个JavaScript {}的重要性所以语法上并不需要显示的写一个字符串作为key，对应的就搞了一些用[]转义的语法，使用[]也就是当做索引的概念。对于其他语言因为数组会更重要一些，所以索引一般特指在数组类型上。但是JavaScript其实只有对象并没有数组，注意到这点对JavaScript或TypeScript的一些语法和现象能够有更直观的理解。
Astro
Astro学习路径是参考官方文档学习
Astro是一个以内容为中心的Web框架，详细内容参考为什么选择Astro。Astro为了实现这个目标实际是回归传统的MPA，关于MPA和SPA的对比参考MPA vs. SPA。另一个机制就是islands，简单来说就是Astro将页面元素分为可交互和不可交互的区域，不可交互就可以不用加载JavaScript来提高加载速度。
基础
组件部分
基础结构就是通过
---分割脚本及模板区域，然后参数通过Astro.props获取。页面
布局
React
由于搜索结果是在搜索栏下面展示的动态内容，这部分需要依赖其他框架实现。
Quick Start
如下一个Demo
编写应用
目标是在Vercel上部署使用Astro编写的Web应用，为了使用Vercel的特性需要一些配置，参考：Astro on Vercel。目标功能是一个聚合搜索，所以这里选择Vercel edge网络。
需求分析
需要搜索的图片包含以下分类：电影、电视剧、动画、漫画、游戏、书籍。需要快速搜索到可用的图片，所以这些数据源要在相对专业的网站获取：
- themoviedb：电影、电视剧、动画的图片
- vndb：Galgame游戏封面获取
- bangumi：兜底
UI设计
简单划分区域，具体UI效果在编写代码时处理。
创建工程及安装依赖
创建Astro工程
添加Astro’s Vercel adapter
修改配置文件
添加React,这步包含安装React依赖、修改Astro配置和修改TypeScript三项
添加Tailwind,这步包含安装Tailwind依赖，生成Tailwind配置，以及修改Astro配置三项
功能模块大纲
- 搜索获取模块
- 单页面搜索展示
- （中）大图浏览
- （中）筛选及数据源选择
- （中）交互效果
- （低）搜索历史及搜索建议
数据源
实现两个数据源TheMovieDB以及Bangumi，分别定义这两个数据源API返回数据的结构。
处理
Edge Function部分，在项目根目录创建api/search.ts文件，该文件实现对具体数据源的查询工作。聚合搜索不同源都会有各自的特点，这些区别包含数据结构还有接口定义，上面的
Edge Function只能处理数据层面的问题。所以关于接口行为层面的适配放在了应用部分，并且该部分也处理了另一个问题“让多源数据看起来像单源数据”。最后定义一下展示界面时需要使用的数据结构
SearchResult,数据部分的工作结束。界面搭建
在具体阅读Astro相关文档后发现这个要实现的功能其实不是Astro能够处理的部分，要处理动态数据需要使用其他框架这里选择React。所以最后这个应用实际上所有逻辑都是在由React编写的SearchLayout中，而使用Astro编写的部分只剩下这个index文件。
基础界面
首先搭建一个基础界面用于开发调试，先完成以下内容：
- 搜索及搜索结果展示
- 筛选功能
- 视图切换功能
完成界面初版
修改样式，并且加入一些状态页面效果：
- Loading
- 搜索报错效果
- 空页面
- 数据展示条目优化
- 加入类别显示标签
- 加入源显示标签
- 加入“复制图片”按钮
- 分页加载效果处理
部署到Vercel
总结
前端的工具链还是挺方便的，比较麻烦的地方是在调UI上，因为有比较多的样式属性，布局方案也有多种设置，这里需要边试边调整。这些还在预期之内，比较意外的是前端其实并不太依赖使用三方的组件库，因为css功能很强大大部分效果写css就可以解决。
- Twikoo