knaka Tech-Blog

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

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

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のセキュリティが低い場合で
 継続使用する場合、運営側から セキュリティ警告通知が
 送信される場合がありましたので。
 一旦保留とし。非公開にします。
・修正後、公開したいと思います。

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