Astro 实现TodoList网页应用案例

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下打开网页:
在这里插入图片描述
双击静态页面打开
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3280163.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

使用注意力机制的seq2seq

一、背景 1、机器翻译中&#xff0c;每个生成的词可能相关于源句子中不同的词&#xff0c;但是之前用的是最后一个RNN层出来的context。 2、加入注意力 &#xff08;1&#xff09;假设输入序列中有&#x1d447;个词元&#xff0c; 解码时间步&#x1d461;′的上下文变量是…

​LLM大模型从入门到精通(7)--企业大模型开发流程​

一、大模型项目开发的两种方式 2023年以来&#xff0c;随着ChatGPT的火爆&#xff0c;使得LLM成为研究和应用的热点&#xff0c;但是市面上大部分LLM都存在一个共同的问题&#xff1a;模型都是基于过去的经验数据进行训练完成&#xff0c;无法获取最新的知识&#xff0c;以及各…

最新Python编程、机器学习与深度学习应用

近年来&#xff0c;人工智能领域的飞速发展极大地改变了各个行业的面貌。当前最新的技术动态&#xff0c;如大型语言模型和深度学习技术的发展&#xff0c;展示了深度学习和机器学习技术的强大潜力&#xff0c;成为推动创新和提升竞争力的关键。特别是PyTorch&#xff0c;凭借其…

昇思25天学习打卡营第26天|munger85

ShuffleNet图像分类 和mobilenet一样&#xff0c;也是在资源有限的设备上进行神经网络来做ai图像分类的小模型&#xff0c;在保持精度的同时大大降低了模型的计算量。 是基本块 就是真正的网络&#xff0c;如果模型size是2&#xff0c;就是输出的时候多一些&#xff0c;精细一…

jdk版本管理利器-sdkman

1.什么是sdkman&#xff1f; sdkman是一个轻量级、支持多平台的开源开发工具管理器&#xff0c;可以通过它安装任意主流发行版本&#xff08;例如OpenJDK、Kona、GraalVM等等&#xff09;的任意版本的JDK。通过下面的命令可以轻易安装sdkman: 2.安装 curl -s "https://…

安装 moleculeSTM 踩坑日记

“学习 LLM &#xff0c;在大模型时代为自己存张船票”。 相信很多人都有这样的想法。那么&#xff0c;在 AI for science 领域&#xff0c;哪些 LLM 模型值得一试呢&#xff1f; 笔者认为&#xff1a; LLM 直接预测 SMILES 性质 or 直接生成 SMILES 的技术路线是行不通的。因…

系统移植(十)Linux内核源码解析(未整理)

1、分析make <board_name>_defconfig执行过程详解 分析Makefile文件&#xff0c;分析Makefile文件的规则中目标为"<board_name>_defconfig", 打开linux内核源码目录下的Makefile,搜索“%config”字符串&#xff0c;得到以下结果 %config: scripts_basic …

进程间通信--套接字socket

前面提到的管道、消息队列、共享内存、信号和信号量都是在同一台主机上进行进程间通信&#xff0c;那要想跨网络与不同主机上的进程之间通信&#xff0c;就需要Socket通信了。 实际上&#xff0c;Socket通信不仅可以跨网络与不同主机的进程间通信&#xff0c;还可以在同主机上…

安防监控视频平台LntonAIServer视频监控管理平台裸土检测算法

LntonAIServer裸土检测算法代表了一种先进的土地监测技术&#xff0c;它利用人工智能的强劲能力&#xff0c;实现了对裸土区域的自动识别和实时监测。该算法的推出&#xff0c;为环境保护、农业管理以及城市规划等多个领域提供了创新的解决方案&#xff0c;其应用前景广阔&…

maven插件1(timer-plugin)

概述 timer plugin, 提供4个goal: currentTimecurrentDatecurrentMonthcurrentYear 打包 命令 maven clean install 常见错误 goalPrefix MISSING 错误信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-plugin-plugin:3.13.1:helpmojo (help-goal)…

速通JS模块化规范

目录 1模块化概述 1.1什么是模块化&#xff1f; 1.2为什么需要模块化&#xff1f; 2有哪些模块化规范&#xff1f; 3导入与导出的概念 4CommonJS 规范 4.1初步体验 4.2导出数据 4.3导入数据 4.4扩展理解 4.5浏览器端运行 5ES6 模块化规范 5.1初步体验 5.2Node 中运…

创建自己的 Omnigraph (python篇)

Omnigraph 是 Nvidia Omniverse 中一个强大的视觉化脚本工具&#xff0c;它让开发者能够以直观和灵活的方式创建复杂的行为和交互性。通过结合 Action Graphs 和 Push Graphs&#xff0c;以及利用丰富的节点库&#xff0c;用户可以在 Omniverse 平台上构建出令人惊叹的虚拟世界…

【书生大模型实战】L1-LangGPT结构化提示词编写实践

一、关卡任务 背景问题&#xff1a;近期相关研究发现&#xff0c;LLM在对比浮点数字时表现不佳&#xff0c;经验证&#xff0c;internlm2-chat-1.8b (internlm2-chat-7b)也存在这一问题&#xff0c;例如认为13.8<13.11。 任务要求&#xff1a;利用LangGPT优化提示词&#x…

【爱创大师】【数学】一元一次方程的实现

科技 教育 艺术 跨界融合&#xff0c;欢迎来到爱创大师 问题引入&#xff1a; 同学们还记得啥是一元一次方程吗&#xff0c;来回顾一下定义 一元一次方程指只含有一个未知数、未知数的最高次数为1且两边都为整式的等式。一元一次方程只有一个根。一元一次方程可以解决绝大多…

【2024最新】国内6个免费的AI绘画网站,支持Midjourney等绘画模型

一、什么是AI绘画&#xff1f; AI绘画&#xff0c;也称为人工智能绘画或机器生成艺术&#xff0c;是指使用人工智能技术来创作视觉艺术作品的过程。这种技术通常涉及到深度学习模型&#xff0c;尤其是生成对抗网络&#xff08;GANs&#xff09;和变分自编码器&#xff08;VAEs…

3d动画软件blender如何汉化?(最新版本4.2)

前言 Blender是一个非常强大的3d动画软件&#xff0c;总能受到大量工作者的青睐。 但是&#xff0c;对于新手来说&#xff08;尤其是英语学渣&#xff09;&#xff0c;语言是个难事。大部分blender打开时都是英文&#xff0c;对新手使用具有一定的障碍。因此&#xff0c;我们需…

向量数据库(二):Qdrant

写在前面 我们借助 Qdrant 来了解向量数据库的一些内容 内容 什么是 Qdrant? Qdrant 是一个开源的针对向量相似性搜索的引擎,它提供了一系列的 API 用于对向量数据进行存储、搜索和管理等功能。 下面是来自 Qdrant 官网的一个架构图: 初步了解 Qdrant 里的一些概念 …

【Qt】QComboBox和QListWidget样式调整问题

总是遇到一些重复的问题&#xff0c;隔得时间长了&#xff0c;就又忘记了&#xff0c;记录一下。 问题1&#xff1a; QComboBox下拉条目高度设置不生效的问题&#xff0c;在样式中设置了item的高度&#xff0c;但是不生效。 解决办法&#xff1a; 创建QCoboBox的时候&#…

SM2p256v1椭圆曲线点加点减倍点python实现代码

首先给出SM2p256v1椭圆曲线的建议参数如下&#xff1a; default_ecc_table {n: FFFFFFFEFFFFFFFFFFFFFFFFFFFFFFFF7203DF6B21C6052B53BBF40939D54123,p: FFFFFFFEFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF00000000FFFFFFFFFFFFFFFF,g: 32c4ae2c1f1981195f9904466a39c9948fe30bbff266…

freemodbus libmodbus

相比libmodbus, freeModbus看起来更舒服。 1. 文件与函数&#xff1a;FreeModbus每个文件函数都不是很多。客户端、服务端函数分开。相对每个函数功能比较明确 freeModbus mbfuncholding_m.c、mbfuncholding.c 函数一共就几个&#xff0c;只看函数列表就猜到函数功能 服务端…