我们将使用spring boot作为后端框架,并使用mysql作为数据库。
首先,在com.example.demo.entity包下创建一个名为Article.java的新类,并添加以下内容:
public class Article { private Integer id; private String title; private String content; private Integer authorId; // Getter and Setter methods }
在com.example.demo.mapper
包下创建一个名为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); }</article>
在com.example.demo.service.impl
包下创建一个名为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); } }</article>
在com.example.demo.controller
包下创建一个名为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("文章发布成功"); } @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("文章删除成功"); } }</article>
至此,我们已经完成了后端的发布、编辑、删除文章功能。
在src/views
目录下创建一个名为ArticleList.vue
的新组件,并添加以下内容:
<template> <div> <el-table> <el-table-column></el-table-column> <el-table-column></el-table-column> <el-table-column> <template> <el-button>编辑</el-button> <el-button>删除</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>
在src/views
目录下创建一个名为CreateArticle.vue
的新组件,并添加以下内容:
<template> <el-form> <el-form-item> <el-input></el-input> </el-form-item> <el-form-item> <el-input></el-input> </el-form-item> <el-form-item> <el-button>发布文章</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>
在src/views
目录下创建一个名为EditArticle.vue
的新组件,并添加以下内容:
<template> <el-form> <el-form-item> <el-input></el-input> </el-form-item> <el-form-item> <el-input></el-input> </el-form-item> <el-form-item> <el-button>更新文章</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函数,将表单数据发送到后端以更新文章。
以上就是基于SpringBoot和Vue3的博客平台发布、编辑、删除文章功能怎么实现的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号