基于SpringBoot和Vue3的博客平台发布、编辑、删除文章功能实现
作者:SYBH.
在上一个教程中,我们已经实现了基于Spring Boot和Vue3的用户注册与登录功能。本教程将继续引导您实现博客平台的发布、编辑、删除文章功能。
在这个博客教程中,我们实现了基于Spring Boot和Vue3的发布、编辑、删除文章功能。整个实现过程可以分为以下几个步骤:
- 后端Spring Boot实现 1.1. 创建Article实体类:定义文章的数据结构。 1.2. 创建ArticleMapper接口:定义与数据库交互的操作。 1.3. 创建ArticleService接口及其实现:提供具体的业务逻辑,如查询、创建、更新和删除文章。 1.4. 创建ArticleController类:定义RESTful API接口,处理HTTP请求和响应。
- 前端Vue3实现 2.1. 创建文章列表页面组件:展示所有文章列表,以及编辑和删除文章的操作按钮。 2.2. 创建文章发布页面组件:提供一个表单供用户输入文章标题和内容,以发布新文章。 2.3. 创建文章编辑页面组件:提供一个表单显示选定文章的标题和内容,允许用户编辑并更新文章。
在这个过程中,我们首先实现了后端Spring Boot应用程序,负责处理数据库操作和提供API接口。然后,我们实现了前端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); }
在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函数,将表单数据发送到后端以更新文章。
现在,您已经完成了基于Spring Boot和Vue3的发布、编辑、删除文章功能的实现。您可以根据需要对这些功能进行进一步的优化和扩展。希望本教程对您有所帮助!
以上就是基于Spring Boot和Vue3的博客平台发布、编辑、删除文章功能实现的详细内容,更多关于Spring Boot Vue3平台文章发布、编辑、删除的资料请关注脚本之家其它相关文章!