本文章写的是基于require的mock.js的几种常用生成随机数据和ajax模拟前后端的交互信息

<script src="./app/libs/require.js"></script>
<script>
require(["./main.js"],function(){
require(['myMock'],function(myMock){ })
})
</script>

首先 这是主页面的引入  ==>接着去main.js中把用到得js文件去注册

 require.config({
paths:{
'ajax':'./app/js/ajax',//自己封装的ajax路径
'myMock':'./app/js/myMock',//生成随机数据和交互函数
'Mock':'./app/libs/mock-min',//引入mock.js
'utils':'./app/js/utils'//关于ajax中参数的转换
}
})

注册成功后我们去写创造随机函数部分代码

 let arr=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];
let user=[];
for(var i=0;i<30;i++){
user.push(Mock.mock({
name:Mock.Random.cname(), // 名字
addr:Mock.mock('@county(true)'), // 地址
'age|88-120':1, // 年龄
'image|1':arr, // 随机图片路径 改成+1按数组顺序生成
'csentence':Mock.Random.csentence(3), // 句子
}))
}

接着我们可以利用mock设置一个假的接口 将这些随机生成的数据通过ajax获取出去渲染到页面 代码如下

 Mock.mock("/api/test", {
mock: user
})

第一个参数随便设的一个地址 ajax的url获取这个接口 代码如下

 ajax({
url:"/api/test",
type:"post",
}).then(function(res){
console.log(res)//这里得到刚才通过mock随机出来的数组
})

因封装的ajax问题 这里传参必须是post 否则会出现404错误 原因不明 望懂的人告知  如调用jQuery库中的ajax可解决这个问题  封装的ajax代码如下

 define(['utils'], function(utils) {
'use strict';
function ajax(opt){
let def={
type:"get",
async:true,
}
let defs = Object.assign({},def,opt);
return new Promise(function(resolve,reject){
let xhr=window.XMLHttpRequest?new XMLHttpRequest():ActiveXObject("Microsoft.XMLHTTP");
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
resolve(JSON.parse(xhr.responseText))
}else{
reject(xhr.status)
}
}
};
if(defs.type=="get"){
xhr.open(defs.type,defs.url+"?"+utils.formateObj(defs.data),defs.async);
xhr.send(null)
}
if(defs.type=="post"){
xhr.open(defs.type,defs.url,defs.async);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(utils.formateObj(defs.data))
}
})
}
return ajax;
});

以上部分是通过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");
//点击按钮的时候调用ajax
let 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函数 要整个变量在外面继续return
return {
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>

最新文章

  1. 小说一下case ~
  2. JS 时间格式化
  3. Android中的通知—Notification 自定义通知
  4. CodeForces Round #278 (Div.2) (待续)
  5. Android中多线程下载列表的封装实现(含进度反馈)
  6. 构建一个基于 Spring 的 RESTful Web Service
  7. java中难度大一点的面试题
  8. 虚拟桌面 VDI
  9. Pandas系列(十)-转换连接详解
  10. linux /dev/mapper/centos-root目录莫名其妙被占满
  11. 用Eclipse上传项目到github
  12. ClickHouse之简单性能测试
  13. 【读书笔记】iOS-iOS安全基础知识
  14. Javascript中的各结构的嵌套和函数
  15. poj1470 LCA倍增法
  16. ECharts修改坐标轴,坐标轴字体,坐标轴网格样式以及控制坐标轴是否显示
  17. js获取或判断任意数据类类型的通用方法(getDataType)和将NodeList转为数组(NodeListToArray)
  18. shell编写redis启动脚本
  19. enabled和priority属性
  20. POJ 1200 Crazy Search【Hash入门】

热门文章

  1. Highcharts error #14: www.highcharts.com/errors/14
  2. Ckrule业务规则管理系统简介
  3. 解决C#调试ArcMap断点不能停的问题
  4. Struts1.x 中处理乱码及通过标签显示数据
  5. maven学习(三)maven仓库
  6. shell定时采集数据到HDFS
  7. Database 2 Day DBA guide_Chapter3
  8. 「Luogu-U18201」分析矿洞
  9. 【[HNOI2011]数学作业】
  10. 发布Android程序