vue前端代码
src/util/request.js
//定制请求的实例
import axios from 'axios';
//定义一个变量,记录公共的前缀 , baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(
result=>{
return result.data;
},
err=>{
alert('服务异常');
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
export default instance;
src/api/article.js
import request from '@/util/request.js'
export function getAllArticleService() {
return request.get("/article/getAll");
}
export function searchArticleService(searchConditions) {
return request.get("/article/search", { params: searchConditions })
}
export function addArticleService(article) {
return request.post("/article/add", article)
}
src/Article.vue
<script setup>
import { ref } from "vue";
import {getAllArticleService,searchArticleService,addArticleService} from "@/api/article.js";
//定义响应式数据
const articleList = ref([]);
const searchConditions = ref({
category: "",
state: "",
});
const getAllArticles = async function () {
articleList.value = await getAllArticleService();
};
getAllArticles();
const search = async function () {
articleList.value = await searchArticleService({ ...searchConditions.value });
};
const clear = async function () {
searchConditions.value.category = "";
searchConditions.value.state = "";
articleList.value = await getAllArticleService();
};
const add = async function () {
let article = {
title: "泽连斯基:俄军死亡人数是乌军5倍",
category: "军事",
time: "2024-02-25",
state: "草稿"
};
await addArticleService(article);
articleList.value = await getAllArticleService();
};
</script>
<template>
<div>
文章分类:
<input type="text" v-model="searchConditions.category" /> 发布状态:
<input type="text" v-model="searchConditions.state" />
<button v-on:click="search">搜索</button>
<button v-on:click="clear">重置</button>
<button v-on:click="add">增加</button>
<br />
<br />
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(article, index) in articleList">
<td>{{ article.title }}</td>
<td>{{ article.category }}</td>
<td>{{ article.time }}</td>
<td>{{ article.state }}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
</template>
springboot后端代码
Article
public class Article {
private String title;
private String category;
private String time;
private String state;
public Article(String title, String category, String time, String state) {
this.title = title;
this.category = category;
this.time = time;
this.state = state;
}
public Article() {
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
@Override
public String toString() {
return "Article{" +
"title='" + title + '\'' +
", category='" + category + '\'' +
", time='" + time + '\'' +
", state='" + state + '\'' +
'}';
}
}
ArticleController
@RestController
@RequestMapping("/article")
@CrossOrigin//支持跨域
public class ArticleController {
private List<Article> articleList = new ArrayList<>();
//模拟数据
{
articleList.add(new Article("杭州宾利司机持械伤人 已被刑拘", "时事", "2023-10-15", "已发布"));
articleList.add(new Article("黄晓明祝贺表妹陈梦:你真的很棒", "体育", "2023-09-15", "草稿"));
articleList.add(new Article("梦舟揽月如何带中国人登月", "航天", "2023-09-25", "已发布"));
articleList.add(new Article("“阿根廷特朗普”亲密拥抱特朗普", "政治", "2023-09-25", "已发布"));
articleList.add(new Article("山西一焦化厂煤气中毒事故致4死", "时事", "2024-02-25", "已发布"));
}
//新增文章
@PostMapping("/add")
public String add(@RequestBody Article article) {
articleList.add(article);
articleList.forEach(System.out::println);
return "新增成功";
}
//获取所有文章信息
@GetMapping("/getAll")
public List<Article> getAll(HttpServletResponse response) {
return articleList;
}
//根据文章分类和发布状态搜索
@GetMapping("/search")
public List<Article> search(@RequestParam(value = "category") String category, @RequestParam(value = "state") String state) {
return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());
}
}
参考视频
ps:在视频的基础上增加了重置和添加功能