当前位置： 首页 > news >正文

Astro 实现TodoList网页应用案例

news 2026/2/10 19:45:54

Astro 是一个现代化的静态站点生成器和前端框架，它具有独特的设计理念：岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站，将各种技术栈（如React、Vue、Svelte等）的组件无缝集成到同一个项目中。

1、创建项目：

npm create astro@latest astro-todolist

在这里插入图片描述

cd astro-todolist
code .

在这里插入图片描述
创建组件
在 src/components/ 目录下创建 TodoList.astro

---
---<div id="todo-app"><h1>TodoList</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="Add a new task"><button type="submit" id="add-button">Add</button></form><ul id="todo-list"></ul>
</div><script>const todoForm = document.getElementById('todo-form') as HTMLFormElement;const todoInput = document.getElementById('todo-input') as HTMLInputElement;const todoList = document.getElementById('todo-list') as HTMLUListElement;interface Todo {text: string;completed: boolean;}function loadTodos() {const todosJson = localStorage.getItem('todos');const todos: Todo[] = todosJson ? JSON.parse(todosJson) : [];todos.forEach(todo => {addTodoToDOM(todo.text, todo.completed);});}function saveTodos() {const todos: Todo[] = Array.from(todoList.children).map(li => ({text: li.querySelector('span')?.textContent || '',completed: li.classList.contains('completed')}));localStorage.setItem('todos', JSON.stringify(todos));}function addTodoToDOM(text: string, completed = false) {const li = document.createElement('li');li.className = 'todo-item' + (completed ? ' completed' : '');li.innerHTML = `<input type="checkbox" ${completed ? 'checked' : ''}><span>${text}</span><button class="delete-button">Delete</button>`;const checkbox = li.querySelector('input[type="checkbox"]');if (checkbox) {checkbox.addEventListener('change', function() {li.classList.toggle('completed');if (li.classList.contains('completed')) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}saveTodos();});}const deleteButton = li.querySelector('.delete-button');if (deleteButton) {deleteButton.addEventListener('click', function() {li.remove();saveTodos();});}if (completed) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}}todoForm.addEventListener('submit', function(e: Event) {e.preventDefault();if (todoInput.value.trim() === '') return;addTodoToDOM(todoInput.value);saveTodos();todoInput.value = '';});document.addEventListener('DOMContentLoaded', loadTodos);
</script><style>body {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;}h1 {text-align: center;}#todo-form {display: flex;margin-bottom: 20px;}#todo-input {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;}#add-button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;}#todo-list {list-style-type: none;padding: 0;}.todo-item {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;}.todo-item.completed {text-decoration: line-through;opacity: 0.6;}.todo-item input[type="checkbox"] {margin-right: 10px;}.delete-button {margin-left: auto;background-color: #f44336;color: white;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;}
</style>

创建页面
在 src/pages/index.astro 中使用 TodoList 组件:

---
import TodoList from '../components/TodoList.astro';
---<html lang="en"><head><meta charset="utf-8" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" /><meta name="viewport" content="width=device-width" /><meta name="generator" content={Astro.generator} /><title>Astro TodoList</title></head><body><TodoList /></body>
</html>

在这里插入图片描述

2、运行

测试

npm run dev

在这里插入图片描述
在这里插入图片描述

构建部署

npm run build
npx netlify-cli deploy --prod

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
dist下打开网页：
在这里插入图片描述
双击静态页面打开
在这里插入图片描述

相关文章：

Astro 实现TodoList网页应用案例

Astro 是一个现代化的静态站点生成器和前端框架&#xff0c;它具有独特的设计理念&#xff1a;岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站&#xff0c;将各种技术栈&#xff08;如React、Vue、Svelte等&#xff09;的组件无缝集成到同一个项目中。 1、创建项…...

编程日记 2024/7/31 20:08:04

计算机毕业设计Hadoop+Spark旅游景点可视化 旅游景点推荐系统 景区游客满意度预测与优化 Apriori算法 景区客流量预测 旅游大数据 景点规划

### 开题报告 **论文题目&#xff1a;** 基于Spark的旅游景点可视化系统的设计与实现 **研究背景与意义&#xff1a;** 随着旅游业的快速发展&#xff0c;人们对旅游信息的获取和处理需求越来越高。传统的旅游信息系统虽然能够提供静态的数据查询和展示功能&#xff0c;但在…...

编程日记 2024/7/31 20:06:01

MySQL存储

目录 1. MySQL存储引擎概述 2. 存储引擎的作用 3.存储引擎类型 4. 查看支持的存储引擎 6. InnoDB存储引擎 7. MyISAM与InnoDB的区别 8. 存储引擎的选择 9. 修改默认存储引擎 1. MySQL存储引擎概述 在MySQL中&#xff0c;数据通过不同的技术存储在文件&#xff08;或内存…...

编程日记 2024/7/31 20:03:59

手势传感器 - 从零开始认识各种传感器【第十八期】

手势传感器|从零开始认识各种传感器 1、什么是手势传感器 手势传感器是一种能够感知人类手势或动作的传感器。它可以捕捉、识别和解释人类的手部动作或姿势&#xff0c;并将其转换成电信号或数字信号&#xff0c;通过识别人体的手势动作来实现与电子设备的交互&#xff0c;如控…...

编程日记 2024/7/31 20:01:57

【未来餐饮】 配送设置

一、创建门店 关键信息 1. 门店名字要有辨识度&#xff0c;尽量不和其他客户重名 2. 地址要具体到门牌号 3. 定位要和上面的地址一致 可以复制地址搜索地图&#xff0c;然后选择位置 二、创建配送模板 新建模板 填写模板 命名模板&#xff0c;勾上真省钱&#xff0c;然后保…...

编程日记 2024/7/31 20:00:55

移动式气象设备：灵活应对，精准监测的气象先锋

在气象监测领域&#xff0c;随着科技的进步和需求的多样化&#xff0c;移动式气象设备逐渐崭露头角&#xff0c;成为现代气象观测中不可或缺的一部分。这些设备以其灵活性高、部署迅速、监测精准的特点&#xff0c;广泛应用于应急响应、农业生产、户外探险、科研考察等多个领域…...

编程日记 2024/7/31 19:59:54

【AI落地应用实战】DAMODEL深度学习平台部署+本地调用ChatGLM-6B解决方案

ChatGLM-6B是由清华大学和智谱AI开源的一款对话语言模型&#xff0c;基于 General Language Model (GLM)架构&#xff0c;具有 62亿参数。该模型凭借其强大的语言理解和生成能力、轻量级的参数量以及开源的特性&#xff0c;已经成为在学术界和工业界引起了广泛关注。 本篇将介…...

编程日记 2024/7/31 19:57:52

英伟达开始引领下一波浪潮：物理AI

这可能会是AI技术形态的一个转折点,大模型的下一个形态&#xff0c;不再是人和模型一轮一轮的即时问答了。 当地时间 7 月 29 日&#xff0c;在美国丹佛举行的第 51 届 SIGGRAPH 计算机图形学会议上&#xff0c;英伟达创始人、CEO 黄仁勋与 Meta 创始人、CEO 马克・扎克伯格进…...

编程日记 2024/7/31 19:51:44

SQLServer设置端口

在SQL Server中设置端口是一个涉及多个步骤的过程&#xff0c;这些步骤旨在确保数据库服务器能够在新指定的端口上安全、高效地运行。以下是对SQL Server设置端口的详细阐述&#xff0c;包括默认端口、更改端口的步骤、验证更改以及相关的安全考虑。 一、SQL Server默认端口 …...

编程日记 2024/7/31 19:48:41

诊断技巧分享 | 用WPS500压力传感器测试空调压力波形？

最近收到咨询&#xff0c;问我们WPS500压力传感器能不能测汽车的空调压力波形&#xff1f;如果可以的话&#xff0c;应该怎么测&#xff1f; 是可以的。WPS500压力传感器的最大测试压力是34.5 bar&#xff0c;匹配对应的管子的接头&#xff0c;可以测试空调的动态波形。 要做这…...

编程日记 2024/7/31 19:47:40

W1R3S靶机全通详细教程

文章目录 w1r3s主机发现主机扫描 端口扫描tcp端口扫描UDP扫描漏洞扫描 攻击面分析FTP渗透匿名登录 web渗透目录爆破 cuppa cms文件包含漏洞getshell提权 w1r3s 引言 近些日子看红笔大佬的靶机精讲视频时&#xff0c;他的一句话让我感受颇深&#xff0c;很多视频在讲解时&…...

编程日记 2024/7/31 19:46:39

GitHub Revert Merge Commit的现象观察和对PR的思考

文章目录 前言Pull Request 为什么会是这样&#xff1f;Pull Request Branch的差异 ?Two Dot Diff和Three Dot Diff 老生常谈&#xff1a; Merge 和 Rebasegit mergegit rebase Revert Main分支中的一个Merge Commit现象描述解决方案: Revert Feature分支中的一个Merge Commi…...

编程日记 2024/7/31 19:45:39

使用JavaFx Fxml笔记

使用JavaFx Fxml实现账号密码登录 HelloApplication.java&#xff1a;package com.example.dr295cmonth7;import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.geometry.Insets; import javafx.scene.Parent; import javafx.scene.Scene; i…...

编程日记 2024/7/31 19:44:32

友盟U-APM——优秀的前端性能监控工具

在数字化转型浪潮的推动下,移动应用已成为企业连接用户、驱动业务增长的核心载体。然而,随着应用复杂度的日益提升,用户对于应用性能稳定性的期待也水涨船高。面对应用崩溃、卡顿、加载缓慢等频发问题,如何确保应用的流畅运行,成为产研团队亟待解决的关键挑战。在此背景下,友盟…...

编程日记 2024/7/31 19:42:30

人工智能与机器学习原理精解【10】

文章目录 数值优化基础理论线性模型基本形式特性应用学习算法 向量输入的二次函数的凸性概述二次函数的一般形式凸函数的定义分析二次函数的凸性注意 详细解释向量输入的二次函数的凸性分析一、二次函数的一般形式二、凸函数的定义三、二次函数的Hessian矩阵四、判断二次函数的…...

编程日记 2024/7/31 19:41:29

TypeScript 简介

文档 typeScript官网中文文档&#xff1a;https://www.tslang.cn/index.html中文文档(简洁点)&#xff1a;https://typescript.bootcss.comMDN 前言 JavaScript 引入编程社区已有 20 多年&#xff0c;如今已成为有史以来使用最广泛的跨平台语言之一。JavaScript 最初是一种用…...

编程日记 2024/7/31 19:40:27

什么是知识库？为什么我需要一个？

在互联网的历史上&#xff0c;知识库的定义已经多次改变。最初&#xff0c;它是一个术语&#xff0c;用于描述任何比常见关系“数据库”更先进的复杂数据存储系统。 现在&#xff0c;随着 SaaS 的出现&#xff0c;知识库一词有了更多不同的含义。 根据定义&#xff0c;知识库…...

编程日记 2024/7/31 19:39:26

MySQL学习（16）：视图

视图是一种虚拟临时表&#xff0c;并不真正存储数据&#xff0c;它的作用就是方便用户查看实际表的内容或者部分内容 1.视图的使用语法 &#xff08;1&#xff09;创建 create view 视图名称 as select语句; #视图形成的虚拟表就来自于select语句所查询的实际表&#xff0c;…...

编程日记 2024/7/31 19:38:25

android13关机按钮 去掉长按事件 去掉启动到安全模式 删除关机长按

总纲 android13 rom 开发总纲说明 目录 1.前言 2.界面效果 3.问题分析 4.代码修改 5.编译替换运行 6.彩蛋 1.前言 在Android操作系统中，关机按钮通常具有多种功能，包括短按关机、长按启动语音助手或重启设备等。在某些情况下，用户或设备管理员可能希望自定义关机按…...

编程日记 2024/7/31 19:37:24

递归求数组和

...

编程日记 2024/7/31 19:35:20

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/9/10 21:14:06

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2026/2/6 2:33:44

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

编程新知 2026/1/26 17:05:57