Spring Boot + vue-element 开发个人博客项目实战教程（二十五、文章标签实现）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

1、添加文章标签功能

标签的功能和分类的功能差不多，大家可以先自己参照分类的思路先写，然后再接着往下看我写的作为参考，这样自己就能再脑子里回顾一下写的思路，以后写项目遇到类似的功能就能非常清楚的想起思路。

这里我先将标签的主要代码列举出来，基本上和分类的一致，但是分类只有一个，标签有多个，前端限制的每一篇文章最多只有三个。

 <!-- ----------文章标签开始---------- -->
        <el-form-item label="文章标签">
          <el-tag
            v-for="(item, index) of article.tagNameList"
            :key="index"
            style="margin:0 1rem 0 0"
            :closable="true"
            @close="removeTag(item)"
          >
            {{ item }}
          </el-tag>
          <!-- 标签选项 -->
          <el-popover
            placement="bottom-start"
            width="460"
            trigger="click"
            v-if="article.tagNameList.length < 3"
          >
            <div class="popover-title">标签</div>
            <!-- 标签搜索框 -->
            <el-autocomplete
              style="width:100%"
              v-model="tagName"
              :fetch-suggestions="findTags"
              placeholder="请输入标签名搜索，按回车可添加自定义标签"
              :trigger-on-focus="false"
              @keyup.enter.native="saveTag"
              @select="handleFindTag"
            >
              <template slot-scope="{ item }">
                <div>{{ item.tagName }}</div>
              </template>
            </el-autocomplete>

            <!-- 标签数据展示 -->
            <div class="popover-container">
              <div style="margin-bottom:1rem">添加标签</div>
              <el-tag
                v-for="(item, index) of tagList"
                :key="index"
                :class="tagClass(item)"
                @click.native="addTag(item)"
              >
                {{ item.tagName }}
              </el-tag>
            </div>
            <el-button type="primary" plain slot="reference" size="small">
              添加标签
            </el-button>
          </el-popover>
        </el-form-item>

        <!-- ----------文章标签结束---------- -->

JS部分：

import { getTag } from '@/api/tag'

  //------标签的业务处理------
    getTagsList() {
      var tagName = "";
      getTag({tagName}).then(response => {
         this.tagList = response.data;
      })
    },
   
    //搜索标签名称
    findTags(tagName, cb) {
       getTag({tagName}).then(response => {
         cb(response.data);
       })
    },
    handleFindTag(item) {
      this.addTag({
        tagName: item.tagName
      });
    },
    saveTag() {
      if (this.tagName.trim() != "") {
        this.addTag({
          tagName: this.tagName
        });
        this.tagName = "";
      }
    },
   
    addTag(item) {
      console.log("标签展示：",item);
      if (this.article.tagNameList.indexOf(item.tagName) == -1) {
        this.article.tagNameList.push(item.tagName);
      }
    },
    removeTag(item) {
      const index = this.article.tagNameList.indexOf(item);
      this.article.tagNameList.splice(index, 1);
    },
  //------标签的业务处理结束------
  
//放到methods方法外层
computed: {
    tagClass() {
      return function(item) {
        const index = this.article.tagNameList.indexOf(item.tagName);
        return index != -1 ? "tag-item-select" : "tag-item";
      };
    }
  }

这里我只说一个知识点：

问题：vue中@click和@click.native.prevent的区别是什么？

• @click是用在按钮上的语法
• @click.native是给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件，prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的click的话，需要加上native修饰符。

2、文章摘要

文章摘要也就是对文章的大体描述功能，这个就是个表单，没有难点。 文章摘要也就是对文章的大体描述功能，这个就是个表单，没有难点。

<el-form-item label="文章摘要">
    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="article.description" style="width:220px" />
</el-form-item>

return {
      showDialog: false,
      categoryName: "",
      categoryList: [],
      tagName: "",
      tagList: [],
      article: {
        id: "",
        title: "",
        categoryId: "",
        content: "",
        categoryName: null,
        tagNameList: [],
        description: ""
      }
    }

文章封面上传

文章封面上传功能是一个新的知识点，我们后端要添加新的接口，上传图片的接口，这里就涉及到文件的上传，保存路径等操作，这也是在以后的工作中经常使用的文件操作，这个也是一个重点，希望大家认真对待学习。

我们先去写后端图片上传的功能，图片的存储等操作。希望大家能了解图片上传的业务逻辑思路。