products接口封装,list基础使用

master
barney 2 years ago
parent ac463184f9
commit 70cd57273f
  1. 4
      Vite-Vue-tutorial/src/.prettierrc
  2. 53
      Vite-Vue-tutorial/src/hooks/useProducts.js
  3. 74
      Vite-Vue-tutorial/src/utils/request.js
  4. 10
      Vite-Vue-tutorial/src/views/Home.vue
  5. 103
      Vite-Vue-tutorial/src/views/List.vue

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

@ -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,
}
};

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

@ -30,16 +30,14 @@ import { Card } from "vant";
import { Swipe, SwipeItem } from "vant"; import { Swipe, SwipeItem } from "vant";
import { Grid, GridItem } from "vant"; import { Grid, GridItem } from "vant";
import { ref } from "vue"; import { ref } from "vue";
import { loadProductAPI } from "../services/products";
import { dalImageUrl } from "../utils/tools"; import { dalImageUrl } from "../utils/tools";
import { loadBannersAPI } from "../services/banners"; import { loadBannersAPI } from "../services/banners";
import { useCategories } from "../hooks/useCategories"; import { useCategories } from "../hooks/useCategories";
import { useProducts } from "../hooks/useProducts";
// //
const products = ref([]); const { products, onLoad} = useProducts();
loadProductAPI().then((res) => { onLoad();
products.value = res.data;
});
// //
const banners = ref([]); const banners = ref([]);

@ -1,82 +1,81 @@
<template> <template>
<div class="list"> <div class="list">
<sidebar v-model="active"> <sidebar v-model="active">
<sidebar-item <sidebar-item
v-for="item in categories" v-for="item in categories"
:title="item.name" :title="item.name"
:key="item.id" :key="item.id"
:to="{ name: 'List', query: { tid: item.id } }" :to="{ name: 'List', query: { tid: item.id } }"
/> />
</sidebar> </sidebar>
<!-- @load="onLoad": 当loading和finished同时为false时执行-->
<div class="products"> <list
<card class="products"
v-for="item in products" :loading="loading"
:key="item.id" :finished="finished"
:num="item.amount" @load="onLoad"
:price="item.price.toFixed(2)" finished-text="没有更多了"
:title="item.name" >
:thumb="dalImageUrl(item.coverImage)" <card
/> v-for="item in products"
</div> :key="item.id"
</div> :num="item.amount"
:price="item.price.toFixed(2)"
:title="item.name"
:thumb="dalImageUrl(item.coverImage)"
/>
</list>
</div>
</template> </template>
<script setup> <script setup>
import { Sidebar, SidebarItem, Card } from "vant"; import { Sidebar, SidebarItem, Card, List } from "vant";
import { ref, computed } from "vue"; import { computed } from "vue";
import { onBeforeRouteUpdate } from "vue-router"; import { onBeforeRouteUpdate } from "vue-router";
import { useCategories } from "../hooks/useCategories"; import { useCategories } from "../hooks/useCategories";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { loadProductAPI } from "../services/products";
import { dalImageUrl } from "../utils/tools"; import { dalImageUrl } from "../utils/tools";
import { useProducts } from "../hooks/useProducts";
const route = useRoute(); const route = useRoute();
const {loading, finished, products, currentCategoryId, onLoad} = useProducts(route.query.tid);
//
const currentCategoryId = ref(route.query.tid);
// //
const { categories } = useCategories(); const { categories } = useCategories();
// //
const active = computed({ const active = computed({
// //
set(v) { set(v) {
return v; return v;
}, },
// //
get() { get() {
return categories.value.findIndex( return categories.value.findIndex(
(item) => item.id == currentCategoryId.value (item) => item.id == currentCategoryId.value
); );
}, },
}); });
// // ()
onBeforeRouteUpdate((to, from) => { onBeforeRouteUpdate((to, from) => {
currentCategoryId.value = to.query.tid; // currentCategoryId.value = to.query.tid;
loadDataFromServer(); //
onLoad(true,to.query.tid);
}); });
//
const products = ref([]);
const loadDataFromServer = () => {
loadProductAPI(1, currentCategoryId.value).then((res) => {
products.value = res.data;
});
};
loadDataFromServer(); // loadDataFromServer();
</script> </script>
<style scoped> <style scoped>
.list { .list {
display: flex; display: flex;
} }
.list .van-sidebar { .list .van-sidebar {
width: 105px; width: 105px;
} }
.products { .products {
overflow: auto; overflow: auto;
} }
</style> </style>

Loading…
Cancel
Save