Vue Frontend Implementation

src/utils/httpClient.js

// Custom HTTP client instance
import axios from 'axios';
// Base URL configuration
const apiBase = 'http://localhost:8080';
const httpClient = axios.create({ baseURL: apiBase })

// Response interceptor
httpClient.interceptors.response.use(
    successResponse => {
        return successResponse.data;
    },
    error => {
        alert('Server Error Occurred');
        return Promise.reject(error);
    }
)

export default httpClient;

src/serivces/contant.js

import http from '@/utils/httpClient.js'

export function fetchAllContentService() {
    return http.get("/content/fetchAll");
}

export function queryContentService(filters) {
    return http.get("/content/query", { params: filters })
}

export function createContentService(contentData) {
    return http.post("/content/create", contentData)
}

src/ContentManagement.vue

<script setup>
import { ref } from "vue";
import {fetchAllContentService, queryContentService, createContentService} from "@/services/content.js";

// Reactive data properties
const contentCollection = ref([]);
const filterOptions = ref({
  contentType: "",
  publicationStatus: "",
});

const loadAllContent = async function () {
  contentCollection.value = await fetchAllContentService();
};

loadAllContent();

const performSearch = async function () {
  contentCollection.value = await queryContentService({ ...filterOptions.value });
};

const resetFilters = async function () {
  filterOptions.value.contentType = "";
  filterOptions.value.publicationStatus = "";
  contentCollection.value = await fetchAllContentService();
};

const insertNewContent = async function () {
  let newContent = {
    title: "Zelensky: Russian casualties 5x Ukrainian losses",
    category: "Military",
    publishDate: "2024-02-25",
    status: "Draft"
  };
  await createContentService(newContent);
  contentCollection.value = await fetchAllContentService();
};
</script>

<template>
  <div>
    Content Category:
    <input type="text" v-model="filterOptions.contentType" /> Publication Status:
    <input type="text" v-model="filterOptions.publicationStatus" />

    <button @click="performSearch">Search</button>
    <button @click="resetFilters">Reset</button>
    <button @click="insertNewContent">Add New</button>

    <br />
    <br />
    <table border="1 solid" colspa="0" cellspacing="0">
      <tr>
        <th>Title</th>
        <th>Category</th>
        <th>Publish Date</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
      <tr v-for="(item, index) in contentCollection">
        <td>{{ item.title }}</td>
        <td>{{ item.category }}</td>
        <td>{{ item.publishDate }}</td>
        <td>{{ item.status }}</td>
        <td>
          <button>Edit</button>
          <button>Delete</button>
        </td>
      </tr>
    </table>
  </div>
</template>

Spring Boot Backend Implementation

Content.java

public class Content {
    private String title;
    private String category;
    private String publishDate;
    private String status;

    public Content(String title, String category, String publishDate, String status) {
        this.title = title;
        this.category = category;
        this.publishDate = publishDate;
        this.status = status;
    }
    
    public Content() {
    }

    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 getPublishDate() {
        return publishDate;
    }

    public void setPublishDate(String publishDate) {
        this.publishDate = publishDate;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    @Override
    public String toString() {
        return "Content{" +
                "title='" + title + '\'' +
                ", category='" + category + '\'' +
                ", publishDate='" + publishDate + '\'' +
                ", status='" + status + '\'' +
                '}';
    }
}

ContentController.java

@RestController
@RequestMapping("/content")
@CrossOrigin
public class ContentController {

    private List<Content> contentStore = new ArrayList<>();
    // Mock data initialization
    {
        contentStore.add(new Content("Hangzhou Bentley driver assault case - Criminal detention", "Current Affairs", "2023-10-15", "Published"));
        contentStore.add(new Content("Huang Xiaoming congratulates cousin Chen Meng", "Sports", "2023-09-15", "Draft"));
        contentStore.add(new Content("Mengzhou Lunar Mission: How to take Chinese to moon", "Aerospace", "2023-09-25", "Published"));
        contentStore.add(new Content("Argentina Trump embraces real Trump", "Politics", "2023-09-25", "Published"));
        contentStore.add(new Content("Shanxi coking plant gas poisoning kills 4", "Current Affairs", "2024-02-25", "Published"));
    }

    // Create new content
    @PostMapping("/create")
    public String create(@RequestBody Content content) {
        contentStore.add(content);
        contentStore.forEach(System.out::println);
        return "Creation Successful";
    }

    // Retrieve all content
    @GetMapping("/fetchAll")
    public List<Content> getAll(HttpServletResponse response) {
        return contentStore;
    }

    // Search by category and status
    @GetMapping("/query")
    public List<Content> query(
        @RequestParam(value = "contentType") String contentType, 
        @RequestParam(value = "publicationStatus") String publicationStatus
    ) {
        return contentStore.stream()
            .filter(item -> item.getCategory().equals(contentType) && item.getStatus().equals(publicationStatus))
            .collect(Collectors.toList());
    }
}