第49章 API统一集中管理

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: "[e-mail]",

                    Email: "[e-mail]",

                    CreatedDateTime: new Date(),

                    UpdatedDateTime: new Date()

                }

                res = await postCustomerAdd(JSON.stringify(customer));

                console.log(res.data);

               

                let customerPut = {

                    Id: 3,

                    Name: "[e-mail]",

                    Email: "[e-mail]",

                    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统一集中管理)。