vue中使用mockjs

╰半橙微兮° 2021-12-19 02:21 311阅读 0赞

1.安装mockjs 和axios

npm install --save-dev mockjs
    npm install --save axios

2.在src目录下创建mock文件夹，并创建index.js文件，内容如下：

import Mock from 'mockjs'
    
    const data={ 
        "id":"@guid",
        "name":"@cname",
    };
    
    Mock.mock('/api/test', 'post', data)
    
    export default Mock;

3.在main.js中引入mock文件下的index.js文件

import Mock from '@/mock'

4.App.vue中使用

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <span>{
       {$t("global.test")}}</span>
        <button @click="testReq">测试请求</button>
        <router-view/>
      </div>
    </template>
    
    <script>
    import Cookie from './util/cookie'
    import Axios from 'axios'
    
    export default {
      name: 'App',
      methods:{
        testReq:function(){
    
             Axios.post('/api/test').then((res) => {
                  console.log(res)
              }).catch((err) => {
    
                  console.log(err)
    
              })
        }
    
      }
    }
    
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

5.常用数据占位符

//数据占位符使用
    {
      "integer": "@integer(10, 30)",  //随机生成一个10～30之间的正整数
      "float": "@float(60, 100, 2, 2)",  //随机生成浮点数，参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
      "boolean": "@boolean",       //随机生成boolean
      "string|1-2": "@string",     //随机生成字符串
      "name":"@cname",             //随机生成名字
    
      "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
      "datetime": "@datetime",     //随机生成时间
      "now": "@now",               //当前时间
    
      "id": "@id",                 //随机生成一个 18 位身份证
      "guid": "@guid",             //随机生成一个 GUID
      "url": "@url",               //随机生成url字符串
      "email": "@email",           //随机生成邮箱
      "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
      "title": "@title",           //随机生成一句标题，其中每个单词的首字母大写
      "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
      "cparagraph": "@cparagraph", //随机生成一段中文文本
      "csentence": "@csentence",   //随机生成一段中文文本
      "range": "@range(2, 10)" ,   //返回一个内容从2开始到9的整型数组
    
      "region": "@region",         //随机生成地区 华中
      "province": "@province",     //随机生成省会 省
      "city": "@city",             //随机生成城市 市
      "county": "@county",         //随机生成一个（中国）县
      
      
    }

可以使用 Easy Mock 模拟数据 [https://easy-mock.com/project/5d15d0f5f406795ca1b8085b][https_easy-mock.com_project_5d15d0f5f406795ca1b8085b]

Mock文档:[https://github.com/nuysoft/Mock/wiki][https_github.com_nuysoft_Mock_wiki]

[https_easy-mock.com_project_5d15d0f5f406795ca1b8085b]: https://easy-mock.com/project/5d15d0f5f406795ca1b8085b
[https_github.com_nuysoft_Mock_wiki]: https://github.com/nuysoft/Mock/wiki