新增mock数据

src/components/dashboard/WorkPlace.vue

@@ -2,11 +2,11 @@
   <page-layout>
     <div slot="desc" class="desc">
       <div class="avatar">
-        <a-avatar size="large" shape="circle" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+        <a-avatar size="large" shape="circle" :src="currUser.avatar" />
       </div>
       <div class="content">
-        <div class="title">早安，ICZER，祝你开心每一天！</div>
-        <div>交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</div>
+        <div class="title">{{currUser.timefix}}，{{currUser.name}}，{{currUser.welcome}}</div>
+        <div>{{currUser.position}}</div>
       </div>
     </div>
     <div slot="extra">
@@ -27,11 +27,11 @@
         <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
           <a-card style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
             <a slot="extra">全部项目</a>
-            <a-card-grid :key="n" v-for="n in 6">
+            <a-card-grid :key="i" v-for="(item, i) in projects">
               <a-card :bordered="false" :body-style="{padding: 0}">
-                <a-card-meta description="那是一种内在的东西，他们到达不了，也无法触及的">
+                <a-card-meta :description="item.desc">
                   <div slot="title" class="card-title">
-                    <a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" />
+                    <a-avatar size="small" :src="item.logo" />
                     <a>Alipay</a>
                   </div>
                 </a-card-meta>
@@ -121,7 +121,35 @@ export default {
     HeadInfo,
     AAvatar,
     PageLayout,
-    PageHeader}
+    PageHeader},
+  data () {
+    return {
+      currUser: {},
+      projects: []
+    }
+  },
+  mounted () {
+    this.currentUser()
+    this.getProjectList()
+  },
+  methods: {
+    currentUser () {
+      this.$axios({
+        method: 'get',
+        url: '/user/current'
+      }).then(res => {
+        this.currUser = res.data
+      })
+    },
+    getProjectList () {
+      this.$axios({
+        method: 'get',
+        url: '/project'
+      }).then(res => {
+        this.projects = res.data
+      })
+    }
+  }
 }
 </script>
 

src/components/layout/HeaderlAvatar.vue

@@ -1,8 +1,8 @@
 <template>
   <a-dropdown style="display: inline-block; height: 100%" >
     <span style="vertical-align: middle; cursor: pointer">
-      <a-avatar style="vertical-align: middle;" size="small" shape="circle" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"/>
-      <span>ICZER</span>
+      <a-avatar style="vertical-align: middle;" size="small" shape="circle" :src="currUser.avatar"/>
+      <span>{{currUser.name}}</span>
     </span>
     <a-menu style="width: 150px" slot="overlay">
       <a-menu-item>
@@ -33,7 +33,28 @@ const AMenuDivider = AMenu.Divider
 
 export default {
   name: 'HeaderAvatar',
-  components: {AMenu, AMenuItem, AMenuDivider, AIcon, AAvatar, ADropdown}
+  components: {AMenu, AMenuItem, AMenuDivider, AIcon, AAvatar, ADropdown},
+  data () {
+    return {
+      currUser: {
+        name: 'XXXXX',
+        avatar: ''
+      }
+    }
+  },
+  mounted () {
+    this.currentUser()
+  },
+  methods: {
+    currentUser () {
+      this.$axios({
+        method: 'get',
+        url: '/user/current'
+      }).then(res => {
+        this.currUser = res.data
+      })
+    }
+  }
 }
 </script>
 

src/main.js

@@ -5,7 +5,10 @@ import App from './App'
 import router from './router'
 import 'vue-antd-ui/dist/antd.css'
 import Viser from 'viser-vue'
+import axios from 'axios'
+import '@/mock/index'
 
+Vue.prototype.$axios = axios
 Vue.config.productionTip = false
 Vue.use(Viser)
 

src/mock/common/index.js

@@ -0,0 +1,34 @@
+const avatars = [
+  'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png'
+]
+
+const positions = [
+  'JAVA工程师 | 蚂蚁金服-计算服务事业群-微信平台部',
+  '前端工程师 | 蚂蚁金服-计算服务事业群-VUE平台',
+  '前端工程师 | 蚂蚁金服-计算服务事业群-REACT平台',
+  '产品分析师 | 蚂蚁金服-计算服务事业群-IOS平台部'
+]
+
+const sayings = [
+  '那是一种内在的东西，他们到达不了，也无法触及的',
+  '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+  '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+  '那时候我只会想自己想要什么，从不想自己拥有什么'
+]
+
+const logos = [
+  '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/kZzEzemZyKLKFsojXItE.png',
+  'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'
+]
+
+const admins = ['ICZER', 'JACK', 'LUIS', 'DAVID']
+
+export {logos, sayings, positions, avatars, admins}

src/mock/extend/index.js

@@ -0,0 +1,30 @@
+import Mock from 'mockjs'
+import {logos, sayings, positions, avatars, admins} from '../common'
+
+const Random = Mock.Random
+
+Random.extend({
+  admin () {
+    return this.pick(admins)
+  },
+  welcome () {
+    return this.pick(['休息一会儿吧', '准备吃什么呢', '要不要打一把DOTA', '我猜你可能累了'])
+  },
+  timefix () {
+    const time = new Date()
+    const hour = time.getHours()
+    return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 20 ? '下午好' : '晚上好')))
+  },
+  avatar () {
+    return this.pick(avatars)
+  },
+  position () {
+    return this.pick(positions)
+  },
+  saying () {
+    return this.pick(sayings)
+  },
+  logo () {
+    return this.pick(logos)
+  }
+})

src/mock/index.js

@@ -0,0 +1,8 @@
+import Mock from 'mockjs'
+import '@/mock/user/current'
+import '@/mock/project'
+
+// 设置全局延时
+Mock.setup({
+  timeout: '300-600'
+})

src/mock/project/index.js

@@ -0,0 +1,15 @@
+import Mock from 'mockjs'
+import '@/mock/extend'
+
+const projectArr = Mock.mock({
+  'list|6': [
+    {
+      logo: '@LOGO',
+      desc: '@SAYING'
+    }
+  ]
+}).list
+
+Mock.mock('/project', 'get', () => {
+  return projectArr
+})

src/mock/user/current.js

@@ -0,0 +1,19 @@
+import Mock from 'mockjs'
+import '@/mock/extend'
+
+const userDB = Mock.mock({
+  'list|2-10': [
+    {
+      name: '@ADMIN',
+      avatar: '@AVATAR',
+      address: '@CITY',
+      welcome: '@WELCOME',
+      timefix: '@TIMEFIX',
+      position: '@position'
+    }
+  ]
+}).list
+
+Mock.mock('/user/current', 'get', () => {
+  return userDB[0]
+})