登录  /  注册
首页 > web前端 > Vue.js > 正文

基于SpringBoot和Vue3的博客平台发布、编辑、删除文章功能怎么实现

王林
发布: 2023-05-27 10:16:17
转载
911人浏览过

1. 后端Spring Boot实现

我们将使用spring boot作为后端框架,并使用mysql作为数据库。

1.1 创建Article实体类

首先,在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
}
登录后复制

1.2 创建ArticleMapper接口

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>
登录后复制

1.3创建ArticleController类

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>
登录后复制

至此,我们已经完成了后端的发布、编辑、删除文章功能。

2. 前端Vue3实现

2.1 创建文章列表页面组件

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>
登录后复制

2.2 创建文章发布页面组件

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>
登录后复制

2.3 创建文章编辑页面组件

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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:亿速云网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号