基于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的新接口，并添加以下内容：

@Mapperpublic interface ArticleMapper {    List
 findAll();    Article findById(Integer id);    void insert(Article article);    void update(Article article);    void delete(Integer id);}

登录后复制

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

@Servicepublic class ArticleServiceImpl implements ArticleService {    @Autowired    private ArticleMapper articleMapper;     @Override    public List
 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
 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的新组件，并添加以下内容：

  
                                        编辑          删除                    
 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 };  },};

登录后复制

2.2 创建文章发布页面组件

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

                                        发布文章       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 };  },};

登录后复制

2.3 创建文章编辑页面组件

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

                                        更新文章       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 };  },};

登录后复制

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

以上就是基于SpringBoot和Vue3的博客平台发布、编辑、删除文章功能怎么实现的详细内容，更多请关注【创想鸟】其它相关文章！