在 Node.js 中封装一个增删改查(CRUD)接口,并在 Vue 3 前端调用这些接口。整个过程包括后端 API 的创建和前端的调用。
一、安装 Node.js 和 Express 脚手架
1. 安装 Node.js
首先,你需要安装 Node.js。你可以通过以下步骤进行安装:
根据你的操作系统选择适合的安装包,并安装。
在安装完成后,你可以通过以下命令检查是否安装成功:
node -v
如果成功安装,终端会显示 Node.js 的版本号。
2. 使用 Express 脚手架创建项目
接下来,我们将使用 Express 脚手架创建一个新的项目。
npx express-generator my-express-app
cd my-express-app
npm install
这会创建一个名为 my-express-app
的项目,并安装所有依赖。
二、搭建 MongoDB 数据库
1. 安装 MongoDB
首先,你需要安装 MongoDB。你可以通过以下步骤进行安装:
根据你的操作系统选择适合的版本,并安装。
安装完成后,启动 MongoDB:
mongod --dbpath <your-data-path>
2. 连接 MongoDB 与 Node.js
在 my-express-app
目录中,我们需要安装 mongoose
以便与 MongoDB 交互:
npm install mongoose
接下来,在项目的 app.js
中添加以下代码,连接到 MongoDB:
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydatabase', {
useNewUrlParser: true,
useUnifiedTopology: true,
});
mongoose.connection.on('connected', () => {
console.log('Connected to MongoDB');
});
mongoose.connection.on('error', (err) => {
console.log('Failed to connect to MongoDB', err);
});
三、封装 CRUD 操作
1. 创建 Mongoose 模型
在项目的 models
目录下创建一个 Item.js
文件,用于定义数据模型:
const mongoose = require('mongoose');
const itemSchema = new mongoose.Schema({
name: {
type: String,
required: true,
},
quantity: {
type: Number,
required: true,
},
});
module.exports = mongoose.model('Item', itemSchema);
2. 封装 CRUD 操作
在 routes
目录下创建一个 items.js
文件,用于处理增删改查请求:
const express = require('express');
const router = express.Router();
const Item = require('../models/Item');
// Create an item
router.post('/items', async (req, res) => {
try {
const newItem = new Item(req.body);
const savedItem = await newItem.save();
res.status(201).json(savedItem);
} catch (error) {
res.status(400).json({ message: error.message });
}
});
// Get all items
router.get('/items', async (req, res) => {
try {
const items = await Item.find();
res.json(items);
} catch (error) {
res.status(500).json({ message: error.message });
}
});
// Update an item
router.put('/items/:id', async (req, res) => {
try {
const updatedItem = await Item.findByIdAndUpdate(req.params.id, req.body, { new: true });
res.json(updatedItem);
} catch (error) {
res.status(400).json({ message: error.message });
}
});
// Delete an item
router.delete('/items/:id', async (req, res) => {
try {
await Item.findByIdAndDelete(req.params.id);
res.json({ message: 'Item deleted' });
} catch (error) {
res.status(500).json({ message: error.message });
}
});
module.exports = router;
然后在 app.js
中引入并使用这个路由:
const itemsRouter = require('./routes/items');
app.use('/api', itemsRouter);
四、前端:使用 Vue 3 实现接口调用
1. 创建 Vue 3 项目
首先,使用 Vue CLI 创建一个新的 Vue 3 项目:
npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
2. 创建 API 服务文件
在 src
目录下创建一个 api.js
文件,用于封装 API 请求:
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://localhost:3000/api',
headers: {
'Content-Type': 'application/json',
},
});
export default {
getItems() {
return apiClient.get('/items');
},
createItem(item) {
return apiClient.post('/items', item);
},
updateItem(id, item) {
return apiClient.put(`/items/${id}`, item);
},
deleteItem(id) {
return apiClient.delete(`/items/${id}`);
},
};
3. 使用 setup
语法编写 Vue 组件
在 src/components
目录下创建一个 ItemList.vue
组件,用于展示和操作数据:
<template>
<div>
<h1>Item List</h1>
<ul>
<li v-for="item in items" :key="item._id">
{{ item.name }} - {{ item.quantity }}
<button @click="deleteItem(item._id)">Delete</button>
<button @click="editItem(item)">Edit</button>
</li>
</ul>
<div>
<input v-model="newItem.name" placeholder="Name" />
<input v-model="newItem.quantity" type="number" placeholder="Quantity" />
<button @click="addItem">Add Item</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api';
const items = ref([]);
const newItem = ref({
name: '',
quantity: null,
});
const fetchItems = async () => {
const response = await api.getItems();
items.value = response.data;
};
const addItem = async () => {
const response = await api.createItem(newItem.value);
items.value.push(response.data);
newItem.value.name = '';
newItem.value.quantity = null;
};
const deleteItem = async (id) => {
await api.deleteItem(id);
items.value = items.value.filter(item => item._id !== id);
};
const editItem = (item) => {
newItem.value = { ...item };
};
onMounted(() => {
fetchItems();
});
</script>
4. 在 App.vue
中使用 ItemList.vue
修改 App.vue
来包含 ItemList.vue
组件:
<template>
<div id="app">
<ItemList />
</div>
</template>
<script setup>
import ItemList from './components/ItemList.vue';
</script>
5. 运行项目
确保你在运行后端的同时,在 my-vue-app
目录下运行前端项目:
npm run serve
现在,你应该可以在浏览器中访问 Vue 3 应用,并执行增删改查操作,这些操作将与后端的 Node.js 和 MongoDB 进行交互。
五、总结
这篇教程涵盖了以下内容:
如何安装和配置 Node.js 和 Express。
使用 Mongoose 连接和操作 MongoDB。
如何封装 CRUD 操作并与前端 Vue 3 结合。
使用 Vue 3 的 setup
语法糖编写组件,并通过 Axios 调用后端 API。
标题可以是: 《基于 Vue 3 和 Express 的完整增删改查项目实现:从后端封装到前端调用》