Spring Boot + vue-element 开发个人博客项目实战教程（二十二、文章管理页面开发（1））
⭐ 作者简介：码上言
⭐ 代表教程：Spring Boot + vue-element 开发个人博客项目实战教程
⭐专栏内容：零基础学Java、个人博客系统
文章目录
- 前言
- 1、添加文章的页面
- 1.1、基础页面编写
- 2、添加api接口
- 3、添加功能
- 3.1、引入接口
- 3.2、添加分类查询接口
- 3.3、添加标签查询接口
前言
时隔三四个月了没更新了，差一点烂尾了，对不住各位小伙伴了现在才更新，这也是我们这个教程的最后一篇了，接下来可能还会更新一下项目的上线功能，大概会用一到两篇的文章写完，可能需要服务器，大家如果有条件的话还是要去搞一台自己的服务器，模拟真实的线上环境才能更好的学习，可以去拼夕夕买或者百度云也可以都挺便宜，四五十块钱就可以了，还是希望大家用真实的环境来学习。
最近我打算写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））