市场api开发

src/api/market/api.ts

@@ -1,19 +1,20 @@
 import request from '@/util/request';
-import type {projectData, searchProjectListParam} from "@/type/market/Market.ts";
+import type {ProjectData, SearchProjectListParam} from "@/type/market/Market.ts";
+import type {PageResult} from "@/type/common/pageResult.ts";
 
 // 查询项目信息
-export async function searchProject(searchParam: searchProjectListParam):Promise<projectData[]>{
+export async function searchProject(searchParam: SearchProjectListParam):Promise<PageResult<ProjectData>>{
     console.log(searchParam)
     try {
         const response = await request({
             url: '/project/search',
             method: "post",
             data: searchParam
         })
-        return response.data as projectData[];
+        return response.data as PageResult<ProjectData>;
     } catch (error) {
         console.error('查询项目请求失败：', error);
-        return [];
+        return { respList: [], total: 0 };
     }
 }
 

src/components/market/MarketCard.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type projectData } from '@/type/market/Market.ts';
-
+import { type ProjectData } from '@/type/market/Market.ts';
+import {downloadProject} from '@/api/market/api'
 // 使用 defineProps 来定义组件的 props
 const props = defineProps<{
-  marketData: projectData;
+  marketData: ProjectData;
 }>();
 const clickProjectEmits = defineEmits(['clickProject']);
 const clickProject = function (){

src/type/common/pageResult.ts

@@ -0,0 +1,7 @@
+// 分页返回类
+export interface PageResult<T> {
+
+    respList: T[];
+
+    total: number;
+}

src/type/market/Market.ts

@@ -1,4 +1,4 @@
-export interface projectData {
+export interface ProjectData {
         // 项目id
         id: string;
         // 项目名称
@@ -19,7 +19,7 @@ export interface projectData {
         nickname: string;
 }
 
-export interface searchProjectListParam{
+export interface SearchProjectListParam {
     name: string;
 
     language: string;

src/views/market/list.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import marketCard from '@/components/market/MarketCard.vue'
-import type {projectData, searchProjectListParam} from "@/type/market/Market.ts";
-import {reactive, ref, computed, watch} from "vue";
+import type {ProjectData, SearchProjectListParam} from "@/type/market/Market.ts";
+import {reactive, ref, computed, watch, onMounted} from "vue";
 import project from "./project.vue";
 // import {tr} from "vuetify/locale";
 import {searchProject} from '@/api/market/api.ts'
-const searchParam = reactive<searchProjectListParam>({
+const searchParam = reactive<SearchProjectListParam>({
   name: '', // 确保这里有一个默认值
   language: '',
   max: 1000,
@@ -17,9 +17,12 @@ const searchParam = reactive<searchProjectListParam>({
 const searchEvent = async function () {
   console.log('Search parameters:', searchParam); // 检查 searchParam 的值
   const res = await searchProject(searchParam);
-  marketCards.splice(0, marketCards.length, ...res);
+  marketCards.splice(0, marketCards.length, ...res.respList);
 };
 
+onMounted(()=>{
+  searchEvent();
+})
 
 // 搜索框宽度调整
 const searchInputStyle = reactive({
@@ -71,13 +74,13 @@ const selectLanguage = (language: string) => { console.log(`选择了语言: ${l
 
 // 处理项目卡片点击事件
 const projectPopDialog = ref(false)
-const handleCardEvent = function (project: projectData){
+const handleCardEvent = function (project: ProjectData){
   projectPopDialog.value = true;
   clickedProjectData = project;
 }
 
 // 列表点击后传递至项目详情页
-let clickedProjectData: projectData = reactive<projectData>({
+let clickedProjectData: ProjectData = reactive<ProjectData>({
   id: '',
   name: '',
   introduce: '',
@@ -97,14 +100,7 @@ const handleCardClose = function (){
 
 
 // 创建 15 条模拟数据
-const marketCards = reactive<projectData[]>([
-  {id:'0', name: 'Product 1', introduce: 'introduce for product 1', price: 10, cover: '/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
-  {id:'1', name: 'Product 2', introduce: 'introduce for product 1', price: 10, cover: '/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
-  {id:'2', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
-  {id:'3', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
-  {id:'4', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
-  {id:'5', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
-]);
+const marketCards = reactive<ProjectData[]>([]);
 </script>
 
 <template>

src/views/market/project.vue

@@ -12,7 +12,7 @@
           <p>from</p>
           <p style="font-size: 25px; font-weight: bolder; padding-left: 8px">{{props.projectData.price}} RMB</p>
         </div>
-        <div class="download-btn">Get Project!</div>
+        <div class="download-btn" @click="downloadProject">Get Project!</div>
       </div>
       <div class="intro-content"> {{props.projectData.introduce}} </div>
       <div class="bottom-info">
@@ -33,10 +33,11 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { defineProps, defineEmits, onMounted } from 'vue'
-import type { projectData } from '@/type/market/Market.ts'
+import type { ProjectData } from '@/type/market/Market.ts'
+import {downloadProject} from "@/api/market/api.ts";
 
 const props = defineProps<{
-  projectData: projectData;
+  projectData: ProjectData;
 }>()
 const closePopEmits = defineEmits(['closePop']);
 onMounted(()=>{
@@ -54,6 +55,10 @@ const closePopEvent = function () {
     closePopEmits('closePop');
   }, 1000) // 动画完成后触发关闭事件
 }
+
+const downloadProject = function (){
+
+}
 </script>
 
 <style scoped>