SpringBootとVue3をベースとしたブログプラットフォーム上で記事の公開・編集・削除機能を実装する方法

1. バックエンド Spring Boot の実装

バックエンド フレームワークとして Spring Boot を使用し、データベースとして MySQL を使用します。

1.1 Article エンティティ クラスの作成

まず、com.example.demo.entity パッケージの下に Article.java という名前の新しいクラスを作成し、次のコンテンツを追加します。 #1.2 ArticleMapper インターフェイスの作成

com.example.demo.mapper

パッケージの下に

ArticleMapper.java という名前の新しいインターフェイスを作成し、次のコンテンツを追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">public class Article {     private Integer id;     private String title;     private String content;     private Integer authorId;       // Getter and Setter methods }</pre><div class="contentsignin">ログイン後にコピー</div></div>com.example.demo.service.impl パッケージの下に

ArticleServiceImpl.java

という名前の新しいクラスを作成し、次の内容を追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@Mapper public interface ArticleMapper {     List&lt;Article&gt; findAll();     Article findById(Integer id);     void insert(Article article);     void update(Article article);     void delete(Integer id); }</pre><div class="contentsignin">ログイン後にコピー</div></div>1.3 ArticleController クラスの作成

com.example.demo.controller

パッケージの下に

ArticleController.java

という名前の新しいクラスを作成し、次のコンテンツを追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@Service public class ArticleServiceImpl implements ArticleService {     @Autowired     private ArticleMapper articleMapper;       @Override     public List&lt;Article&gt; 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);     } }</pre><div class="contentsignin">ログイン後にコピー</div></div> この時点で、バックエンドの記事の公開、編集、削除機能が完了しました。 2. フロントエンド Vue3 実装

2.1 記事リスト ページ コンポーネントの作成

src/views

に

ArticleList という名前の記事を作成します。 vue

の新しいコンポーネントを作成し、次のコンテンツを追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@RestController @RequestMapping(&quot;/api/article&quot;) public class ArticleController {     @Autowired     private ArticleService articleService;       @GetMapping     public List&lt;Article&gt; list() {         return articleService.findAll();     }       @GetMapping(&quot;/{id}&quot;)     public Article detail(@PathVariable Integer id) {         return articleService.findById(id);     }       @PostMapping     public Result create(@RequestBody Article article) {         articleService.create(article);         return Result.success(&quot;文章发布成功&quot;);     }       @PutMapping(&quot;/{id}&quot;)     public Result update(@PathVariable Integer id, @RequestBody Article article) {         article.setId(id);         articleService.update(article);         return Result.success(&quot;文章更新成功&quot;);     }       @DeleteMapping(&quot;/{id}&quot;)     public Result delete(@PathVariable Integer id) {         articleService.delete(id);         return Result.success(&quot;文章删除成功&quot;);     } }</pre><div class="contentsignin">ログイン後にコピー</div></div>2.2 記事公開ページ コンポーネントを作成します## という名前のファイルを

src/ に作成しますviews

ディレクトリ #CreateArticle.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.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(&#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>

は、EditArticle.vue という名前の新しいコンポーネントを定義します。これには、id という名前のプロパティが必要です。 fetchArticle 関数は、コンポーネントがロードされるときに呼び出され、記事情報を取得してフォームに入力します。 [記事を更新] ボタンをクリックすると、submitForm 関数が呼び出され、フォーム データがバックエンドに送信され、記事が更新されます。

以上がSpringBootとVue3をベースとしたブログプラットフォーム上で記事の公開・編集・削除機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。