Mockjs---自定義靜態數據---Vue ui視圖化的建立項目的筆記

 

--------------------------------
mock前端靜態數據--資料
1.使用vue ui
視圖化工具----建立vue 項目
2.點擊vue 項目管理器
3.項目名稱vue_mock 包管理器：建議使用npm 由於yarn適合在react中使用

4.初始化git倉庫 打開-- init project
5.功能--打開babel linter 使用配置文件
6.配置--select---選擇標準的語法---ESLint + Standard config
打開是檢查語法---Lint on save
--------------項目建立完成--cmd命令在建立不要關閉
7.添加插件--搜索element-ui
選擇第二項---按需引入--import on demand
語言模式--zh-cn

8.安裝mockjs依賴--運行依賴

main.js

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'

// 導入mock 文件---打開vue ui  安裝axios依賴
import './mock/index.js'
import axios from 'axios'
Vue.config.productionTip = false
// 全局掛載
Vue.prototype.$http = axios
new Vue({
  render: h => h(App)
}).$mount('#app')

　　

 

App.vue

<template>
  <div id="app">
   <h1>學習mockjs</h1>
     <hr/>
     <!-- 模擬get 請求 -->
    <button @click="getGoodsList">獲取商品列表</button>
    <!-- 模擬post請求 -->
    <button @click="addGoods">添加商品</button>
    <!-- 根據id獲取商品詳情 -->
    <button @click="getGoodsById(2)">獲取商品詳情</button>
  </div>
</template>

<script>

export default {
  methods: {
    // 模擬異步get
    async getGoodsList () {
      const { data: res } = await this.$http.get('/api/goodslist')
      console.log(res)
    },

    // 模擬異步post
    async addGoods () {
      const { data: res } = await this.$http.post('/api/addgoods', {
        name: '菠蘿',
        price: 8,
        count: 550,
        img: ''
      })
      console.log(res)
    },

    // 根據id獲取商品詳情---注意`/api/getgoods/${id}`z 這裏不是單引號是分隔號
    async getGoodsById (id) {
      const { data: res } = await this.$http.get(`/api/getgoods/${id}`)
      console.log(res)
    }
  }
}
</script>

<style>

</style>

　mock---index.js

// 導入模擬假數據的包
import Mock, { Random } from 'mockjs'

// 自定義一個數組--隨機獲取這個數組裏邊的值--引用Random
// 建立自定義Mock函數
Random.extend({
  // 自定義函數名：function 函數
  fruit: function () {
    const arr = ['榴蓮', '菠蘿蜜', '椰子', '蘋果', '菠蘿']
    return this.pick(arr)
  }
})

// 經過Mock.mock()來模擬API接口----GET請求
Mock.mock('/api/goodslist', 'get', {
  status: 200,
  message: '獲取商品列表成功',
  // 生成5到10條，或者直接data|5條數據
  'data|5-10': [
    {
      // mock自增函數@increment-從1開始
      id: '@increment(1)',
      // 隨機返回中文文字-顯示名字
      name: '@cword(2, 8)',
      // 隨機返回一個天然數
      price: '@natural(2, 10)',
      count: '@natural(100, 999)',
      // 建議使用 data字符串壓縮64格式，你建議url地址請求
      img: '@dataImage(78x78)'
    }
  ]
})

// 經過Mock.mock()來模擬API接口---POST請求
Mock.mock('/api/addgoods', 'post', function (option) {
// 這裏的option是請求相關的參數
  console.log(option)
  return {
    status: 200,
    message: '添加商品成功'
  }
  /*
  外層的 mock是攔截請求的
  返回參數要想引用函數,須要再次引用mock函數
  return Mock.mock({
      status: 200,
      message: '@cword(2,5)'
  })
  */
})

// 經過Mock.mock()來模擬API接口----GET請求--請求帶參數--根據id返回商品詳情
/*
Mock.mock('/api/getgoods/1', 'get', {
  data: {
    id: 9,
    name: '蘋果',
    price: 2,
    img: '@dataImage(78x78)'
  },
  status: 200,
  message: '獲取商品詳情成功'
})
*/
// 動態獲取id---轉義字符
/*
Mock.mock(/\/api\/getgoods/, 'get', {
  data: {
    id: 9,
    name: '蘋果',
    price: 2,
    img: '@dataImage(78x78)'
  },
  status: 200,
  message: '獲取商品詳情成功'
})
*/
// 獲取傳過來的參數id--使用正則拆分
Mock.mock(/\/api\/getgoods/, 'get', function (option) {
  console.log(option)

  const res = /\/api\/getgoods\/(\d+)/.exec(option.url)
  console.log(res)
  return Mock.mock({
    data: {
    // 轉成數字
      id: res[1] - 0,
      name: '@fruit()', // 調用自定義數組
      price: 2,
      img: '@dataImage(78x78)'
    },
    status: 200,
    message: '獲取商品詳情成功'
  })
})