Add vue-router, new NavBar Component, Change path to request param, A…

…dd post functionality from UI

frontend-mark-alive/package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "axios": "^1.6.2",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.0",

frontend-mark-alive/src/App.vue

@@ -1,11 +1,11 @@
 <script setup>
-import BookmarkList from "./components/BookmarkList.vue";
+import NavBar from "./components/NavBar.vue";
 </script>
 
 <template>
   <div>
     <h1>Mark-Alive</h1>
-    <BookmarkList />
+    <NavBar />
   </div>
 </template>
 

frontend-mark-alive/src/components/NavBar.vue

@@ -0,0 +1,38 @@
+<template lang="">
+  <div>
+    <ul>
+      <li><router-link to="/">Home</router-link></li>
+      <li><router-link to="/bookmarks">Your Saved Bookmarks</router-link></li>
+    </ul>
+    <router-view></router-view>
+  </div>
+</template>
+<script setup></script>
+<style>
+ul {
+  position: sticky;
+  top: 0;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+  background-color: #111;
+}
+</style>

frontend-mark-alive/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import router from "./router/index";
 
-createApp(App).mount("#app");
+createApp(App).use(router).mount("#app");

frontend-mark-alive/src/router/index.js

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home.vue";
+import BookmarkList from "../views/BookmarkList.vue";
+
+const routes = [
+  { path: "/", name: "Home", component: Home },
+  { path: "/bookmarks", name: "BookmarkList", component: BookmarkList },
+];
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

frontend-mark-alive/src/server_config/api.js

@@ -0,0 +1,15 @@
+import axios, { Axios } from "axios";
+
+const baseUrl = "http://localhost:8080";
+const viewAllBookmarks = "/bookmarks";
+const postBookmarkRelative = "/bookmark";
+
+export function getBookmarks() {
+  return axios.get(baseUrl.concat(viewAllBookmarks)).then((res) => res.data);
+}
+
+export function postBookmark(resource) {
+  return axios
+    .post(baseUrl.concat(postBookmarkRelative).concat("?url=").concat(resource))
+    .then((res) => res.data);
+}

frontend-mark-alive/src/components/BookmarkList.vue → frontend-mark-alive/src/views/BookmarkList.vue

@@ -1,5 +1,6 @@
 <template lang="">
   <div>
+    <NavBar />
     <table>
       <thead>
         <tr>
@@ -8,7 +9,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="bookmark in bookMarkList">
+        <tr v-for="bookmark in bookMarkList" v-bind:key="bookmark.id">
           <td>
             {{ bookmark.id }}
           </td>
@@ -24,6 +25,7 @@
 <script setup>
 import { getBookmarks } from "../service/BookmarkService";
 import { ref, onMounted } from "vue";
+
 const bookMarkList = ref(null);
 
 onMounted(() => {

frontend-mark-alive/src/views/Home.vue

@@ -0,0 +1,24 @@
+<template lang="">
+  <div>
+    <label for="url">Enter your bookmark URL</label>
+    <input
+      type="text"
+      v-model="url"
+      name="url"
+      id=""
+      placeholder="Enter URL.."
+    />
+    <button @click="submit">Go!</button>
+  </div>
+</template>
+<script setup>
+import { postBookmark } from "../server_config/api";
+import { ref } from "vue";
+const url = ref("");
+function submit() {
+  postBookmark(url.value)
+    .then((res) => console.log(res))
+    .catch((err) => console.log(err));
+}
+</script>
+<style lang=""></style>

src/main/java/com/ad/markalive/controller/BookmarkController.java

@@ -2,10 +2,7 @@
 
 import com.ad.markalive.model.Bookmark;
 import com.ad.markalive.service.BookmarkService;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
 
@@ -22,8 +19,8 @@ public BookmarkController(BookmarkService bookmarkService) {
     public List<Bookmark> getAllBookmarks(){
         return bookmarkService.getAllBookmarks();
     }
-    @PostMapping("/bookmark/{url}")
-    public void addBookmark(@PathVariable String url){
+    @PostMapping("/bookmark")
+    public void addBookmark(@RequestParam String url){
         bookmarkService.createBookmark(url);
     }
 }