Java搭建mongo DB并用VUE展现出来

要搭建一个Java和MongoDB的Web应用程序，并使用Vue将其展现出来，需要进行以下步骤：

1. 安装MongoDB数据库并启动

首先，我们需要在本地计算机上安装MongoDB数据库。安装完成后，我们需要启动MongoDB服务，以便我们的Java应用程序可以连接到它。

2. 创建Java Web应用程序

使用Java进行Web开发，我们通常使用Maven或Gradle来管理依赖项和构建过程。创建一个新的Java Web应用程序项目，并将以下依赖项添加到pom.xml文件中：

<dependency>
    <groupId>org.mongodb</groupId>
    <artifactId>mongo-java-driver</artifactId>
    <version>3.12.7</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.3</version>
</dependency>

这些依赖项将使我们能够连接到MongoDB数据库并将结果转换为JSON格式。

3. 连接到MongoDB数据库

我们需要编写Java代码来连接到MongoDB数据库。以下是一个示例代码片段，其中我们将连接到名为“example”的数据库：

MongoClient mongoClient = new MongoClient("localhost", 27017);
MongoDatabase database = mongoClient.getDatabase("example");
MongoCollection<Document> collection = database.getCollection("users");

在这个例子中，我们创建了一个MongoDB客户端，并使用它来获取一个名为“example”的数据库和一个名为“users”的集合。

4. 创建REST API

我们需要创建一个REST API，以便我们的Vue应用程序可以使用它来获取数据。以下是一个示例代码片段，其中我们将返回所有用户的列表：

public List<User> getAllUsers() {
    List<User> users = new ArrayList<>();
    FindIterable<Document> iterable = collection.find();
    iterable.forEach(new Block<Document>() {
        @Override
        public void apply(final Document document) {
            User user = new User();
            user.setId(document.getString("_id"));
            user.setName(document.getString("name"));
            user.setEmail(document.getString("email"));
            users.add(user);
        }
    });
    return users;
}

在这个例子中，我们使用MongoDB集合的“find”方法获取所有用户，并将结果转换为我们的“User”类的列表。

5. 创建Vue应用程序

现在我们需要创建一个Vue应用程序，以便我们可以使用REST API来获取数据并将其展现出来。我们可以使用Vue CLI来创建Vue应用程序。在创建应用程序之后，我们需要安装axios依赖项，以便我们可以使用它来获取数据。

npm install axios --save

6. 获取数据并展现

我们需要编写Vue代码来获取数据并将其展现出来。以下是一个示例代码片段，其中我们将使用axios来获取数据并将其展现在一个表格中：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('http://localhost:8080/users')
      .then(response => {
        this.users = response.data
      })
  }
}
</script>

在这个例子中，我们使用axios来获取数据，并将其展现在一个表格中。

这就是使用Java和MongoDB创建Web应用程序，并使用Vue将其展现出来的基本步骤。