新增mock数据

chenghx

2018-08-01 f15f33dd64a5e0c6bea46dd829884a0dea2c7610

新增mock数据

 package.json

@@ -15,6 +15,8 @@
  },
  "dependencies": {
    "@antv/data-set": "^0.8.9",
    "axios": "^0.18.0",
    "mockjs": "^1.0.1-beta3",
    "moment": "^2.22.2",
    "viser-vue": "^2.2.5",
    "vue": "^2.5.2",

 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 @@
    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 @@

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 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

New file
@@ -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

New file
@@ -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

New file
@@ -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

New file
@@ -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

New file
@@ -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]
})

 yarn.lock

@@ -547,6 +547,13 @@
  version "1.7.0"
  resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"

axios@^0.18.0:
  version "0.18.0"
  resolved "http://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
  dependencies:
    follow-redirects "^1.3.0"
    is-buffer "^1.1.5"

babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
  version "6.26.0"
  resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1812,7 +1819,7 @@
  dependencies:
    delayed-stream "~1.0.0"

commander@2, commander@2.16.x, commander@^2.13.0, commander@^2.9.0, commander@~2.16.0:
commander@*, commander@2, commander@2.16.x, commander@^2.13.0, commander@^2.9.0, commander@~2.16.0:
  version "2.16.0"
  resolved "http://registry.npm.taobao.org/commander/download/commander-2.16.0.tgz#f16390593996ceb4f3eeb020b31d78528f7f8a50"

@@ -3374,7 +3381,7 @@
    tape "^4.5.1"
    uglify-js "^2.6.2"

follow-redirects@^1.0.0:
follow-redirects@^1.0.0, follow-redirects@^1.3.0:
  version "1.5.1"
  resolved "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291"
  dependencies:
@@ -5388,6 +5395,12 @@
    mkdirp "0.5.1"
    supports-color "3.1.2"

mockjs@^1.0.1-beta3:
  version "1.0.1-beta3"
  resolved "http://registry.npm.taobao.org/mockjs/download/mockjs-1.0.1-beta3.tgz#d234f3c27256397564f2c955142e891909537209"
  dependencies:
    commander "*"

moment@^2.21.0, moment@^2.22.2:
  version "2.22.2"
  resolved "http://registry.npm.taobao.org/moment/download/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"