sharegoods-ui

vue2 + vuex + vue-router + axios + sass + Element UI

Feature

• 基于axios封装了http对象
• 基于Element UI封装了一些业务组件
• 基于Echarts封装了图表组件

Install dependencies

npm install sharegoods-ui --save --registry=https://registry.npm.taobao.org

Quick start

import Vue from 'vue';
import SharegoodsUI from 'sharegoods-ui';
import 'sharegoods-ui/lib/index.css';

Vue.use(SharegoodsUI);

API Reference

接口定义

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | name | 接口调用函数，全局必须唯一 | - | - | - | | path | 实际接口调用地址，支持restful | - | - | - | | method | 接口方式 | String | get、post、delete、patch、put | | | processData | 调用接口前处理数据 | - | - | - | | success | 调用成功后处理数据 | - | - | - |

e.g

export default [
    {
        name: 'articleList',
        path: '/article/list',
        method: 'post',
        processData(data){
            if(data.date) {
                data.startTime = date[0];
                data.endTime = date[1];
                delete data.date;
            }
            return data;
        },
        success(response){
            response.message = '获取文章成功';
            return response;
        }
    },
    {
        name: 'articleDetail',
        path: '/article/detail/{id}',
        method: 'get'
    },
    {
        name: 'articleUpdate',
        path: '/article/update',
        method: 'put'
    },
    {
        name: 'articleCreate',
        path: '/article/create',
        method: 'post'
    }
];

HttpClient 参数说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | timeout | 超时时间 | - | - | 15000 | | Message | 消息提醒方法 | - | - | - | | getResponseSuccess | 接口成功判断 | - | - | - | | transformResponse | 所有接口的接口回调函数 | - | - | - | | getAccessToken | 设置headers参数 | - | - | - | | handleError | 所有接口的失败回调 | - | - | - | | handleSuccess | 所有接口的成功回调 | - | - | - |

e.g

import HttpClient from 'sharegoods-ui/lib/utils/http/http-client';
import { Message } from 'element-ui';

Vue.use(HttpClient, {
    timeout:10000,
    Message,
    // 全局接口请求数据成功条件
    getResponseSuccess(response) {
        if ([10000].includes(response.code)) {
            return true;
        }
        return false;
    },
    transformResponse({ response, path }) {
        // 用户登录失效
        if ([10010].includes(response.code)) {
            store.dispatch('LogOut').then(() => {
                location.reload(true);
            });
        }
    },
    getAccessToken() {
        const token = getToken() || '';
        return { 'token': token };
    },
    // 全局接口请求错误的钩子
    handleError({ response, meta }) {
        if (meta && meta.isShowError) {
            Message({
                message: response.message,
                type: 'error',
                duration: 5 * 1000
            });
        }
    },
    // 全局接口请求成功的钩子
    handleSuccess({ response, meta }) {
        if (meta && meta.isShowSuccess) {
            Message({
                type: 'success',
                message: meta.message || '操作成功!'
            });
        }
    }
});

const http = Vue.http;
const API = http.httpFactory(Urls);

API.articleList({startTime:'2019-07-01',$timeout:5000},{isShowError:true}).then(res=>{
    console.log('response',res)
})

如果参数中包含$timeout则表明这个接口使用自定义的超时时间