zoukankan      html  css  js  c++  java
  • Mock数据:模拟数据

    开发时,后端还没完成数据输出,前端只好写静态模拟数据。
    将数据写在js文件里,通过mock.js的一些语法 动态生成我们想要的数据 只需要和后台沟通一下 数据结构 以及key值之类的
    首先是官网和文档的链接

    mockjs官网:http://mockjs.com/
    mockjs官方文档:https://github.com/nuysoft/Mock/wiki/Getting-Started
    

    mockjs具体使用方法

    安装mockjs
    
    npm install mockjs
    //npm i mockjs
    

    创建一个mock目录生成mock数据

    import Mock from "mockjs";
    
    //mock课程数据
    var result=Mock.mock({
      code: 200,
      msg: "操作成功",
      data: {
        current_page: 1,
        last_page: 18,
        total: 178,
        "list|10": [
          {
            id: "@id",  //模拟id
            "price|100-200.1-2": 100, //模拟小数,在计算机中也称浮点数
            "has_buy|1": [0, 1], //模拟状态值,0,1,2,
            title: "@ctitle",  //模拟中文标题
            address: "@county(true)",  //模拟省市县
            "teachers_list|1": [
              {
                course_basis_id: "@id",
                id: "@id",
                teacher_avatar: "@image('150x120', '#ff0000', 'hahaha')",  //模拟图片
                teacher_name: "@cname"  //模拟中文姓名
              }
            ]
          }
        ]
      }
    });
    export default result;
    
    创建mock的入口文件,并配置请求的接口地址,提交方式,返回的假数据
    
    import Mock from 'mockjs'
    //导入的模拟数据
    import courseData from "./course";
    
    /**
     * Mock.mock( rurl, rtype, template )
     * rurl:请求的接口地址
     * rtype:提交方式
     * template:返回数据
     */
    
    Mock.mock("http://www.1909A.com/coureslist", "get", courseData);
    
    将模拟的数据注入到main.js
    
    //注入mock
    import './mock'
    
    在要请求的组件中请求数据
     axios.get('http://www.data.com/coureslist').then(res=>{
            console.log(res)
     })
    

    easy-mock:基于mockjs生成在线假数据

    easy-mock官网:https://www.easy-mock.com/
    不过官网不太稳定,有时候会进不去,但是他的好处就是直接在线生成 可以直接生成接口使用 里边的语法几乎和mockjs是一样的

  • 相关阅读:
    springmvc的注解式开发
    springmvc
    spring整合Mybatis
    spring的事务管理
    注解定义增强的两个方法
    动态代理
    错题解析
    SpringMVC的基本操作
    Spring整合MyBatis
    配置事务以及事务回滚
  • 原文地址:https://www.cnblogs.com/mxnl/p/13629238.html
Copyright © 2011-2022 走看看