Spring Boot + vue-element 开发个人博客项目实战教程（二十二、文章管理页面开发（1））

⭐ 作者简介：码上言


⭐ 代表教程：Spring Boot + vue-element 开发个人博客项目实战教程


⭐专栏内容：零基础学Java、个人博客系统

👦 学习讨论群：530826149

项目部署视频

https://www.bilibili.com/video/BV1sg4y1A7Kv/?vd_source=dc7bf298d3c608d281c16239b3f5167b

前言

时隔三四个月了没更新了，差一点烂尾了，对不住各位小伙伴了现在才更新，这也是我们这个教程的最后一篇了，接下来可能还会更新一下项目的上线功能，大概会用一到两篇的文章写完，可能需要服务器，大家如果有条件的话还是要去搞一台自己的服务器，模拟真实的线上环境才能更好的学习，可以去拼夕夕买或者百度云也可以都挺便宜，四五十块钱就可以了，还是希望大家用真实的环境来学习。

最近我打算写redis的学习，各位小伙伴有需要的话可以去我的Redis从入门到实战专栏查看，有什么好的意见可以评论区告诉我或者加我好友沟通，

1、添加文章的页面

首先我们还是按照之前分类或标签的操作来写页面，我们在前端项目中新建两个文件，一个是add.vue，一个是list.vue。我们先从添加页面入手。

添加文章的业务比较复杂一些，因为里面包含了标签和分类的功能查询和保存，还涉及到图片的保存，所以比较重要，里面的知识点也比较多，我尽量将讲述清楚，大家也多多思考，有不会的可以关注下面的微信号，加我好友来一起讨论学习。

我们接下来先来写添加文章，打开前端项目，然后我们在/src/views/articles下的add.vue编写。
还是和之前添加标签或分类的一样，使用的mavon-editor编辑。

1.1、基础页面编写

我们可以将分类的页面复制过来进行修改，或者自己来手动写一遍，建议自己写一遍，了解具体的编写思路。

<template>
    <el-card class="box-card">
    <!-- 设置文章管理 -->
    <div slot="header" class="clearfix">
      <span>添加文章</span>
    </div>

    <!-- 发布文章 -->
    <div class="article-title-container">
        <el-input size="medium"  v-model="article.title" placeholder="输入文章标题"/>
        <el-button type="warning" size="medium" @click="openDialog" style="margin-left:10px">保存草稿</el-button>
        <el-button type="danger" size="medium" @click="openDialog" style="margin-left:10px">发布文章</el-button>
    </div>
    <!-- 文章内容 -->
    <mavon-editor ref="md" v-model="article.content" style="height:calc(100vh - 260px)"/>

    <!-- 填写信息弹出框 -->
    <el-dialog :title="`发布文章：${article.title}`" :visible.sync="showDialog" width="30%">


      <el-form label-position="left" label-width="80px" :model="article" size="medium">
       
        <!-- 内容 -->  
      
      </el-form>

       <span slot="footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">发布</el-button>
      </span>
    </el-dialog>


 </el-card>
</template>

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


export default {
  name: 'Addarticle',

  created() {
    
  },

   data() {
    return {
      showDialog: false,
     
      article: {
        id: "",
        author: "",
        title: "",
        categoryId: "",
        content: "",
        categoryName: null
      }
    }
  },

  methods: {

    assertNotEmpty(target, msg) {
      if (!target) {
        this.$message({
          message: msg,
          type: "warning",
        });
        return false;
      }
      return true;
    },

     // 打开文章信息填写框
    openDialog() {
      if (
        this.assertNotEmpty(this.article.title, "请填写文章标题") &&
        this.assertNotEmpty(this.article.content, "请填写文章内容")
      ) {
        this.showDialog = true;
      }
    },

    handleSubmit() {
        this.showDialog = true;
        var body = this.article;
    },
    
    handleCancel() {
      this.showDialog = false;
    },
  }
 
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.article-title-container {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

  .box-card {
    width: 98%;
    margin: 1%;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix span {
    font-weight: 600;
  }

</style>

以上的代码没有什么好介绍的了，我们已经写了好几遍了，如果有报错看一下浏览器控制台有什么错误，自己修改一下就好了。

PS：如果左侧的导航栏没有显示这两个页面的话，你就去路由那边将这两个页面添加上即可。
以上基础的页面已经搭建好了，我们要去完成数据交互的部分。

2、添加api接口

先来添加一下后端的接口，打开/src/api文件，如果没有article.js文件则自己创建一个，然后我们打开文件，和之前的都一样，我们写一下接口。

import request from '@/utils/request'

export function articleList(query) {
    return request({
      url: '/article/list',
      method: 'post',
      data: query
    })
}

export function addArticle(data) {
  return request({
    url: '/article/create',
    method: 'post',
    data
  })
}

export function updateArticle(data) {
  return request({
    url: '/article/update',
    method: 'post',
    data
  })
}
export function deleteArticle(id) {
  return request({
    url: '/article/delete',
    method: 'post',
    params: { id }
  })
}

export function getArticleById(id){
  return request({
    url: '/article/info/' + id,
    method: 'get'
  })
}

最后的一个接口根据id查找文章我忘了当时给没给你们写了，如果你没有写的话，将文章拉到最后，我已经更新到了仓库，前后端的项目都已经是最新的代码了。

3、添加功能

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

3.1、引入接口

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

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

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

import { } from '@/api/category'

3.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.java中添加个接口即可

  /**
     * 搜索文章分类
     * @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);
    }

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

3.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、测试接口

本来想一篇就写完的，但是后边还有很多功能，还有很多要写的，会导致整篇很长，不太好学习，所以我就把文章拆开了，篇幅不长方便查找。

上一篇：Spring Boot + vue-element 开发个人博客项目实战教程（二十一、个人介绍、公告管理、标签管理开发）
下一篇：Spring Boot + vue-element 开发个人博客项目实战教程（二十三、文章管理页面开发（2））