机械制造设备类企业网站织梦模板站群系统源码

当前位置： 首页 > news >正文

机械制造设备类企业网站织梦模板,站群系统源码,网站建设仿站企业公司,长沙网站seo技巧useList 用于列表请求的基于 vue 3 的 hooks#xff0c;接收请求函数、请求参数等数据#xff0c;自动生成请求请求函数#xff0c;分页信息等 本文有涉及到 http 请求工具和接口返回格式的内容#xff1a; http 工具#xff1a;一个基于 axios 封装的请求工具Response…useList 用于列表请求的基于 vue 3 的 hooks接收请求函数、请求参数等数据自动生成请求请求函数分页信息等 本文有涉及到 http 请求工具和接口返回格式的内容 http 工具一个基于 axios 封装的请求工具ResponseData 接口定义接口返回数据结构的 interface interface ResponseDataT any {code: number;data: T;message: string; }详情可参考文章工具类-基于 axios 的 http 请求工具 Request 实现一个简单的列表请求 import { ref, Ref } from vue; import { get, cloneDeep } from lodash-es; import { ResponseData } from /http/type;interface UseListConfigP any, T any {request: {/*** 请求列表方法/api: (params: P) PromiseResponseDataT[];/** 请求参数/params?: P;};response?: {/** 列表数据 默认 data* 例 响应数据为 { data: { list: [] } } 则传递 data.list;*/listDataKey?: string;}; }export function useListP extends object any, T any(config: UseListConfigP, T) {const cacheConfig cloneDeep(config);const { api } cacheConfig.request;const { listDataKey data } cacheConfig.response || {};const params ref(cloneDeep(cacheConfig.request.params || {}) as P) as RefP;const list ref([]) as RefT[];const handleSearch async () {const res await api(params.value as P);// 更具 listDataKey 获取列表数据list.value get(res, listDataKey);return res;};return {params,list,handleSearch,}; }useList 定义了两个泛型其中 P 代表请求的参数类型T 代表列表数据每一项的类型接收请求方法和请求参数等数据, 最后返回了请求参数变量 params列表数据 list还有发起列表请求的 handlerSearch 方法 在 vue 3 中使用 script import { useList } from /hooks/-useList; import { ResponseData } from /http/type;// 定义请求参数类型 interface GetListParams {name: string; } // 定义请求项类型 interface ListItem {id: number;name: string; }// 模拟列表数据和 http 请求 const MOCKLIST: ListItem[] Array(100).fill(0).map((, index) ({id: index 1,name: list-item-\({index 1},})); const getList async (params: GetListParams): PromiseResponseDataListItem[] {await new Promise(resolve setTimeout(resolve, 3 * 1e3));const list: ListItem[] [];if (params.name) list.push(...MOCK_LIST.filter(item item.name.includes(params.name)));else list.push(...MOCK_LIST);return {code: 200,data: list,message: success,}; };const { params, list, handleSearch } useListGetListParams, ListItem({request: {api: getList,params: {name: ,},},response: {listDataKey: data,}, });template templatedivdiva-input v-modelparams.name placeholder请输入名称 /a-button typeprimary clickhandleSearch()查询/a-button/divdivp v-foritem of list :keyitem.id{{ item.name }}/p/div/div /template使用泛型定义好请求的参数和返回的内容的类型向 useList 传入请求函数和参数获得 paramslist以及 handlerSearch将 params 的字段绑定到搜索的表单元素点击搜索调用 handlerSearch 即可完成列表的请求 增加 loading 每次列表请求时需要给 列表增加一个加载中的文案或图表每次手动去声明一个 loading在 调用 handleSearch 前赋值为 true调用结束后赋值为 false可以实现控制列表的加载状态。 但是每个列表都要实现一遍过于麻烦和冗余可以在 useList 中增加一个 loading 的变量并返回在请求前后改变 loading 的值实现加载状态的控制。 loading 的实现使用了 useLoading可以查阅 工具类-useLoading export function useListP extends object any, T any(config: UseListConfigP, T) {...const { loading, executor } useLoading();const handleSearch async () {const res await executor(async () api(params.value as P));list.value get(res, listDataKey);return res;};return {...loading,...} }使用示例 script ... const { params, loading, list, handleSearch } useListGetListParams, ListItem({request: {api: getList,params: {name: ,},}, });template templatedivdiva-input v-modelparams.name placeholder请输入名称 /a-button typeprimary clickhandleSearch()查询/a-button/div!-- v-loading 是使元素显示加载状态的指令 --div v-loadingloadingp v-foritem of list :keyitem.id{{ item.name }}/p/div/div /template处理分页信息 首先增加 UseListConfig 的分页信息类型定义 interface UseListConfigP any, T any {request: {.../*** 分页信息-当前页数参数在 params 中的 key* 默认: page*/pageNumKey?: string;/*** 分页信息-每页条数参数在 params 中的 key* 默认: pageSize*/pageSizeKey?: string;};response?: {.../*** 总条数字段的 key* 例 响应数据为 { data: { list: [], total: 0 } } 则传递 data.total;* 默认 pageInfo.items*/listDataKey?: string;}; }在 handleSearch 中增加分页控制增加 handleCurrentChange 和 handleSizeChange 方法 export function useListP extends object any T any(config: UseListConfigP, T) {...const total ref(0);const handleSearch async (pageNum 1) {if (pageNumKey in (params.value as object)) {(params.value as any)[pageNumKey] pageNum;}const res await executor(async () api(params.value as P));list.value get(res, listDataKey);total.value get(res, totalKey);return res;};/*** 切换当前页码 刷新列表*/const handleCurrentChange async (pageNum: number) {await handleSearch(pageNum);};/*** 切换分页大小 刷新列表*/const handleSizeChange async (pageSize: number) {if (pageSizeKey in (params.value as object)) {(params.value as any)[pageSizeKey] pageSize;}// 切换分页大小后默认回到第一页await handleSearch(1);};return {...handleSearch,handleCurrentChange,handleSizeChange,} }使用示例 script import { useList } from /hooks/-useList; import { ResponseData } from /http/type; import Pagination from /components/pagination/index.vue; // 分页的组件interface GetListParams {name: string;page: number;pageSize: number; }interface ListItem {id: number;name: string; }// 模拟列表数据和 http 请求 const MOCK_LIST: ListItem[] Array(100).fill(0).map((_, index) ({id: index 1,name: list-item-\){index 1},})); const getList async (params: GetListParams): PromiseResponseDataListItem[] {await new Promise(resolve setTimeout(resolve, 3 * 1e3));let list: ListItem[] [];if (params.name) list MOCK_LIST.filter(item item.name.includes(params.name));else list MOCK_LIST;list list.slice(params.page * params.pageSize - params.pageSize, params.page * params.pageSize);return {code: 200,data: list,message: success,pageInfo: {items: MOCK_LIST.length,},}; };const { params, total, loading, list, handleSearch, handleCurrentChange, handleSizeChange } useListGetListParams, ListItem({request: {api: getList,params: {name: ,page: 1,pageSize: 10,},pageNumKey: page,pageSizeKey: pageSize,},response: {listDataKey: data,totalKey: pageInfo.items,},});template templatedivdiva-input v-modelparams.name placeholder请输入名称 /a-button typeprimary clickhandleSearch()查询/a-buttonpagination:totaltotal:page-sizeparams.pageSize:currentparams.page:show-totaltruechangehandleCurrentChangepage-size-changehandleSizeChange//div!– v-loading 是使元素显示加载状态的指令 –div v-loadingloadingp v-foritem of list :keyitem.id{{ item.name }}/p/div/div /template增加 reset 方法 在列表请求页中经常有需要清空或重置搜索条件的需求可以在 useList 中记录传入的初始 params增加 handleReset 函数将 params 变量的值赋值为 初始的 params 值 export type DeepReadonlyT {readonly [P in keyof T]: T[P] extends object ? DeepReadonlyT[P] : T[P]; };export function useListP extends object any, T any(config: UseListConfigP, T) {…// 使用 readonly 约束 defaultParams避免被更改const defaultParams: DeepReadonlyP cloneDeep(cacheConfig.request.params || ({} as P));const handleReset () {params.value cloneDeep(defaultParams as P);handleSearch(); // 重置完立即发起搜索};return {…handleReset,} }有可能 rest 函数不一定是将 params 变量重置为使用 useList 时传入的值为了应付这种特殊情况我们可以增加一个 handleCustomeReset 的参数将重置的权限暴露出去 interface UseListConfigP any, T any {request: {…/*** 自定义重置方法/handleCustomReset?: (params: P, defaultParams: DeepReadonlyP) P;;}; }export function useListP extends object any, T any(config: UseListConfigP, T) {…const defaultParams cloneDeep(cacheConfig.request.params || ({} as P));const { handleCustomReset } cacheConfig.request;const handleReset () {if (handleCustomReset) params.value handleCustomReset(params.value, defaultParams);else params.value cloneDeep(defaultParams as P);handleSearch(); // 重置完立即发起搜索};return {…handleReset,} }增加 handleCustomReset 的可选项 将当前 params 的值和 defaultParmas 传给 handleCustomReset如果有传入 handleCustomReset则重置时使用 handleCustomReset 的返回值赋值给 params 变量若没有 handleCustomReset则使用默认的重置方式 增加一些回调钩子 请求前的钩子 handleValidate 请求前校验校验参数是否合理等handleParams请求前处理参数resetApi: 重置列表请求方法 请求完成后的钩子 handleResponseData处理返回的列表数据 interface UseListConfigP any, T any {request: {…/** 自定义重置方法/handleCustomReset?: (params: P, defaultParams: DeepReadonlyP) P;/** 校验函数校验参数是否合理等* 返回 false 则不发起请求/handleValidate?: (params: DeepReadonlyP) boolean;/** 处理请求参数/handleParams?: (params: DeepReadonlyP) P;/** 重置请求方法/resetApi?: (params: DeepReadonlyP) (params: P) PromiseResponseDataT[];};response?: {…/** 处理响应数据*/handleResponseData?: (list: T[]) T[];}; }export function useListP extends object any, T any(config: UseListConfigP, T) {…const {handleValidate,handleParams,resetApi,} cacheConfig.request || {};const {handleResponseData,} cacheConfig.response || {};const handleSearch async (pageNum 1) {if (pageNumKey in params.value) {(params.value as any)[pageNumKey] pageNum;}let _params cloneDeep(params.value);if (handleValidate !handleValidate(_params)) return;if (handleParams) _params handleParams(_params);if (resetApi) api resetApi(_params);const res await executor(async () api(params.value as P));const _list get(res, listDataKey);if (handleResponseData) list.value handleResponseData(_list);else list.value _list;total.value get(res, totalKey);return res;}; }使用示例 const getList async (params: GetListParams): PromiseResponseDataListItem[] {console.log(getList);await new Promise(resolve setTimeout(resolve, 3 * 1e3));… }; const getListLongTime async (params: GetListParams): PromiseResponseDataListItem[] {console.log(getListLongTime);await new Promise(resolve setTimeout(resolve, 10 * 1e3));… };const { params, total, loading, list, handleSearch, handleCurrentChange, handleSizeChange } useListGetListParams, ListItem({request: {…handleValidate(params) {if (params.page 0) {console.error(page 必须大于 0);return false;}return true;},handleParams(params) {return {…params,pageSize: Math.min(params.pageSize, 10), // 当 pageSize 小于 10 时默认设置为 10};},resetApi(params) {// 根据 params.name 判断调用哪个接口if (params.name.toLocaleLowerCase() longtime) return getListLongTime;return getList;},},response: {…handleResponseData(list) {// 将 list 中的 name 转为大写return list.map(item ({…item,name: item.name.toUpperCase(),}));},},});增加防抖 在 UseListConfig 中增加 lazy 字段接收一个以毫秒为单位的时间值作为搜索时函数的防抖时间 interface UseListConfigP any, T any {request: {…/*** 搜索函数防抖延迟时间* 默认不开启防抖*/lazy?: number;…};response?: {…}; }先实现一个用于防抖的函数类似 lodash 的 debounce 函数 注为什么不直接用 ladash 的 debounce因为 debounce 的返回值类型不太符合需求 type AnyFunction (…args: any[]) any;const debounce T extends AnyFunction(fn: T, lazy 300): ((…args: ParametersT) PromiseReturnTypeT) {let timer: number | null null;return (…args) new Promise(resolve {if (timer) clearTimeout(timer);timer window.setTimeout(() {resolve(fn(…args));}, lazy);}); };export function useListP extends object any, T any(config: UseListConfigP, T) {…const {…lazy,} cacheConfig.request;…const _handleSearch async (pageNum 1) {const res await api(params.value); // 去掉了 Loading 的 executor 函数执行…};const handleSearch async (pageNum 1) {const func lazy ? debounce(_handleSearch, lazy) : _handleSearch;// 在这里执行 Loading 的 executor 函数因为在防抖时间内也需要显示 Loading 状态return executor(func, pageNum);};… }