貴陽(yáng)建設(shè)工程招投標(biāo)網(wǎng)站谷歌推廣代理商
1 關(guān)于統(tǒng)一集中管理API的一些思考
??? 1、統(tǒng)一集中管理是保證工程性項(xiàng)目得保質(zhì)、保量、成功實(shí)施，并對(duì)后期維護(hù)提供數(shù)據(jù)支撐的最有效，最節(jié)省資源和時(shí)間的技能和做法，軟件做為一種特殊的工程性項(xiàng)目，也符合上述特性。
??? 2、由于在前臺(tái)實(shí)現(xiàn)中一個(gè)URL可能需要多次被調(diào)用，如果把一個(gè)URL封裝到一個(gè)實(shí)例的指定方法中，同一個(gè)項(xiàng)目以大量減少重復(fù)性的代碼。
??? 3、統(tǒng)一集中管理API的另外一個(gè)好處是,如果后臺(tái)的API方法發(fā)生變更，需要把該AIP所對(duì)應(yīng)的封裝方法中的URL修改即可以，不再需要對(duì)大量的同一個(gè)URL進(jìn)行修改操作。
??? 4、有些開發(fā)者習(xí)慣于把統(tǒng)一集中管理API與Axios攔截守同時(shí)定義在同一個(gè)JS文件中，但這種實(shí)踐方案在本人看來(lái)是不好的，最好的實(shí)事是把統(tǒng)一集中管理API與Axios攔截守分開定義在兩個(gè)不同的JS文件中，API JS文件引用Axios JS文件中的攔截守實(shí)例，從而實(shí)現(xiàn)對(duì)一個(gè)URL封裝，這也是本人會(huì)先在前面章節(jié)中會(huì)先講述Axios攔截守的原理和抽離的實(shí)現(xiàn)。
2 抽離定義API集中管理：src\common\http.api.js
import axiosInterceptor from './http.interceptor.js';
/****************************API集中管理--后臺(tái)首頁(yè)************************************/
export const getHomeAdminIndex = async () => {
? ? return await axiosInterceptor.get('/HomeAdmin/Index');
};
/****************************API集中管理--用戶模塊************************************/
//1個(gè)指定用戶的登錄操作。
export const postCustomerLogin = async params => {
? ? return await axiosInterceptor.post('/Customer/Login', params);
};
//獲取1個(gè)指定用戶的信息。
export const getCustomerInfo = async params => {
? ? return await axiosInterceptor.get('/Customer/Info', {
? ? ? ? params: params
? ? });
};
//把1個(gè)指定用戶實(shí)例持久化到用戶表中。
export const postCustomerAdd = async params => {
? ? return await axiosInterceptor.post('/Customer/CreatePost', params);
};
//把1個(gè)指定用戶實(shí)例持久化更新到用戶表中。
export const putCustomerEdit = async params => {
? ? return await axiosInterceptor.put('/Customer/EditPut', params);
};
//把1個(gè)指定用戶實(shí)例從用戶表中物理刪除。
export const deleteCustomer = async params => {
? ? return await axiosInterceptor.delete('/Customer/Delete', {
? ? ? ? params: params
? ? });
};
//所有用戶實(shí)例的分頁(yè)渲染顯示。
export const postCustomerIndex = async params => {
? ? return await axiosInterceptor.post('/Customer/Index', params);
};
3 重構(gòu)端管理首頁(yè)：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, //初始化當(dāng)前頁(yè)，即第1頁(yè)。
? ? ? ? ? ? ? ? ? ? pageSize: 15, //初始化每頁(yè)最多所包含的項(xiàng)數(shù)值，即每頁(yè)最多所包含15項(xiàng)。
? ? ? ? ? ? ? ? ? ? totalCount: 0, //初始化數(shù)據(jù)源的總計(jì)項(xiàng)數(shù)值，由于還沒(méi)有加載數(shù)據(jù)源所以該值為：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>
對(duì)以上功能更為具體實(shí)現(xiàn)和注釋見(jiàn)：230222_011shopvue(API統(tǒng)一集中管理)。