So implementieren Sie die Funktionen zum Veröffentlichen, Bearbeiten und Löschen von Artikeln auf einer Blog-Plattform basierend auf SpringBoot und Vue3

1. Backend-Spring-Boot-Implementierung

Wir werden Spring Boot als Backend-Framework und MySQL als Datenbank verwenden.

1.1 Erstellen Sie die Artikel-Entitätsklasse

Erstellen Sie zunächst eine neue Klasse mit dem Namen Article.java unter dem Paket com.example.demo.entity und fügen Sie den folgenden Inhalt hinzu: # 🎜 🎜#

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

1.2 ArticleMapper-Schnittstelle erstellen

Erstellen Sie eine Schnittstelle mit dem Namen ArticleMapper.javaunter dem Paket com.example.demo.mapper > 's neue Schnittstelle und fügen Sie den folgenden Inhalt hinzu:

@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.vueErstellen Sie eine Datei mit dem Namen ArticleServiceImpl.java unter dem Paket <code>com.example.demo.service.impl code> und fügen Sie den folgenden Inhalt hinzu:

rrreee

1.3 Erstellen Sie die ArticleController-Klasse

#🎜🎜# Erstellt unter dem com.example.demo.controller-Paket A Erstellen Sie eine neue Klasse mit dem Namen ArticleController.java und fügen Sie den folgenden Inhalt hinzu: #🎜🎜#rrreee#🎜🎜# Zu diesem Zeitpunkt haben wir die Back-End-Funktionen zum Veröffentlichen, Bearbeiten und Löschen von Artikeln abgeschlossen. #🎜🎜##🎜🎜#2. Front-End-Vue3-Implementierung #🎜🎜##🎜🎜#2.1 Artikellistenseitenkomponente erstellen #🎜🎜##🎜🎜#Erstellen Sie eine im src/views-Verzeichnis Erstellen Sie eine neue Komponente mit dem Namen ArticleList.vue und fügen Sie den folgenden Inhalt hinzu: #🎜🎜#rrreee#🎜🎜#2.2 Erstellen Sie die Artikelveröffentlichungsseitenkomponente #🎜🎜##🎜🎜# in src/ Erstellen Sie eine neue Komponente mit dem Namen <code>CreateArticle.vue im Verzeichnis „views“ und fügen Sie den folgenden Inhalt hinzu: #🎜🎜#rrreee#🎜🎜#2.3 Artikelbearbeitungsseitenkomponente erstellen#🎜🎜 ## 🎜🎜#Erstellen Sie eine neue Komponente mit dem Namen EditArticle.vue im Verzeichnis src/views und fügen Sie den folgenden Inhalt hinzu: #🎜🎜#rrreee#🎜🎜#definiert A Die neue Komponente namens EditArticle.vue erfordert eine Eigenschaft namens id. Die Funktion fetchArticle wird beim Laden der Komponente aufgerufen, um die Artikelinformationen abzurufen und in das Formular einzufügen. Wenn auf die Schaltfläche „Artikel aktualisieren“ geklickt wird, wird die Funktion „submitForm“ aufgerufen, um die Formulardaten an das Backend zu senden, um den Artikel zu aktualisieren. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktionen zum Veröffentlichen, Bearbeiten und Löschen von Artikeln auf einer Blog-Plattform basierend auf SpringBoot und Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!