布局修改,小工具添加,mock数据接入,接口模拟请求

 .env

New file
@@ -0,0 +1,3 @@
NODE_ENV=dev
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://localhost:82

 package.json

@@ -16,6 +16,7 @@
        "core-js": "^2.6.5",
        "jsdom": "^18.1.1",
        "location": "0.0.1",
        "mockjs2": "^1.0.8",
        "navigator": "^1.0.1",
        "text-loader": "^0.0.1",
        "vue": "^2.6.14",

 src/App.vue

@@ -1,6 +1,6 @@
<template>
    <div id="app" class="app"  >
        <router-view class="" ></router-view>
    <div id="app" class="app">
        <router-view class=""></router-view>
    </div>
</template>

@@ -14,8 +14,7 @@
        computed: {},
        created() {},
        watch: {},
        methods: {
        }
        methods: {}
    }
</script>


 src/api/appManage.js

New file
@@ -0,0 +1,91 @@
/**
 * 系统应用
 *
 * @author yubaoshan
 * @date 2020年4月23日12:10:57
 */
import { axios } from '@/utils/request'

/**
 * 系统应用列表
 *
 * @author yubaoshan
 * @date 2020年7月9日15:05:01
 */
export function getAppPage () {
  return axios({
    url: '/list/article',
    method: 'get',
  })
}

/**
 * 系统应用列表
 *
 * @author yubaoshan
 * @date 2020年7月9日15:05:01
 */
export function getAppList (parameter) {
  return axios({
    url: '/sysApp/list',
    method: 'get',
    params: parameter
  })
}

/**
 * 新增系统应用
 *
 * @author yubaoshan
 * @date 2020年7月9日15:05:01
 */
export function sysAppAdd (parameter) {
  return axios({
    url: '/sysApp/add',
    method: 'post',
    data: parameter
  })
}

/**
 * 编辑系统应用
 *
 * @author yubaoshan
 * @param parameter
 * @returns {*}
 */
export function sysAppEdit (parameter) {
  return axios({
    url: '/sysApp/edit',
    method: 'post',
    data: parameter
  })
}

/**
 * 删除系统应用
 *
 * @author yubaoshan
 * @date 2020年7月9日15:05:01
 */
export function sysAppDelete (parameter) {
  return axios({
    url: '/sysApp/delete',
    method: 'post',
    data: parameter
  })
}

/**
 * 设为默认应用
 *
 * @author yubaoshan
 * @date 2020年7月9日15:05:01
 */
export function sysAppSetAsDefault (parameter) {
  return axios({
    url: '/sysApp/setAsDefault',
    method: 'post',
    data: parameter
  })
}

 src/components/group/boxRight.vue

@@ -55,6 +55,7 @@
                    }]
                },
                vo3: {
                    "link":"/main4",
                    title: "友情链接",
                    isShowRemark:true,
                    list: [{

 src/components/group/tempFriendBox.vue

@@ -36,7 +36,6 @@
</template>

<script>
    export default {}
</script>

</script>

 src/components/group/tool.vue

@@ -2,21 +2,25 @@
    <a-affix :offset-top="600">

        <div style="padding-left:5px;">
            <a-button @click="showDrawer1">
            <!-- <a-button @click="showDrawer1">
                抽屉1
            </a-button>
            </a-button> -->
            <!-- <a-button @click="showDrawer2">
                抽屉2
            </a-button> -->
            <a-button @click="showModal">
                日志
                <a-icon type="plus-circle" style="margin-left: 0px;" />
                <a-icon type="plus-circle" />
            </a-button>
            <a-button @click="showScreen">
                {{screenModel}}
                <a-icon type="arrows-alt" />
            </a-button>

            <a-button>
            <!-- <a-button>
                工具
                <a-icon type="tool" style="margin-left: 0px;" />
            </a-button>
            </a-button> -->
        </div>
    </a-affix>
</template>
@@ -24,7 +28,10 @@
<script>
    export default {
        data() {
            return {}
            return {
                screen: false,
                screenModel: "拉伸"
            }
        },
        methods: {
            showDrawer1() {
@@ -32,6 +39,15 @@
            },
            showModal() {
                this.$emit('showModal')
            },
            showScreen() {
                this.$emit('showScreen')
                if (this.screen) {
                    this.screenModel = "拉伸";
                }else{
                    this.screenModel = "缩小";
                }
                this.screen=!this.screen;
            }
        },
    }

 src/components/layouts/baseLayout.vue

@@ -11,7 +11,7 @@
            <AplayerBox />
            <tagFooter />
        </a-layout-footer>
		

        <a-back-top>
            <a-icon type="up" />回到顶部
        </a-back-top>
@@ -90,6 +90,10 @@
            }
        }

        .ant-timeline-item-head {
            background-color: transparent !important;
        }

    }

    span,

 src/components/mini/Aplayer.vue

@@ -1,5 +1,5 @@
<template>
    <div >
    <div class="fade">
        <aplayer :audio="audio"  fixed  style="z-index: 10;" :preload="preload"/>
    </div>
</template>

 src/components/mini/box-friend.vue

@@ -1,8 +1,10 @@
<template>
    <div style="display: flex;" class="link-box">
        <div v-for="temp in [1,2,1,1,1,1]">
    <div class="myFriend">
        <h1>朋友们</h1>
        <hr>
        <div class="link-box">
            <!-- <a href="#" target="_blank" class="no-underline"> -->
            <a href="#" class="no-underline">
            <a href="#" class="no-underline" v-for="temp in [1,2,1,1,1,1,1,1,1]">
                <div class="thumb">
                    <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
                </div>
@@ -24,89 +26,116 @@

<style lang="less">
    .myFriend {
        a {
            padding: 10px;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        padding: 10px 30px 0px;

        h1 {
            margin: .67em 0;
            padding-bottom: .3rem;
            font-size: 1.8em;
            line-height: 1.2;
            position: relative;
            font-weight: bold;
        }

        hr {
            overflow: hidden;
            margin: 1rem 0;
            padding: 0;
            height: .125rem;
            border: none;
            background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
        }
    }

    .link-box a {
        width: 33.75rem;
        background: #fff;
        float: left;
        margin: 0 0 4.375rem;
        color: #2E2E2E;
        text-decoration: none;
        border-bottom: none;
        border-radius: .25rem;
    .link-box {
        padding: 4.375rem 2.1875rem 2.1875rem;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
        -moz-box-shadow: 0 3px 0.0625rem #0000001a;
        box-shadow: 0 3px 0.0625rem #0000001a;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
        margin: -3.125rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        a {
            width: 33.75rem;
            background: #fff;
            float: left;
            margin: 0 0 4.375rem;
            color: #2E2E2E;
            text-decoration: none;
            border-bottom: none;
            border-radius: .25rem;
            overflow: hidden;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
            -moz-box-shadow: 0 3px 0.0625rem #0000001a;
            box-shadow: 0 3px 0.0625rem #0000001a;
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
            transition: .3s;

            .content {
                text-align: center;
                background-color: #fff;

                .title {
                    text-align: center;
                    padding: 1rem .25rem;
                    font-weight: 500;
                    color: #333;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin: 0;
                }
            }
        }

        .thumb {
            font-size: 0;
            overflow: hidden;
            background-color: #fff;
            margin: 0;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;

            img {
                width: 100%;
                height: auto;
                position: relative;
                margin: 0;
                padding: 0;
                -webkit-transition: .4s;
                -moz-transition: .4s;
                -ms-transition: .4s;
                -o-transition: .4s;
                transition: .4s;
            }
        }
    }

    .link-box a:hover:after {
        left: 0;
        width: 100%;
        -webkit-transition: width 350ms;
        -moz-transition: width 350ms;
        -ms-transition: width 350ms;
        -o-transition: width 350ms;
        transition: width 350ms;
    }
    // .link-box a:hover:after {
    //     left: 0;
    //     width: 100%;
    //     -webkit-transition: width 350ms;
    //     -moz-transition: width 350ms;
    //     -ms-transition: width 350ms;
    //     -o-transition: width 350ms;
    //     transition: width 350ms;
    // }

    .link-box a .thumb {
        font-size: 0;
        overflow: hidden;
        background-color: #fff;
        margin: 0;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }

    .link-box a .thumb img {
        width: 100%;
        height: auto;
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        -ms-transition: .4s;
        -o-transition: .4s;
        transition: .4s;
    }

    .link-box a .content {
        text-align: center;
        background-color: #fff;
    }

    .link-box a .content .title {
        text-align: center;
        padding: 1rem .25rem;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    .link-box a:hover,
    .link-box a:active {
@@ -121,29 +150,30 @@
        -moz-transform: none;
    }

    @media screen and (max-width: 710px) and (min-width: 319px) {
        .link-box {
            padding: 4.375rem 3.125rem 3.125rem;
            margin: -3.125rem;
        }

        .myFriend {
            padding: 10px 15px 0px;
        }
    }

    @media screen and (min-width: 1600px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(500% / 5 - 1.875rem);
            width: calc(500% / 5 - 1.875rem);
            width: -webkit-calc(120% / 5 - 1.875rem);
            width: calc(120% / 5 - 1.875rem);
        }
    }

    @media screen and (max-width: 1599px) and (min-width: 768px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(150% / 4 - 1.875rem);
            width: calc(150% / 4 - 1.875rem);
        }
    }



    @media screen and (max-width: 500px) and (min-width: 319px) {
        .link-box a {
            margin: 0 0.75rem 1.5rem;
            width: -webkit-calc(50% - 1.5rem);
            width: calc(50% - 1.5rem);
            width: -webkit-calc(130% / 4 - 1.875rem);
            width: calc(130% / 4 - 1.875rem);
        }
    }

@@ -154,4 +184,13 @@
            width: calc(100% / 3 - 1.875rem);
        }
    }


    @media screen and (max-width: 500px) and (min-width: 319px) {
        .link-box a {
            margin: 0 0.75rem 1.5rem;
            width: -webkit-calc(50% - 1.5rem);
            width: calc(50% - 1.5rem);
        }
    }
</style>

 src/components/mini/box1-info.vue

@@ -17,6 +17,7 @@
</template>

<script>
    import { getAppPage } from '/src/api/appManage.js'
    export default {
        name: "box",
        data() {
@@ -26,6 +27,12 @@
                sentence: "十里寒塘路,烟花一半醒",
                location: "广州"
            }
        },
        created() {
            console.log(getAppPage().then((res) => {
                console.log(res);
                return res
            }));
        }
    }
</script>

 src/components/mini/box4-minibox.vue

@@ -1,7 +1,11 @@
<template>
    <div class="blog-container ">
        <div>
            <span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}">{{title}}</span>
            <span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}">
                <router-link :to="link">
                    {{title}}
                </router-link>
            </span>
        </div>
        <div class="blog-scroll show-line ">
            <div class="blog-right-side-meta " v-for="item in list">
@@ -19,6 +23,9 @@
<script>
    export default {
        props: {
            link: {
                default:"#"
            },
            title: "",
            list: "",
            isShowRemark: false
@@ -37,10 +44,13 @@
    /*右边的部分*/

    .blog-right-side-portion-title {
        a {
            color: black;
        }

        display: block;
        font-size: 15px;
        padding-bottom: 8px;

    }

    span.title-remark::after {

 src/components/mini/tagInfo.vue

@@ -1,12 +1,10 @@
<template>
    <div class="swichTag">
        <a-page-header style="padding: 0px;" title=" " @back="() => this.$router.go(-1)">
        </a-page-header>
        <a-divider :dashed="true" orientation="left">关于我的一些..<span class="myTip">小故事</span></a-divider>

    <div class="swichTag ">
        <a-page-header title="关于我的一些..小故事" style="padding: 10px 0px 20px 0px;" @back="() => this.$router.go(-1)" />
		
        <a-timeline pending="...">
            <p slot="pendingDot" style="font-size: 18px;" />
            <a-timeline-item color="white">
            <a-timeline-item color="">
                <a-icon slot="dot" type="form" style="font-size: 18px;" />
                <br>
                <p>
@@ -15,19 +13,24 @@
                    <li> 喜欢钢琴~喜欢吉他 </li>
                    <li> 爱音乐,也爱看番 </li>
                    <li> B界的白嫖怪</li>
                    <li> PC单机的<!-- <span class="myTip">伪</span> --><span class="myTip" style="text-decoration:line-through">硬核</span>玩家 </li>
                    <li> PC单机的
                        <!-- <span class="myTip">伪</span> --><span class="myTip"
                            style="text-decoration:line-through">硬核</span>玩家
                    </li>
                    <li>

                        <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;border-radius: 20px;" />
                        <img src="http://t.inleft.com/share/media_photo/xm.jpg"
                            style="width: 35px;border-radius: 20px;" />
                        我的小老弟&御用暖床袋
                        <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;border-radius: 30px" />
                        <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg"
                            style="width: 50px;border-radius: 30px" />
                        <span style="font-size: 10px;color: #999">(小乖)</span>
                    </li>
                </ul>
                </p>
            </a-timeline-item>

            <a-timeline-item color="white">
            <a-timeline-item color="">
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h4 class="layui-timeline-title">202108</h4>
                <p>到我提笔准备写下篇类日记的时候,时间已经来到了16号,
@@ -54,7 +57,7 @@
                <br>end..希望我们的故事还没有终点..
            </a-timeline-item>

            <a-timeline-item color="<white></white>">
            <a-timeline-item color="">
                <a-icon slot="dot" type="align-left" style="font-size: 18px;" />

                <br><em>爱她所爱,思她所思,为她承担伤痛</em>
@@ -72,5 +75,5 @@
</script>

<style lang="less">

	
</style>

 src/components/swichLabel/main1-show.vue

@@ -4,7 +4,7 @@

        <div class="blog-drawer">
            <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
                :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270
                :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300
                :bodyStyle="{padding:'0px'}"
                :wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}">
                <boxLeft></boxLeft>
@@ -34,7 +34,7 @@

                <a-col v-bind="colApiRight" ref="myDrawer">
                    <!-- <boxRight></boxRight> -->
                    <tool @showModal="showModal" @showDrawer1="showDrawer1"></tool>
                    <tool @showModal="showModal" @showDrawer1="showDrawer1" @showScreen="showScreen"></tool>
                </a-col>
            </a-row>
        </div>
@@ -43,7 +43,6 @@
</template>

<script>
    import tempFriendBox from "../group/tempFriendBox.vue"
    import boxLeft from "../group/boxLeft.vue"
    import boxRight from "../group/boxRight.vue"
    import articleListScorll from "../group/articleListScorll.vue"
@@ -53,7 +52,6 @@
    export default {

        components: {
            tempFriendBox,
            boxLeft,
            boxRight,
            articleListScorll,
@@ -61,6 +59,25 @@
            MyModal,
        },
        methods: {
            showScreen() {
                if (this.screen) {
                    //缩小
                    this.colApiLeft.xxl.span = 0;
                    this.colApiLeft.xxl.offset = 0;

                    this.colApiMain.xxl.span = 17;
                    this.colApiMain.xxl.offset = 4;
                } else {
                    //放大
                    this.colApiLeft.xxl.span = 4;
                    this.colApiLeft.xxl.offset = 3;

                    this.colApiMain.xxl.span = 11;
                    this.colApiMain.xxl.offset = 2;
                }
                this.screen = !this.screen;

            },
            showModal() {
                this.$refs.myModal.showModal();
            },
@@ -75,6 +92,7 @@
        },
        data() {
            return {
                screen: true,
                visible1: false,
                visible2: false,
                colMini: {
@@ -135,7 +153,6 @@
                        offset: 2,
                    },
                }

            }
        }
    }
@@ -145,8 +162,9 @@
    .swichTag {
        min-height: 750px;
        padding: 30px 30px 10px;
        background-color: white;
        border-radius: 15px;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        padding: 20px 30px 0px;
    }

    .holdHeight {

 src/main.js

@@ -14,6 +14,7 @@
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer,{productionTip:false})
import './mock/'

Vue.prototype.$axios = axios


 src/mock/index.js

New file
@@ -0,0 +1,28 @@

function isIE() {
    const bw = window.navigator.userAgent
    const compare = (s) => bw.indexOf(s) >= 0
    const ie11 = (() => 'ActiveXObject' in window)()
    return compare('MSIE') || ie11
}
// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
    if (isIE()) {
        console.error('[antd-pro] ERROR: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.')
    }
    // 使用同步加载依赖
    // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
    console.log('[antd-pro] mock mounting')
    const Mock = require('mockjs2')
    // require('./services/auth')
    // require('./services/user')
    // require('./services/manage')
    // require('./services/other')
    // require('./services/tagCloud')
    require('./test/article.js')

    Mock.setup({
        timeout: 800 // setter delay time
    })
    console.log('[antd-pro] mock mounted')
}

 src/mock/test/article.js

New file
@@ -0,0 +1,89 @@
import Mock from 'mockjs2'
import { builder, getQueryParameters } from '../util'

const titles = [
  'Alipay',
  'Angular',
  'Ant Design',
  'XiaoNuo',
  'Bootstrap',
  'React',
  'Vue',
  'Webpack'
]

const avatar = ['https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
  'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
  'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
  'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
]

const covers = [
  'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
  'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
  'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
  'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png'
]

const owner = [
  '付小小',
  '吴加好',
  '周星星',
  '林东东',
  '曲丽丽'
]

const content = '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。'
const description = '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
const href = 'https://ant.design'

const article = (options) => {
  const queryParameters = getQueryParameters(options)
  console.log('queryParameters', queryParameters)
  if (queryParameters && !queryParameters.count) {
    queryParameters.count = 5
  }
  const data = []
  for (let i = 0; i < queryParameters.count; i++) {
    const tmpKey = i + 1
    const num = parseInt(Math.random() * (4 + 1), 10)
    data.push({
      id: tmpKey,
      avatar: avatar[num],
      owner: owner[num],
      content: content,
      star: Mock.mock('@integer(1, 999)'),
      percent: Mock.mock('@integer(1, 999)'),
      like: Mock.mock('@integer(1, 999)'),
      message: Mock.mock('@integer(1, 999)'),
      description: description,
      href: href,
      title: titles[ i % 8 ],
      updatedAt: Mock.mock('@datetime'),
      members: [
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
          name: '曲丽丽',
          id: 'member1'
        },
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
          name: '王昭君',
          id: 'member2'
        },
        {
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
          name: '董娜娜',
          id: 'member3'
        }
      ],
      activeUser: Math.ceil(Math.random() * 100000) + 100000,
      newUser: Math.ceil(Math.random() * 1000) + 1000,
      cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)]
    })
  }
  return builder(data)
}

Mock.mock(/\/list\/article/, 'get', article)

 src/mock/util.js

New file
@@ -0,0 +1,38 @@
const responseBody = {
  message: '',
  timestamp: 0,
  result: null,
  code: 0
}

export const builder = (data, message, code = 0, headers = {}) => {
  responseBody.result = data
  if (message !== undefined && message !== null) {
    responseBody.message = message
  }
  if (code !== undefined && code !== 0) {
    responseBody.code = code
    responseBody._status = code
  }
  if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
    responseBody._headers = headers
  }
  responseBody.timestamp = new Date().getTime()
  return responseBody
}

export const getQueryParameters = (options) => {
  const url = options.url
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search)
    .replace(/"/g, '\\"')
    .replace(/&/g, '","')
    .replace(/=/g, '":"') + '"}')
}

export const getBody = (options) => {
  return options.body && JSON.parse(options.body)
}

 src/utils/axios.js

New file
@@ -0,0 +1,35 @@
const VueAxios = {
  vm: {},
  // eslint-disable-next-line no-unused-vars
  install (Vue, instance) {
    if (this.installed) {
      return
    }
    this.installed = true

    if (!instance) {
      // eslint-disable-next-line no-console
      console.error('You have to install axios')
      return
    }

    Vue.axios = instance

    Object.defineProperties(Vue.prototype, {
      axios: {
        get: function get () {
          return instance
        }
      },
      $http: {
        get: function get () {
          return instance
        }
      }
    })
  }
}

export {
  VueAxios
}

 src/utils/request.js

New file
@@ -0,0 +1,109 @@
import Vue from 'vue'
import axios from 'axios'
// import store from '@/store'
import {
    message,
    Modal,
    notification
} from 'ant-design-vue' /// es/notification
import {
    VueAxios
} from './axios'
// import { ACCESS_TOKEN } from '@/store/mutation-types'

// 创建 axios 实例
const service = axios.create({
    baseURL: '/api', // api base_url
    timeout: 6000 // 请求超时时间
})

const err = (error) => {
    if (error.response) {


        const data = error.response.data
        // const token = Vue.ls.get(ACCESS_TOKEN)
        if (error.response.status === 404) {
            notification.error({
                message: '404',
                description: "找不到请求地址"
            })
        }

        if (error.response.status === 403) {
            console.log('服务器403啦，要重新登录！')
            notification.error({
                message: 'Forbidden',
                description: data.message
            })
        }
        if (error.response.status === 500) {
            if (data.message.length > 0) {
                message.error(data.message)
            }
        }
        if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
            notification.error({
                message: 'Unauthorized',
                description: 'Authorization verification failed'
            })
            // if (token) {
            //     store.dispatch('Logout').then(() => {
            //         setTimeout(() => {
            //             window.location.reload()
            //         }, 1500)
            //     })
            // }
        }
    }
    return Promise.reject(error)
}

// request interceptor
service.interceptors.request.use(config => {
    // const token = Vue.ls.get(ACCESS_TOKEN)
    // if (token) {
    //   config.headers['Authorization'] = 'Bearer ' + token
    // }
    config.headers['Authorization'] = 'Bearer ';
    return config
}, err)

/**
 * response interceptor
 * 所有请求统一返回
 */
service.interceptors.response.use((response) => {
    if (response.request.responseType === 'blob') {
        return response
    }
    const code = response.data.code
    if (code === 1011006 || code === 1011007 || code === 1011008 || code === 1011009) {
        Modal.error({
            title: '提示：',
            content: response.data.message,
            okText: '重新登录',
            onOk: () => {
                Vue.ls.remove(ACCESS_TOKEN)
                window.location.reload()
            }
        })
    } else if (code === 1013002 || code === 1016002 || code === 1015002) {
        message.error(response.data.message)
        return response.data
    } else {
        return response.data
    }
}, err)

const installer = {
    vm: {},
    install(Vue) {
        Vue.use(VueAxios, service)
    }
}

export {
    installer as VueAxios,
    service as axios
}