使用 Vue.js 创建一个简单的 CRUD 应用程序
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
介绍
Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。在本教程中，我们将逐步讲解如何使用 Vue.js 创建一个简单的 CRUD（创建、读取、更新、删除）应用程序。本教程假设您已具备 HTML、CSS 和 JavaScript 的基础知识。
项目设置
开始之前，请确保您的计算机上已安装 Node.js 和 npm（Node 包管理器）。打开终端并运行以下命令：
# Create a new Vue project
vue create vue-crud-app
# Navigate to the project folder
cd vue-crud-app
# Install Axios for making HTTP requests
npm install axios
创建 Vue 组件
在 Vue.js 中，用户界面被划分为多个组件。让我们创建用于列出、添加、更新和删除项目的组件。
1. List.vue - 显示项目
<template>
<div>
<h2>All Items</h2>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
<button @click="editItem(item)">Edit</button>
<button @click="deleteItem(item.id)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
editItem(item) {
// Implement edit functionality
},
deleteItem(itemId) {
// Implement delete functionality
},
},
mounted() {
// Fetch items from the server or an API
// and assign them to the 'items' data property
},
};
</script>
2. Add.vue - 添加新项目
<template>
<div>
<h2>Add New Item</h2>
<form @submit.prevent="addItem">
<label for="itemName">Item Name:</label>
<input type="text" id="itemName" v-model="newItemName" required />
<button type="submit">Add Item</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
newItemName: '',
};
},
methods: {
addItem() {
// Implement add functionality
},
},
};
</script>
3. Edit.vue - 更新项目
<template>
<div>
<h2>Edit Item</h2>
<form @submit.prevent="updateItem">
<label for="editedItemName">Item Name:</label>
<input type="text" id="editedItemName" v-model="editedItemName" required />
<button type="submit">Update Item</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
editedItemName: '',
};
},
methods: {
updateItem() {
// Implement update functionality
},
},
};
</script>
4. Delete.vue - 删除项目
<template>
<div>
<h2>Delete Item</h2>
<p>Are you sure you want to delete this item?</p>
<button @click="confirmDelete">Yes</button>
<button @click="cancelDelete">No</button>
</div>
</template>
<script>
export default {
methods: {
confirmDelete() {
// Implement delete functionality
},
cancelDelete() {
// Navigate back to the list view or close the modal
},
},
};
</script>
实施 CRUD 操作
现在我们已经有了组件，让我们在主App.vue文件中实现 CRUD 操作。
<template>
<div>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
/* Add your styles here */
</style>
路由
我们将使用 Vue Router 进行导航。请在文件中设置路由器src/router/index.js：
import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '../components/List.vue';
import Add from '../components/Add.vue';
import Edit from '../components/Edit.vue';
import Delete from '../components/Delete.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: List },
{ path: '/add', component: Add },
{ path: '/edit/:id', component: Edit },
{ path: '/delete/:id', component: Delete },
];
const router = new VueRouter({
routes,
});
export default router;
别忘了导入路由main.js并将其添加到 Vue 实例中：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
router,
}).$mount('#app');
获取和显示数据
在List.vue组件中，使用 Axios 在组件挂载时获取数据：
// Inside the List.vue component
import axios from 'axios';
// ...
export default {
// ...
mounted() {
axios.get('https://api.example.com/items').then((response) => {
this.items = response.data;
});
},
};
添加商品
在组件中Add.vue实现以下addItem方法：
// Inside the Add.vue component
import axios from 'axios';
// ...
export default {
// ...
methods: {
addItem() {
axios.post('https://api.example.com/items', { name: this.newItemName }).then(() => {
// Clear the input field after adding the item
this.newItemName = '';
// Optionally, navigate to the list view
this.$router.push('/');
});
},
},
};
更新和删除项目
与添加项目类似，使用适当的 HTTP 方法在 ` Edit.vueand`组件中实现更新和删除功能。Delete.vue
结论
恭喜！您已经使用 Vue.js 创建了一个简单的 CRUD 应用。本教程涵盖了 Vue 项目的搭建、组件的创建、路由的实现以及 CRUD 操作的基础知识。您可以根据需要添加验证、错误处理或用户身份验证等功能来增强应用。Vue.js 为构建现代 Web 应用提供了一个灵活而强大的框架。祝您编码愉快！
常见问题解答
问：我可以使用不同的数据存储后端吗？
是的，您可以选择任何后端，例如 Firebase、Express.js 搭配 MongoDB，或者 Django 搭配 PostgreSQL。请相应地调整 CRUD 操作中的 HTTP 请求。
问：如何为添加和编辑组件添加表单验证？
您可以使用 Vuelidate 等库，也可以在方法中实现自定义验证逻辑。Vue.js 提供了一个灵活的数据绑定系统，使表单输入和验证变得轻松便捷。
问：Vue.js 适合大型应用程序吗？
是的，Vue.js 适用于大型应用程序。它提供了用于管理的工具和模式。
Vue.js 注重状态管理、组件通信和代码组织。此外，它还允许你逐步采用其功能，使其易于集成到现有项目中。
问：如何部署我的 Vue.js CRUD 应用？
您可以将 Vue.js 应用部署到 Netlify、Vercel 或 GitHub Pages 等平台。这些平台为前端应用提供了便捷的部署选项。此外，如有需要，您还可以配置自己的服务器或使用无服务器函数来实现后端功能。
文章来源：https://dev.to/chintanonweb/creating-a-simple-crud-application-with-vuejs-5apm