美文网首页
mock的使用demo+常用模板

mock的使用demo+常用模板

作者: 浅浅_2d5a | 来源:发表于2021-08-05 18:13 被阅读0次

    控制台可以直接使用Mock
    Mock.mock({
    "string|1-10": "★"
    })

    mock的demo

    安装

    npm i mockjs -S

    vue项目中 demo

    main.js中引入创建的mock.js
    import './mock/mock';

    常用api语法

    Mock.mock(url, type, data)

    注意:
    1、接口地址不为正则
    2、不用再次导出Mock
    3、nextwork中不会出现接口调用,需要console.log打印调试
    mock.js代码

    import Mock from 'mockjs'
    
    Mock.mock('/api/msdk/proxy/query_common_credit', {
        'status': 200,
        "data":
          {
            "mtime": "@datetime",//随机生成日期时间
            "score|1-800": 800,//随机生成1-800的数字
            "rank|1-100":  100,//随机生成1-100的数字
            "stars|1-5": 5,//随机生成1-5的数字
            "nickname": "@cname",//随机生成中文名字
          }
    });
    Mock.mock('/api/userinfo','get', {
        "data":
          {
            age:12
          }
    });
    //设置数据延时
    Mock.setup({
        timeout: '200-600'
    })
    

    调用接口的接口请求js

    import fetch from '../../api/fetch'
    export default{
        //获取用户基本信息接口 get请求
        getUserInfo(){
            return fetch({
                url: '/api/msdk/proxy/query_common_credit',
            })
        },
    }
    

    mock的模板

    官网查询 http://mockjs.com/examples.html

    mock+nodejs

    目的:实现随机接口数据+nextwork走接口
    nodejs正常写
    提供接口的地方加上mock

    let express = require('express');   //引入express
    let Mock = require('mockjs');       //引入mock
    
    var app = express();
    app.get('/aaa', function(req, res) {
        let resData = Mock.mock({
            'status': 200,
            'dataSource|1-9':[{
                'key|+1': 1,
                'mockTitle|1':['肆无忌惮'],
                'mockContent|1': ['角色精湛主题略荒诞', '理由太短 是让人不安', '疑信参半 却无比期盼', '你的惯犯 圆满', '别让纠缠 显得 孤单'],
                'mockAction|1': ['下载', '试听', '喜欢']
            }]
        })
        res.send(resData);
    })
    var server = app.listen(8081, function() {
        var host = server.address().address
        var port = server.address().port
        console.log("Node.JS 服务器已启动,访问地址: http://%s:%s", host, port)
    })
    

    相关文章

      网友评论

          本文标题:mock的使用demo+常用模板

          本文链接:https://www.haomeiwen.com/subject/biclbktx.html