快捷導(dǎo)航

基于SpringBoot和Vue3的博客平臺(tái)發(fā)布、編輯、刪除文章功能實(shí)現(xiàn)

更新時(shí)間：2023年04月11日 09:43:41 作者：SYBH.

在上一個(gè)教程中，我們已經(jīng)實(shí)現(xiàn)了基于Spring?Boot和Vue3的用戶注冊(cè)與登錄功能。本教程將繼續(xù)引導(dǎo)您實(shí)現(xiàn)博客平臺(tái)的發(fā)布、編輯、刪除文章功能，需要的朋友參考一下

后端Spring Boot實(shí)現(xiàn) 1.1. 創(chuàng)建Article實(shí)體類：定義文章的數(shù)據(jù)結(jié)構(gòu)。 1.2. 創(chuàng)建ArticleMapper接口：定義與數(shù)據(jù)庫(kù)交互的操作。 1.3. 創(chuàng)建ArticleService接口及其實(shí)現(xiàn)：提供具體的業(yè)務(wù)邏輯，如查詢、創(chuàng)建、更新和刪除文章。 1.4. 創(chuàng)建ArticleController類：定義RESTful API接口，處理HTTP請(qǐng)求和響應(yīng)。
前端Vue3實(shí)現(xiàn) 2.1. 創(chuàng)建文章列表頁(yè)面組件：展示所有文章列表，以及編輯和刪除文章的操作按鈕。 2.2. 創(chuàng)建文章發(fā)布頁(yè)面組件：提供一個(gè)表單供用戶輸入文章標(biāo)題和內(nèi)容，以發(fā)布新文章。 2.3. 創(chuàng)建文章編輯頁(yè)面組件：提供一個(gè)表單顯示選定文章的標(biāo)題和內(nèi)容，允許用戶編輯并更新文章。

在這個(gè)過(guò)程中，我們首先實(shí)現(xiàn)了后端Spring Boot應(yīng)用程序，負(fù)責(zé)處理數(shù)據(jù)庫(kù)操作和提供API接口。然后，我們實(shí)現(xiàn)了前端Vue3應(yīng)用程序，提供用戶界面以展示文章列表、發(fā)布新文章和編輯現(xiàn)有文章。通過(guò)這種方式，我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的博客平臺(tái)，具有發(fā)布、編輯和刪除文章的功能。

1. 后端Spring Boot實(shí)現(xiàn)

我們將使用Spring Boot作為后端框架，并使用MySQL作為數(shù)據(jù)庫(kù)。

1.1 創(chuàng)建Article實(shí)體類

首先，在com.example.demo.entity包下創(chuàng)建一個(gè)名為Article.java的新類，并添加以下內(nèi)容：

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

1.2 創(chuàng)建ArticleMapper接口

在com.example.demo.mapper包下創(chuàng)建一個(gè)名為ArticleMapper.java的新接口，并添加以下內(nèi)容：

@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.service.impl包下創(chuàng)建一個(gè)名為ArticleServiceImpl.java的新類，并添加以下內(nèi)容：

@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);
    }
}

1.3創(chuàng)建ArticleController類

在com.example.demo.controller包下創(chuàng)建一個(gè)名為ArticleController.java的新類，并添加以下內(nèi)容：

@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("文章發(fā)布成功");
    }
 
    @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("文章刪除成功");
    }
}

至此，我們已經(jīng)完成了后端的發(fā)布、編輯、刪除文章功能。

2. 前端Vue3實(shí)現(xiàn)

2.1 創(chuàng)建文章列表頁(yè)面組件

在src/views目錄下創(chuàng)建一個(gè)名為ArticleList.vue的新組件，并添加以下內(nèi)容：

<template>
  <div>
    <el-table :data="articles">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="標(biāo)題"></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) => {
      // 跳轉(zhuǎn)到編輯頁(yè)面
    };
 
    const deleteArticle = async (id) => {
      await axios.delete(`/api/article/${id}`);
      fetchArticles();
    };
 
    fetchArticles();
 
    return { articles, editArticle, deleteArticle };
  },
};
</script>

2.2 創(chuàng)建文章發(fā)布頁(yè)面組件

在src/views目錄下創(chuàng)建一個(gè)名為CreateArticle.vue的新組件，并添加以下內(nèi)容：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="標(biāo)題" prop="title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="內(nèi)容" prop="content">
      <el-input type="textarea" v-model="form.content"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">發(fā)布文章</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("文章發(fā)布成功");
      } catch (error) {
        alert("文章發(fā)布失敗");
      }
    };
 
    return { form, submitForm };
  },
};
</script>

2.3 創(chuàng)建文章編輯頁(yè)面組件

在src/views目錄下創(chuàng)建一個(gè)名為EditArticle.vue的新組件，并添加以下內(nèi)容：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="標(biāo)題" prop="title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="內(nèi)容" 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>

這段代碼定義了一個(gè)名為EditArticle.vue的新組件，該組件需要一個(gè)名為id的屬性。組件加載時(shí)，會(huì)調(diào)用fetchArticle函數(shù)獲取文章信息并填充到表單中。點(diǎn)擊"更新文章"按鈕時(shí)，會(huì)調(diào)用submitForm函數(shù)，將表單數(shù)據(jù)發(fā)送到后端以更新文章。

現(xiàn)在，您已經(jīng)完成了基于Spring Boot和Vue3的發(fā)布、編輯、刪除文章功能的實(shí)現(xiàn)。您可以根據(jù)需要對(duì)這些功能進(jìn)行進(jìn)一步的優(yōu)化和擴(kuò)展。希望本教程對(duì)您有所幫助！

以上就是基于Spring Boot和Vue3的博客平臺(tái)發(fā)布、編輯、刪除文章功能實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Spring Boot Vue3平臺(tái)文章發(fā)布、編輯、刪除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: