VueCli+Node+mongodb打造我的博客（含前臺展現及後臺管理系統）（下）

前文

上篇：https://segmentfault.com/a/11...
中篇：https://segmentfault.com/a/11...

github地址：https://github.com/ssevenk/ss...

如今只剩下把東西展現出來了

頁面

這裏有四種頁面（實際上是四個組件）：
文章，雜談，收藏，具體的文章或雜談
前三個雖然佈局同樣，但功能有細微差異，同時考慮到之後可能要針對不一樣種類作不一樣的佈局方法
我仍是定義了三個組件
ShowBlogs、ShowEssays、ShowArticles
以及具體的那個
TheOne

能夠看到它們共用一個擡頭的logo和導航欄
因此我把這一塊部分寫進front組件裏
剩下的部分用路由決定展現哪個組件

使用嵌套路由

數據展現

這個很簡單，就在最開始請求後端獲取到數據後

created() {
    this.getData();
  },
methods: {
getData() {
  this.$axios.get("/data/blog").then(res => {
    this.blogs = res.data;
    this.show = this.blogs;
  });
}

用v-for將router-link循環出來
每個數據都是一個link，能夠跳轉到具體的內容頁面

<router-link class='ShowBlogs-blog'
    :to="{ name:'TheOne',params:{ kind:'blog',id:item._id }}"
    tag="li"
    v-for="item in show.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    :key="item._id"
  >
    <span>{{ item.date }}</span>
    {{ item.title }}
  </router-link>

分頁

在上面的代碼中你應該注意到了，看到了一個很熟悉的東西

show.slice((currentPage-1)*pageSize,currentPage*pageSize)

這是咱們在後臺管理系統中用過的分頁
這裏再也不贅述

搜索

不過搜索功能有點和後臺管理不同
這一次我定義了一個show數組
點擊搜索以後，調用函數來進行搜索，把搜索出來的結果存放在show中
因此咱們展現的一直都是show數組

因爲三個頁面都用到了搜索框
因此我把搜索框單獨作成了一個組件
並無引入到main.js中使其成爲全局組件
由於咱們但願它是做爲ShowBlogs、ShowEssays、ShowArticles這三個組件的子組件存在的，方便調用父組件提供的方法

import mySearch from "./mySearch";

每一個組件都引入一次
點擊搜索時，向父組件發射搜索框裏的內容，並調用父組件的方法

//mySearch.vue
 methods:{
      search() {
          this.$emit('search',this.content)
      }
  }

在父組件中

<mySearch @search="searchfor"></mySearch>

methods:{
searchfor(s) {
  this.show = (this.blogs.filter(item => {
    if (item.title.includes(s)) {
      return item;
    }
  }));
}}

針對每一個組件，搜索框的顏色不同
這裏用$route.path來判斷
寫在搜索框的組件裏

用path來決定使用哪一種樣式

<input type="text" v-model="content" :class="classipt" placeholder="請輸入關鍵詞搜索">
<button @click="search" :class="classbtn">

具體文章或雜談

獲取後端送來的數據（字符串）
調用simpleMDE的原型方法將其轉換爲html格式

this.contentMarkdown=SimpleMDE.prototype.markdown(this.theOne.content)

用v-html展現出來

<div id='markdownArticle' v-html="contentMarkdown"></div>

評論功能

創建輸入框，供讀者發佈評論
每篇文章或者雜談都有屬於本身的comments數組
只須要將這個新的評論存進去就能夠

pushComment() {
  if (this.comment.name && this.comment.content) {
    var comment = {
      name: this.comment.name,
      content: this.comment.content,
      date: Math.random()
        .toString(36)
        .substr(2)
    };
    this.theOne.comments.push(comment);
    this.$axios.post(`/data/${this.kind}/${this.$route.params.id}`, {
      id: this.$route.params.id,
      title: this.theOne.title,
      content: this.theOne.content,
      comments: this.theOne.comments
    });
  }
  this.comment.name = "";
  this.comment.content = "";
}

這裏在存入前，先定義了一個局部變量，把輸入框的值賦值給它
再把這個局部變量存進去
若是直接把輸入框的值存進去，那麼雙向綁定依舊存在
輸入框內容修改，已經存進去的評論也會跟着變

收藏夾

點擊跳轉外部連接

<li class='ShowBlogs-article'
    v-for="item in show.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    :key="item._id"
    @click="jumpTo(item.link)"
  >
  
  jumpTo(link) {
  // window.location.href=link //當前窗口打開
  window.open(link)}

總結

至此，個人我的博客項目算是完成了還有不少須要優化的地方，好比管理頁面的密碼認證，頁面佈局的合理性與美觀，移動端響應式設計，從此的上線部署等等不過也算完成了一開始預期的目標了，學過的東西都派上了用場繼續努力學習~