chore: converting it to vuejs

pnaik1 · pnaik1 · commit a0f1b553db4c · 2022-10-03T15:01:05.000+05:30
diff --git a/public/index.html b/public/index.html
@@ -17,61 +17,77 @@
   -->
 
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>API Level 0 Example - Node.js</title>
 
-<head>
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+      crossorigin="anonymous"
+    />
+  </head>
 
-  <meta charset="utf-8">
-  <title>API Level 0 Example - Node.js</title>
+  <body>
+    <div class="container" id="app">
+      <div>
+        <h1>API Level 0 Example - Node.js</h1>
+        <p class="lead">
+          This example showcases a basic mapping of a business operation to a
+          remote endpoint. By taking this approach, clients leverage the HTTP
+          protocol as a transport mechanism to call upon services. Application
+          engineers define their APIs using a broad interpretation of REST
+          fundamentals, encouraging freedom in design and quick prototyping.
+        </p>
 
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        <h2>Using the greeting service</h2>
 
-</head>
+        <form class="form-inline" @submit.prevent="getJSON">
+          <div class="form-group">
+            <label for="name">Name</label>
+            <input
+              type="text"
+              ref="name"
+              class="form-control"
+              id="name"
+              placeholder="World"
+            />
+          </div>
+          <button id="invoke" type="submit" class="btn btn-success">
+            Invoke
+          </button>
+        </form>
 
-<body>
-
-<div class="container">
-
-  <div>
-    <h1>API Level 0 Example - Node.js</h1>
-    <p class="lead">This example showcases a basic mapping of a business operation to a remote endpoint. By
-      taking this approach, clients leverage the HTTP protocol as a transport mechanism to call upon services.
-      Application engineers define their APIs using a broad interpretation of REST fundamentals, encouraging
-      freedom in design and quick prototyping.
-    </p>
-
-    <h2>Using the greeting service</h2>
-
-    <form class="form-inline">
-      <div class="form-group">
-        <label for="name">Name</label>
-        <input type="text" class="form-control" id="name" placeholder="World">
+        <h3>Result:</h3>
+        <pre><code id="greeting-result">{{greetingResult}}</code></pre>
       </div>
-      <button id="invoke" type="submit" class="btn btn-success">Invoke</button>
-    </form>
-
-    <h3>Result:</h3>
-    <pre><code id="greeting-result">Invoke the service to see the result.</code></pre>
-  </div>
-</div>
-
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
-        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
-        crossorigin="anonymous"></script>
-
-<script>
-    $(document).ready(() => {
-       $("#invoke").click((e) => {
-          const n = $("#name").val() || "World";
-          $.getJSON(`/api/greeting?name=${n}`, (res) => {
-              $("#greeting-result").html(JSON.stringify(res));
-          });
-          e.preventDefault();
-       });
-    });
-</script>
-
-</body>
-
+    </div>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"
+      integrity="sha512-H8u5mlZT1FD7MRlnUsODppkKyk+VEiCmncej8yZW1k/wUT90OQon0F9DSf/2Qh+7L/5UHd+xTLrMszjHEZc2BA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script>
+      const app = new Vue({
+        el: "#app",
+        data: {
+          greetingResult: "Invoke the service to see the result.",
+        },
+        methods: {
+          async getJSON(e) {
+            const name = this.$refs.name.value;
+            const result = await fetch(`/api/greeting?name=${name}`);
+            if (!result.ok) {
+              const message = `Error: ${result.status} - ${result.statusText}`;
+              throw new Error(message);
+            }
+            const data = await result.json();
+            this.greetingResult = JSON.stringify(data);
+          },
+        },
+      });
+    </script>
+  </body>
 </html>
