成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ninefive / 3392人閱讀

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

前言

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

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

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

引入axios

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

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

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

后臺管理系統(tǒng)

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

管理組件(Manage.vue)

該組件的頁面顯示如圖


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

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

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

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

當(dāng)組件初始化時,調(diào)用生命周期函數(shù)created()向后端發(fā)起對應(yīng)種類的請求
后端返回對應(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(),并傳入對應(yīng)的kind參數(shù)
由此來更新thingskind
更新要顯示的數(shù)據(jù)和種類
比如點(diǎn)擊雜談的話,就調(diào)用getData(essay)

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

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


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

:data="things"
搜索

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

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

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

分頁

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

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

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

當(dāng)點(diǎn)擊頁碼切換的時候,把頁碼更新

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

然后再一次對我們之前的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)))"

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

編輯組件(Edit.vue)

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


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

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

添加這樣的css樣式(本來默認(rèn)是800px)

新建還是編輯?

Mangage組件中點(diǎn)擊了新建或者某篇文章的編輯按鈕
我們就進(jìn)入了這個Edit組件
因?yàn)檎显诹送粋€組件中
所以首先它得判斷現(xiàn)在是要新建還是編輯
以及是要處理哪種數(shù)據(jù),文章還是雜談還是收藏?
建立一個boolisNew和一個stringkind
然后在生命周期函數(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ù)來判斷
關(guān)于vue-router路由跳轉(zhuǎn),如果對queryparams的用法有所疑問,可以參考我的這篇文章https://segmentfault.com/a/11...

按鈕

按鈕給一個函數(shù)讓其自行計算應(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ù)中,請求后端的數(shù)據(jù),來填入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
          })
如果是新建

需要給新文章一個創(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來保證個位數(shù)日期也能以兩位輸出
post的時候,把日期也加上

 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)擊刪除按鈕的時候,獲取到對應(yīng)數(shù)據(jù)的id值并向后端傳遞
不過在這之前要先找到這個數(shù)據(jù)在things中的位置并刪除
使用findIndexsplice

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í)后來我又寫了一個EditArticle組件出來
對應(yīng)”收藏“,因?yàn)樗恍枰獦?biāo)題和跳轉(zhuǎn)的鏈接,不需要編輯器
所以就多帶帶為它寫了一個,原理類同,這里不再贅述

接下來

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

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

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/19541.html

相關(guān)文章

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

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

    不知名網(wǎng)友 評論0 收藏0
  • VueCli+Node+mongodb打造個人博客前臺展示后臺管理系統(tǒng))(上)

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

    tinyq 評論0 收藏0
  • VueCli+Node+mongodb打造個人博客前臺展示后臺管理系統(tǒng))(上)

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

    kidsamong 評論0 收藏0
  • VueCli+Node+mongodb打造個人博客前臺展示后臺管理系統(tǒng))(上)

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

    xcold 評論0 收藏0
  • VueCli+Node+mongodb打造個人博客前臺展示后臺管理系統(tǒng))(下)

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

    Atom 評論0 收藏0
  • VueCli+Node+mongodb打造個人博客前臺展示后臺管理系統(tǒng))(下)

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

    liangdas 評論0 收藏0

發(fā)表評論

0條評論

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