基于SpringBoot和Vue3的博客平台发布、编辑、删除文章功能怎么实现

1. 后端Spring Boot实现

我们将使用Spring Boot作为后端框架,并使用MySQL作为数据库。

1.1 创建Article实体类

首先,在com.example.demo.entity包下创建一个名为Article.java的新类,并添加以下内容:

public class Article {
private Integer id;

private String title;

private String content;

private Integer authorId;


// Getter and Setter methods
} 1.2 创建ArticleMapper接口

在com.example.demo.mapper包下创建一个名为ArticleMapper.java的新接口,并添加以下内容:

@Mapper
public interface ArticleMapper {
List<
Article>
findAll();

Article findById(Integer id);

void insert(Article article);

void update(Article article);

void delete(Integer id);

}

基于SpringBoot和Vue3的博客平台发布、编辑和删除文章功能的实现方法是什么

在com.example.demo.service.impl包下创建一个名为ArticleServiceImpl.java的新类,并添加以下内容:

@Service
public class ArticleServiceImpl implements ArticleService {
@Autowired
private ArticleMapper articleMapper;


@Override
public List<
Article>
findAll() {
return articleMapper.findAll();

}

@Override
public Article findById(Integer id) {
return articleMapper.findById(id);

}

@Override
public void create(Article article) {
articleMapper.insert(article);

}

@Override
public void update(Article article) {
articleMapper.update(article);

}

@Override
public void delete(Integer id) {
articleMapper.delete(id);

}
} 1.3创建ArticleController类

在com.example.demo.controller包下创建一个名为ArticleController.java的新类,并添加以下内容:

@RestController
@RequestMapping("
/api/article"
)
public class ArticleController {
@Autowired
private ArticleService articleService;


@GetMapping
public List<
Article>
list() {
return articleService.findAll();

}

@GetMapping("
/{id}"
)
public Article detail(@PathVariable Integer id) {
return articleService.findById(id);

}

@PostMapping
public Result create(@RequestBody Article article) {
articleService.create(article);

return Result.success("
文章发布成功"
);

}

@PutMapping("
/{id}"
)
public Result update(@PathVariable Integer id, @RequestBody Article article) {
article.setId(id);

articleService.update(article);

return Result.success("
文章更新成功"
);

}

@DeleteMapping("
/{id}"
)
public Result delete(@PathVariable Integer id) {
articleService.delete(id);

return Result.success("
文章删除成功"
);

}
}

至此,我们已经完成了后端的发布、编辑、删除文章功能。

2. 前端Vue3实现2.1 创建文章列表页面组件

在src/views目录下创建一个名为ArticleList.vue的新组件,并添加以下内容:

<
template>

<
div>

<
el-table :data="
articles"
>

<
el-table-column prop="
id"
label="
ID"
width="
80"
>
<
/el-table-column>

<
el-table-column prop="
title"
label="
标题"
>
<
/el-table-column>

<
el-table-column label="
操作"
width="
180"
>

<
template v-slot="
{ row }"
>

<
el-button @click="
editArticle(row.id)"
>
编辑<
/el-button>

<
el-button type="
danger"
@click="
deleteArticle(row.id)"
>
删除<
/el-button>

<
/template>

<
/el-table-column>

<
/el-table>

<
/div>

<
/template>


<
script>

import { ref } from "
vue"
;

import axios from "
axios"
;


export default {
setup() {
const articles = ref([]);


const fetchArticles = async () =>
{
const response = await axios.get("
/api/article"
);

articles.value = response.data;

};


const editArticle = (id) =>
{
// 跳转到编辑页面
};


const deleteArticle = async (id) =>
{
await axios.delete(`/api/article/${id}`);

fetchArticles();

};


fetchArticles();


return { articles, editArticle, deleteArticle };

},
};

<
/script>
2.2 创建文章发布页面组件

在src/views目录下创建一个名为CreateArticle.vue的新组件,并添加以下内容:

<
template>

<
el-form ref="
form"
:model="
form"
label-width="
80px"
>

<
el-form-item label="
标题"
prop="
title"
>

<
el-input v-model="
form.title"
>
<
/el-input>

<
/el-form-item>

<
el-form-item label="
内容"
prop="
content"
>

<
el-input type="
textarea"
v-model="
form.content"
>
<
/el-input>

<
/el-form-item>

<
el-form-item>

<
el-button type="
primary"
@click="
submitForm('
form'
)"
>
发布文章<
/el-button>

<
/el-form-item>

<
/el-form>

<
/template>


<
script>

import { reactive } from "
vue"
;

import axios from "
axios"
;


export default {
setup() {
const form = reactive({ title: "
"
, content: "
"
});


const submitForm = async () =>
{
try {
await axios.post("
/api/article"
, form);

alert("
文章发布成功"
);

} catch (error) {
alert("
文章发布失败"
);

}
};


return { form, submitForm };

},
};

<
/script>
2.3 创建文章编辑页面组件

在src/views目录下创建一个名为EditArticle.vue的新组件,并添加以下内容:

<
template>

<
el-form ref="
form"
:model="
form"
label-width="
80px"
>

<
el-form-item label="
标题"
prop="
title"
>

<
el-input v-model="
form.title"
>
<
/el-input>

<
/el-form-item>

<
el-form-item label="
内容"
prop="
content"
>

<
el-input type="
textarea"
v-model="
form.content"
>
<
/el-input>

<
/el-form-item>

<
el-form-item>

<
el-button type="
primary"
@click="
submitForm"
>
更新文章<
/el-button>

<
/el-form-item>

<
/el-form>

<
/template>


<
script>

import { ref, reactive, onMounted } from "
vue"
;

import axios from "
axios"
;


export default {
props: {
id: {
type: Number,
required: true,
},
},
setup(props) {
const form = reactive({ title: "
"
, content: "
"
});


const fetchArticle = async () =>
{
const response = await axios.get(`/api/article/${props.id}`);

form.title = response.data.title;

form.content = response.data.content;

};


const submitForm = async () =>
{
try {
await axios.put(`/api/article/${props.id}`, form);

alert("
文章更新成功"
);

} catch (error) {
alert("
文章更新失败"
);

}
};


onMounted(fetchArticle);


return { form, submitForm };

},
};

<
/script>

定义了一个组件名为EditArticle.vue的新组件,需要一个名为id的属性。fetchArticle函数会在组件加载时被调用,以获取文章信息并将其填充到表单中。点击"
更新文章"
按钮时,会调用submitForm函数,将表单数据发送到后端以更新文章。



一、介绍
随着互联网的发展,博客已经成为了一种很受欢迎的网络写作方式,而博客平台则提供了一种方便快捷的博客发布、管理和展示方式。在这篇文章中,我们将探讨基于SpringBoot和Vue3的博客平台如何实现文章发布、编辑和删除功能。
二、后端架构
1.使用SpringBoot作为后端框架,使用Mybatis作为ORM框架;
2.使用MySQL数据库存储博客文章、标签、分类等信息;
3.使用Redis作为缓存,提高数据访问效率;
4.使用Spring Security实现用户认证和授权功能。
三、前端架构
1.使用Vue3作为前端框架;
2.使用Element UI作为UI库,模板、表单等组件;
3.使用Axios作为HTTP请求库;
4.使用Vue-router实现页面路由;
5.使用Vuex实现全局状态管理。
四、文章发布功能实现
文章发布功能包括文章的标题、正文、标签、分类、封面图等信息的录入和提交。具体实现过程如下:
1.在后端,定义文章entity,包含id、标题、正文、标签、分类、封面图等字段;
2.在前端,使用v-model绑定输入框内容,以及在表单提交时验证输入信息的有效性;
3.使用Axios发送POST请求,将文章信息提交到后端数据库;
4.后端接收请求,将文章信息存入数据库。
五、文章编辑功能实现
文章编辑功能允许用户对已发布的文章进行修改和更新。具体实现过程如下:
1.在后端,查询数据库获取要编辑的文章的信息;
2.将文章信息填入编辑表单中,使用v-model绑定表单元素;
3.在前端,使用Axios发送PUT请求,将编辑后的文章信息提交到后端;
4.后端接收请求,更新数据库中的文章信息。
六、文章删除功能实现
文章删除功能允许用户删除已发布的文章。具体实现过程如下:
1.在后端,查询数据库获取要删除的文章的信息;
2.在前端,使用Axios发送DELETE请求;
3.后端接收请求,从数据库中删除文章信息;
4.前端删除已删除文章的视图信息。
七、总结
基于SpringBoot和Vue3,使用MySQL和Redis,实现了博客平台的文章发布、编辑和删除功能。这些功能是博客平台的核心功能,对于提升用户体验、增加用户粘性和扩大用户规模都有积极的作用。通过本文的介绍,相信你已经掌握了这些功能的具体实现方法,欢迎试着开发一款博客平台,并在实践中不断探索和提高。