访问json得到pdf文件信息

.env

@@ -0,0 +1 @@
+VUE_APP_URL_ROOT='/'

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.6.1",
     "core-js": "^3.6.5",

public/db.json

@@ -0,0 +1,8 @@
+{
+  "categories": [
+    {
+      "name": "Computer",
+      "files": ["modern-full-stack.pdf", "gdb.pdf"]
+    }
+  ]
+}

src/App.vue

@@ -29,13 +29,22 @@
                         <td>{{ file }}</td>
                         <td class="text-center">
                           <a
-                            :href="`${url_root}pdfjs/web/viewer.html?file=${url_root}${file}`"
+                            :href="
+                              url_root +
+                              'pdfjs/web/viewer.html?file=' +
+                              url_root +
+                              category.name +
+                              '/' +
+                              file
+                            "
                             target="_blank"
                             ><i class="bi bi-book"></i
                           ></a>
                         </td>
                         <td class="text-center">
-                          <a :href="`${url_root}${file}`"><i class="bi bi-cloud-download"></i></a>
+                          <a :href="`${url_root}${category.name}/${file}`"
+                            ><i class="bi bi-cloud-download"></i
+                          ></a>
                         </td>
                       </tr>
                     </tbody>
@@ -53,20 +62,19 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import axios from 'axios';
 
 export default defineComponent({
   name: 'App',
   data() {
     return {
-      // url_root: '/~lixiangyu/',
-      url_root: '/',
-      categories: [
-        {
-          name: 'Computer',
-          files: ['modern-full-stack.pdf', 'gdb.pdf'],
-        },
-      ],
+      url_root: process.env.VUE_APP_URL_ROOT,
+      categories: [],
     };
   },
+  async created() {
+    const { data } = await axios.get(`${this.url_root}db.json`);
+    this.categories = data.categories;
+  },
 });
 </script>

yarn.lock

@@ -2140,6 +2140,13 @@ aws4@^1.8.0:
   resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.npmmirror.com/axios/download/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha1-gE5voeS5xSiFAd2d/1anoJQNINY=
+  dependencies:
+    follow-redirects "^1.14.4"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -4412,7 +4419,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.4:
   version "1.14.4"
   resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz?cache=0&sync_timestamp=1631622129411&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
   integrity sha1-g4/fSKi73XnlLuUfsclOPtmLk3k=