html案例-待办事项（Todo）

admin · 发表于 2025-4-1 16:52:41

当然可以！下面是一个较为复杂的前端代码示例，包含了 Vue.js 的使用、组件化、路由、状态管理（Vuex）和 API 调用。
这个示例是一个简单的待办事项（Todo）应用，它允许用户添加、删除和查看待办事项，同时使用 Vue Router 进行页面路由，并用 Vuex 管理应用的状态。
项目结构

my-todo-app/
│
├── public/
│ └── index.html
│
├── src/
│ ├── components/
│ │ ├── TodoList.vue
│ │ ├── TodoItem.vue
│ │ └── AddTodo.vue
│ │
│ ├── store/
│ │ └── index.js
│ │
│ ├── views/
│ │ └── TodoView.vue
│ │
│ ├── App.vue
│ └── main.js
│
└── package.json

复制代码

依赖安装首先，确保你有 Vue CLI，接着在你的项目目录中，安装所需的依赖：
npm install vue vue-router vuex axios1. index.html在 public/index.html 中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

复制代码

2. main.js在 src/main.js 中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');

复制代码

3. App.vue在 src/App.vue 中：

<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

复制代码

4. router/index.js在 src/router/index.js 中：

import Vue from 'vue';
import Router from 'vue-router';
import TodoView from '../views/TodoView.vue';
Vue.use(Router);
const routes = [
{
path: '/',
name: 'Todo',
component: TodoView,
},
];
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;

复制代码

5. store/index.js在 src/store/index.js 中：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
todos: [],
},
mutations: {
SET_TODOS(state, todos) {
state.todos = todos;
},
ADD_TODO(state, todo) {
state.todos.push(todo);
},
DELETE_TODO(state, todoId) {
state.todos = state.todos.filter(todo => todo.id !== todoId);
},
},
actions: {
fetchTodos({ commit }) {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
commit('SET_TODOS', response.data);
});
},
},
getters: {
allTodos: state => state.todos,
},
});

复制代码

6. views/TodoView.vue在 src/views/TodoView.vue 中：

<template>
<div>
<h1>Todo List</h1>
<add-todo @addTodo="addTodo" />
<todo-list :todos="todos" @deleteTodo="deleteTodo" />
</div>
</template>
<script>
import { mapState } from 'vuex';
import TodoList from '../components/TodoList.vue';
import AddTodo from '../components/AddTodo.vue';
export default {
components: {
TodoList,
AddTodo,
},
computed: {
...mapState(['todos']),
},
methods: {
addTodo(todo) {
this.$store.commit('ADD_TODO', todo);
},
deleteTodo(todoId) {
this.$store.commit('DELETE_TODO', todoId);
},
},
created() {
this.$store.dispatch('fetchTodos');
},
}
</script>

复制代码

7. components/TodoList.vue在 src/components/TodoList.vue 中：

<template>
<div>
<ul>
<todo-item
v-for="todo in todos"
:key="todo.id"
:todo="todo"
@delete="deleteTodo(todo.id)" />
</ul>
</div>
</template>
<script>
import TodoItem from './TodoItem.vue';
export default {
components: {
TodoItem,
},
props: {
todos: Array,
},
methods: {
deleteTodo(todoId) {
this.$emit('deleteTodo', todoId);
},
},
}
</script>

复制代码

8. components/TodoItem.vue在 src/components/TodoItem.vue 中：

<template>
<li>
<span>{{ todo.title }}</span>
<button @click="deleteTodo">Delete</button>
</li>
</template>
<script>
export default {
props: {
todo: Object,
},
methods: {
deleteTodo() {
this.$emit('delete', this.todo.id);
},
},
}
</script>

复制代码

9. components/AddTodo.vue在 src/components/AddTodo.vue 中：

<template>
<div>
<input v-model="newTodo" placeholder="Add a new todo" />
<button @click="addNewTodo">Add</button>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
};
},
methods: {
addNewTodo() {
if (this.newTodo.trim()) {
const todo = {
id: Date.now(),
title: this.newTodo,
};
this.$emit('addTodo', todo);
this.newTodo = '';
}
},
},
}
</script>

复制代码

运行应用确保在项目根目录下，使用以下命令启动应用：

npm run serve

复制代码

打开浏览器并访问 http://localhost:8080，你将看到一个简单的待办事项应用。你可以添加待办事项并且删除它们，同时从 API 中获取初始的待办事项列表。
扩展功能你可以根据需要扩展这个应用，例如：

使用持久化存储（如 localStorage）存储待办事项。
为待办事项添加完成状态。
增加样式美化界面。

这种架构为复杂的前端应用提供了良好的基础，可以按需进行扩展和调整。希望这个案例对你有帮助！如果有任何疑问或者需要更详细的解释，请随时问我。

		自动登录	找回密码
密码			立即注册

html案例-待办事项（Todo）

浏览过的版块