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>
            Login: <input type="text" name="" id="" v-model="email" /><br /><br />
            Password: <input type="password" name="" id="" v-model="password" /><br /><br />
            <button @click="login">Login</button><br /><br />

            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: {
                email: "gomes@gmail.com",
                password: "senha123",
                token: "",
                id: 0,
                name: "",
                price: "",
                product: {},
                products: [],
                baseURI: "http://localhost:8080/api/products",
                oauth: "http://localhost:8080/oauth/token"
            },
            methods: {
                login: function () {
                    var formData = new FormData();
                    formData.append('username', this.email);
                    formData.append('password', this.password);
                    formData.append('grant_type', "password");

                    axios.post(this.oauth, formData, { auth: { username: 'mandacaru', password: 'senha123' } }).then((result) => {
                        this.token = result.data.access_token;
                        console.log(this.token);
                    });
                },

                fetchProducts: function () {
                    const config = {
                        headers: { Authorization: "Bearer " + this.token }
                    };

                    axios.get(this.baseURI, config).then((result) => {
                        this.products = result.data;
                    });
                },
                fetchProductById: function () {
                    const config = {
                        headers: { Authorization: "Bearer " + this.token }
                    };

                    axios
                        .get(this.baseURI + "/" + this.id, config)
                        .then((result) => {
                            this.product = result.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                fetchProductByName: function () {
                    const config = {
                        headers: { Authorization: "Bearer " + this.token }
                    };

                    axios
                        .get(this.baseURI + "/search?name=" + this.name, config)
                        .then((result) => {
                            this.product = result.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                postProduct: function () {
                    const config = {
                        headers: { Authorization: "Bearer " + this.token }
                    };

                    let obj = {
                        name: this.name,
                        price: parseFloat(this.price),
                    };

                    axios.post(this.baseURI, obj, config).then((result) => {
                        this.product = result.data;
                    });
                },
                putProduct: function () {
                    const config = {
                        headers: { Authorization: "Bearer " + this.token }
                    };

                    let obj = {
                        name: this.name,
                        price: parseFloat(this.price),
                    };

                    axios.put(this.baseURI + "/" + this.id, obj, config).then((result) => {
                        this.product = result.data;
                    });
                },
                deleteProductById: function () {
                    const config = {
                        headers: { Authorization: "Bearer " + this.token }
                    };

                    axios.delete(this.baseURI + "/" + this.id, config).then((result) => {
                        console.log(result.status);
                    });
                },
            },
        });
    </script>

</body>

</html>