以下是一个简化的示例，展示了如何使用Vue.js、Node.js、Express和MongoDB来创建一个简单的CRUD应用的后端API服务。
Node.js (server.js):
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;
// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });
// 创建一个Schema
const itemSchema = new mongoose.Schema({
name: String,
description: String
});
// 创建模型
const Item = mongoose.model('Item', itemSchema);
// 获取所有项目
app.get('/items', async (req, res) => {
try {
const items = await Item.find();
res.json(items);
} catch (err) {
res.status(500).send('Error: ' + err);
}
});
// 创建新项目
app.post('/items', async (req, res) => {
const newItem = new Item({
name: req.body.name,
description: req.body.description,
});
try {
const savedItem = await newItem.save();
res.json(savedItem);
} catch (err) {
res.status(500).send('Error: ' + err);
}
});
// 启动服务器
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});确保你已经安装了express, mongoose和body-parser（用于解析请求体）。
npm install express mongoose body-parserVue.js (在前端部分，例如一个组件中):
<template>
<!-- 你的HTML模板 -->
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: [],
name: '',
description: ''
};
},
methods: {
async fetchItems() {
try {
const response = await axios.get('http://localhost:3000/items');
this.items = response.data;
} catch (error) {
console.error(error);
}
},
async createItem() {
try {
const response = await axios.post('http://localhost:3000/items', { name: this.name, description: this.description });
this.items.push(response.data);
this.name = this.description = '';
} catch (error) {
console.error(error);
}
}
},
mounted() {
this.fetchItems();
}
};
</script>确保你已经安装了axios（用于发送HTTP请求）。
npm install axios这个例子展示了如何使用Vue.js和Node.js (Express) 创建一个简单的CRUD应用。前端Vue.js通过axios发送HTTP请求访问Node.js后端Express服务器提供的API接口，后端服务器与MongoDB数据库通信。