Advertisement
andersonalmada

Untitled

Jul 18th, 2022
1,000
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.12 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
  10.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. </head>
  12.  
  13. <body>
  14.  
  15.     <div id="app">
  16.         <div>
  17.             Id: <input type="text" name="" id="" v-model="id" /><br /><br />
  18.             name: <input type="text" name="" id="" v-model="name" /><br /><br />
  19.             price:
  20.             <input type="price" name="" id="" v-model="price" /><br /><br />
  21.  
  22.             <button @click="fetchProducts">Fetch products</button><br /><br />
  23.             <button @click="fetchProductById">Fetch Product By Id</button><br /><br />
  24.             <button @click="fetchProductByName">Fetch Product By name</button><br /><br />
  25.             <button @click="postProduct">Post Product</button><br /><br />
  26.             <button @click="putProduct">Put Product</button><br /><br />
  27.             <button @click="deleteProductById">Delete Product</button><br /><br />
  28.  
  29.             <p>{{ product }}</p>
  30.  
  31.             <ul>
  32.                 <li v-for="product in products" :key="product.id">
  33.                     <h4>{{ product.id }}</h4>
  34.                     <p>{{ product.name }}</p>
  35.                     <p>{{ product.price }}</p>
  36.                 </li>
  37.             </ul>
  38.         </div>
  39.     </div>
  40.  
  41.     <script>
  42.         var app = new Vue({
  43.             el: "#app",
  44.             data: {
  45.                 id: 0,
  46.                 name: "",
  47.                 price: "",
  48.                 product: {},
  49.                 products: [],
  50.                 baseURI: "http://localhost:8080/mandacaru4/api/products",
  51.             },
  52.             methods: {
  53.                 fetchProducts: function () {
  54.                     axios.get(this.baseURI).then((result) => {
  55.                         this.products = result.data;
  56.                     });
  57.                 },
  58.                 fetchProductById: function () {
  59.                     axios
  60.                         .get(this.baseURI + "/" + this.id)
  61.                         .then((result) => {
  62.                             this.product = result.data;
  63.                         })
  64.                         .catch(function (error) {
  65.                             console.log(error);
  66.                         });
  67.                 },
  68.                 fetchProductByName: function () {
  69.                     axios
  70.                         .get(this.baseURI + "/search?name=" + this.name)
  71.                         .then((result) => {
  72.                             this.product = result.data;
  73.                         })
  74.                         .catch(function (error) {
  75.                             console.log(error);
  76.                         });
  77.                 },
  78.                 postProduct: function () {
  79.                     let obj = {
  80.                         name: this.name,
  81.                         price: parseFloat(this.price),
  82.                     };
  83.  
  84.                     axios.post(this.baseURI, new URLSearchParams(obj), {
  85.                         'Content-Type': 'application/x-www-form-urlencoded;'
  86.                     }).then((result) => {
  87.                         this.product = result.data;
  88.                     });
  89.                 },
  90.                 putProduct: function () {
  91.                     let obj = {
  92.                         name: this.name,
  93.                         price: parseFloat(this.price),
  94.                     };
  95.  
  96.                     axios.put(this.baseURI + "/" + this.id, new URLSearchParams(obj), {
  97.                         'Content-Type': 'application/x-www-form-urlencoded;'
  98.                     }).then((result) => {
  99.                         this.product = result.data;
  100.                     });
  101.                 },
  102.                 deleteProductById: function () {
  103.                     axios.delete(this.baseURI + "/" + this.id).then((result) => {
  104.                         console.log(result.status);
  105.                     });
  106.                 },
  107.             },
  108.         });
  109.     </script>
  110.  
  111. </body>
  112.  
  113. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement