Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

    <div id="app">
        <div>
            Id: <input type="text" name="" id="" v-model="id" /><br /><br />
            name: <input type="text" name="" id="" v-model="name" /><br /><br />
            price:
            <input type="price" name="" id="" v-model="price" /><br /><br />

            <button @click="fetchProducts">Fetch products</button><br /><br />
            <button @click="fetchProductById">Fetch Product By Id</button><br /><br />
            <button @click="fetchProductByName">Fetch Product By name</button><br /><br />
            <button @click="postProduct">Post Product</button><br /><br />
            <button @click="putProduct">Put Product</button><br /><br />
            <button @click="deleteProductById">Delete Product</button><br /><br />

            <p>{{ product }}</p>

            <ul>
                <li v-for="product in products" :key="product.id">
                    <h4>{{ product.id }}</h4>
                    <p>{{ product.name }}</p>
                    <p>{{ product.price }}</p>
                </li>
            </ul>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                id: 0,
                name: "",
                price: "",
                product: {},
                products: [],
                baseURI: "http://localhost:8080/api/products",
            },
            methods: {
                fetchProducts: function () {
                    axios.get(this.baseURI).then((result) => {
                        this.products = result.data;
                    });
                },
                fetchProductById: function () {
                    axios
                        .get(this.baseURI + "/" + this.id)
                        .then((result) => {
                            this.product = result.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                fetchProductByName: function () {
                    axios
                        .get(this.baseURI + "/search?name=" + this.name)
                        .then((result) => {
                            this.product = result.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                postProduct: function () {
                    let obj = {
                        name: this.name,
                        price: parseFloat(this.price),
                    };

                    axios.post(this.baseURI, obj).then((result) => {
                        this.product = result.data;
                    });
                },
                putProduct: function () {
                    let obj = {
                        name: this.name,
                        price: parseFloat(this.price),
                    };

                    axios.put(this.baseURI + "/" + this.id, obj).then((result) => {
                        this.product = result.data;
                    });
                },
                deleteProductById: function () {
                    axios.delete(this.baseURI + "/" + this.id).then((result) => {
                        console.log(result.status);
                    });
                },
            },
        });
    </script>

</body>

</html>