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, // 设置超时时间
-});
+})
 
 /**
  * get 请求
@@ -19,7 +19,7 @@ const instance = axios.create({
 export const get = (url, params) =>
   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,14 +36,14 @@ 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(
@@ -51,14 +51,14 @@ instance.interceptors.request.use(
     // console.group("全局请求拦截");
     // console.log(config);
     // console.groupEnd();
-        NProgress.start(); // 启动进度条
+    NProgress.start() // 启动进度条
     // 这里还可以设置token
-        return config;
+    return config
   },
   function (error) {
-        return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
 
 // Add a response interceptor (全局响应拦截)
 instance.interceptors.response.use(
@@ -66,11 +66,11 @@ instance.interceptors.response.use(
     // console.group("全局响应拦截");
     // console.log(response);
     // console.groupEnd();
-        NProgress.done(); // 关闭进度条
-        return response.data;
+    NProgress.done() // 关闭进度条
+    return response.data
   },
   function (error) {
-        NProgress.done(); // 关闭进度条
-        return Promise.reject(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

@@ -8,8 +8,14 @@
         :to="{ name: 'List', query: { tid: item.id } }"
       />
     </sidebar>
-
-		<div class="products">
+    <!-- @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"
@@ -18,23 +24,21 @@
         :title="item.name"
         :thumb="dalImageUrl(item.coverImage)"
       />
-		</div>
+    </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();
 // 当前选择的分类是哪一个
@@ -51,31 +55,26 @@ const active = computed({
   },
 });
 
-// 路由改变时执行
+// 路由改变时执行(点击不同分类时执行)
 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;
 }
+
 .list .van-sidebar {
   width: 105px;
 }
+
 .products {
   overflow: auto;
 }