MongoDBにCRUDするメモ。グリッドはwijmoを使用。
いろんなところで手間取った。。。

環境

Windows 10 64bit
Node.js（v18.0.0）
MongoDB（v5.08）
wijmo（トライアル版：5.20221.842）

事前準備

wijmoのトライアル版を入手
MongoDB Compassで、データベース「webtest」＆コレクション「tasklist」を作成しておく
MongoDBであらかじめデータを登録しておく
　({name:"xxxx",type:"xxx",status:xx})
Node.jsのプロジェクト用フォルダを作り、expressとmongodbをインストールする

MongoDBの状態

プロジェクトフォルダ構成

folder/
├ node_modules/ ←express関連とmongodb
├ wijmo/
│　└ index.html
│　└ lib
│　　　├ wijmo.min.css
│　　　├ wijmo.min.js
│　　　└ wijmo.grid.min.js
├ app.js
└ package.json

画面イメージ（クライアント）

データを追加、編集、削除したら「データ送信」を押す（サーバ側へ書き込み）
データ削除は「backspace」か「delete」
「データ取得」でサーバから最新データを取得する（デバッグ用）

サーバ側（app.js）

app.js

const express = require("express");
const app = express();

const mongodb = require("mongodb");
const MongoClient = mongodb.MongoClient;
const client = new MongoClient("mongodb://127.0.0.1:27017");
const db = client.db('webtest');

app.use(express.json());
app.use(express.static("wijmo"));

var taskList = [];

// read
app.get("/api/v1/list", async(req,res)=>{
    await client.connect();
    taskList = await db.collection("tasklist").find().toArray();
    await client.close();
    res.json(taskList);
});

// create
app.post("/api/v1/add", async(req,res)=>{
    await client.connect();
    const data = {
        name:req.body.name,
        type:req.body.type,
        status:req.body.status,
    }
    await db.collection("tasklist").insertOne(data);
    await client.close();
    res.sendStatus(200);
});

// update
app.put("/api/v1/item/:id", async(req,res)=>{
    await client.connect();
    const id = {_id : new mongodb.ObjectId(req.params.id)};
    const data = {
        name:req.body.name,
        type:req.body.type,
        status:req.body.status,
    }
    await db.collection("tasklist").updateOne(id,{$set:data});
    await client.close();
    res.sendStatus(200);
});

// delete
app.delete("/api/v1/item/:id", async(req,res)=>{
    await client.connect();
    const id = {_id : new mongodb.ObjectId(req.params.id)};
    await db.collection("tasklist").deleteOne(id);
    await client.close();
    res.sendStatus(200);
});

app.listen(3000,()=>{
    console.log("Listening Start port = 3000");
})

クライアント側（index.html）

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link  href="lib/wijmo.min.css" rel="stylesheet"/>
<script src="lib/wijmo.min.js"></script>
<script src="lib/wijmo.grid.min.js"></script>
</head>
<body>
<h1>ToDo List</h1>
<div>
<button onclick="getData()">データ取得</button>
<button onclick="sendData()">データ送信</button>
</div>
<div id="wiGrid"></div>
<script>
const cv = new wijmo.collections.CollectionView();
cv.trackChanges = true;
const flexGrid = new wijmo.grid.FlexGrid("#wiGrid",{
    allowAddNew:true,
    allowDelete:true,
    itemsSource: cv,
    autoGenerateColumns: false,
    columns:[
        {binding:"name",header:"タスク"},
        {binding:"type",header:"種別"},
        {binding:"status",header:"状態"},
    ],
});
getData();

async function getData(){
    const res = await fetch("./api/v1/list");
    cv.sourceCollection = await res.json();
}

async function sendData(){
    // POST
    for(var i=0; i<cv.itemsAdded.length; i++){
        await fetch("./api/v1/add", {
            method: "POST",
            headers:{"Content-Type":"application/json"},
            body: JSON.stringify(cv.itemsAdded[i]),
        });
    }
    // PUT
    for(var i=0; i<cv.itemsEdited.length; i++){
        console.log(cv.itemsEdited[i]);
        await fetch("./api/v1/item/" + cv.itemsEdited[i]._id, {
            method: "PUT",
            headers:{"Content-Type":"application/json"},
            body: JSON.stringify(cv.itemsEdited[i]),
        });
    }
    // delete
    for(var i=0; i<cv.itemsRemoved.length; i++){
        await fetch("./api/v1/item/" + cv.itemsRemoved[i]._id, {
            method: "DELETE",
        });
    }
    getData();
}
</script>
</body>
</html>

メモ

wijmoのCollectionViewの扱い方を理解するまでに時間がかかった
POSTでbodyのデータがクライアント側に届かず、難儀した（headerつけたら届いた）

Node.jsとwijmoとWebAPIでMongoDBへCRUDしてみる（2022）

環境