knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Vue.js + express + mongoDB todoアプリの作成、ejsテンプレート版 #Vue.js #javascript #node.js #mongoDB

index:

概要:

前回のvue.js + mongoDB + express 関連になりますが、
ejs テンプレートを使用した、markdown対応の
todoアプリの実装となります

参考のコード

github.com

画面

・show
f:id:knaka0209:20190707160022p:plain


・一覧
f:id:knaka0209:20190707160033p:plain

mongoDB を、raspberry piにインストール、外部から接続する。

index:

概要:

noSQL型の、mongodb raspberry pi インストール等の内容になります。

インストール

・少し古めの,version が追加されます

sudo apt-get install mongodb

・veersion

mongod --version

db version v2.4.14


・起動

sudo service mongodb start

・停止

sudo service mongodb stop

mongo shell

mongo

・ステータス

db.stats()

{
        "db" : "test",
        "collections" : 0,
        "objects" : 0,
        "avgObjSize" : 0,
        "dataSize" : 0,
        "storageSize" : 0,
        "numExtents" : 0,
        "indexes" : 0,
        "indexSize" : 0,
        "fileSize" : 0,
        "nsSizeMB" : 0,
        "dataFileVersion" : {

        },
        "ok" : 1
}

・終了

quit();

外部からの接続

・初期で、外部から接続不可能でしたので
 修正しました。
・参考
https://qiita.com/Chanmoro/items/cbf4e451d0a89f4d7c1a

・ /etc/mongodb.conf の修正

bind_ip = 127.0.0.1
を、
bind_ip =0.0.0.0
に変更し保存、上記の start, stop
で、反映されました。

Vue.js + express + mongoDB , ejs テンプレートの使用 #Vue.js #javascript #node.js #mongoDB

index:

概要:

前回のmongoDB 関連になりますが、
vue.js + mongoDB + expressで、ejs テンプレートを使用した例となります。

・今回は、Vue-CLI 3を使用せずに、
 express + mongoDB のみのサービスで開発し、
 比較的シンプルな構成になってます。

環境

mongodb-4.0.10
express 4.16.1
node.js
npm
ejs

参考の設定

github.com


インストールなど

express app2

cd app2

npm install

npm start

・ejsの追加

npm install ejs --save

・express-ejs-layoutsで、分割テンプレートに対応
 (共通ヘッダ等)

npm install express-ejs-layouts --save

・ app.js
express-ejs-layoutsの設定
https://github.com/kuc-arc-f/vue_express_app2/blob/master/app.js

var app = express();
const expressLayouts = require('express-ejs-layouts');
app.use(expressLayouts);

参考ページ

knaka0209.hatenablog.com

Vue.js(Vue-CLI 3) + express + mongoDB markdown対応のtodoアプリ作成 SPA開発(21)

index:

概要:

SPA (Vue.js/ Vuec CLI 3) 関連で、
express(node.js) , mogoDBの組合せで、
markdown対応のtodoアプリ実装 となります。

環境

vue.js
Vue-CLI 3
mongodb-4.0.10
express 4.16.1
node.js
npm

参考のコード

github.com

画面

・詳細
f:id:knaka0209:20190623162433p:plain

・一覧
f:id:knaka0209:20190623162448p:plain

実装など

API
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/srv/index.js

    /* todos */
    app.get('/api_todos_index', function(req, res) {
        var collection = db.get('todos');
        var items = [];
        collection.find({},{},function(e,docs){
            docs.forEach( function (item) {
                //toTimeString
                items.push(item);
            });
            var param = {"docs": items };
            res.json(param);
        });
    });
    //
    app.post('/api_todos_new', (req, res) => {
        console.log(req.body.title )
        var obj = req.body;
        obj.up_date = new Date();
        console.log( obj )
        var collection = db.get('todos');
        collection.insert(obj , function(err, result ) {
            if (err) throw err;
            res.json(req.body);
            db.close();
        });        
    });    
    app.get('/api_todos_show/:id', function(req, res) {
        console.log(req.params.id  );
        var collection = db.get('todos');
        collection.find({"_id": new ObjectID(req.params.id)},{},function(e,docs){
            //console.log("#doc");
            var param = {"docs": docs };
            res.json(param);
        });
    });
    //
    //update
    app.post('/api_todos_update', (req, res) => {
        console.log(req.body )
//        var obj = req.body;
        var obj = { "title": req.body.title ,
                    "content": req.body.content,
                    "complete": req.body.complete,
                    "up_date" : new Date()
                    };

        var collection = db.get('todos');
        collection.findOneAndUpdate( { _id: new ObjectID( req.body.id ) }, obj, {}, function(err, r){
            if (err) throw err;
            res.json(req.body);
            db.close();
        });        
    });
    //
    //delete
    app.get('/api_todos_delete/:id', function(req, res) {
        console.log(req.params.id  );
        var collection = db.get('todos');
        collection.findOneAndDelete( { _id: new ObjectID( req.params.id ) }, {}, function(err, r){
            //console.log("#doc");
//            var param = {"docs": docs };
            res.json(r);
        });
    });                 

Vue.js(Vue-CLI 3) + express + mongoDBフォーム登録など SPA開発(20)

index:

概要:

SPA (Vue.js/ Vuec CLI 3) 関連で、
express(node.js) , mogoDBの組合せで、
フォーム登等の内容です

環境

vue.js
Vue-CLI 3
mongodb-4.0.10
express 4.16.1
node.js
npm

参考

Node.js+Express+MongoDBでREST APIをつくる
https://qiita.com/itagakishintaro/items/a1519998a91061cbfb1e

参考のコード

github.com

実装など

API
https://github.com/kuc-arc-f/vue_4_express_2/blob/master/srv/index.js

import express from 'express';
// import socketIO from "socket.io";

var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/app1db');
var ObjectID = require('mongodb').ObjectID;

//
export default (app, http) => {
    app.use(express.json());
    //
    app.get('/foo', (req, res) => {
        res.json({msg: 'foo-1234BB'});
    });
    //
    app.post('/bar', (req, res) => {
        console.log(req.body.title )
        res.json(req.body);
    });
    //
//    app.get('/api_test1', function(req, res) {
    app.get('/api_books_index', function(req, res) {
        var collection = db.get('books');
        collection.find({},{},function(e,docs){
            //console.log("#doc");
            var param = {"docs": docs };
            res.json(param);
        });
    });
    //
    app.get('/api_books_show/:id', function(req, res) {
        console.log(req.params.id  );
        var collection = db.get('books');
        collection.find({"_id": new ObjectID(req.params.id)},{},function(e,docs){
            //console.log("#doc");
            var param = {"docs": docs };
            res.json(param);
        });
    });    
    //delete
    app.get('/api_books_delete/:id', function(req, res) {
        console.log(req.params.id  );
        var collection = db.get('books');
        collection.findOneAndDelete( { _id: new ObjectID( req.params.id ) }, {}, function(err, r){
            //console.log("#doc");
//            var param = {"docs": docs };
            res.json(r);
        });
    });    

    //update
    app.post('/api_books_update', (req, res) => {
        console.log(req.body )
//        var obj = req.body;
        var obj = { "title": req.body.title ,
                    "content": req.body.content
                    };
        var collection = db.get('books');
        collection.findOneAndUpdate( { _id: new ObjectID( req.body.id ) }, obj, {}, function(err, r){
            if (err) throw err;
            res.json(req.body);
            db.close();
        });        
    });    
    
    //
    //     app.post('/api_post1', (req, res) => {
    app.post('/api_books_new', (req, res) => {
        console.log(req.body.title )
        var obj = req.body;
        var collection = db.get('books');
        collection.insert(obj , function(err, result ) {
            if (err) throw err;
            res.json(req.body);
            db.close();
        });        
    });    

}

関連のページ

knaka0209.hatenablog.com

Vue.js(Vue-CLI 3) + express + mogoDB 設置編 SPA開発(19) #Vue.js #node,js #mongoDB #javascript #web #SPA

index:

概要:

SPA (Vue.js/ Vuec CLI 3) 関連で、
express(node.js) , mogoDBの組合せになります。
vue-cli-plugin-express プラグインで、express追加しています。

環境

vue.js
Vue-CLI 3
mongodb-4.0.10
express 4.16.1
node.js
npm

設定方法

Vue CLI3に、express追加

vue add express

・Should serve vue app
=> Y にしました。

・ npm run express で、express 起動

実装など

API
srv/index.js

    app.get('/api_test1', function(req, res) {
        var collection = db.get('books');
        collection.find({},{},function(e,docs){
            //console.log("#doc");
            var param = {"docs": docs };
            res.json(param);
        });
    });    
    //
    app.post('/api_post1', (req, res) => {
        console.log(req.body.title )
        var obj = req.body;
        var collection = db.get('books');
        collection.insert(obj , function(err, result ) {
            if (err) throw err;
            res.json(req.body);
            db.close();
        });        
    });   

Vueコンポーネント

・send_post()で、レコード追加しています。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
        <div class="form-group">
        <label for="TopicTitle">タイトル</label>
        <input type="text" class="form-control" id="title" v-model="title">
    </div>
    <div class="form-group">
        <label for="TopicContent">content</label>
        <textarea class="form-control" id="content" rows="3" v-model="content"></textarea>
    </div>
    <button v-on:click="send_post">投稿</button>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
    data () {
        return {
            message : 'msg-123',
            msg : "",
            title : "",
            content : "",
        }
    },
    created () {
        this.get_foo()
    },
    methods: {
        get_foo () {
            axios.get("/api_test1")
            .then(res =>  {
                var items = res.data.docs
                console.log(items)
                items.forEach( function (item) {
                    console.log(item)
                });
//                this.msg = res.data.msg
            })
        },
        send_post(){
            var task = {
                'title': this.title,
                'content': this.content
            };
            axios.post('/api_post1' , task ).then(res => {
                console.log(res.data );
//                console.log(res.data.content);
            });
        },
    }
}
</script>

参考の設定

github.com

関連のページ

knaka0209.hatenablog.com

node.js express +mongoDB でwebサービス開発 #web #node.js

index:

概要:

前回のmongoDB 関連になりますが、
mongoDB + node.js のexpressで、webサービス開発の内容とります。

環境

mongodb-4.0.10
express 4.16.1
node.js
npm

インストール

npm install -g express
npm install -g express-generator

express app1

cd app1

npm install

npm start


・コード修正が反映されない場合、
nodemon を追加しました。

npm install nodemon -g


・ http://localhost:3000/
で、開きました。

データ表示

・ routes/index.js

router.get('/userlist', function(req, res) {
    var db = req.db;
    var collection = db.get('usercollection');
    collection.find({},{},function(e,docs){
//console.log("#doc");
//console.log(docs[0] );
        res.render('userlist', {
            "userlist" : docs
        });
    });
});

・データの登録 しておきます

use app1db
db.usercollection.insert({"user":"user1","e-mail":"user1@gmail.com"})
db.usercollection.insert({"user":"user2","e-mail":"a2@gmail.com"})
db.usercollection.insert({"user":"user3","e-mail":"a3@gmail.com"})
db.usercollection.find()

http://localhost:3000/userlist
 リストの表示URL

関連のページ

knaka0209.hatenablog.com

参考の設定

github.com