[+] docking backend

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --tab-width 4 --write src/"
   },
   "dependencies": {
+    "inversify": "^6.0.2",
     "pinia": "^2.1.7",
     "sass": "^1.69.5",
     "scss": "^0.2.4",

src/logic/constants.ts

@@ -0,0 +1,4 @@
+import urlJoin from "url-join";
+
+export const backendHost = "http://127.0.0.1:8086";
+export const backendUrl = urlJoin(backendHost, "data");

src/logic/getData.ts

@@ -0,0 +1,9 @@
+import urlJoin from "url-join";
+import { backendUrl, backendHost } from "./constants";
+
+export default function getData(path: string): string {
+    var request = new XMLHttpRequest();
+    request.open("get", urlJoin(backendUrl, path), false);
+    request.send();
+    return request.responseText;
+}

src/views/Admin/Book.vue

@@ -2,14 +2,14 @@
 import Sidebar from "@/components/Sidebar.vue";
 import { Options, Vue } from "vue-class-component";
 import JSONTable from "@/components/JSONTable.vue";
-import rawData from "@/json/book.json";
+import getData from "@/logic/getData";
 
 export default class Book extends Vue {
     bookData = "";
 
     created(): void {
         if (!localStorage.getItem("login")) this.$router.push("/login");
-        this.bookData = JSON.stringify(rawData);
+        this.bookData = getData("book.json");
     }
 }
 </script>

src/views/Admin/Manage.vue

@@ -10,14 +10,14 @@
 import Sidebar from "@/components/Sidebar.vue";
 import { Options, Vue } from "vue-class-component";
 import JSONTable from "@/components/JSONTable.vue";
-import rawData from "@/json/admin.json";
+import getData from "../../logic/getData";
 
 export default class Manage extends Vue {
     adminData = "";
 
     created(): void {
         if (!localStorage.getItem("login")) this.$router.push("/login");
-        this.adminData = JSON.stringify(rawData);
+        this.adminData = getData("admin.json");
     }
 }
 </script>

src/views/Admin/User.vue

@@ -2,14 +2,14 @@
 import Sidebar from "@/components/Sidebar.vue";
 import { Options, Vue } from "vue-class-component";
 import JSONTable from "@/components/JSONTable.vue";
-import rawData from "@/json/user.json";
+import getData from "@/logic/getData";
 
 export default class User extends Vue {
     userData = "";
 
     created(): void {
         if (!localStorage.getItem("login")) this.$router.push("/login");
-        this.userData = JSON.stringify(rawData);
+        this.userData = getData("user.json");
     }
 }
 </script>

tsconfig.app.json

@@ -1,12 +1,13 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.md", "src/**/*.json"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.ts", "src/**/*.vue", "src/**/*.md", "src/**/*.json"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "experimentalDecorators": true
   }
 }

tsconfig.node.json

@@ -11,6 +11,7 @@
     "composite": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "types": ["node"]
+    "types": ["node"],
+    "experimentalDecorators": true
   }
 }

tsconfig.vitest.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "composite": true,
     "lib": [],
-    "types": ["node", "jsdom"]
+    "types": ["node", "jsdom"],
+    "experimentalDecorators": true
   }
 }

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    devServer: {
+        proxy: 'http://127.0.0.1:8086',
+    }
+}