乐趣区

在mockjs官网上没学到的

jiezi

mock 会拦截下指定的请求，并返回由 mock 计算出的数据。
mock 拦截下的请求不会在 network 里出现。
mock 方便前端脱离后端进行开发。
先来一个 dome 说明怎么使用。mock 怎么与项目结合使用。

mockjs demo

  1. npm i mockjs // 安装 mockjs
  2. 创建 src/mock.js // 用来生成 mock 数据。
  3. 在 main.js 引入 src/mock.js require('./mock.js') // 全项目都可使用 mock 接口。
  4. 编辑一个 vue 文件。first.vue // 用来使用 mock.js 的数据。
  5. 创建api.js，建议放在 ’src/lib/api.js’。// 用来封装 axios。这样做对于项目规范。非要每个请求都实例出 axios 也行。
  6. 在 first.vue 文件引入 api.js。

做了以上 5 步，就可以在 first.vue 文件时使用 api.js 调用 mock 了。

下面是具体代码。

    // mock.js
    import Mock from 'mockjs'
    const Random = Mock.Random
    let name = [] // 模板
    for (let i = 0; i < 3; i++) { // 在模板中生成多条数据
      name.push({name: Random.string(3, 8),
        age: Mock.mock({'number|1-100': 100})
      })
    }
    let age = {
      ages: Mock.mock({'number|1-100': 100})
    }
    Mock.setup({timeout: '200' // 2s-2s 后返回数据})
    Mock.mock('/data/name', 'post', name)
    Mock.mock('/data/age', 'get', age)
    // main.js
    require('./mock.js')
    // first.vue
    <template>
      <div class="basic">
        basic
      </div>
    </template>
    <script>
    export default {props: {},
      data () {return {}
      },
      computed: { },
      components: { },
      methods: {},
      created () {},
      mounted () {}
    }
    </script>
    <style lang="sass" scoped>
    .basic
    </style>
    // api.js
    import axios from 'axios'
    // 请求拦截
    axios.interceptors.request.use(res => {return res}, error => {return Promise.reject(error)
    })
    // 响应拦截
    axios.interceptors.response.use(res => {console.log('res', res)
      return res
    }, error => {return Promise.reject(error)
    })
    // 封装 post
    const fetch = (url, params) => {return new Promise((resolve, reject) => {axios({url: url, params: params, method: 'post'}).then(res => {resolve(res.data)
        }).catch(err => {reject(err)
        })
      })
    }
    // 输出
    export default {mockData (url, params) {return fetch(url, params)
      },
      mockDataAge (url, params) {return new Promise((resolve, reject) => {axios({url: url, params: params, method: 'get'}).then(res => {resolve(res.data)
          }).catch(err => {reject(err)
          })
        })
      }
    }
    // first.vue
    // 引入
    import api from '../../lib/api.js'
    // 使用
    getData () {api.mockData('/data/name').then(res => {this.dataName = res})
    },
    getDataAge () {api.mockDataAge('/data/age').then(res => {this.dataAge = res})
    }

数据模板 数据占位符

数据模板在官网都没有定义。我理解是数据模板就是 Mock.mock() 里使用的对象。
数据占位符是数据模板中用来生成指定类型数据的占位符。使用 @占位符(params[,params]) 表示。
Mock.Random 是一个工具类，用来生成各种随机数据。
数据模板中 @占位符(params[,params]) 是占位符，用来生成相应数据。有人把占位符理解为 mock 内置模板。毕竟Mock.mock() 使用它们作为参数。

后记

网上有好多关于 mock 的文章。都没说清楚模板是什么，做什么的，怎么用。占位符是什么，做什么的，怎么用。
官网上也不写 demo. 看了好几遍就看到 api. 能不能从大到小写文档？
为什么进入官网学教程又进入 git 里的 wiki?
优点是官网的 api 写的好。可以在 console 里运行。

退出移动版