本文章写的是基于 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=Windows.XMLHttpRequest?new XMLHttpRequest():ActiveXObject("Microsoft.XMLHTTP");
- xhr.onreadystatechange=function(){
- if(xhr.readyState==4){
- 14 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>
来源: http://www.bubuko.com/infodetail-2967977.html