Feature:产品总览页 & Strapi API

app/pages/productions/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="productions-container">
+        <production-card
+v-for="production in productions" :key="production.title" :image-url="production.image_url"
+            :name="production.title" :description="production.summary" />
+    </div>
+
+</template>
+
+
+
+<script setup lang="ts">
+const { find } = useStrapi()
+
+const baseUrl = 'http://192.168.86.5:1337';
+
+class ProductionInfo {
+    title: string;
+    summary: string;
+    image_url: string;
+
+    constructor(title: string, summary: string, image_url: string) {
+        this.title = title;
+        this.summary = summary;
+        this.image_url = baseUrl + image_url;
+    }
+}
+
+interface StrapiProduction {
+    title: string;
+    summary: string;
+    production_image?: {
+        url: string;
+    };
+}
+
+const productions = ref<ProductionInfo[]>();
+
+onMounted(async () => {
+    const response = await find<StrapiProduction>('productions', {
+        populate: '*',
+    })
+    productions.value = response.data.map((item: StrapiProduction) => {
+        return new ProductionInfo(
+            item.title,
+            item.summary,
+            item.production_image?.url || ''
+        );
+    });
+});
+
+</script>
+
+<style scoped>
+.productions-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+}
+</style>