VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（中）

ninefive 發布于2019-06-26 18:03 / 3379人閱讀

摘要：前言前文打造個人博客含前臺展示及后臺管理系統上地址在上篇文章中我們完成了后端的配置，實現了對數據的增刪查改現在只需要前端頁面發送對應的請求給后端即可引入在開始搭建組件前，我們先要確定前端異步請求的方式這里我用的是先在中將其引入這樣我們就可以

前言

前文：VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）
https://segmentfault.com/a/11...

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

在上篇文章中
我們完成了后端的配置，實現了對數據的增刪查改
現在只需要前端頁面發送對應的請求給后端即可

引入axios

在開始搭建組件前，我們先要確定前端異步請求的方式
這里我用的是axios
先在main.js中將其引入

import axios from "axios"
Vue.prototype.$axios = axios;

這樣我們就可以在自定義的組件中，直接用this.$axios來發起異步請求

后臺管理系統

這里我把它分成了兩個組件
管理組件（Manage.vue)以及編輯組件(Edit.vue)

管理組件（Manage.vue)

該組件的頁面顯示如圖

核心部分就是那個表格了
用來展示已經存在的數據并對其進行操作

左側導航

分成了三個類別，文章，雜談和收藏
當我們點擊對應的類別時，并沒有在切換組件，而是在更新數據
在Manage.vue中
我們定義一個名叫things的空數組，來保存當前需要顯示的數據
以及一個kind值，來保存當前需要顯示的數據種類
我們先令kind值為blog，默認顯示 “文章” 數據

data() {
return {
  kind: "blog",
  things: [],
  }

當組件初始化時，調用生命周期函數created（）向后端發起對應種類的請求
后端返回對應的數據，存進things里面

    created() {
        this.getData("blog"); //第一次默認先獲取文章的數據
      },
    methods: {
      getData(kind) {
          this.kind = kind;
          this.$axios.get(`/data/${kind}`)
            .then(res => {
              this.things = res.data;
            })
     }

每次點擊左側的導航欄上的按鈕，就調用一次getData（），并傳入對應的kind參數
由此來更新things和kind
更新要顯示的數據和種類
比如點擊雜談的話，就調用getData（essay）

數據表格

這里我用了Element-ui的組件庫來制作表格
基本上就是官方案例

可以看到跟我的效果基本上一樣
所以這部分可以直接參考官網教程https://element.eleme.cn/#/zh...
在數據綁定的時候，選擇我們之前建好的things數組

:data="things"

搜索

右上角有一個搜索輸入框
輸入后可以即時顯示搜索的結果在數據表格里
一開始我想新定義一個show數組，來存放搜索后的結果
然后給輸入框綁定鍵盤事件來調用搜索函數
但后來發現Element官網的做法異常簡單
可以直接在el-table表格綁定的數據上做文章

:data="((things.filter(data=>!search||data.title.toLowerCase().includes(search.toLowerCase())“

其中search是雙向綁定在輸入框上的數據

分頁

數據太多了肯定需要分頁
還是用到了我們的Element-ui組件庫

PageSize設置為5，當前默認頁為1

data() {
return {
  kind: "blog",
  things: [],
  currentPage: 1,
  pageSize: 5,
  search: ""
};}

當點擊頁碼切換的時候，把頁碼更新

handleCurrentChange(currentPage) {
  this.currentPage = currentPage;
}

然后再一次對我們之前的el-table標簽上的數據進行改進

:data="((things.filter(data=>!search||data.title.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)))"

這里的邏輯先后要理清
是先對數據進行搜索的過濾再分頁

編輯組件（Edit.vue)

比起展示，更重要的還是對數據的操作
這里我把新建和編輯功能整合進了同一個組件里
因為都是利用markdown編輯器來編寫
布局一模一樣，只有初始化，按鈕以及請求的方式不一樣

關于這個markdown編輯器，我是利用的simpleMDE
并添加了本來沒有的本地上傳圖片功能
可以參見我的另一篇文章https://segmentfault.com/a/11...
這里不再重復說明
其中在樣式上，為了使編輯器高度控制在頁面內，使滾動條出現在編輯器內而不是頁面

.CodeMirror-scroll {
  min-height:350px;
  height: 350px;
}

添加這樣的css樣式（本來默認是800px）

新建還是編輯？

在Mangage組件中點擊了新建或者某篇文章的編輯按鈕
我們就進入了這個Edit組件
因為整合在了同一個組件中
所以首先它得判斷現在是要新建還是編輯
以及是要處理哪種數據，文章還是雜談還是收藏？
建立一個bool值isNew和一個string值kind
然后在生命周期函數created（）中進行判斷

  created() {
    this.kind = this.$route.params.kind;
    if (this.$route.params.id != "new") {
      this.isNew = false;
    }
  },

根據Manage組件路由跳轉時傳入的參數來判斷
關于vue-router路由跳轉，如果對query和params的用法有所疑問，可以參考我的這篇文章https://segmentfault.com/a/11...

按鈕

按鈕給一個函數讓其自行計算應該顯示什么文字

computed: {
btn: function() {
  switch (this.kind) {
    case "blog":
      return (this.isNew ? "發表" : "更新") + "文章";
    case "essay":
      return (this.isNew ? "發表" : "更新") + "雜談";
    case "article":
      return (this.isNew ? "發表" : "更新") + "收藏";
    default:
      return "";
  }
}

如果是編輯

在mounted（）周期函數中，請求后端的數據，來填入markdown編輯器的輸入框

if (!this.isNew) {
      this.$axios
        .get(`/data/${this.$route.params.kind}/${this.$route.params.id}`)
        .then(req => {
          this.title = req.data.title;
          this.content = req.data.content;
          this.comments=req.data.comments;
          simplemde.value(this.content);
        });
    }

編輯完成后對后端的post請求

if (!this.isNew) {
        this.$axios
          .post(`/data/${this.$route.params.kind}/${this.$route.params.id}`, {
            id: this.$route.params.id,
            title: this.title,
            content: this.content
          })

如果是新建

需要給新文章一個創作日期

computed：{
    date: function() {
          var time = new Date(this.time);
          return `${(time.getMonth() + 1).toString().padStart(2, "0")}-${time
            .getDate()
            .toString()
            .padStart(2, "0")}`;
        }}

為了美觀，用padStart來保證個位數日期也能以兩位輸出
在post的時候，把日期也加上

 this.$axios
          .post(`/data/${this.$route.params.kind}/new`, {
            title: this.title,
            content: this.content,
            comments:this.comments,
            date: this.date
          })

刪除數據

點擊刪除按鈕的時候，獲取到對應數據的id值并向后端傳遞
不過在這之前要先找到這個數據在things中的位置并刪除
使用findIndex和splice

del(delid) {
  var delIndex = this.things.findIndex(item => {
    return item._id == delid;
  });
  this.things.splice(delIndex, 1);
  this.$axios.delete(`/data/${this.kind}/${delid}`);
}

PS.

其實后來我又寫了一個EditArticle組件出來
對應”收藏“，因為它只需要標題和跳轉的鏈接，不需要編輯器
所以就多帶帶為它寫了一個，原理類同，這里不再贅述

接下來

完成了后臺管理系統
我們就要開始做展示頁面了
敬請期待后續文章

已更新第三篇：https://segmentfault.com/a/11...

云數據庫MongoDB 云數據庫MySQL wordpress個人博客系統 node博客前臺調用后臺 asp后臺加前臺

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19541.html

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

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

不知名網友 2019-08-02 16:16 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）

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

tinyq 2019-08-26 13:43 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）

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

kidsamong 2019-06-26 18:01 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（上）

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

xcold 2019-08-30 10:48 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（下）

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

YacaToy 2019-08-02 16:16 評論0 收藏0
VueCli+Node+mongodb打造個人博客（含前臺展示及后臺管理系統）（下）

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

EdwardUp 2019-08-30 10:50 評論0 收藏0