feat: call api homepage

.env

@@ -0,0 +1,2 @@
+VITE_BASE_DOMAIN = "https://api.baitaptracnghiem.com"
+VITE_BASE_URL = "/api/v1/web"

package.json

@@ -13,9 +13,11 @@
   "dependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "axios": "^1.7.2",
     "primeicons": "^7.0.0",
     "vue": "^3.4.21",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue3-lazyload": "^0.3.8"
   },
   "devDependencies": {
     "@types/node": "^20.14.5",

src/api/RepositoryFactory.ts

@@ -0,0 +1,10 @@
+import homeRepository from "./homeRepository";
+
+
+const repositories = {
+  home: homeRepository,
+};
+
+export const RepositoryFactory = {
+  get: (name: (keyof typeof repositories)) => repositories[name],
+};

src/api/axios/index.ts

@@ -0,0 +1,15 @@
+import axios from "axios"
+
+const baseDomain = import.meta.env.VITE_BASE_DOMAIN;
+const baseURL = baseDomain + import.meta.env.VITE_BASE_URL
+
+const AxiosClient = axios.create({
+  baseURL,
+  headers: {
+    "Content-Type": "application/json",
+    "Access-Control-Allow-Origin": "*",
+  },
+  timeout: 10000 * 5, // Wait for 5 seconds
+});
+
+export default AxiosClient;

src/api/homeRepository.ts

@@ -0,0 +1,10 @@
+import AxiosClient from "./axios";
+
+const resource = "/index";
+
+export default {
+  get() {
+    return AxiosClient.get(`${resource}`);
+  }
+}
+

src/components/Card.vue

@@ -1,12 +1,26 @@
 <template lang="">
   <div>
     <router-link to="">
-      <img src="https://api.baitaptracnghiem.com/storage/images/76ji3bW7kV8MFwkTr1VI123b0E7IBDbH1me2pmey.webp" alt="exercise-background" class="w-fit rounded-lg object-contain"/>
-      <div class="text-md mt-3">Thi thử THPT môn Sinh Học online - Đề minh họa năm 2024 của Bộ GD&ĐT</div>
+      <div class="w-full h-40">
+        <img 
+          v-lazy="{ src: props.avatar }" 
+          class="rounded-lg object-cover w-full h-40"
+        />
+      </div>
+      <div class="text-md mt-3">{{ props.title }}</div>
     </router-link>
   </div>
 </template>
 
 <script setup>
-
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    avatar: {
+      type: String,
+      required: true,
+    },
+  });
 </script>

src/components/ListCard.vue

@@ -1,10 +1,15 @@
 <template lang="">
-  <div>
+  <div v-if="props.exams.length > 0">
     <router-link :to="props.url" class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">
       <h1 class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">{{ title }}</h1>
     </router-link>
     <div class="grid md:grid-cols-3 gap-x-8 md:gap-y-10 gap-y-5 grid-cols-1 mb-10">
-      <Card v-for="n in 6" :key="n"/>
+      <Card 
+        v-for="exam in props.exams" 
+        :key="exam.slug"
+        :avatar="exam.avatar"
+        :title="exam.name"
+      />
     </div>
   </div>
 </template>
@@ -20,6 +25,10 @@
     url: {
       type: String,
       required: true,
+    },
+    exams: {
+      type: Array,
+      required: true,
     }
   });
 </script>

src/main.ts

@@ -2,8 +2,14 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import router from './router'
+import VueLazyLoad from 'vue3-lazyload'
+import loading from "@/assets/avatarDefault.webp";
 
 const app = createApp(App)
 
 app.use(router)
+app.use(VueLazyLoad, {
+  loading,
+  error: loading,
+})
 app.mount('#app')

src/views/HomePage.vue

@@ -1,8 +1,28 @@
 <template lang="">
-  <ListCard title="Đề thi THPT" url="/danh-sach-bai-tap/toan-de-thi-thpt"/>
-  <ListCard title="Lớp 12" url="/danh-sach-bai-tap/lop-12"/>
+  <div v-if="homeData.value && homeData.value.categories">
+    <ListCard 
+      v-for="category in homeData.value.categories"
+      :title="category.name" 
+      :key="category.slug"
+      :exams="category.exams"
+      :url="`/danh-sach-bai-tap/${category.slug}`"
+    />
+  </div>
+  <div v-else>Loading...</div>
+
 </template>
 
-<script setup>
+<script setup lang="ts">
   import ListCard from"@/components/ListCard.vue";
+  import { RepositoryFactory } from "@/api/RepositoryFactory";
+  import { onMounted, reactive } from "vue";
+
+  const homeData = reactive([]);
+
+  onMounted(async ()=> {
+    const HomeRepository = RepositoryFactory.get("home");
+    const { data } = await HomeRepository.get();
+    homeData.value = data;
+  });
+  
 </script>

yarn.lock

@@ -676,6 +676,11 @@ array-ify@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
   integrity sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 autoprefixer@^10.4.19:
   version "10.4.19"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz"
@@ -688,6 +693,15 @@ autoprefixer@^10.4.19:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
+  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -799,6 +813,13 @@ color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
@@ -887,6 +908,11 @@ de-indent@^1.0.2:
   resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
@@ -1039,6 +1065,11 @@ find-up@^7.0.0:
     path-exists "^5.0.0"
     unicorn-magic "^0.1.0"
 
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
 foreground-child@^3.1.0:
   version "3.2.1"
   resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz"
@@ -1047,6 +1078,15 @@ foreground-child@^3.1.0:
     cross-spawn "^7.0.0"
     signal-exit "^4.0.1"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fraction.js@^4.3.7:
   version "4.3.7"
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
@@ -1364,6 +1404,18 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.3"
     picomatch "^2.3.1"
 
+[email protected]:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mimic-fn@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
@@ -1586,6 +1638,11 @@ primeicons@^7.0.0:
   resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-7.0.0.tgz#6b25c3fdcb29bb745a3035bdc1ed5902f4a419cf"
   integrity sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
@@ -1901,6 +1958,11 @@ vscode-uri@^3.0.8:
   resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
+vue-demi@^0.12.5:
+  version "0.12.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
+  integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
+
 vue-router@4:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.3.tgz#7505509d429a36694b12ba1f6530016c5ce5f6bf"
@@ -1925,6 +1987,13 @@ vue-tsc@^2.0.6:
     "@vue/language-core" "2.0.21"
     semver "^7.5.4"
 
+vue3-lazyload@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/vue3-lazyload/-/vue3-lazyload-0.3.8.tgz#82749a6b89a4d475c9a7fa409d0cff6c4abbd59d"
+  integrity sha512-UiJHRT7mzry102WbhtrRgJh+f8Z8u4Z+H1RU4dvPmQeq7wFSDFxZB9iJOWGihH2FscXN/8rMGLDOQJAmjwqpCg==
+  dependencies:
+    vue-demi "^0.12.5"
+
 vue@^3.4.21:
   version "3.4.29"
   resolved "https://registry.npmjs.org/vue/-/vue-3.4.29.tgz"