Bagaimana untuk melaksanakan fungsi penerbitan, penyuntingan dan pemadaman artikel pada platform blog berdasarkan SpringBoot dan Vue3

1. Pelaksanaan Backend Spring Boot

Kami akan menggunakan Spring Boot sebagai rangka kerja backend dan MySQL sebagai pangkalan data.

1.1 Cipta kelas entiti Artikel

Mula-mula, buat kelas baharu bernama Article.java di bawah pakej com.example.demo.entity dan tambah kandungan berikut:

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

1.2 Cipta antara muka ArticleMapper

Buat antara muka baharu bernama com.example.demo.mapper di bawah pakej ArticleMapper.java dan tambah kandungan berikut:

@Mapper
public interface ArticleMapper {
    List<Article> findAll();
    Article findById(Integer id);
    void insert(Article article);
    void update(Article article);
    void delete(Integer id);
}

Buat antara muka baharu bernama di bawah pakej com.example.demo.service.impl Cipta kelas baharu untuk ArticleServiceImpl.java dan tambahkan yang berikut:

@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 Cipta kelas ArticleController

Buat kelas baharu bernama com.example.demo.controller di bawah pakej ArticleController.java dan tambahkan Kandungan berikut:

@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("文章删除成功");
    }
}

Pada ketika ini, kami telah menyelesaikan penerbitan bahagian belakang, penyuntingan dan pemadaman fungsi artikel.

2. Pelaksanaan Vue3 bahagian hadapan

2.1 Buat komponen halaman senarai artikel

Buat komponen baharu bernama src/views dalam direktori ArticleList.vue dan tambah kandungan berikut :

<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 Cipta komponen halaman penerbitan artikel

Buat komponen baharu bernama src/views dalam direktori CreateArticle.vue dan tambah kandungan berikut:

rreee

2.3 Cipta komponen halaman penyuntingan artikel

Buat komponen baharu bernama src/views dalam direktori EditArticle.vue dan tambah kandungan berikut:

<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>

mentakrifkan komponen bernama EditArticle.vue Komponen baharu memerlukan atribut dipanggil id. Fungsi fetchArticle akan dipanggil apabila komponen dimuatkan untuk mendapatkan maklumat artikel dan mengisinya ke dalam borang. Apabila butang "Kemas Kini Artikel" diklik, fungsi submitForm dipanggil untuk menghantar data borang ke bahagian belakang untuk mengemas kini artikel.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penerbitan, penyuntingan dan pemadaman artikel pada platform blog berdasarkan SpringBoot dan Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!