백엔드 프레임워크로 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
}에서 ArticleMapper 인터페이스 생성
com.example.demo.mapper 패키지 아래에 ArticleMapper.java라는 새 인터페이스를 생성하고 다음 콘텐츠를 추가합니다. 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);
}在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);
}
}在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("文章删除成功");
}
}至此，我们已经完成了后端的发布、编辑、删除文章功能。
在src/views目录下创建一个名为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>在src/views目录下创建一个名为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')">发布文章</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 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>com.example.demo.service 생성 .impl 패키지 아래에 ArticleServiceImpl.java라는 새 클래스를 만들고 다음 콘텐츠를 추가합니다. rrreee
1.3com.example.demo에서 ArticleController 클래스 🎜🎜를 만듭니다. 컨트롤러 패키지 아래에 ArticleController.java라는 새 클래스를 만들고 다음 콘텐츠를 추가합니다. 🎜rrreee🎜이 시점에서 백엔드 기사 게시, 편집 및 삭제 기능이 완료되었습니다. . 🎜🎜2. 프런트 엔드 Vue3 구현🎜🎜2.1 기사 목록 페이지 구성 요소 만들기🎜🎜 src/views 디렉터리에 ArticleList.vue라는 새 구성 요소를 만들고 다음 콘텐츠: 🎜rrreee🎜2.2 기사 게시 페이지 구성 요소 만들기🎜🎜 src/views 디렉터리에 CreateArticle.vue라는 새 구성 요소를 만들고 다음 콘텐츠를 추가합니다. 🎜rrreee 🎜2.3 기사 편집 페이지 구성 요소 만들기🎜🎜 src/views 디렉터리에 EditArticle.vue라는 새 구성 요소를 만들고 다음 콘텐츠를 추가합니다. 🎜rrreee🎜 EditArticle.vue가 정의되어 있으며 여기에는 id라는 속성이 필요합니다. fetchArticle 함수는 기사 정보를 가져와 양식에 채우기 위해 구성 요소가 로드될 때 호출됩니다. "기사 업데이트" 버튼을 클릭하면 submitForm 함수가 호출되어 기사를 업데이트하기 위해 양식 데이터를 백엔드로 보냅니다. 🎜위 내용은 SpringBoot 및 Vue3 기반의 블로그 플랫폼에서 기사 게시, 편집 및 삭제 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
