规范说明

职责分层，将数据处理和数据展示分成两个职责进行处理。

• 数据处理：进行服务化，即表示数据的获取，数据的转换。
• 数据展示：视图绑定，只应用/调用数据处理的结果。

一、数据来源与处理服务化

将接口请求封装在 service 文件夹下，不同的业务类型封装成不同的文件（模块化）。

1、函数命名规范

根据不同接口操作和不同功能进行命名区分，大方向原则是动词（操作的动作）+名词（操作的对象），具体用词规范参加下列示范：

GET ==> queryModel
GET ==> listModel
POST ==> insertModel
PUT ==> updateModel
DELETE ==> removeModel

2、接口数据处理规范

最后返回的数据是页面调用中可以直接使用的数据，在页面调用的地方不用再做任何处理

/**
 * Model模块接口列表
 */

import axios from '@/utils/axios'; // 导入创建好的 axios 实例

export const listModel = async params => {
    const res = await axios.get('/api/model', {
        params
    });
    return res.data.slice(0, 10);
}

3、接口参数处理规范

在services函数里进行参数前置处理，直接返回接口需要的参数形式

/**
 * Model模块接口列表
 */

import service from '@/service'; // 导入service中创建的axios实例

export const updateModel = async (params) => {
  	this.$set(params, 'count', 90);
    const res = await service.put('/api/model', {
        params
    });
    return res;
}

二、视图层只对服务进行调用，不进行二次处理

//获取
import { listModel, updateModel } from '../services/model';

methods: {    
   async getList() {     
        const { list } = await listModel({id: 666})
    		console.log(list);
    } 
  
   async updateList() {     
        const { detail } = await updateModel({id: 666})
    		console.log(detail);
    }  
}