knaka Tech-Blog

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

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

SPA Vue.js node.js web mongoDB

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 コンポーネント

new
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/new.vue

index
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/Index.vue

show
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/show.vue

edit
https://github.com/kuc-arc-f/vue_4_todo4/blob/master/src/components/Todos/edit.vue

関連のページ

knaka0209.hatenablog.com


knaka0209.hatenablog.com

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

SPA Vue.js node.js mongoDB

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();
        });        
    });    

}

Vue コンポーネント

new
https://github.com/kuc-arc-f/vue_4_express_2/blob/master/src/components/Tasks/new.vue

index
https://github.com/kuc-arc-f/vue_4_express_2/blob/master/src/components/Tasks/Index.vue

show
https://github.com/kuc-arc-f/vue_4_express_2/blob/master/src/components/Tasks/show.vue

edit
https://github.com/kuc-arc-f/vue_4_express_2/blob/master/src/components/Tasks/edit.vue


関連のページ

knaka0209.hatenablog.com

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

SPA Vue.js node.js mongoDB

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

mongoDB の設定編 #web

web mongoDB

index:

概要:

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

環境

mongodb-4.0.10
windows 版です。

参考

http://kageura.hatenadiary.jp/entry/2018/01/09/Windows%E7%89%88MongoDB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%83%BBMongoShell%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6CRUD%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E6%89%93

インストール

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/

上記を、参考に 下記リンクを開きました
https://www.mongodb.com/download-center/community?jmp=docs

zip版で、
配置は、/mongodb-4.0.10
にした場合です。

・データ配置は、testフォルダを作成し
C:\mogoData\test　

mongod 起動

C:\mongodb-4.0.10\bin\mongod.exe --dbpath="C:\mogoData\test"

・mongo shell (mongo) で接続

C:\mongodb-4.0.10\bin\mongo.exe

追加　insertOne

Collection　を指定して、追加

db.createCollection("books")
db.books.insertOne({x: 1});
db.books.insertOne({x: 2});

検索

db.books.find()

#OR , NOT イコール
db.ArrayTest.find({ $or: [{loves : 'banana'},{loves : 'apple'}]})
db.ArrayTest.find({loves : {$ne : 'banana'}})

update

db.UpdateTest.insert({ name: "kazuya", age: 30})
db.UpdateTest.update({ name: "kazuya"}, {$set :{age : 31}})
db.UpdateTest.find()

delete

db.deleteTest.insert({name:"kazuya"})
db.deleteTest.insert({name:"hitomi"})
db.deleteTest.find()
db.deleteTest.deleteMany({name: "kazuya"})

Vue.js(Vue-CLI 3) + firebase で、Google認証の追加。SPA開発(18)

SPA Vue.js firebase web

index:

概要:

前のSPA (Vue.js/ Vuec CLI 3) 関連で、
認証機能を、firebase のGoogle認証を追加する例となります。

環境

vue.js
Vue-CLI 3
firebase

参考

https://firebase.google.com/docs/auth/web/google-signin?hl=ja

実装など

上記参考にしていますが、ポップアップ画面で認証する方法になります。

test_auth.vue
https://github.com/kuc-arc-f/vue_2_auth1/blob/master/src/components/Users/test_auth.vue


・GoogleAuthProvider の実行
this.provider = new firebase.auth.GoogleAuthProvider();

・ポップアップ起動、
　認証後、コールバックで。認証情報 を取得できました

firebase.auth().signInWithPopup(this.provider).then(function(result) {
	var token = result.credential.accessToken;
	console.log(token)
	var user = result.user;
	console.log(user.uid)
	console.log(user.email)
	console.log(user.displayName)
}).catch(function(error) {
	var errorCode = error.code;
	var errorMessage = error.message;
	console.log(errorCode)
	console.log(errorMessage)
});

参考の設定

github.com

その他

・外部サーバ設置する場合で、Google認証が起動きない場合が
　ありました。

・対応方法ですが。
firebaseで、
Authentication > ログイン方法 >承認済みドメイン
で「ドメインの追加」を開き、
対象ドメインの追加すると。認証ポップアップが起動できました。

Vue.js(Vue-CLI 3) + firebase で、markdown対応の簡易CMSを作る。SPA開発(17)

SPA Vue.js web

index:

概要:

前のSPA (Vue.js/ Vuec CLI 3) +firebase 関連で、
MD形式(markdown )に対応した、小規模CMS 的な事例となります。

環境

vue.js
Vue-CLI 3
firebase

参考のコード

github.com

実装など

・top画面
top.vue
https://github.com/kuc-arc-f/vue_2_cms2/blob/master/src/components/Blogs/top.vue

import firebase from 'firebase'
import {Mixin} from '../../mixin'
import NavUser from '../../components/Layouts/NavUser'
import Footer from '../../components/Layouts/Footer'


export default {
  mixins:[Mixin],
  components: { NavUser ,Footer },
  created () {
    this.database = firebase.firestore()
    this.getTasks()
  },
  data () {
    return {
      blogs: [],
      user_id : '',
    }
  },
  methods: {
    getTasks() {
        var items = []
        var self = this
        var dbRef = this.database.collection('blogs')
        dbRef = dbRef.orderBy("up_date", "desc")
        dbRef.get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                // console.log(doc.id, " => ", doc.data())
                var item = doc.data()
                var dt = item.up_date.toDate()
                var dt_str = dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate()
                console.log( dt_str )
                items.push({
                    id : doc.id,
                    title : item.title,
                    content : item.content,
                    up_date : dt_str
                })            
            })
            self.blogs = items
        })        
    },
  }
}

・詳細
show.vue
https://github.com/kuc-arc-f/vue_2_cms2/blob/master/src/components/Blogs/show.vue

import firebase from 'firebase'
import marked from  'marked'
import {Mixin} from '../../mixin'
import NavUser from '../../components/Layouts/NavUser'
import Footer from '../../components/Layouts/Footer'

export default {
    mixins:[Mixin],
    components: { NavUser, Footer },
    created() {
        this.database = firebase.firestore()
    },
    data: function( ) {
        var itemDat = {title : '', content : ''}
        return {
            item: itemDat,
            editFlg: false,
            updated: false,
            baseUrl : '',
        }
    },
    mounted: function() {
        this.getItem()
    },
    methods: {
        getItem: function() {
            var docRef = this.database.collection("blogs").doc( this.$route.params.id )
            var self = this
            docRef.get().then(function(doc) {
                var dat = doc.data()
                var dt = dat.up_date.toDate()
                var dt_str = dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate()
                console.log( dt_str )
                dat.date_str = dt_str
                dat.content = marked(dat.content)
                self.item =  dat
            }).catch(function(error) {
                console.log("Error getting document:", error);
            })            
        },
    }
}

画面

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

・詳細ー画像つき
f:id:knaka0209:20190525165353p:plain

・ top
f:id:knaka0209:20190525165404p:plain

管理画面

・編集
=> MD形式で、入力。

f:id:knaka0209:20190525165449p:plain

・一覧

f:id:knaka0209:20190525165512p:plain

関連のページ

knaka0209.hatenablog.com


・前の事例、php版のmarkdown 編集機能 SPA
kuc-arc-f.github.io

Update

公開専用版を追加しました。編集機能は無いです。
https://github.com/kuc-arc-f/vue_2_cms2_pub

デモ用のページ

表示デモ用のページを、netlify.com　に追加しました
https://knaka-cms2.netlify.com

==== 2019/06/02 Update ====
・fireStoreのセキュリティが低い場合で
　継続使用する場合、運営側から　セキュリティ警告通知が
　送信される場合がありましたので。
　一旦保留とし。非公開にします。
・修正後、公開したいと思います。

==========================