zoukankan      html  css  js  c++  java
  • 使用vue搭建应用五引入Mock.js

    为了模拟后台接口提供页面所需的数据,引入Mock.js

    Mock.js是一个模拟数据生成器,可帮助前端开发和原型与后端进度分开

    特性:

      前后端分离

      增加单元测试的真实性

      数据类型丰富

      方便扩展

    1.安装

    yarn add mockjs

    2.简单使用

    在src下,新建目录mock,添加index.js

    模拟接口 http://localhost:8081/test

    import Mock from 'mockjs'
    
    Mock.mock('http://localhost:8081/test', {
      'list|1-5': [{
        'id|+1': 1,
        'name': '@name',
        'email': '@email',
        'age|20-60': 5,
        'registData': '@date'
      }]
    
    });

    修改Home.vue,通过import mock from "@/mock/index.js"; 引入mock模块

    <template>
      <div class="page">
        <h2>Home Page</h2>
        <el-button type="primary" @click="test()">测试</el-button>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    import mock from "@/mock/index.js";
    export default {
      name: "Home",
      methods: {
        test() {
          axios
            .get("http://localhost:8081/test")
            .then(res => {
              console.log(res.data);
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
    };
    </script>

    多次点击测试,每次返回的list里的数据条数也是随机的

     说明:

      Mock.Random 是一个工具类,用于生成各种随机数据

      格式为: @占位符(参数 [, 参数])

     文档 https://github.com/nuysoft/Mock/wiki

      

  • 相关阅读:
    Android4.2以及最新SDK的尝鲜使用
    UVA 1524
    StringTokenizer类的使用
    Tuxedo入门学习
    ReviewBoard安装和配置札记
    一步一步写算法(之单向链表)
    腾讯2014年实习生招聘笔试面试经历
    二路单调自增子序列模型【acdream 1216】
    [置顶] c# 验证码生成
    Android Service 服务(一)—— Service
  • 原文地址:https://www.cnblogs.com/baby123/p/11868987.html
Copyright © 2011-2022 走看看