来自一枚初生牛犊不怕虎的小菜鸟的Mock.js使用,不足之处欢迎读者的指出 谢谢
2024-08-27 09:37:32
本文章写的是基于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>
最新文章
- 小说一下case ~
- JS 时间格式化
- Android中的通知—Notification 自定义通知
- CodeForces Round #278 (Div.2) (待续)
- Android中多线程下载列表的封装实现(含进度反馈)
- 构建一个基于 Spring 的 RESTful Web Service
- java中难度大一点的面试题
- 虚拟桌面 VDI
- Pandas系列(十)-转换连接详解
- linux /dev/mapper/centos-root目录莫名其妙被占满
- 用Eclipse上传项目到github
- ClickHouse之简单性能测试
- 【读书笔记】iOS-iOS安全基础知识
- Javascript中的各结构的嵌套和函数
- poj1470 LCA倍增法
- ECharts修改坐标轴,坐标轴字体,坐标轴网格样式以及控制坐标轴是否显示
- js获取或判断任意数据类类型的通用方法(getDataType)和将NodeList转为数组(NodeListToArray)
- shell编写redis启动脚本
- enabled和priority属性
- POJ 1200 Crazy Search【Hash入门】