基于SpringBoot和Vue3的博客平臺發(fā)布、編輯、刪除文章功能實現
更新時間：2023年04月11日 09:43:41 作者：SYBH.
在上一個教程中，我們已經實現了基于Spring?Boot和Vue3的用戶注冊與登錄功能。本教程將繼續(xù)引導您實現博客平臺的發(fā)布、編輯、刪除文章功能，需要的朋友參考一下
在上一個教程中，我們已經實現了基于Spring Boot和Vue3的用戶注冊與登錄功能。本教程將繼續(xù)引導您實現博客平臺的發(fā)布、編輯、刪除文章功能。
在這個博客教程中，我們實現了基于Spring Boot和Vue3的發(fā)布、編輯、刪除文章功能。整個實現過程可以分為以下幾個步驟：
- 后端Spring Boot實現 1.1. 創(chuàng)建Article實體類：定義文章的數據結構。 1.2. 創(chuàng)建ArticleMapper接口：定義與數據庫交互的操作。 1.3. 創(chuàng)建ArticleService接口及其實現：提供具體的業(yè)務邏輯，如查詢、創(chuàng)建、更新和刪除文章。 1.4. 創(chuàng)建ArticleController類：定義RESTful API接口，處理HTTP請求和響應。
- 前端Vue3實現 2.1. 創(chuàng)建文章列表頁面組件：展示所有文章列表，以及編輯和刪除文章的操作按鈕。 2.2. 創(chuàng)建文章發(fā)布頁面組件：提供一個表單供用戶輸入文章標題和內容，以發(fā)布新文章。 2.3. 創(chuàng)建文章編輯頁面組件：提供一個表單顯示選定文章的標題和內容，允許用戶編輯并更新文章。
在這個過程中，我們首先實現了后端Spring Boot應用程序，負責處理數據庫操作和提供API接口。然后，我們實現了前端Vue3應用程序，提供用戶界面以展示文章列表、發(fā)布新文章和編輯現有文章。通過這種方式，我們實現了一個簡單的博客平臺，具有發(fā)布、編輯和刪除文章的功能。
1. 后端Spring Boot實現
我們將使用Spring Boot作為后端框架，并使用MySQL作為數據庫。
1.1 創(chuàng)建Article實體類
首先，在com.example.demo.entity包下創(chuàng)建一個名為Article.java的新類，并添加以下內容：
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)建一個名為ArticleMapper.java的新接口，并添加以下內容：
@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)建一個名為ArticleServiceImpl.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);
}
}1.3創(chuàng)建ArticleController類
在com.example.demo.controller包下創(chuàng)建一個名為ArticleController.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("文章發(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("文章刪除成功");
}
}至此，我們已經完成了后端的發(fā)布、編輯、刪除文章功能。
2. 前端Vue3實現
2.1 創(chuàng)建文章列表頁面組件
在src/views目錄下創(chuàng)建一個名為ArticleList.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.2 創(chuàng)建文章發(fā)布頁面組件
在src/views目錄下創(chuàng)建一個名為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('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)建文章編輯頁面組件
在src/views目錄下創(chuàng)建一個名為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">更新文章</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>這段代碼定義了一個名為EditArticle.vue的新組件，該組件需要一個名為id的屬性。組件加載時，會調用fetchArticle函數獲取文章信息并填充到表單中。點擊"更新文章"按鈕時，會調用submitForm函數，將表單數據發(fā)送到后端以更新文章。
現在，您已經完成了基于Spring Boot和Vue3的發(fā)布、編輯、刪除文章功能的實現。您可以根據需要對這些功能進行進一步的優(yōu)化和擴展。希望本教程對您有所幫助！
以上就是基于Spring Boot和Vue3的博客平臺發(fā)布、編輯、刪除文章功能實現的詳細內容，更多關于Spring Boot Vue3平臺文章發(fā)布、編輯、刪除的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了Eclipse項目有紅感嘆號的解決方法，給出了Eclipse項目有紅感嘆號的原因，以及如何解決？，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本文將利用Java制作經典游戲《泡泡堂》，文中使用了MVC模式，分離了模型、視圖和控制器，使得項目結構清晰易于擴展，感興趣的可以了解一下2022-04-04
這篇文章主要介紹了詳解Spring中的AOP及AspectJ五大通知注解,AOP面向切面編程是一種新的方法論，是對傳統(tǒng)OOP面向對象編程的補充,AOP?的主要編程對象是切面(aspect),切面模塊化橫切關注點,需要的朋友可以參考下2023-08-08
異?？赡苁窃诔绦驁?zhí)行過程中產生的,也可能是程序中throw主動拋出的。本文主要給大家介紹了Java中異常處理的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Springmvc如何實現向前臺傳遞數據,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
使用IntelliJ IDEA2020.2.2 x64 新建java項目并且輸出Hello World
這篇文章主要介紹了使用IntelliJ IDEA2020.2.2 x64 新建java項目并且輸出Hello World,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
JFileChooser實現對選定文件夾內圖片自動播放和暫停播放實例代碼
這篇文章主要介紹了JFileChooser實現對選定文件夾內圖片自動播放和暫停播放實例代碼,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了java8中l(wèi)amba表達式的使用,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了java使用htmlparser提取網頁純文本例子,需要的朋友可以參考下2014-04-04
spring配置文件解析失敗報”cvc-elt.1: 找不到元素 ''''beans'''' 的聲明”異常解決
這篇文章主要給大家介紹了關于spring配置文件解析失敗報”cvc-elt.1: 找不到元素 'beans' 的聲明”異常的解決方法，需要的朋友可以參考下2020-08-08