模拟数据----------mock.js----------faker.js

最新推荐文章于 2024-03-19 09:57:50 发布

小仙女de成长

最新推荐文章于 2024-03-19 09:57:50 发布

阅读量1k

点赞数 1

分类专栏： javascript以及jquery

javascript以及jquery 专栏收录该内容

120 篇文章 2 订阅

订阅专栏

一般前后台分离时需要前台自己去模拟数据，不过需要提前和后台商量好数据格式。一条一条自己去写就太原始了，虽然我一直是这么做的，哈哈哈

这是Mock.js官网：http://highsea90.com/t/mock/

这是Faker.js官网：https://github.com/Marak/faker.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mock数据</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/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()", //模拟文本
                    'list|1-10': [{'id|+2': 1 , 'age|20-30': 100}],
                    'email': '@email',
                    'friends|3': [{name: '@name'}],
                    'price|10-20.2-5': 11,
                    'cost|10-20.3': 11,
                    'test|3.2-5': 52,
                    'yourname|2-4': 'alice-',
                    'title': '@title',
                    // 链接
                    'url': '@url("http")',
                    // 邮箱
                    'email': '@email',
                    // 时间
                    'date': '@date("yyyy-MM-dd HH:mm:ss")',
                    'date2': '@dateTime',
                    // 汉字
                    'ctitle': '@ctitle(8)',
                    // 汉字姓名
                    'canme': '@cname()',
                    // 地址
                    'cadd': '@province' + '@city' + '@county',
                    // 手机号
                    'phone': /^1[385][1-9]\d{8}/
                }
            );
            //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>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Fader.js模拟数据</title>
    </head>
    <body>
        <div class="demo">faker.js模拟数据，打开控制台看输出。</div>      

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/Faker/3.1.0/faker.min.js"></script>
        <script type="text/javascript">
            $(function(){
                faker.locale = "zh_CN";//设置数据是中文类型
                var randomName = faker.name.findName();
                var randomEmail = faker.internet.email();
                var randomCard = faker.helpers.createCard();
                var randomwebsite=faker.internet.url();
                var randomaddress=faker.address.streetAddress() +                   faker.address.city() + faker.address.country();
                var randombio=faker.lorem.sentences();
                var randomimage=faker.image.avatar();
                console.log(randomName);
                console.log(randomEmail);
                console.log(randomCard);
                console.log(randomwebsite);
                console.log(randomaddress);
                console.log(randombio);
                console.log(randomimage);
            });
        </script>
    </body>
</html>