2022年，尝试使用Node.js、wijmo和WebAPI对MongoDB进行CRUD操作

12 月 ago

韵, 科

3 minutes

用MongoDB进行CRUD操作的备忘录。使用wijmo网格。在很多地方都遇到了麻烦。。。

环境

wijmo（トライアル版：5.20221.842）

事前准备

Node.jsのプロジェクト用フォルダを作り、expressとmongodbをインストールする

MongoDB的状态

项目文件夹结构

文件夹/
├ node_modules/ ←与Express相关和MongoDB
├ wijmo/
│　└ index.html
│　└ lib
│　　　├ wijmo.min.css
│　　　├ wijmo.min.js
│　　　└ wijmo.grid.min.js
├ app.js
└ package.json

画面形象（客户）

「データ取得」でサーバから最新データを取得する（デバッグ用）

服务器端（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）

<!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>

便条备忘

POSTでbodyのデータがクライアント側に届かず、難儀した（headerつけたら届いた）