使用Vue.js和MongoDB构建全栈Web应用

依旧_99
184 阅读2分钟

在本文中，我们将学习如何结合Vue.js和MongoDB构建一个全栈Web应用。Vue.js作为前端框架，用于构建用户界面，而MongoDB是一个流行的NoSQL数据库，用于存储和管理数据。通过这两者的结合，我们能够快速搭建一个具有前后端功能的Web应用。

准备工作

在开始之前，确保你已经具备以下环境和知识：

  1. 熟悉Vue.js基础知识和Vue组件开发。Vue的安装及创建项目 - 掘金 (juejin.cn)
  2. 安装Node.js和npm（Node.js的包管理器）。Node.js的安装和使用 - 掘金 (juejin.cn)
  3. 已安装MongoDB并且了解基本的MongoDB操作。

创建Vue.js项目

首先，我们来创建一个新的Vue.js项目：

  1. 打开命令行，并执行以下命令来安装Vue CLI（如果你还没有安装它）：
npm install -g @vue/cli
  1. 创建一个新的Vue项目：
vue create full-stack-app

在创建项目时，选择默认设置或根据你的需要进行自定义配置。

创建Express.js后端

接下来，我们将创建Express.js后端，用于提供数据和服务：

  1. 在Vue项目的根目录下，创建一个新的文件夹server。
  2. 在server文件夹中，创建一个新的JavaScript文件app.js：
const express = require('express');
const app = express();
const mongoose = require('mongoose');

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 定义数据模型
const ItemSchema = new mongoose.Schema({
  name: String,
  description: String
});

const Item = mongoose.model('Item', ItemSchema);

// 获取所有数据项
app.get('/api/items', async (req, res) => {
  try {
    const items = await Item.find();
    res.json(items);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: '服务器错误' });
  }
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});

在这里，我们使用了Mongoose库来连接MongoDB数据库，并定义了一个简单的数据模型Item来表示每个数据项。我们在/api/items路由上返回所有数据项。

  1. 在server文件夹中，运行以下命令安装依赖：
npm init -y
npm install express mongoose

配置前后端代理

由于我们的Vue应用和Express应用将运行在不同的端口上（Vue默认为8080，Express默认为5000），为了解决跨域问题，我们需要配置前后端代理。

  1. 在Vue项目的根目录下，找到vue.config.js文件（如果没有则创建），并添加以下配置：
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true
      }
    }
  }
};

这将把所有以/api开头的请求代理到Express后端的地址（http://localhost:5000）。

修改Vue组件

现在，我们需要修改Vue组件来调用Express后端提供的数据。

  1. 在Vue项目的src目录下，创建一个新的文件夹components，然后在其中创建一个新的组件文件ItemList.vue：
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item._id">
        <strong>{{ item.name }}</strong>: {{ item.description }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      try {
        const response = await this.$http.get('/api/items');
        this.items = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

在这里，我们使用了Vue的$http对象来发起HTTP请求，从Express后端获取数据并将其显示在页面上。

在App.vue中使用ItemList组件

最后，我们将ItemList组件添加到App.vue中以显示数据：

<template>
  <div id="app">
    <ItemList />
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';

export default {
  components: {
    ItemList
  }
};
</script>

运行应用

现在，我们已经完成了全栈Web应用的开发。运行以下命令启动应用：

npm run serve

现在，打开浏览器并访问http://localhost:8080，你将看到页面上显示MongoDB中存储的数据。

结论

恭喜！你已经成功使用Vue.js和MongoDB构建了一个全栈Web应用。通过结合Vue的前端能力和MongoDB的数据库功能，你可以构建出功能强大的全栈应用。希望这篇文章对你有所帮助，让你对Vue.js和MongoDB的结合应用有了更深入的了解。愿你在全栈开发的旅程中取得更多成就，创造出更多优秀的应用作品！

avatar
文章
阅读
粉丝