From 70cd57273fbeb0078f3e0810a806321569852109 Mon Sep 17 00:00:00 2001
From: barney <15270405776@163.com>
Date: Fri, 7 Oct 2022 16:31:16 +0800
Subject: [PATCH] =?UTF-8?q?products=E6=8E=A5=E5=8F=A3=E5=B0=81=E8=A3=85,li?=
=?UTF-8?q?st=E5=9F=BA=E7=A1=80=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
Vite-Vue-tutorial/src/.prettierrc | 4 +
Vite-Vue-tutorial/src/hooks/useProducts.js | 53 +++++++++++
Vite-Vue-tutorial/src/utils/request.js | 74 +++++++--------
Vite-Vue-tutorial/src/views/Home.vue | 10 +-
Vite-Vue-tutorial/src/views/List.vue | 103 ++++++++++-----------
5 files changed, 149 insertions(+), 95 deletions(-)
create mode 100644 Vite-Vue-tutorial/src/.prettierrc
create mode 100644 Vite-Vue-tutorial/src/hooks/useProducts.js
diff --git a/Vite-Vue-tutorial/src/.prettierrc b/Vite-Vue-tutorial/src/.prettierrc
new file mode 100644
index 0000000..6de2ea7
--- /dev/null
+++ b/Vite-Vue-tutorial/src/.prettierrc
@@ -0,0 +1,4 @@
+{
+ "singleQuote": false,
+ "semi": true
+}
\ No newline at end of file
diff --git a/Vite-Vue-tutorial/src/hooks/useProducts.js b/Vite-Vue-tutorial/src/hooks/useProducts.js
new file mode 100644
index 0000000..f29e077
--- /dev/null
+++ b/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,
+ }
+};
+
diff --git a/Vite-Vue-tutorial/src/utils/request.js b/Vite-Vue-tutorial/src/utils/request.js
index 885dd5d..dddb0c2 100644
--- a/Vite-Vue-tutorial/src/utils/request.js
+++ b/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)
+ }
+)
diff --git a/Vite-Vue-tutorial/src/views/Home.vue b/Vite-Vue-tutorial/src/views/Home.vue
index 984b80a..cfb2390 100644
--- a/Vite-Vue-tutorial/src/views/Home.vue
+++ b/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([]);
diff --git a/Vite-Vue-tutorial/src/views/List.vue b/Vite-Vue-tutorial/src/views/List.vue
index 5104a18..5588690 100644
--- a/Vite-Vue-tutorial/src/views/List.vue
+++ b/Vite-Vue-tutorial/src/views/List.vue
@@ -1,82 +1,81 @@
-
+
+
+
+
+
+
+
+
+