图书馆网站建设的规章制度,免费个人主页注册,网站建设的目的与意义,广东如何做网络推广营销策划方案1 关于统一集中管理API的一些思考 1、统一集中管理是保证工程性项目得保质、保量、成功实施#xff0c;并对后期维护提供数据支撑的最有效#xff0c;最节省资源和时间的技能和做法#xff0c;软件做为一种特殊的工程性项目#xff0c;也符合上述特性。 2、由于在前台实现中…1 关于统一集中管理API的一些思考 1、统一集中管理是保证工程性项目得保质、保量、成功实施并对后期维护提供数据支撑的最有效最节省资源和时间的技能和做法软件做为一种特殊的工程性项目也符合上述特性。 2、由于在前台实现中一个URL可能需要多次被调用如果把一个URL封装到一个实例的指定方法中同一个项目以大量减少重复性的代码。 3、统一集中管理API的另外一个好处是,如果后台的API方法发生变更需要把该AIP所对应的封装方法中的URL修改即可以不再需要对大量的同一个URL进行修改操作。 4、有些开发者习惯于把统一集中管理API与Axios拦截守同时定义在同一个JS文件中但这种实践方案在本人看来是不好的最好的实事是把统一集中管理API与Axios拦截守分开定义在两个不同的JS文件中API JS文件引用Axios JS文件中的拦截守实例从而实现对一个URL封装这也是本人会先在前面章节中会先讲述Axios拦截守的原理和抽离的实现。
2 抽离定义API集中管理src\common\http.api.js
import axiosInterceptor from ./http.interceptor.js; /****************************API集中管理--后台首页************************************/
export const getHomeAdminIndex async () { return await axiosInterceptor.get(/HomeAdmin/Index);
}; /****************************API集中管理--用户模块************************************/
//1个指定用户的登录操作。
export const postCustomerLogin async params { return await axiosInterceptor.post(/Customer/Login, params);
}; //获取1个指定用户的信息。
export const getCustomerInfo async params { return await axiosInterceptor.get(/Customer/Info, { params: params });
}; //把1个指定用户实例持久化到用户表中。
export const postCustomerAdd async params { return await axiosInterceptor.post(/Customer/CreatePost, params);
}; //把1个指定用户实例持久化更新到用户表中。
export const putCustomerEdit async params { return await axiosInterceptor.put(/Customer/EditPut, params);
}; //把1个指定用户实例从用户表中物理删除。
export const deleteCustomer async params { return await axiosInterceptor.delete(/Customer/Delete, { params: params });
}; //所有用户实例的分页渲染显示。
export const postCustomerIndex async params { return await axiosInterceptor.post(/Customer/Index, params);
};
3 重构端管理首页src\views\WelcomeView.vue
template h1WelcomeView-----Amin/h1
/template
script import { getHomeAdminIndex, getCustomerInfo, postCustomerAdd, putCustomerEdit, deleteCustomer, postCustomerIndex } from ../common/http.api.js; export default { data() { return {}; }, methods: { async getHomeAdminIndex() { let res await getHomeAdminIndex(); console.log(res.data); let customerIdParam { customerId: 1, }; res await getCustomerInfo(customerIdParam); console.log(res.data); let customer { Name: AAAAAyourStore.com, Email: AAAAAyourStore.com, CreatedDateTime: new Date(), UpdatedDateTime: new Date() } res await postCustomerAdd(JSON.stringify(customer)); console.log(res.data); let customerPut { Id: 3, Name: AAAAAcustomerPutyourStore.com, Email: AAAAAcustomerPutyourStore.com, CreatedDateTime: new Date(), UpdatedDateTime: new Date() } res await putCustomerEdit(JSON.stringify(customerPut)); console.log(res.data); let customerIdDelete { customerId: 3, }; res await deleteCustomer(customerIdDelete); console.log(res.data); let pagination { pageIndex: 1, //初始化当前页即第1页。 pageSize: 15, //初始化每页最多所包含的项数值即每页最多所包含15项。 totalCount: 0, //初始化数据源的总计项数值由于还没有加载数据源所以该值为0。 //初始化排序字段及其方式。 OrderByFiled: JSON.stringify({ filed: id, type: descending, }), QueryCondition: }; res await postCustomerIndex(JSON.stringify(pagination)); console.log(res.data); }, }, async mounted() { await this.getHomeAdminIndex(); }, };
/script
对以上功能更为具体实现和注释见230222_011shopvue(API统一集中管理)。
