atoris1192
atoris1192.qrunch.io

HTML編-nodejsからmongodbの操作を少しづつ改良してみる

2018/12/05に投稿
  • 前回の記事はこちらです。
  • 今回は、データのリスト表示と検索をhtmlレベルに落とし込みを目標にします。
  • 現時点で,ブラウザーのURL欄を使えば、JSONファイルで取得できるのですから、なんとかなりそうです。

  • mongodb の操作を扱うファイルは、index.js です。 htmlファイルルートは現時点で、/ と /user_search になります。 mongodbのスイッチ用のURLは、区別するために/api/... に変更しました。

  • list一覧、検索の結果は、/user_list に表示するように実装しました。

  • insertMany と deleteMany は触っていないので、実行するとブラウザーバックをしないといけない仕様です。(笑)

  • List 一覧画面

  • index.js
var express = require('express');  
var router = express.Router();  
const MongoClient = require('mongodb').MongoClient  
const assert = require('assert')  


const url = 'mongodb://localhost:27017/myproject'  
const dbName = 'myproject'  
const client = new MongoClient(url)  
const lib = require('./libCallback.js')  
const { insertManyDocuments, insertOneDocument, findDocuments, deleteManyDocuments, findDocuments_2 } = lib  


client.connect(err => {  
    assert.equal(null, err)  
    console.log("Connected successfully to server")  
    const db = client.db(dbName)  

  /* GET home page. */  
  router.get('/', function(req, res, next) {  
    console.log(req.query)  
    res.render('index', { title: 'mongodb Tool' });  
  });  

  router.get('/user_search', (req, res, next) => {  
    res.render('user_search' )  
  })  

    router.get('/api/deletemany', (req, res) => {  
        console.log(req.query)  
        deleteManyDocuments(db, (result) => {  
            console.log(result.result)  
        })  
        res.send('delete done')  
    })  
    router.get('/api/insertmany', (req, res) => {  
        console.log(req.query)  
        insertManyDocuments(db, (result) => {  
            console.log(result.result)  
        })  
        res.send('insert done')  
    })  
    router.get('/api/find', (req, res) => {  
        findDocuments(db, (docs) => {  
      console.log(docs)  
      res.render('user_list', { userList: docs})  
    })  

    })  
    router.get('/api/search', (req, res) => {  
        const findsData = req.query  
        console.log(req.query)  
        findDocuments_2({ db, findsData },  (docs) => {  
            console.log(docs)  
      res.render('user_list', { userList: docs})  
        })  
        // res.send('api/find done')  
  })  
})  


module.exports = router;  
  • list一覧部分の変更箇所です。
router.get('/api/find', (req, res) => {  
  findDocuments(db, (docs) => {  
    console.log(docs)  
    res.render('user_list', { userList: docs})  
  })  
})  
  • /api/find のリンクを踏んだら、user_list.pug のhtmlファイルを読み込んで, userList変数で docs のJSONデータを送ります。
  • user_list.pug 側では、 userListを forループで 回しています。
    • httpクライアントもhtml側JSも必要ないのが素晴らしいです。
    • Pugの記述がわかりにくい方は、ブラウザーのデベロッパツールでHtmlを確認されたらいいかと思います。 (ダウンロードして、サーバーを立ち上げないといけませんが...)
  • user_list.pug
extends layout  

block content  
  .container  
    h1 user list  
    ol.ol  
      li.label.li #[span.list Index] #[span.list Name] #[span.list Age] #[span.list Height] #[span.list Weight]  

      for item, index in userList  
        li.li #[span.list #{ index }] #[span.list #{ item.name }] #[span.list #{ item.age }] #[span.list #{ item.height }] #[span.list #{ item.weight }]  
  • css は、ほんとおまけ程度ですので、必要な方は、githubかダウンロードして確認ください。
  • 現時点でのコミットは、step02.001 です。

Search / 検索

  • /user_search 部分は、検索用htmlです。 name や age を選んでリンクの生成をするところです。 かっこいい検索ではありませんがURL欄への直接記入よりは、進化しています。
  • search部分は、user_search.pug で htmlを生成して main.js でリンク部分を作っています。
  • layout.pug に main.js の記述を追加していますので、忘れずに追加してください。
  • layout.pug
doctype html  
html  
  head  
    title= title  
    link(rel='stylesheet', href='/stylesheets/style.css')  
  body  
    include _menu  
    block content  
    script(src="./javascripts/main.js")  
  • user_search.pug

extends layout  

block content  
  h1 UserSearchPage  

  .container  
    .input-area  
      select.select#userSearchSelect  
        option(value="name") Name  
        option(value="age") Age  
        option(value="weight") Weight  
        option(value="height") Height  

      input.user_search_input#userSearchInput(type="text")  
      #userSearchBtn.searchBtn リンク作成  
      #userSearchResult.result ?  
      p: a(href="http://localhost:3000/api/search?name=momo") momo  
  • public/javascripts/main.js
document.addEventListener('DOMContentLoaded', () => {  
  'use strict'  

  const userSearchInput = document.getElementById('userSearchInput')  
  const userSearchSelect = document.getElementById('userSearchSelect')  
  const userSearchBtn = document.getElementById('userSearchBtn')  
  const userSearchResult = document.getElementById('userSearchResult')  

  userSearchBtn.addEventListener('click', () => {  

    const key = userSearchSelect.value  
    const value = userSearchInput.value    
    const input = `${key}=${value}`  
    userSearchResult.innerHTML = `<p>Link: <a href="http://localhost:3000/api/search?${input}"/>${value}</p>`  

  })  
})  
├── app.js  
├── bin  
│ └── www  
├── package.json  
├── public  
│ ├── images  
│ ├── javascripts  
│ │ └── main.js  
│ └── stylesheets  
│     ├── style.css  
│     ├── style.css.map  
│     └── style.sass  
├── routes  
│ ├── index.js  
│ ├── libCallback.js  
│ └── users.js  
├── views  
│ ├── _menu.pug  
│ ├── error.pug  
│ ├── index.pug  
│ ├── layout.pug  
│ ├── user_find.pug  
│ ├── user_list.pug  
│ └── user_search.pug  
└── yarn.lock  
  • main.js 部分は、コードを消して自分なりのコードを書いてみるとすごく勉強になるのではないかと思います。 私も低機能なのに、複雑なコードになってしまい、やり直ししています。
  • github よりインストールしている方は、pull すると差分を追加できます。
    • git reset しますので、独自追加されているかたは、追加部分が消えてしまいますので注意願います。
git reset --hard 56c0ed5  
git pull  
git reset --hard 0a3d5152  
  • commit step02.001
  • commit step02.002

  • 今日は、ここまでにしたいと思います。

  • 次は、データの追加部分のhtmlを考えています。 m(__)m

関連記事

コメントはありません。
atoris1192
atoris1192.qrunch.io
フォロー
フォロワー
ブログを開設

クランチで技術ブログを
始めてみませんか?

この先は、クランチへのアカウント登録、及びログインが必要なページになります。

Markdownの書き方
見出し # 見出し(h1)
## 見出し(h2) , ### 見出し(h3) ...
リスト - 箇条書き
   - タブでインデント
番号付きリスト 1. テキスト
2. テキスト
改行 行末に半角スペース2つ
リンクの挿入 [タイトル](https://xxx.com)
引用 > テキスト
コード挿入 ```cpp:title
code
```
画像の挿入 ![代替テキスト](URL "タイトル")
太字 **テキスト**
斜体 *テキスト*
打消し線 ~~テキスト~~
水平線 ***
技術ブログを開設
ログイン