mock(vue)

一樣是mock模擬數據，用到vue項目中有相應的組件--mocker-api

利用腳手架搭建一個項目：vue init webpack yourProjectName

腳手架搭建的項目有不少的配置的要點，還有向webpack4的升級（最近說webpack5即將要發佈了，裏面的配置選項有不少和webpack4截然不同，若是有興趣的能夠參考個人這篇文章http://www.javashuo.com/article/p-tmtuzfjh-kh.html，這篇文章講的是webpack3向webpack4遷移遇到的具體問題和相應的解決辦法，對於一個webpack3的項目遷移時的具體操做大有裨益）

這篇文章咱們主要介紹的是在vue-webapck項目中的mock的使用和操做

用腳手架搭建的項目目錄大體以下：

main.js是主要的js文件，咱們在main.js中引入如下代碼：

import axios from 'axios'
Vue.prototype.$axios = axios

至關於將axios註冊到全局，在其餘的地方用this.$axios引用。

如上圖目錄咱們新建一個文件夾mock，在裏面存放mock.js文件，內容以下：　　

const proxy = {
    'GET /api/user': { id: 1, username: 'kenny', sex: 6 },
    'GET /api/user/list': [
      { id: 1, username: 'kenny', sex: 6 },
      { id: 2, username: 'kenny', sex: 6 }
    ],
    'POST /api/login/account': (req, res) => {
      const { password, username } = req.body
      if (password === '888888' && username === 'admin') {
        return res.send({
          status: 'ok',
          code: 0,
          token: 'sdfsdfsdfdsf',
          data: { id: 1, username: 'kenny', sex: 6 }
        })
      } else {
        return res.send({ status: 'error', code: 403 })
      }
    },
    'DELETE /api/user/:id': (req, res) => {
      console.log('---->', req.body)
      console.log('---->', req.params.id)
      res.send({ status: 'ok', message: '刪除成功！' })
    }
  }
  module.exports = proxy

以上代碼exports了一個接口對象。用法如上圖。

咱們只在開發環境mock數據就夠了，因此在開發配置的webpack.dev.conf.js中加入代碼：

const apiMocker = require('mocker-api') 

在devServer中添加before方法

before (app) {
      apiMocker(app, path.resolve('./mock/mock.js'))
}

如今，完成了對於mock的配置，而後咱們能夠在具體的vue文件裏面使用mock.js的接口了。

例如在HelloWorld.vue中：

this.$axios.get("/api/user").then(res => {
      console.log(res.data);
      this.msg = res.data.username;
    });

效果如圖：

固然mock.js中的數據依然能夠用mock的語法進行編寫。