Vue.js(Vue-CLI 3) + firebase で、markdown対応の簡易CMSを作る。SPA開発(17)
index:
環境
vue.js
Vue-CLI 3
firebase
参考のコード
実装など
・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); }) }, } }
画面
・詳細
・詳細ー画像つき
・ top
管理画面
・編集
=> MD形式で、入力。
・一覧
Update
公開専用版を追加しました。編集機能は無いです。
https://github.com/kuc-arc-f/vue_2_cms2_pub
デモ用のページ
表示デモ用のページを、netlify.com に追加しました
https://knaka-cms2.netlify.com
==== 2019/06/02 Update ====
・fireStoreのセキュリティが低い場合で
継続使用する場合、運営側から セキュリティ警告通知が
送信される場合がありましたので。
一旦保留とし。非公開にします。
・修正後、公開したいと思います。
==========================