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

curlyCheng 發(fā)布于2019-08-26 13:43 / 697人閱讀

摘要：前言前文打造個(gè)人博客含前臺(tái)展示及后臺(tái)管理系統(tǒng)上地址在上篇文章中我們完成了后端的配置，實(shí)現(xiàn)了對(duì)數(shù)據(jù)的增刪查改現(xiàn)在只需要前端頁(yè)面發(fā)送對(duì)應(yīng)的請(qǐng)求給后端即可引入在開(kāi)始搭建組件前，我們先要確定前端異步請(qǐng)求的方式這里我用的是先在中將其引入這樣我們就可以

前言

前文：VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（上）
https://segmentfault.com/a/11...

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

在上篇文章中
我們完成了后端的配置，實(shí)現(xiàn)了對(duì)數(shù)據(jù)的增刪查改
現(xiàn)在只需要前端頁(yè)面發(fā)送對(duì)應(yīng)的請(qǐng)求給后端即可

引入axios

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

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

這樣我們就可以在自定義的組件中，直接用this.$axios來(lái)發(fā)起異步請(qǐng)求

后臺(tái)管理系統(tǒng)

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

管理組件（Manage.vue)

該組件的頁(yè)面顯示如圖

核心部分就是那個(gè)表格了
用來(lái)展示已經(jīng)存在的數(shù)據(jù)并對(duì)其進(jìn)行操作

左側(cè)導(dǎo)航

分成了三個(gè)類別，文章，雜談和收藏
當(dāng)我們點(diǎn)擊對(duì)應(yīng)的類別時(shí)，并沒(méi)有在切換組件，而是在更新數(shù)據(jù)
在Manage.vue中
我們定義一個(gè)名叫things的空數(shù)組，來(lái)保存當(dāng)前需要顯示的數(shù)據(jù)
以及一個(gè)kind值，來(lái)保存當(dāng)前需要顯示的數(shù)據(jù)種類
我們先令kind值為blog，默認(rèn)顯示 “文章” 數(shù)據(jù)

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

當(dāng)組件初始化時(shí)，調(diào)用生命周期函數(shù)created（）向后端發(fā)起對(duì)應(yīng)種類的請(qǐng)求
后端返回對(duì)應(yīng)的數(shù)據(jù)，存進(jìn)things里面

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

每次點(diǎn)擊左側(cè)的導(dǎo)航欄上的按鈕，就調(diào)用一次getData（），并傳入對(duì)應(yīng)的kind參數(shù)
由此來(lái)更新things和kind
更新要顯示的數(shù)據(jù)和種類
比如點(diǎn)擊雜談的話，就調(diào)用getData（essay）

數(shù)據(jù)表格

這里我用了Element-ui的組件庫(kù)來(lái)制作表格
基本上就是官方案例

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

:data="things"

搜索

右上角有一個(gè)搜索輸入框
輸入后可以即時(shí)顯示搜索的結(jié)果在數(shù)據(jù)表格里
一開(kāi)始我想新定義一個(gè)show數(shù)組，來(lái)存放搜索后的結(jié)果
然后給輸入框綁定鍵盤(pán)事件來(lái)調(diào)用搜索函數(shù)
但后來(lái)發(fā)現(xiàn)Element官網(wǎng)的做法異常簡(jiǎn)單
可以直接在el-table表格綁定的數(shù)據(jù)上做文章

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

其中search是雙向綁定在輸入框上的數(shù)據(jù)

分頁(yè)

數(shù)據(jù)太多了肯定需要分頁(yè)
還是用到了我們的Element-ui組件庫(kù)

PageSize設(shè)置為5，當(dāng)前默認(rèn)頁(yè)為1

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

當(dāng)點(diǎn)擊頁(yè)碼切換的時(shí)候，把頁(yè)碼更新

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

然后再一次對(duì)我們之前的el-table標(biāo)簽上的數(shù)據(jù)進(jìn)行改進(jìn)

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

這里的邏輯先后要理清
是先對(duì)數(shù)據(jù)進(jìn)行搜索的過(guò)濾再分頁(yè)

編輯組件（Edit.vue)

比起展示，更重要的還是對(duì)數(shù)據(jù)的操作
這里我把新建和編輯功能整合進(jìn)了同一個(gè)組件里
因?yàn)槎际抢胢arkdown編輯器來(lái)編寫(xiě)
布局一模一樣，只有初始化，按鈕以及請(qǐng)求的方式不一樣

關(guān)于這個(gè)markdown編輯器，我是利用的simpleMDE
并添加了本來(lái)沒(méi)有的本地上傳圖片功能
可以參見(jiàn)我的另一篇文章https://segmentfault.com/a/11...
這里不再重復(fù)說(shuō)明
其中在樣式上，為了使編輯器高度控制在頁(yè)面內(nèi)，使?jié)L動(dòng)條出現(xiàn)在編輯器內(nèi)而不是頁(yè)面

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

添加這樣的css樣式（本來(lái)默認(rèn)是800px）

新建還是編輯？

在Mangage組件中點(diǎn)擊了新建或者某篇文章的編輯按鈕
我們就進(jìn)入了這個(gè)Edit組件
因?yàn)檎显诹送粋€(gè)組件中
所以首先它得判斷現(xiàn)在是要新建還是編輯
以及是要處理哪種數(shù)據(jù)，文章還是雜談還是收藏？
建立一個(gè)bool值isNew和一個(gè)string值kind
然后在生命周期函數(shù)created（）中進(jìn)行判斷

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

根據(jù)Manage組件路由跳轉(zhuǎn)時(shí)傳入的參數(shù)來(lái)判斷
關(guān)于vue-router路由跳轉(zhuǎn)，如果對(duì)query和params的用法有所疑問(wèn)，可以參考我的這篇文章https://segmentfault.com/a/11...

按鈕

按鈕給一個(gè)函數(shù)讓其自行計(jì)算應(yīng)該顯示什么文字

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

如果是編輯

在mounted（）周期函數(shù)中，請(qǐng)求后端的數(shù)據(jù)，來(lái)填入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);
        });
    }

編輯完成后對(duì)后端的post請(qǐng)求

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
          })

如果是新建

需要給新文章一個(gè)創(chuàng)作日期

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

為了美觀，用padStart來(lái)保證個(gè)位數(shù)日期也能以兩位輸出
在post的時(shí)候，把日期也加上

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

刪除數(shù)據(jù)

點(diǎn)擊刪除按鈕的時(shí)候，獲取到對(duì)應(yīng)數(shù)據(jù)的id值并向后端傳遞
不過(guò)在這之前要先找到這個(gè)數(shù)據(jù)在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.

其實(shí)后來(lái)我又寫(xiě)了一個(gè)EditArticle組件出來(lái)
對(duì)應(yīng)”收藏“，因?yàn)樗恍枰獦?biāo)題和跳轉(zhuǎn)的鏈接，不需要編輯器
所以就多帶帶為它寫(xiě)了一個(gè)，原理類同，這里不再贅述

接下來(lái)

完成了后臺(tái)管理系統(tǒng)
我們就要開(kāi)始做展示頁(yè)面了
敬請(qǐng)期待后續(xù)文章

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