โครงสร้างไฟล์

ใน meteor นั้น mongoDB นั้นเป็นฐานข้อมูลที่มีมาพร้อมในขั้นตอนการติดตั้งเลย ดังนั้นเราสามารถเรียกใช้งานได้ทันที โดยเราจะสร้าง folder สำหรับการจัดเก็บดังนี้

imports/ui และ imports/api

imports/api/posts.js

ใน folder imports/api นั้นสร้างไฟล์ posts.js จากนั้น เขียนโปรแกรมในการเรียกใช้งาน mongodb collection ดังนี้

import { Mongo } from 'meteor/mongo';

const Posts = new Mongo.Collection('posts');
export default Posts;

โดยจะเก็บข้อมูลใน collection ชื่อ posts นั่นเอง

imports/ui/body.html

เป็นไฟล์สำหรับเก็บฟอร์มในการกรอกข้อมูล และ แสดงผลข้อมูล

<body>
    <div class="container">
    <header>
        <h1>My Blog</h1>
        {{> loginButtons}}
    </header>
    <main>
       
        <form class="new-post">
            <div class="form-group">
                <input type="text" name="subject" placeholder="Subject" class="form-control">
            </div>
            <div class="form-group">
                <textarea name="body" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-success">
            </div>
        </form>
        
        <div class="row">
            {{#each posts}}
                {{> post}}
            {{/each}}
        </div>
    </main>
    </div>
</body>

imports/ui/body.js

ทำการสร้าง helper ในการดึงข้อมูลมาแสดงผ่าน posts เพื่อส่งไป foreach ใน post.html และเมื่อกดปุ่ม submit จากฟอร์ม .new-post ให้เข้า events จากนั้นให้บันทึกข้อมูล

import { Template } from 'meteor/templating';
import Posts from '../api/posts.js';
import './body.html';
import './post.js';

Template.body.helpers({
    posts(){
        return Posts.find({}, {
            sort: { updatedAt: -1 }
        });
    }
});

Template.body.events({
    'submit .new-post'(event){
        event.preventDefault();
        Post.insert({
                subject: event.target.subject.value,
                body: event.target.body.value,
                createdAt: new Date(),
                updatedAt: new Date()
            });
        event.target.subject.value = '';
        event.target.body.value = '';
    }
});

imports/ui/post.html

เป็นการแสดงผล post แต่ละตัวใน foreach

<template name="post">
    <div class="col-md-4">
        <h1>{{subject}}</h1>{{createdAt}}
    </div>
</template>

imports/ui/post.js

เป็นไฟล์ js ที่เรียก post.html

import { Template } from 'meteor/templating';
import './post.html';

client/main.html

ปรับแก้ไฟล์ main.html

<head>
  <title>myproject</title>
</head>

client/main.js

ปรับแก้ main.js เพื่อ import body.js

import '../imports/ui/body.js';

server/main.js

ปรับแก้ main.js ในฝั่ง server เพื่อเรียก collection posts.js

import { Meteor } from 'meteor/meteor';
import '../imports/api/posts.js';

Meteor.startup(() => {
  // code to run on server at startup
});

ทดลองเพิ่มข้อมูลในฟอร์ม จะปรากฏรายการข้อมูล

ทดสอบหัวข้อ

Fri Mar 02 2018 16:02:31 GMT+0700 (SE Asia Standard Time)

ทำงานกับฐานข้อมูล MongoDB ด้วย Meteor