更新機能追加 - nodejsからmongodbの操作を少しづつ改良してみる

公開日:2018-12-10
最終更新:2018-12-10

Qrunch

更新機能追加 - nodejsからmongodbの操作を少しづつ改良してみる

  • 前回の記事はこちらです。

  • 前回、リストよりチェックボックスを使っての削除機能を作りましたが、今回はそのチェックボックスを流用して、チェックされてる項目の更新画リンク作成して,更新画面に飛ばして、編集するという実装にしました。

  • 本当は、リダイレクトで画面遷移をしたかったのですが、うまく動作しなかったので今回は断念しました。

  • 更新手続きは、コード的には、①変更するドキュメントを選び更新画面にデータを送る部分と②送られたデータの変更をデータベースに伝える部分が必要となります。

  • まず①の部分を作っていきます.

  • user_list.pug

extends layout  

block content  
  .container  
    h1 user list  
    #removeBtn.btn Remove  
    #editBtn.btn Edit  
    #userEditLink  
    ol.ol  
      li.label.li #[span.list Index] #[span.list Name] #[span.list Age] #[span.list Height] #[span.list Weight] #[span.list mongoId]  

      for item, index in userList  
        li.data.li.  
          #[input(type="checkbox" value=item._id)]  
          #[span.list #{ index }]  
          #[span.list #{ item.name }]  
          #[span.list #{ item.age }]  
          #[span.list #{ item.height }]  
          #[span.list #{ item.age }]  
          #[span.list#mid #{ item._id }]  
  script(src="javascripts/userList.js")  
  • リスト用htmlに Edit リンク用のボタンと userEditLink を作ります. このリンクボタンから、編集画面に飛ばします。

  • userList.js 抜粋

    • 処理は、チェックが入った項目のmongodbの_id を取得して、リンクのアドレスに付加しているだけです。
    • これを、サーバー側 index.js で処理します

  editBtn.addEventListener('click', () => {  
    console.log('edit btn click')  
      const editData = checkArray[0]  
      const data = new URLSearchParams()  
      data.set("_id", editData)  
      console.log('URLSearchParams: ', data.toString())  

      userEditLink.innerHTML = `<p><a href="http://localhost:3000/user_edit?${data}"/>Edit Link</p>`  

  })  
  • index.js 抜粋
router.get('/user_edit', (req,res) => {  
  let mid = req.params.mid || "none"  
  let mongoId = req.query || "none"  
  let _id = mongoId._id || "none"  

  if (state.debug) {  
    console.log('mongoId: ', req.query)  
    console.log('mid: ', req.params.mid)  
    console.log('_id: ', mongoId._id)  
  }  
  findOneDocument({db, _id})  
    .then(doc => {  
      const arrayDoc = Object.entries(doc)  
      if(state.debug){  
        console.log('user_edit doc', doc)  
        console.log('user_edit arrayDoc', arrayDoc)  
      }  
      res.render('user_edit', { userData : arrayDoc})  
    })  
    .catch(e => console.error(e.message))  
})  

router.post('/api/updateone', (req, res) => {  
  const data = req.body  
  if(state.debug) {  
    console.log('api/updateone data: ', data);  
  }  
  updateOneDocument({ db, data })  
    .then(result => {  
      console.log('api/updateone', result.result)  
    })  
    .catch(e => console.error(e.message))  
})  
  • /user_edit 側が送られてきた、mongodb の id を findOneDocument関数に処理させて、useredit画面側に、_id に紐付いたデータを送ります。

  • /api/updateone 側は、user_edit画面側のJSのfetchからPOSTされたデータを更新しています。

  • findeOneDocument関数と、updateOneDocument関数を libAsync.jsに作成します。

  • libAsync.js 抜粋

module.exports.updateOneDocument = async({ db, data }) => {  
  const collection = db.collection(colName)  

  const updateData =[  
    { _id : ObjectId(data._id)},  
    { $set: { name: data.name, age: data.age, weight: data.weight, height: data.height }},  
  ]  

  return await collection.updateOne(...updateData)  
}  

module.exports.findOneDocument = async({db, _id }) => {  
  const collection = db.collection(colName)  
  const obj = {  
    "_id": ObjectId(_id)  
    // "_id": ObjectId("5c0b67bcb86361681b3160a0")  
  }  
  if(state.debug) console.log('findOneDocument obj: ', obj)  

  return await collection.findOne(obj)  
}  
  • findOneDocument関数が編集画面に送るデータ処理用で、updateOneDocument関数が更新されたデータを受けて、mongodbのデータを更新処理しています。
  • user_edit.pug で更新データを編集できるようにします。
block content  
  .container  
    h1 user Edit page  
    ol.ol  
      for item in userData  
        li.li.  
          #[span.list #{ item[0] }]  
          #[input(type="text" value=item[1])]  
    #btn.btn Update  
    #result.result  
  script(src="./javascripts/userEdit.js")  

  • サーバー側の index.jsから送られてきた userData を使って画面を作ります。

    • 今回は、編集できないといけないので、input の value データとしています。
  • userEdit.js

document.addEventListener('DOMContentLoaded', () => {  
  'use strict'  

  const result = document.querySelector('#result')  

  console.log('-- userEdit.js log --')  


  btn.addEventListener('click', () => {  
    const array = []  
    const inputs = document.querySelectorAll('input')  
    for(let input of inputs) {  
      array.push(input.value)  
    }  
    console.log('array: ', array)  

    const objData = {  
      _id   : array[0],  
      name  : array[1],  
      age   : array[2],  
      weight: array[3],  
      height: array[4]  
    }  

    // http://localhost:3000/user_edit?_id=5c0b9fd4101376cd30804fea  

    const data = new URLSearchParams(objData)  
    console.log('objData: ', objData)  
    console.log('URLserchParams data: ', data.toString())  

    const options = {  
      method: 'POST',  
      body : data,  
    }  

    const main = async() => {  
      try {  
        let res = await fetch('http://localhost:3000/api/updateone', options)  
        if (!res.ok) throw new Error(response.statusText)  
        console.log('res: ', res)  

      } catch(e) {  
        console.error('エラー', e.message)  
      }  
    }  
    main()  
    result.textContent = 'Update!'  

  })  
})  
  • input のデータを書き換えたあと、更新データをfetch を使って送る処理になりますが、更新データの処理は、ボタンが押された後に書く必要があります、ボタンを押す前に処理を書いてしまうと、更新前の value を拾ってしまいどうしたものかと途方に暮れかけました。

  • これで一通りの実装が完成しました。

  • 出来栄えは、想定していたものの50%の出来ですが、データベースからサーバー処理、フロント側と実装するのになにが必要なのかを自分でロジックを考えて実装できたことは、なにかコードを書くベースが出来たような気がします。 おかげでオレオレ実装になった感はいなめませんが、今後何を勉強すればいいのかが自分なりに明確になりました。

  • つたないコードをみてくれた方には、感謝いたします。m(__)m

  • 最終のコードもUpしていますので、よければ見てください。

  • https://github.com/atoris1192/qrunch_mongodb_express

    • step05.001
git reset --hard 2c90431de01  
git pull  
git reset --hard f195359f1  
記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@atoris1192の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする