基于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
 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
 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("文章删除成功");
    }
}

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

Bolt.new

Bolt.new是一个免费的AI全栈开发工具

下载

2. 前端Vue3实现

2.1 创建文章列表页面组件

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

2.2 创建文章发布页面组件

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

2.3 创建文章编辑页面组件

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

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