Vue+DRF搭建博客之前端篇（三）

一、任务

完成博客的预览页、编辑页两个页面的基本功能

二、路由分配

页面	URL
博客预览页	blog/articles/
博客编辑页	blog/article_edit/

暂时先这样分配，将来需要加入参数再做细分

在router/index.js中进行配置（嵌套路由的使用）：

const routes = [
  ...
  {
    path: '/blog',
    component: Blog,
    children: [
      {path: '', redirect: '/blog/articles'},
      {path: 'articles', component: BlogArticles},
      {path: 'article_edit', component: BlogEditorPage}
    ]
  }
]

代码中的BlogArticles，和BlogEditorPage在后面会介绍。

三、开发

先创建这两个子页面，
BlogArticles的基本部分：

<template>
  <h2>博客预览</h2>
</template>

BlogArticleDetail的基本部分：

<template>
  <h2>博客编辑</h2>
</template>

然后按照上面的路由配置代码在@/router/index.js中引入两个组件，并配置子路由。
然后再在Blog组件中加入<router-view/>即可

实现效果：

（这里是觉得详情页需要一些文章进行支撑，故先改为做博客编辑页了）

这样就实现了修改URL使页面进行部分的跳转的功能。

1.为切换子页面添加侧边栏按钮

实现这个需求可以直接使用ElementUI中的NavMenu组件

创建侧边栏组件（SideBar）

主要代码（暂时先写死，后面再优化）

<template>
  <!--
      @open="handleOpen"
      @close="handleClose"
    -->
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo">
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <template #title>博客浏览</template>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-document"></i>
      <template #title>写博客</template>
    </el-menu-item>
  </el-menu>
</template>

将组件放置到Blog页面中：

<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <side-bar></side-bar> <---组件
    </el-col>
    <el-col :span="20">
      <h1>博客页</h1>
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

效果：

2.编写每条博客的预览卡片

如在csdn中，我们可以看到一个博主每条博客以上面卡片的形式展示出来，故我们将每篇文章抽象成一个卡片组件ArticleCard，然后到时只需使用v-for遍历渲染出来即可。

组件的编写：
这里我们可以使用ElementUI的卡片组件进行快速搭建

案例：

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>一篇博客</span>
      </div>
    </template>
    <div v-for="o in 4" :key="o" class="text item">
      {{'博客内容 ' + o }}
    </div>
  </el-card>
</template>

然后在BlogArticles组件中进行引入和挂载：

效果：

为了卡片中的内容更加灵活，这里为卡片添加两个具名插槽：article-title和article-content，可以方便父组件（BlogArticles）自定义卡片上的文章标题和文章内容。

<!--ArticleCard.vue-->
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <slot name="article-title"> <!--插槽一，插入文章标题部分-->
          博客标题	<!--默认值-->
        </slot>
      </div>
    </template>
    <slot name="article-content"> <!--插槽二，插入文章内容部分-->
      <div v-for="o in 4" :key="o" class="text item"> <!--默认值-->
        {{'博客内容 ' + o }}
      </div>
    </slot>
  </el-card>
</template>

外部（BlogArticles）调用子组件：

<template>
  <h2>博客预览</h2>
  <article-card>
    <template v-slot:article-title> <!--插入文章标题部分-->
      <el-link><h3>第一篇博客</h3></el-link>
    </template>
    <template v-slot:article-content>  <!--插入文章内容部分-->
      第一篇博客的内容
    </template>
  </article-card>
</template>

效果：

这样我们就能很方便地使用ArticleCard组件来展示每篇文章的部分内容了。

最后我们可以编写一些“假数据”来测试卡片的效果：
数据：

data() {
  return {
    articles: [
      {
        title: "第一篇博客",
        content: "第一篇博客的内容",
        article_id: "1"
      },
      {
        title: "第二篇博客",
        content: "第二篇博客的内容",
        article_id: "2"
      },
      {
        title: "第三篇博客",
        content: "第三篇博客的内容",
        article_id: "3"
      },
    ]
  }
}

使用v-for渲染到卡片上：

<template>
  <h2>博客预览</h2>
  <article-card v-for="(article, index) in articles" :key="index">
    <template v-slot:article-title>
      <el-link><span>{{ article.title }}</span></el-link>
    </template>
    <template v-slot:article-content>
      {{ article.content }}
    </template>
  </article-card>
</template>

效果：

暂时还比较丑，但基本可以实现博客文章的预览了。

3.编写博客编辑页

这里的重点是编辑器的选择和引入到项目中。
因为编写博客时我主要使用的是markdown编辑器，在网上查找比较之后发现Vue3好像不支持mavon-editor，故此时可以使用v-md-editor进行替代。
主要参考：v-md-editor官方教程

下载v-md-editor插件

npm i @kangc/v-md-editor@next -S

然后按照轻量版的教程进行配置后发现编辑体验还是不够好，故选择使用进阶版，而使用这个版本时需要先下载codemirror，执行：

npm install codemirror --save

然后再按照教程配置main.js即可

在BlogEditorPage组件中使用md编辑器组件

<template>
  <h2>md-editor</h2>
  <v-md-editor height="700px"></v-md-editor>
</template>

此时，我们已经可以进行简单的编辑了。但是图片插入等功能还需完成后端部分功能才可以实现。

对代码高亮显示出进行扩展

编辑器默认只能对html、js、css
参考文档：官方文档
先下载 highlight.js

npm install highlight.js --save

然后按照官网做即可
效果：

4.使用左边栏按钮完成预览页与编辑页的跳转

为了使左边栏使用起来更加方便，这里对SideBar进行重构：

<template>
  <el-menu
      default-active="0"
      class="el-menu-vertical-demo">
    <el-menu-item v-for="(oneData, i) in data" :key="i" :index="i.toString()" @click="sideTabClick(i)">
      <template #title>{{ oneData.moduleName }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  ...
  props:{
    data:{
      tabsData: Array,
      default: ()=>[]
    }
  },
  methods:{
    sideTabClick(tabIndex){
      this.$emit("sideTabClick", tabIndex); <--这里修改为点击按钮后将事件传给父组件进行处理
    }
  }
}
</script>

通过父组件Blog.vue通过tabsData字段将数组数据传入到SideBar.vue中：

<!--Blog.vue-->
<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <side-bar :tabs-data="sideBarData" @sideTabClick="sideTabClick"></side-bar> <--传入
    </el-col>
    <el-col :span="16">
      <h1>博客页</h1>
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
import SideBar from "@/views/blog/childComps/SideBar";
export default {
  ...
  data(){
    return{
      // 将这部分内如传到SideBar组件中
      sideBarData: [
        { moduleName: "所有博客", path: "/blog/articles" },
        { moduleName: "写博客", path: "/blog/article_edit" },
      ]
    }
  },
  methods: {
    // 收到组件的事件后进行对应的跳转
    sideTabClick(tabIndex){
      this.$router.push(this.sideBarData[tabIndex].path);
    }
  }
}
</script>

这样就完成了点击tab后对浏览文章和编辑文章两个页面进行跳转的任务：


最后将代码push到仓库，over。

上一步：Vue+DRF搭建博客之前端篇（二）
下一步：Vue+DRF搭建博客之后端篇（一）
（之所以下一步是后端的搭建是因为目前的前端展示以及博客的图片编辑等都需要后端的支撑，因而下一步是先进行后端的搭建）