前端Vue Node.js + Express + MongoDB 构建的后端服务API接口

以下是一个简化的示例，展示了如何使用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-parser

Vue.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数据库通信。