vue + springboot 案例 代码

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:在视频的基础上增加了重置和添加功能