zoukankan      html  css  js  c++  java
  • 使用 mock.js 让前端开发与后端独立

    github:

    https://github.com/nuysoft/Mock

    官方网站:

    http://mockjs.com/

     开发手册与使用指南:

    https://github.com/nuysoft/Mock/wiki/Getting-Started

    直接上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    </head>
    <body>
    
    <div>
        <h1 id="mockjs">mockjs</h1>
    </div>
    
    <script type="text/javascript">
    
        //调用mock方法模拟数据
        Mock.mock(
            'http://mockjs', {
                "userName" : '@name',     //模拟名称
                "age|1-100":100,          //模拟年龄(1-100)
                "color"    : "@color",    //模拟色值
                "date"     : "@date('yyyy-MM-dd')",  //模拟时间
                "url"      : "@url()",     //模拟url
                "content"  : "@cparagraph()" //模拟文本
            }
        );
    
        //ajax请求
        $("#mockjs").click(function(){
            $.ajax({
                url        : "http://mockjs",    //请求的url地址
                dataType   : "json",   //返回格式为json
                async      : true, //请求是否异步,默认为异步,这也是ajax重要特性
                data       : {},    //参数值
                type       : "GET",   //请求方式
                beforeSend : function() {
                    //请求前的处理
                },
                success: function(req) {
                    //请求成功时处理
                    console.log(req);
                },
                complete: function() {
                    //请求完成的处理
                },
                error: function() {
                    //请求出错处理
                }
            });
        });
    </script>
    </body>
    </html>

    CommonJs规范

    // 加载Mock.js插件,让前端开发与后端独立
    window.Mock = require('mockjs')
    // 加载Mock.mock方法
    window.M = window.Mock.mock;
    // 加载mock.Random方法
    window.R = window.Mock.Random;

    console.log(R.email())
    console.log(M({email:'@email'}))  // 这种@的方式叫"占位符"。它可以用来直接生成各种数据

    Mock.Random 提供的完整方法(占位符)如下:

    TypeMethod
    Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
    Image image, dataImage
    Color color
    Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
    Name first, last, name, cfirst, clast, cname
    Web url, domain, email, ip, tld
    Address area, region
    Helper capitalize, upper, lower, pick, shuffle
    Miscellaneous guid, id
     // 所有@占位符,都是R对象的演变,比如@email就是如下:
            console.log(R.email())
    
            // basic:https://github.com/nuysoft/Mock/wiki/Basic
            console.log(M({boolean:'@boolean'}))
            console.log(M({natural:'@natural'}))
            console.log(M({integer:'@integer'}))
            console.log(M({float:'@float'}))
            console.log(M({character:'@character'}))
            console.log(M({range:'@range'}))
    
            // date:https://github.com/nuysoft/Mock/wiki/Date
            console.log(M({date:'@date'}))
            console.log(M({time:'@time'}))
            console.log(M({datetime:'@datetime'}))
            console.log(M({now:'@now'}))
    
            // Image:https://github.com/nuysoft/Mock/wiki/Image
            console.log(M({image:"@image()"}))
            console.log(M({image:"@image(60x60)"}))
            console.log(M({image:"@image(60x60,#000000)"}))
            console.log(M({image:"@image('200x100', '#00405d', '#FFF', 'Mock.js')"}))
            console.log(M({dataImage:'@dataImage'}))
            console.log(M({dataImage:"@dataImage('200x100')"}))
            console.log(M({dataImage:"@dataImage('200x100', 'Hello Mock.js!')"}))
    
            // color : https://github.com/nuysoft/Mock/wiki/Color
            console.log(M({color:'@color'}))
            console.log(M({hex:'@hex'}))
            console.log(M({rgb:'@rgb'}))
            console.log(M({rgba:'@rgba'}))
            console.log(M({hsl:'@hsl'}))
    
            // text : https://github.com/nuysoft/Mock/wiki/Text
            console.log(M({paragraph:'@paragraph'}))
            console.log(M({sentence:'@sentence'}))
            console.log(M({title:'@title'}))
            console.log(M({cparagraph:'@cparagraph'}))
            console.log(M({csentence:'@csentence'}))
            console.log(M({cword:'@cword'}))
            console.log(M({ctitle:'@ctitle'}))
    
            // name : https://github.com/nuysoft/Mock/wiki/Name
            console.log(M({first:'@first'}))
            console.log(M({last:'@last'}))
            console.log(M({name:'@name'}))
            console.log(M({cfirst:'@cfirst'}))
            console.log(M({clast:'@clast'}))
            console.log(M({cname:'@cname'}))
    
            // Web : https://github.com/nuysoft/Mock/wiki/Name
            console.log(M({url:'@url'}))
            console.log(M({domain:'@domain'}))
            console.log(M({email:'@email'}))
            console.log(M({ip:'@ip'}))
            console.log(M({tld:'@tld'}))
    
            // address: https://github.com/nuysoft/Mock/wiki/Name
            console.log(M({region:'@region'}))
            console.log(M({province:'@province'}))
            console.log(M({city:'@city'}))
            console.log(M({county:'@county'}))
            console.log(M({zip:'@zip'}))
    
            // helper Methods : https://github.com/nuysoft/Mock/wiki/Helper
            console.log(M({capitalize:'@capitalize(`hello`)'}))
            console.log(M({upper:'@upper(`hello`)'}))
            console.log(M({lower:'@lower(`HELLO`)'}))
            console.log(M({pick:"@pick(['a', 'e', 'i', 'o', 'u'])"}))
            console.log(M({shuffle:"@shuffle(['a', 'e', 'i', 'o', 'u'])"}))
    
            // Miscellaneous: https://github.com/nuysoft/Mock/wiki/Miscellaneous
            console.log(M({guid:'@guid'}))
            console.log(M({id:'@id'}))
            console.log(M({increment:'@increment'}))
  • 相关阅读:
    C语言scanf函数转换说明表及其修饰符表
    C语言printf函数转换说明表及其修饰符表
    JAVA中this和super用法
    JAVA构造器,重载与重写
    初步学习JAVA面向对象初步认识及面向对象内存分析图举例说明
    webpack4.0报WARNING in configuration警告
    chrome开发者工具--使用 Network 面板测量您的网站网络性能。
    随笔记录--Array类型
    PXC(percona xtradb cluster)新加节点避免SST的方法
    pt-online-schema-change原理解析
  • 原文地址:https://www.cnblogs.com/CyLee/p/6072399.html
Copyright © 2011-2022 走看看