青岛城阳做网站,江西省赣州市中考成绩查询时间,网页设计实训报告格式,招聘小程序怎么制作Astro 是一个现代化的静态站点生成器和前端框架#xff0c;它具有独特的设计理念#xff1a;岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站#xff0c;将各种技术栈#xff08;如React、Vue、Svelte等#xff09;的组件无缝集成到同一个项目中。 1、创建项… Astro 是一个现代化的静态站点生成器和前端框架它具有独特的设计理念岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站将各种技术栈如React、Vue、Svelte等的组件无缝集成到同一个项目中。 1、创建项目
npm create astrolatest astro-todolistcd astro-todolist
code .创建组件 在 src/components/ 目录下创建 TodoList.astro
---
---div idtodo-apph1TodoList/h1form idtodo-forminput typetext idtodo-input placeholderAdd a new taskbutton typesubmit idadd-buttonAdd/button/formul idtodo-list/ul
/divscriptconst 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 typecheckbox ${completed ? checked : }span${text}/spanbutton classdelete-buttonDelete/button;const checkbox li.querySelector(input[typecheckbox]);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);
/scriptstylebody {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[typecheckbox] {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 langenheadmeta charsetutf-8 /link relicon typeimage/svgxml href/favicon.svg /meta nameviewport contentwidthdevice-width /meta namegenerator content{Astro.generator} /titleAstro TodoList/title/headbodyTodoList //body
/html2、运行
测试
npm run dev构建部署
npm run build
npx netlify-cli deploy --proddist下打开网页 双击静态页面打开
