来自一枚初生牛犊不怕虎的小菜鸟的Mock.js使用,不足之处欢迎读者的指出 谢谢...
本文章写的是基于require的mock.js的几种常用生成随机数据和ajax模拟前后端的交互信息
<script src="./app/libs/require.js"></script><script>require(["./main.js"],function(){require(['myMock'],function(myMock){})})</script>
首先 这是主页面的引入 ==>接着去main.js中把用到得js文件去注册
1 require.config({ 2 paths:{ 3 'ajax':'./app/js/ajax',//自己封装的ajax路径 4 'myMock':'./app/js/myMock',//生成随机数据和交互函数 5 'Mock':'./app/libs/mock-min',//引入mock.js 6 'utils':'./app/js/utils'//关于ajax中参数的转换 7 } 8 })
注册成功后我们去写创造随机函数部分代码
1 let arr=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg']; 2 let user=[]; 3 for(var i=0;i<30;i++){ 4 user.push(Mock.mock({ 5 name:Mock.Random.cname(), // 名字 6 addr:Mock.mock('@county(true)'), // 地址 7 'age|88-120':1, // 年龄 8 'image|1':arr, // 随机图片路径 改成+1按数组顺序生成 9 'csentence':Mock.Random.csentence(3), // 句子 10 })) 11 }
接着我们可以利用mock设置一个假的接口 将这些随机生成的数据通过ajax获取出去渲染到页面 代码如下
1 Mock.mock("/api/test", { 2 mock: user 3 })
第一个参数随便设的一个地址 ajax的url获取这个接口 代码如下
1 ajax({ 2 url:"/api/test", 3 type:"post", 4 }).then(function(res){ 5 console.log(res)//这里得到刚才通过mock随机出来的数组 6 })
因封装的ajax问题 这里传参必须是post 否则会出现404错误 原因不明 望懂的人告知 如调用jQuery库中的ajax可解决这个问题 封装的ajax代码如下
1 define(['utils'], function(utils) { 2 'use strict'; 3 function ajax(opt){ 4 let def={ 5 type:"get", 6 async:true, 7 } 8 let defs = Object.assign({},def,opt); 9 return new Promise(function(resolve,reject){ 10 let xhr=window.XMLHttpRequest?new XMLHttpRequest():ActiveXObject("Microsoft.XMLHTTP"); 11 xhr.onreadystatechange=function(){ 12 if(xhr.readyState==4){ 13 14 if(xhr.status==200){ 15 resolve(JSON.parse(xhr.responseText)) 16 }else{ 17 reject(xhr.status) 18 } 19 } 20 }; 21 if(defs.type=="get"){ 22 xhr.open(defs.type,defs.url+"?"+utils.formateObj(defs.data),defs.async); 23 xhr.send(null) 24 } 25 if(defs.type=="post"){ 26 xhr.open(defs.type,defs.url,defs.async); 27 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 28 xhr.send(utils.formateObj(defs.data)) 29 } 30 }) 31 } 32 return ajax; 33 });
以上部分是通过ajax获取数据的过程 一下给大家介绍通过ajax的data像mock传递参数 当mock接收到以后与数据库的数据进行匹配 然后返给前端匹配后的结果
str是模拟的后台数据库 前期可以用在表单的登录验证中使用
<script>let str=[{user:"js",pwd:"111"},{user:"jquery",pwd:"222"},{user:"node",pwd:"333"},{user:"vul",pwd:"444"},{user:"html",pwd:"555"},{user:"css",pwd:"666"}]let user=document.querySelector(".user");let pwd=document.querySelector(".pwd");//点击按钮的时候调用ajaxlet btn=document.querySelector(".btn");btn.onclick=function(){$.ajax({url:'/api/login',//接口地址type:'post',//必须设的dataType:"json",//必须设的data:{//传的参数 user:user.value,pwd:pwd.value},success:function(rs){//后台验证成功的时候的返回数据//console.log(rs)if(rs.code==0){alert("88")}}})}//模拟后台逻辑Mock.mock('/api/login',function(res){//第一个参数是设置的接口//想要得到用resbody//此时得到是user=chen&pwd=123这种格式//需要得到一种{"user":"chen","pwd":"123"}这种格式 所以需要封装一个函数//console.log(res.body);//调用转换格式函数//es6的结构赋值let {user,pwd}=format(res.body);//把前端传过来的这个参数和数据库中的进行匹配let flag=str.map(function(item){if(item.user==user&&item.pwd==pwd){//如果前端把用户输入传过来的值传过来后和数据库的值比较后有相同的就给前端返回一个值code让前端知道用户输入的是正确的从而做一些操作//需要注意的点是此时return的这个map函数 要整个变量在外面继续returnreturn {code:0,msg:'success'}}});//注意此时的flag有可能是[undefined,undefined,{5555},undefined]这种格式 我们需要获取中间有内容的一项 换句话说也是匹配成功的哪一项for(var i=0;i<flag.length;i++){if(flag[i]){return flag[i]//这个变量return出来后可以再ajax的success中获取到 }}})//转换格式的封装函数function format(str){return JSON.parse('{"'+str.replace(/\&/g,'","').replace(/\=/g,'":"')+'"}')}</script>
转载于:https://www.cnblogs.com/cq1715584439/p/10434709.html
来自一枚初生牛犊不怕虎的小菜鸟的Mock.js使用,不足之处欢迎读者的指出 谢谢...相关推荐
- “超级课程表”余佳文:初生牛犊不怕虎
余佳文,1990年生人,广州某大学大四学生:小小年纪已经是一个30余人创业公司的CEO,其团队开发的"超级课程表"是个能为大学生自动获取课表.附带校园社交功能的应用,在高校尤其是广 ...
- 微信小程序使用mock.js
1.在utils中创建api.js和mock.js 2.在mock.js中复制mock.js中的代码,下边是地址 https://github.com/nuysoft/Mock/blob/refact ...
- 微信小程序——使用mock.js模拟数据
一,创建目录 再根目录utils目录下面创建 WxMock.js文件和api.js文件 二,WxMock.js WxMock.js下载地址:https://github.com/webx32/WxMo ...
- 虎虎的小尾巴的交易逻辑
我做基本面,分析供需平衡表 基本面三大要素:库存,基差,加工利润 库存高,升水,加工利润高的时候那么就做空头配置 库存低,贴水,加工利润亏损的时候就做多头配置 当然这都是理想状态,一般来说三要素基本很 ...
- 在学习VB.net过程中遇到的一些问题及解决方案的总结(小菜鸟版)
搞了三个月的VB.net,介绍一下我的环境吧,用的VS2008编译器,运行坏境是WINCE7.0系统,不要问我为什么不选更优的编译器,这是公司比较老的一款产品,但是也需要维护的,所以..... 大体说 ...
- 我是一只在IT线上苦苦挣扎的小菜鸟
一只在IT线上苦苦挣扎,努力奋斗的小菜鸟 2003年7月份,我又回到了湖南.这是一座很宁静的城市,感觉好像这里的人都与世无争似的,过着悠闲自在的生活.因为拿不到毕业证,所以只能先在这里呆着.虽然没有什 ...
- 如何准备校招技术面试+一只小菜鸟的面试之路
校招一路走来很幸运,从最初的迷茫,到偶尔的被否认,然后慢慢调整心态,有缺憾才能有进步,正视的自己不足,静下心努力提高,勇敢尝试各种面试机会,因上努力,果上随缘,慢慢看到改变,收获肯定,重拾信心. 校招 ...
- 技术大牛VS小菜鸟VS客户—南昌某局的项目纪实
世界上分为三种人:第一种是精通技术的人(技术大牛),第二种是懂技术但不精通的人(小菜鸟),第三种是一点技术都不懂的人(客户). 当技术大牛和小菜鸟相遇,正如"师者传道授业解惑,学者程门立雪& ...
- 微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法 参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
- React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
最新文章
- python3中的新式类与经典类对比
- pythonjson构建二维数组_python二维键值数组生成转json的例子
- arduino Pro Mini和nano​替代芯片LGT8F328P,上传报错Cannot run program解决方法
- 动态字段插入及查询redis小结
- 2019_8_1python
- 使用miniSIPServer搭建pjsip服务器
- iphone屏幕录制_iPhone怎么内录声音?怎么录制苹果手机内部声音?
- 2016年11月14日--SQL创建数据库、表-查、插、删、改
- 广东地下水资源摘录(早期版的)
- setContentView是如何把布局加上去的
- SpringBoot读取配置文件
- 谷歌浏览器 Adobe Flash Player 插件被屏蔽 解决方案
- 数字图像处理(三)图像复原(噪声生成,噪声滤波器,逆滤波,维纳滤波,有约束最小二乘恢复)
- BUCK电感工作模式
- chm文件打不开的办法
- python:等间距分割pdf文件
- java timer异常_JAVA Timer的缺陷以及解决办法
- 跨站点设置 Cookie
- 物料清单的重构———虚项
- 无法显示页面,因为发生内部服务器错误。