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

      

  • 相关阅读:
    codevs 2632 非常好友
    codevs 1213 解的个数
    codevs 2751 军训分批
    codevs 1519 过路费
    codevs 1503 愚蠢的宠物
    codevs 2639 约会计划
    codevs 3369 膜拜
    codevs 3135 River Hopscotch
    数论模板
    JXOJ 9.7 NOIP 放松模拟赛 总结
  • 原文地址:https://www.cnblogs.com/baby123/p/11868987.html
Copyright © 2011-2022 走看看