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

1、添加功能

准备工作已经完成，接下来我们来写实现的功能，其实重点就是弹出框里的数据交互操作比较复杂一些。

1.1、引入接口

我们先将接口引入到我们的add.vue文件中。

import { addArticle, updateArticle, getArticleById } from '@/api/article'

这里我们还会用到分类的接口，我们也先将分类的接口引入过来。

import { } from '@/api/category'

1.2、添加分类查询接口

我们还要完善一下后端的接口，我们这里添加文章的弹框需要查询全部的分类，或者根据输入的分类去查找有没有分类可供选择，所以我们要去添加一个查询分类的接口。

打开后端项目，我们先添加一个查询参数的对象，方便以后管理。

1、在bo包中新建一个CategoryBO.java

package com.blog.personalblog.bo;

import lombok.Data;

/**
* 分类查询条件
*
* @author: SuperMan
* @create: 2022-10-10
**/

@Data
    public class CategoryBO {

        /**
		 * 分类名称
        */
        private String categoryName;
    }

2、然后我们去写接口，直接在原来的CategoryService中添加个接口即可

    /**
     * 搜索文章分类
     * @param bo
     * @return
     */
    List<Category> getCategoriesByName(CategoryBO bo);

3、数据查询mapper接口

/**
     * 查询分类
     * @param bo
     * @return
     */
    List<Category> findCategoriesByName(CategoryBO bo);

4、实现分类数据库xml功能

 <select id="findCategoriesByName" parameterType="com.blog.personalblog.bo.CategoryBO" resultMap="BaseResultMap">
        select * from person_category
        <where>
            <if test="categoryName != null and companyName != ''">
                and category_name like #{companyName}
            </if>
        </where>
</select>

5、最后实现分类查询的实现类。

    @Override
    public List<Category> getCategoriesByName(CategoryBO bo) {
        List<Category> categoriesByName = categoryMapper.findCategoriesByName(bo);
        return categoriesByName;
    }

6、最后再写controller层

    /**
     * 搜索文章分类
     * @param bo
     * @return
     */
    @ApiOperation(value = "查询分类名称")
    @PostMapping("/getCategory")
    @OperationLogSys(desc = "查询分类名称", operationType = OperationType.SELECT)
    public JsonResult<Object> getCategoryByName(@RequestBody @Valid CategoryBO bo) {
        List<Category> categoriesByName = categoryService.getCategoriesByName(bo);
        return JsonResult.success(categoriesByName);
    }

写完，我们要测试一下接口通不通再去页面上去接接口，养成好的习惯。

1.3、添加标签查询接口

接下来还要写标签的查询接口，文章涉及到东西比较多，基本上把之前做的都整合在了一起，这是我们整个项目的重点灵活。和上边分类差不多，我们再来写一下标签。

1、在bo包中新建一个CategoryBO.java

package com.blog.personalblog.bo;

import lombok.Data;

/**
* @author: SuperMan
* @create: 2022-10-10
**/

@Data
    public class TagBO {

        /**
* 标签名称
*/
        private String tagName;
    }

2、然后写接口，在原来的TagService中添加个接口即可

	/**
     * 搜索文章标签
     *
     * @param bo
     * @return
     */
    List<Tag> getTagsByTagName(TagBO bo);

3、数据查询mapper接口

	/**
     * 查询文章标签
     * @param bo
     * @return
     */
    List<Tag> findTagsByTagName(TagBO bo);

4、实现标签数据库xml功能

  <select id="findTagsByTagName" parameterType="com.blog.personalblog.bo.TagBO" resultMap="BaseResultMap">
        select * from person_tag
        <where>
            <if test="tagName != null and tagName != ''">
                and tag_name like '%${tagName}%'
            </if>
        </where>
    </select>

5、最后实现分类查询的实现类。

@Override
public List<Tag> getTagsByTagName(TagBO bo) {
   List<Tag> tagsByTagName = tagMapper.findTagsByTagName(bo);
   return tagsByTagName;
}

6、controller层

/**
* 按条件查询文章标签
* @param bo
* @return
*/
	@ApiOperation(value = "查询文章标签")
    @PostMapping("/selectTag")
    @OperationLogSys(desc = "查询文章标签", operationType = OperationType.SELECT)
    public JsonResult<Object> getTagByTagName(@RequestBody @Valid TagBO bo) {
        List<Tag> tagsByTagName = tagService.getTagsByTagName(bo);
        return JsonResult.success(tagsByTagName);
    }

7、测试接口