Comment implémenter les fonctions de publication, d'édition et de suppression d'articles sur une plateforme de blog basée sur SpringBoot et Vue3

1. Implémentation backend de Spring Boot

Nous utiliserons Spring Boot comme framework backend et MySQL comme base de données.

1.1 Créez la classe d'entité Article

Tout d'abord, créez une nouvelle classe nommée Article.java sous le package com.example.demo.entity et ajoutez le contenu suivant : # 🎜 🎜#

public class Article {
    private Integer id;
    private String title;
    private String content;
    private Integer authorId;
 
    // Getter and Setter methods
}

1.2 Créer une interface ArticleMapper

Créer une interface nommée ArticleMapper.javasous le package com.example.demo.mapper > et ajoutez le contenu suivant :

@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.mapper包下创建一个名为ArticleMapper.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);
    }
}

在com.example.demo.service.impl包下创建一个名为ArticleServiceImpl.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("文章删除成功");
    }
}

1.3创建ArticleController类

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

<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. 前端Vue3实现

2.1 创建文章列表页面组件

在src/views目录下创建一个名为ArticleList.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(&#39;form&#39;)">发布文章</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.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">更新文章</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>

2.3 创建文章编辑页面组件

在src/views目录下创建一个名为EditArticle.vueCréez un fichier nommé ArticleServiceImpl.java sous le package <code>com.example.demo.service.impl code> et ajoutez le contenu suivant :

rrreee

1.3 Créez la classe ArticleController

#🎜🎜#Créez sous le package com.example.demo.controller Un nouveau classe nommée ArticleController.java et ajoutez le contenu suivant : #🎜🎜#rrreee#🎜🎜# À ce stade, nous avons terminé les fonctions principales de publication, d'édition et de suppression d'articles. #🎜🎜##🎜🎜#2. Implémentation Front-end de Vue3 #🎜🎜##🎜🎜#2.1 Créer un composant de page de liste d'articles #🎜🎜##🎜🎜#Créez-en un dans le src/views répertoire Créez un nouveau composant nommé ArticleList.vue et ajoutez le contenu suivant : #🎜🎜#rrreee#🎜🎜#2.2 Créez le composant de page de publication d'article #🎜🎜##🎜🎜# dans src/ Créez un nouveau composant nommé <code>CreateArticle.vue dans le répertoire des vues et ajoutez le contenu suivant : #🎜🎜#rrreee#🎜🎜#2.3 Créer un composant de page d'édition d'article#🎜🎜 ## 🎜🎜#Créez un nouveau composant nommé EditArticle.vue dans le répertoire src/views et ajoutez le contenu suivant : #🎜🎜#rrreee#🎜🎜#défini A le nouveau composant nommé EditArticle.vue nécessite une propriété nommée id. La fonction fetchArticle sera appelée lors du chargement du composant pour obtenir les informations sur l'article et les remplir dans le formulaire. Lorsque vous cliquez sur le bouton « Mettre à jour l'article », la fonction submitForm est appelée pour envoyer les données du formulaire au backend afin de mettre à jour l'article. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!