Vue實現個人博客

• 一、首頁
• • • • • 效果展示
        • 標題的彩虹色展示
        • 博客標題字母大寫以及博客預覽內容限制并在結尾加上“．．．”
        • 分頁的實現
• 二、寫博客頁面
• • • • • 效果展示
        • markdown編輯器
• 三、搜索功能

一、首頁

效果展示

在連數據庫前可用JSONplaceholder的數據接口用假數據來測試，先將整體樣式確定。確定好頁面后再連接數據庫的真數據。這里使用是數據庫是firebase（使用時要注意打開數據庫可寫和可讀）

標題的彩虹色展示

在main.js中全局自定義指令

Vue.directive('tit',{bind(el){el.style.color='#'+Math.random().toString(16).slice(2,8);} })

定義完后在需要使用的標簽加上 v-tit 即可

博客標題字母大寫以及博客預覽內容限制并在結尾加上“．．．”

在main.js中全局定義過濾器

//標題大寫 Vue.filter('toUppercase',function(value){return value.toUpperCase() }) //內容限制 Vue.filter('snippet',function(value){return value.slice(0,100)+"..." })

分頁的實現

頁面創建時，在生命周期函數created（）中獲取數據庫數據并且分頁。這里的分頁樣式是引用的elementUI中的分頁組件。分頁在主要思路如下：
(參考自https://blog.csdn.net/illusion_melody/article/details/82714793)

//變量data() {return {// 假設這是后臺傳來的數據來源data: [],// 所有頁面的數據totalPage: [],// 每頁顯示數量pageSize: 5,// 共幾頁pageNum: 1,// 當前顯示的數據dataShow: "",// 默認當前顯示第一頁currentPage: 0};},//計算頁數// 這里簡單模擬一下后臺傳過來的數據for (let i = 0; i < 601; i++) {this.data.push({ name: "liu" ,look:"very handsome"});}// 根據后臺數據的條數和每頁顯示數量算出一共幾頁,得0時設為1 ;this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;//根據頁數存每一頁內容for (let i = 0; i < this.pageNum; i++) {// 每一頁都是一個數組 形如 [['第一頁的數據'],['第二頁的數據'],['第三頁數據']]// 根據每頁顯示數量 將后臺的數據分割到 每一頁,假設pageSize為5， 則第一頁是1-5條，即slice(0,5)，第二頁是6-10條，即slice(5,10)...this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))}// 獲取到數據后顯示第一頁內容this.dataShow = this.totalPage[this.currentPage];//翻頁// 上一頁和下一頁// 下一頁nextPage() {if (this.currentPage === this.pageNum - 1) return ;this.dataShow = this.totalPage[++this.currentPage];},// 上一頁prePage() {if (this.currentPage === 0) return ;this.dataShow = this.totalPage[--this.currentPage];}

二、寫博客頁面

效果展示

markdown編輯器

1、安裝

npm install mavon-editor --save

2、全局引入

import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use(mavonEditor)

3、使用

<!-- :ishljs="true" 代碼高亮 --> <mavon-editor v-model='blog.preview' :ishljs="true" @change='updateDoc'></mavon-editor> updateDoc(value, render) {// render 為 markdown 解析后的結果this.blog.content = render;}

４、添加博客時加上當時的日期，并且格式化
在main.js中全局定義函數獲取當時的時期并且格式化

Vue.prototype.getNowFormatDate=function(){var date = new Date();var seperator1 = "-";var year = date.getFullYear();var month = date.getMonth() + 1;var strDate = date.getDate();if (month >= 1 && month <= 9) {month = "0" + month;}if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}var currentdate = year + seperator1 + month + seperator1 + strDate;return currentdate; }

三、搜索功能

可根據博文的標題和發布日期搜索
首頁點擊搜索按鈕觸發

sousuo(){var fb=[];if(this.selectTime!=''){for(let i=0;i<this.blogs.length;i++){if(this.blogs[i].time==this.selectTime){fb.push(this.blogs[i])}else{continue}}}else{fb=this.blogs}this.filteredBlogs=fb.filter((blog)=>{ return blog.title.match(this.search)})this.$router.push({path:'/search',query:{filteredBlogs:this.filteredBlogs,search:this.search,blogs:this.blogs,selectTime:this.selectTime,}})},

搜索頁面綁定計算屬性：要展示的博客在filteredBlogs（）返回的數組中遍歷

computed:{filteredBlogs(){var fb=[];if(this.selectTime!=''){for(let i=0;i<this.blogs.length;i++){if(this.blogs[i].time==this.selectTime){fb.push(this.blogs[i])}else{continue}}}else{fb=this.blogs}return fb.filter((blog)=>{return blog.title.match(this.search)})}}

編輯頁面和詳細博客的頁面大致和以上相同

具體代碼：
【 gitee 】:https://gitee.com/chenyjoe/vue-blog
【github】:https://github.com/chenyjoe/vue-blog

總結

以上是生活随笔為你收集整理的vue实现个人博客的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。