update router index, add Category/ view

ShoppingCart/Frondend/README.md

@@ -33,7 +33,7 @@ npm run serve
 
 | API | Type | Purpose | Example cmd | Comment|
 | ----- | -------- | ---- | ----- | ---- |
-| Test |  | | |
+| http://localhost:8080/admin/category/add |  add  category | | |
 
 
 

ShoppingCart/Frondend/ecommerce-ui/src/router/index.js

@@ -1,29 +1,38 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import HomeView from "../views/HomeView.vue";
 
-Vue.use(VueRouter)
+import AddCategory from "../views/Category/AddCategory";
+
+
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: HomeView
+    path: "/",
+    name: "home",
+    component: HomeView,
   },
   {
-    path: '/about',
-    name: 'about',
+    path: "/about",
+    name: "about",
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
-]
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+  },
+  {
+    path: "/admin/category/add",
+    name: "AddCategory",
+    component: AddCategory,
+  },
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

ShoppingCart/Frondend/ecommerce-ui/src/views/Category/AddCategory.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="container">
+      <div class="row">
+        <div class="col-12 text-center">
+          <h4 class="pt-3">Add new Category</h4>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-3"></div>
+        <div class="col-md-6 px-5 px-md-0">
+         <form>
+           <div class="form-group">
+             <label>Category Name</label>
+             <input type="text" class="form-control" v-model="categoryName" required>
+           </div>
+           <div class="form-group">
+             <label>Description</label>
+             <input type="text" class="form-control" v-model="description" required>
+           </div>
+           <div class="form-group">
+             <label>ImageURL</label>
+             <input type="url" class="form-control" v-model="imageURL" required>
+           </div>
+           <button type="button" class="btn btn-primary">Submit</button>
+         </form>
+        </div>
+        <div class="col-3"></div>
+      </div>
+   </div>
+ </template>
+
+ <script>
+ export default {
+   data(){
+     return {
+       categoryName : null,
+       description : null,
+       imageURL : null,
+     }
+   },
+   props : [],
+   methods : {
+     
+   }
+ }
+ </script>
+
+ <style scoped>
+ h4 {
+   font-family: 'Roboto', sans-serif;
+   color: #484848;
+   font-weight: 700;
+ }
+ </style>