products接口封装,list基础使用

Vite-Vue-tutorial/src/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "singleQuote": false, 
+    "semi": true
+}

Vite-Vue-tutorial/src/hooks/useProducts.js

@@ -0,0 +1,53 @@
+import { loadProductAPI } from '../services/products';
+import { ref } from "vue";
+
+/**
+ * 返回商品接口的数据
+ * @param {*} categoryId 当前的商品分类id, 空表示获取所有分类
+ * @returns 
+ */
+
+export const useProducts = (categoryId='') => {
+
+    const page = ref(1); // 当前页码
+    const loading = ref(false); // 是否在加载中
+    const finished = ref(false); // 是否加载完成
+    const currentCategoryId = ref(categoryId); // 当前分类id
+    const products = ref([]); // 商品数据
+
+    /**
+     * 加载products
+     * @param {*} needReset 是否需要重置products
+     * @param {*} categoryId 分类id
+     */
+    const onLoad = (needReset=false,categoryId='') => {
+        if (needReset) {
+            // 重置一些参数
+            finished.value = false;
+            products.value = [];
+            page.value = 1;
+        }
+        // 分类id不为空才需要修改
+        if (categoryId !=='' ) {
+            currentCategoryId.value = categoryId;
+        }
+        loading.value = true; // 开始加载
+        loadProductAPI(page.value, currentCategoryId.value).then((res) => {
+            finished.value = page.value > res.pages; // 当前页码超过总页数时表示加载完成
+            loading.value = false;
+            // 将获取的数据存入products
+            products.value.push(...res.data);
+            page.value++; // 页码+1
+        });
+    };
+
+    return {
+        // page,
+        loading,
+        finished,
+        products,
+        currentCategoryId,
+        onLoad,
+    }
+};
+

Vite-Vue-tutorial/src/utils/request.js

@@ -1,13 +1,13 @@
-import axios from "axios";
-import NProgress from "nprogress";
-import "nprogress/nprogress.css";
+import axios from "axios"
+import NProgress from "nprogress"
+import "nprogress/nprogress.css"
 
-export const serverUrl = "http://localhost:1337";
+export const serverUrl = "http://localhost:1337"
 
 const instance = axios.create({
-    baseURL: serverUrl, // baseURL会在发送请求的时候拼接在url参数的前面
-    timeout: 5000, // 设置超时时间
-});
+  baseURL: serverUrl, // baseURL会在发送请求的时候拼接在url参数的前面
+  timeout: 5000, // 设置超时时间
+})
 
 /**
  * get 请求
@@ -17,9 +17,9 @@ const instance = axios.create({
  */
 // axios.get(url, config)请求第二个参数表示配置信息(包括请求数据、请求头等)
 export const get = (url, params) =>
-    instance.get(url, {
-        params: params, // url传递的参数
-    });
+  instance.get(url, {
+    params: params, // url传递的参数
+  })
 
 /**
  * post 请求
@@ -28,7 +28,7 @@ export const get = (url, params) =>
  * @returns
  */
 // axios.post(url, data, config)请求第三个参数表示配置信息(包括请求数据、请求头等)
-export const post = (url, data) => instance.post(url, data);
+export const post = (url, data) => instance.post(url, data)
 
 /**
  * put 请求
@@ -36,41 +36,41 @@ export const post = (url, data) => instance.post(url, data);
  * @param {*} data 数据
  * @returns
  */
-export const put = (url, data) => instance.put(url, data);
+export const put = (url, data) => instance.put(url, data)
 
 /**
  * delete 请求
  * @param {*} url 请求地址
  * @returns
  */
-export const del = (url) => instance.delete(url);
+export const del = (url) => instance.delete(url)
 
 // Add a request interceptor (全局请求拦截)
 instance.interceptors.request.use(
-    function (config) {
-        // console.group("全局请求拦截");
-        // console.log(config);
-        // console.groupEnd();
-        NProgress.start(); // 启动进度条
-        // 这里还可以设置token
-        return config;
-    },
-    function (error) {
-        return Promise.reject(error);
-    }
-);
+  function (config) {
+    // console.group("全局请求拦截");
+    // console.log(config);
+    // console.groupEnd();
+    NProgress.start() // 启动进度条
+    // 这里还可以设置token
+    return config
+  },
+  function (error) {
+    return Promise.reject(error)
+  }
+)
 
 // Add a response interceptor (全局响应拦截)
 instance.interceptors.response.use(
-    function (response) {
-        // console.group("全局响应拦截");
-        // console.log(response);
-        // console.groupEnd();
-        NProgress.done(); // 关闭进度条
-        return response.data;
-    },
-    function (error) {
-        NProgress.done(); // 关闭进度条
-        return Promise.reject(error);
-    }
-);
+  function (response) {
+    // console.group("全局响应拦截");
+    // console.log(response);
+    // console.groupEnd();
+    NProgress.done() // 关闭进度条
+    return response.data
+  },
+  function (error) {
+    NProgress.done() // 关闭进度条
+    return Promise.reject(error)
+  }
+)

Vite-Vue-tutorial/src/views/Home.vue

@@ -30,16 +30,14 @@ import { Card } from "vant";
 import { Swipe, SwipeItem } from "vant";
 import { Grid, GridItem } from "vant";
 import { ref } from "vue";
-import { loadProductAPI } from "../services/products";
 import { dalImageUrl } from "../utils/tools";
 import { loadBannersAPI } from "../services/banners";
 import { useCategories } from "../hooks/useCategories";
+import { useProducts } from "../hooks/useProducts";
 
-// 商品
-const products = ref([]);
-loadProductAPI().then((res) => {
-	products.value = res.data;
-});
+// 获取第一页的商品数据
+const { products, onLoad} = useProducts();
+onLoad();
 
 // 轮播图
 const banners = ref([]);

Vite-Vue-tutorial/src/views/List.vue

@@ -1,82 +1,81 @@
 <template>
-	<div class="list">
-		<sidebar v-model="active">
-			<sidebar-item
-				v-for="item in categories"
-				:title="item.name"
-				:key="item.id"
-				:to="{ name: 'List', query: { tid: item.id } }"
-			/>
-		</sidebar>
-
-		<div class="products">
-			<card
-				v-for="item in products"
-				:key="item.id"
-				:num="item.amount"
-				:price="item.price.toFixed(2)"
-				:title="item.name"
-				:thumb="dalImageUrl(item.coverImage)"
-			/>
-		</div>
-	</div>
+  <div class="list">
+    <sidebar v-model="active">
+      <sidebar-item
+        v-for="item in categories"
+        :title="item.name"
+        :key="item.id"
+        :to="{ name: 'List', query: { tid: item.id } }"
+      />
+    </sidebar>
+    <!-- @load="onLoad":  当loading和finished同时为false时执行-->
+    <list
+      class="products"
+      :loading="loading"
+      :finished="finished"
+      @load="onLoad"
+      finished-text="没有更多了"
+    >
+      <card
+        v-for="item in products"
+        :key="item.id"
+        :num="item.amount"
+        :price="item.price.toFixed(2)"
+        :title="item.name"
+        :thumb="dalImageUrl(item.coverImage)"
+      />
+    </list>
+  </div>
 </template>
 
 <script setup>
-import { Sidebar, SidebarItem, Card } from "vant";
-import { ref, computed } from "vue";
+import { Sidebar, SidebarItem, Card, List } from "vant";
+import { computed } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
 import { useCategories } from "../hooks/useCategories";
 import { useRoute } from "vue-router";
-import { loadProductAPI } from "../services/products";
 import { dalImageUrl } from "../utils/tools";
-
+import { useProducts } from "../hooks/useProducts";
 const route = useRoute();
+const {loading, finished, products, currentCategoryId, onLoad} = useProducts(route.query.tid);
 
-// 当前分类
-const currentCategoryId = ref(route.query.tid);
 // 解构字典中的数据
 const { categories } = useCategories();
 // 当前选择的分类是哪一个
 const active = computed({
-	// 设置属性值
-	set(v) {
-		return v;
-	},
-	// 获取属性值
-	get() {
-		return categories.value.findIndex(
-			(item) => item.id == currentCategoryId.value
-		);
-	},
+  // 设置属性值
+  set(v) {
+    return v;
+  },
+  // 获取属性值
+  get() {
+    return categories.value.findIndex(
+      (item) => item.id == currentCategoryId.value
+    );
+  },
 });
 
-// 路由改变时执行
+// 路由改变时执行(点击不同分类时执行)
 onBeforeRouteUpdate((to, from) => {
-	currentCategoryId.value = to.query.tid;
-	loadDataFromServer();
+//   currentCategoryId.value = to.query.tid;
+  // 重新加载数据
+  onLoad(true,to.query.tid);
 });
 
-// 获取对应分类的商品
-const products = ref([]);
-
-const loadDataFromServer = () => {
-	loadProductAPI(1, currentCategoryId.value).then((res) => {
-		products.value = res.data;
-	});
-};
 
-loadDataFromServer();
+// loadDataFromServer();
 </script>
 
 <style scoped>
 .list {
-	display: flex;
+  display: flex;
 }
+
 .list .van-sidebar {
-	width: 105px;
+  width: 105px;
 }
+
 .products {
-	overflow: auto;
+  overflow: auto;
 }
 </style>