From f9c38ed1b72fc96b96c1d3ffdcc1a66b03bd3b73 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 21 Jan 2022 18:03:07 +0800
Subject: [PATCH] 布局修改,小工具添加,mock数据接入,接口模拟请求
---
src/mock/util.js | 38 ++
.env | 3
src/components/mini/tagInfo.vue | 27 +
src/mock/test/article.js | 89 ++++++
src/components/group/tool.vue | 28 +
src/components/mini/box-friend.vue | 225 ++++++++++-------
src/utils/request.js | 109 ++++++++
src/mock/index.js | 28 ++
src/components/group/boxRight.vue | 1
src/components/mini/box4-minibox.vue | 14
src/components/mini/Aplayer.vue | 2
src/main.js | 1
src/components/group/tempFriendBox.vue | 1
src/utils/axios.js | 35 ++
package.json | 1
src/components/swichLabel/main1-show.vue | 30 +
src/api/appManage.js | 91 +++++++
src/components/layouts/baseLayout.vue | 6
src/App.vue | 7
src/components/mini/box1-info.vue | 7
20 files changed, 617 insertions(+), 126 deletions(-)
diff --git a/.env b/.env
new file mode 100644
index 0000000..154a510
--- /dev/null
+++ b/.env
@@ -0,0 +1,3 @@
+NODE_ENV=dev
+VUE_APP_PREVIEW=true
+VUE_APP_API_BASE_URL=http://localhost:82
\ No newline at end of file
diff --git a/package.json b/package.json
index 0d554fc..828db2c 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index c01b988..428e466 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/api/appManage.js b/src/api/appManage.js
new file mode 100644
index 0000000..d03bcc0
--- /dev/null
+++ b/src/api/appManage.js
@@ -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
+ })
+}
diff --git a/src/components/group/boxRight.vue b/src/components/group/boxRight.vue
index e6bbe27..2d521a2 100644
--- a/src/components/group/boxRight.vue
+++ b/src/components/group/boxRight.vue
@@ -55,6 +55,7 @@
}]
},
vo3: {
+ "link":"/main4",
title: "友情链接",
isShowRemark:true,
list: [{
diff --git a/src/components/group/tempFriendBox.vue b/src/components/group/tempFriendBox.vue
index aa097bd..77b5928 100644
--- a/src/components/group/tempFriendBox.vue
+++ b/src/components/group/tempFriendBox.vue
@@ -36,7 +36,6 @@
</template>
<script>
- export default {}
</script>
</script>
diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue
index 88b4c2b..05d4ea7 100644
--- a/src/components/group/tool.vue
+++ b/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;
}
},
}
diff --git a/src/components/layouts/baseLayout.vue b/src/components/layouts/baseLayout.vue
index a168c40..88e4f70 100644
--- a/src/components/layouts/baseLayout.vue
+++ b/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,
diff --git a/src/components/mini/Aplayer.vue b/src/components/mini/Aplayer.vue
index 10f36e1..9612478 100644
--- a/src/components/mini/Aplayer.vue
+++ b/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>
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index 74aa7e3..a5a5805 100644
--- a/src/components/mini/box-friend.vue
+++ b/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>
diff --git a/src/components/mini/box1-info.vue b/src/components/mini/box1-info.vue
index ea66ad9..4e14603 100644
--- a/src/components/mini/box1-info.vue
+++ b/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>
diff --git a/src/components/mini/box4-minibox.vue b/src/components/mini/box4-minibox.vue
index 1da9efa..1e42eca 100644
--- a/src/components/mini/box4-minibox.vue
+++ b/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 {
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index 364c2a8..d42c433 100644
--- a/src/components/mini/tagInfo.vue
+++ b/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>
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 4e0c085..af389a3 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/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 {
diff --git a/src/main.js b/src/main.js
index 824ba66..99eee08 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@
import APlayer from '@moefe/vue-aplayer';
Vue.use(APlayer,{productionTip:false})
+import './mock/'
Vue.prototype.$axios = axios
diff --git a/src/mock/index.js b/src/mock/index.js
new file mode 100644
index 0000000..125db81
--- /dev/null
+++ b/src/mock/index.js
@@ -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')
+}
diff --git a/src/mock/test/article.js b/src/mock/test/article.js
new file mode 100644
index 0000000..37057f7
--- /dev/null
+++ b/src/mock/test/article.js
@@ -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)
diff --git a/src/mock/util.js b/src/mock/util.js
new file mode 100644
index 0000000..a4be036
--- /dev/null
+++ b/src/mock/util.js
@@ -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)
+}
diff --git a/src/utils/axios.js b/src/utils/axios.js
new file mode 100644
index 0000000..3b91f6b
--- /dev/null
+++ b/src/utils/axios.js
@@ -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
+}
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..b9e2a46
--- /dev/null
+++ b/src/utils/request.js
@@ -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
+}
--
Gitblit v1.9.1