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: '获取商品详情成功'
  })
})