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

布满荆棘的人生 2022-06-02 23:54 238阅读 0赞

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

这是Mock.js官网：[http://highsea90.com/t/mock/][http_highsea90.com_t_mock]

这是Faker.js官网：[https://github.com/Marak/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>

演示地址：[http://www.bright2017.top/test1/test1-09/][http_www.bright2017.top_test1_test1-09]

借鉴博客：[https://www.cnblogs.com/mr-yuan/p/7954947.html][https_www.cnblogs.com_mr-yuan_p_7954947.html]

[http_highsea90.com_t_mock]: http://highsea90.com/t/mock/
[https_github.com_Marak_faker.js]: https://github.com/Marak/faker.js
[http_www.bright2017.top_test1_test1-09]: http://www.bright2017.top/test1/test1-09/
[https_www.cnblogs.com_mr-yuan_p_7954947.html]: https://www.cnblogs.com/mr-yuan/p/7954947.html