MongoDBと Meteor および Vue を統合

npx meteor

npm install mongodb

meteor create --vue meteor-vue-quickstartcd meteor-vue-quickstart

cd imports/uirm components/AppMenu.vue components/Hello.vue components/Info.vue views/About.vue views/Home.vue

mongodb+srv://<username>:<password>@<cluster>/sample_restaurants?<options>

export MONGO_URL="<connection URI>"

import { Mongo } from 'meteor/mongo';
export const RestaurantsCollection = new Mongo.Collection('restaurants');

import { Meteor } from 'meteor/meteor';import { RestaurantsCollection } from './restaurantsCollection';
// Publishes all restaurantsMeteor.publish('restaurants', function publishRestaurants() {    console.log('Publishing all restaurants...');    const cursor = RestaurantsCollection.find({}, { limit: 200 }); // Limit for performance    console.log('Publication cursor created for all restaurants');    return cursor;});
// Publishes restaurants that match the "borough" and "name" filtersMeteor.publish('restaurants.filtered', function publishFilteredRestaurants() {    console.log('Publishing filtered restaurants...');    const query = {        borough: 'Queens',        name: { $regex: 'Moon', $options: 'i' }    };    const cursor = RestaurantsCollection.find(query);    console.log('Publication cursor created for filtered restaurants');    return cursor;});

const { MongoClient } = require('mongodb');
const MONGO_URL = process.env.MONGO_URL;
async function insertSampleRestaurant() {
  const client = new MongoClient(MONGO_URL);    try {    await client.connect();    const db = client.db();    const collection = db.collection('restaurants');        const doc = {      name: "Honey Moon Coffee Shop",      borough: "Queens",      cuisine: "Café/Coffee/Tea",    };    const result = await collection.insertOne(doc);        console.log('Inserted restaurant with ID:', result.insertedId);      } catch (error) {    console.error('Error:', error);  } finally {    await client.close();  }}
insertSampleRestaurant();

import { Meteor } from 'meteor/meteor';import { RestaurantsCollection } from '../imports/api/restaurantsCollection';import '../imports/api/restaurantsPublications';
Meteor.startup(async () => {  // Check connection to restaurants collection  try {    const restaurantCount = await RestaurantsCollection.find().countAsync();    console.log(`Connected to MongoDB Atlas. Found ${restaurantCount} restaurants in the collection`);  } catch (error) {    console.error('Error connecting to restaurants collection:', error);  }});

import { createRouter, createWebHistory } from 'vue-router';import RestaurantList from './views/RestaurantList.vue';
export const router = createRouter({  history: createWebHistory(),  routes: [    {      path: '/',      name: 'home',      component: RestaurantList,      meta: { filter: false }    },    {      path: '/browse',      name: 'browse',       component: RestaurantList,      meta: { filter: true }    }  ],});

<script setup>defineProps({  restaurant: {    type: Object,    required: true,  },});</script>
<template>  <tr class="border-b transition-colors hover:bg-gray-50">    <td class="p-4 align-middle">{{ restaurant.name }}</td>    <td class="p-4 align-middle">{{ restaurant.borough }}</td>    <td class="p-4 align-middle">{{ restaurant.cuisine }}</td>  </tr></template>

<script setup>import Restaurant from '../components/Restaurant.vue';import { subscribe, autorun } from 'vue-meteor-tracker';import { RestaurantsCollection } from '../../api/restaurantsCollection';import { useRoute, RouterLink } from 'vue-router';import { computed } from 'vue';
const route = useRoute();
// Determines whether to show filtered resultsconst isFiltered = computed(() => route.path === '/browse');
// Subscribes to both publications to avoid switching issuessubscribe('restaurants');subscribe('restaurants.filtered');
// Retrieves restaurants based on current route with client-side filtering as backupconst restaurants = autorun(() => {  let docs;    if (isFiltered.value) {    docs = RestaurantsCollection.find({      borough: 'Queens',      name: { $regex: 'Moon', $options: 'i' }    }).fetch();    console.log('Filtered restaurants found:', docs.length);  } else {    docs = RestaurantsCollection.find({}, { limit: 200 }).fetch();    console.log('All restaurants found:', docs.length);  }    return docs;}).result;
// Determines the title based on the routeconst getTitle = computed(() => {  return isFiltered.value     ? 'Filtered Restaurants (Queens, containing "Moon")'     : 'All Restaurants';});</script>
<template>  <div class="container mx-auto px-4">    <!-- Navigation -->    <nav class="flex justify-between items-center mb-6 p-4 bg-white shadow rounded">      <div class="flex space-x-4">        <RouterLink           to="/"           class="px-4 py-2 text-blue-600 hover:bg-blue-50 rounded transition-colors"          :class="{ 'bg-blue-100 font-semibold': !isFiltered }"        >          All Restaurants        </RouterLink>        <RouterLink           to="/browse"           class="px-4 py-2 text-blue-600 hover:bg-blue-50 rounded transition-colors"          :class="{ 'bg-blue-100 font-semibold': isFiltered }"        >          Browse Filtered        </RouterLink>      </div>    </nav>
    <!-- Header -->    <header class="mb-6">      <h1 class="text-4xl font-bold text-gray-800 my-4">Restaurant Directory</h1>      <h3 class="text-lg font-semibold text-gray-600">{{ getTitle }}</h3>    </header>
    <!-- Restaurant Table -->    <div class="border rounded-lg overflow-hidden shadow">      <div class="relative w-full overflow-auto">        <table class="w-full text-sm">          <thead class="bg-gray-100 border-b-2 border-gray-300">            <tr class="border-b-2 border-gray-400">              <th class="h-14 px-4 text-left align-middle font-bold text-gray-900 text-base tracking-wide">                Name              </th>              <th class="h-14 px-4 text-left align-middle font-bold text-gray-900 text-base tracking-wide">                Borough              </th>              <th class="h-14 px-4 text-left align-middle font-bold text-gray-900 text-base tracking-wide">                Cuisine              </th>            </tr>          </thead>          <tbody>            <Restaurant               v-for="restaurant in restaurants"               :key="restaurant._id"               :restaurant="restaurant"             />          </tbody>        </table>                <!-- Empty state -->        <div v-if="restaurants.length === 0" class="p-8 text-center text-gray-500">          <p>No restaurants found. Ensure that your connection URI is correct and includes the sample_restaurants database name.</p>          <p v-if="isFiltered" class="text-sm mt-2">            Try the "All Restaurants" tab to see all available restaurants.          </p>        </div>      </div>    </div>
    <!-- Restaurant count -->    <div class="mt-4 text-sm text-gray-600">      Showing {{ restaurants.length }} restaurant{{ restaurants.length !== 1 ? 's' : '' }}    </div>  </div></template>

<script setup>import { RouterView } from 'vue-router';</script>
<template>  <div class="min-h-screen bg-gray-50">    <RouterView />  </div></template>

meteor npm run start

[[[[[ ~/meteor-vue-quickstart ]]]]]
=> Started proxy.=> Started HMR server....Connected to MongoDB Atlas. Found 25368 restaurants in the collection=> Started your app.
=> App running at: http://localhost:3000/

export MONGO_URL="<connection URI>"

node scripts/insertDemo.js