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>
<h1>WelcomeView-----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: "AAAAA@yourStore.com",
Email: "AAAAA@yourStore.com",
CreatedDateTime: new Date(),
UpdatedDateTime: new Date()
}
res = await postCustomerAdd(JSON.stringify(customer));
console.log(res.data);
let customerPut = {
Id: 3,
Name: "AAAAAcustomerPut@yourStore.com",
Email: "AAAAAcustomerPut@yourStore.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统一集中管理)。
