国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統(tǒng)）（下）

Atom / 369人閱讀

摘要：前文上篇中篇地址現(xiàn)在只剩下把東西展示出來了頁面這里有四種頁面其實是四個組件文章，雜談，收藏，具體的文章或雜談前三個雖然布局一樣，但功能有細微差別，同時考慮到以后可能要針對不同種類做不同的布局方法我還是定義了三個組件以及具體的那個可以看到它們

前文

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

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

現(xiàn)在只剩下把東西展示出來了

頁面

這里有四種頁面（其實是四個組件）：
文章，雜談，收藏，具體的文章或雜談
前三個雖然布局一樣，但功能有細微差別，同時考慮到以后可能要針對不同種類做不同的布局方法
我還是定義了三個組件
ShowBlogs、ShowEssays、ShowArticles
以及具體的那個
TheOne

可以看到它們共用一個抬頭的logo和導航欄
所以我把這一塊部分寫進front組件里
剩下的部分用路由決定展示哪一個組件


使用嵌套路由

數(shù)據(jù)展示

這個很簡單，就在最開始請求后端獲取到數(shù)據(jù)后

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

用v-for將router-link循環(huán)出來
每一個數(shù)據(jù)都是一個link，可以跳轉(zhuǎn)到具體的內(nèi)容頁面


    {{ item.date }}
    {{ item.title }}
分頁

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

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

這是我們在后臺管理系統(tǒng)中用過的分頁
這里不再贅述

搜索

不過搜索功能有點和后臺管理不一樣
這一次我定義了一個show數(shù)組
點擊搜索之后，調(diào)用函數(shù)來進行搜索，把搜索出來的結(jié)果存放在show中
所以我們展示的一直都是show數(shù)組

由于三個頁面都用到了搜索框
所以我把搜索框多帶帶做成了一個組件
并沒有引入到main.js中使其成為全局組件
因為我們希望它是作為ShowBlogs、ShowEssays、ShowArticles這三個組件的子組件存在的，方便調(diào)用父組件提供的方法

import mySearch from "./mySearch";

每個組件都引入一次
點擊搜索時，向父組件發(fā)射搜索框里的內(nèi)容，并調(diào)用父組件的方法

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

在父組件中



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

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


用path來決定使用哪種樣式
具體文章或雜談

獲取后端送來的數(shù)據(jù)（字符串）
調(diào)用simpleMDE的原型方法將其轉(zhuǎn)換為html格式

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

用v-html展示出來
評論功能

建立輸入框，供讀者發(fā)布評論
每篇文章或者雜談都有屬于自己的comments數(shù)組
只需要將這個新的評論存進去就可以

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 = "";
}

這里在存入前，先定義了一個局部變量，把輸入框的值賦值給它
再把這個局部變量存進去
如果直接把輸入框的值存進去，那么雙向綁定依舊存在
輸入框內(nèi)容修改，已經(jīng)存進去的評論也會跟著變

收藏夾

點擊跳轉(zhuǎn)外部鏈接

  
  • 
  
  jumpTo(link) {
  // window.location.href=link //當前窗口打開
  window.open(link)}
    • 總結(jié)

    至此，我的個人博客項目算是完成了
    還有很多需要優(yōu)化的地方，比如管理頁面的密碼認證，頁面布局的合理性與美觀，移動端響應式設(shè)計，今后的上線部署等等
    不過也算完成了一開始預期的目標了，學過的東西都派上了用場
    繼續(xù)努力學習~

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109377.html

    相關(guān)文章

    • VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統(tǒng)）（下）

      摘要：前文上篇中篇地址現(xiàn)在只剩下把東西展示出來了頁面這里有四種頁面其實是四個組件文章，雜談，收藏，具體的文章或雜談前三個雖然布局一樣，但功能有細微差別，同時考慮到以后可能要針對不同種類做不同的布局方法我還是定義了三個組件以及具體的那個可以看到它們 前文 上篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11......

      YacaToy 評論0 收藏0

    • VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統(tǒng)）（下）

      摘要：前文上篇中篇地址現(xiàn)在只剩下把東西展示出來了頁面這里有四種頁面其實是四個組件文章，雜談，收藏，具體的文章或雜談前三個雖然布局一樣，但功能有細微差別，同時考慮到以后可能要針對不同種類做不同的布局方法我還是定義了三個組件以及具體的那個可以看到它們 前文 上篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11......

      EdwardUp 評論0 收藏0

    • VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統(tǒng)）（下）

      摘要：前文上篇中篇地址現(xiàn)在只剩下把東西展示出來了頁面這里有四種頁面其實是四個組件文章，雜談，收藏，具體的文章或雜談前三個雖然布局一樣，但功能有細微差別，同時考慮到以后可能要針對不同種類做不同的布局方法我還是定義了三個組件以及具體的那個可以看到它們 前文 上篇：https://segmentfault.com/a/11...中篇：https://segmentfault.com/a/11......

      liangdas 評論0 收藏0

    • VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統(tǒng)）（上）

      摘要：前言學習前端也有一段時間了做個個人博客網(wǎng)站吧正好總結(jié)練習一下這段時間的所學文章很長，會拆成三篇來講項目地址效果后臺管理系統(tǒng)前端頁面架構(gòu)可以看到，在整個項目中，沒有頁面的跳轉(zhuǎn)只有前后端的數(shù)據(jù)交換，所有的頁面更新都是組件更新和數(shù)據(jù)更新后端只對數(shù) 前言 學習前端也有一段時間了做個個人博客網(wǎng)站吧正好總結(jié)練習一下這段時間的所學文章很長，會拆成三篇來講 項目github地址：https://git...

      不知名網(wǎng)友 評論0 收藏0

    • VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統(tǒng)）（上）

      摘要：前言學習前端也有一段時間了做個個人博客網(wǎng)站吧正好總結(jié)練習一下這段時間的所學文章很長，會拆成三篇來講項目地址效果后臺管理系統(tǒng)前端頁面架構(gòu)可以看到，在整個項目中，沒有頁面的跳轉(zhuǎn)只有前后端的數(shù)據(jù)交換，所有的頁面更新都是組件更新和數(shù)據(jù)更新后端只對數(shù) 前言 學習前端也有一段時間了做個個人博客網(wǎng)站吧正好總結(jié)練習一下這段時間的所學文章很長，會拆成三篇來講 項目github地址：https://git...

      tinyq 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <