VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（中）

caikeal 发布于2019-08-02 16:16 / 3401人阅读

摘要：前言前文打造个人博客含前台展示及后台管理系统上地址在上篇文章中我们完成了后端的配置，实现了对数据的增删查改现在只需要前端页面发送对应的请求给后端即可引入在开始搭建组件前，我们先要确定前端异步请求的方式这里我用的是先在中将其引入这样我们就可以

前言

前文：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...

云数据库MySQL 云数据库MongoDB wordpress个人博客系统 node博客前台调用后台 asp后台加前台

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54994.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......

Atom 2019-08-26 13:43 评论0 收藏0