首页 > 前端怎么自造ajax数据和后端变量在后台未完全开发的情况下?

前端怎么自造ajax数据和后端变量在后台未完全开发的情况下?

公司后台是用java开发的,返回到页面有些变量,还有一些json数据,怎么做一些假数据方便调试,有时后台有问题或者没开发完自己就不能开发。还有不希望用了某些工具,后面发布到线上之前改动一大堆


这个在后端接口结构已经定义明确的基础上是很好做的,你可以两种方式来创造数据:
1.手动编写json对象;
2.通过一些js类库自动编写json对象;

比如你有一个接口是这样的:
url:"/user/{id}"
result:{id:1,name:"",age:1}

那你在写js的时候可以这样:

var isDebug=true;//是否是调试模式

//创建用户数据
function createUserInfo(id){
    //手动编写方式
    return {
        id:id,
        name:"Tom",
        age:20
    };
    
    //自动编写方式(未实现,你可以采用其他人说的Mock.js去实现创建)
}

function loadUserInfo(id){
var dtd=$.Deferred();
if(isDebug){
    dtd.resolveWith(this,[createUserInfo(id)]);
}else{
$.ajax({
    type:""post,
    url:"/user/"+id
}).done(function(data){
    dtd.resolveWith(this,[data]);
}).fail(function(xhr){
    dtd.rejectWith(this,[xhr]);
});
}
return dtd.promise();
}

最简单的方法就是把返回的Json数据写入到一个js文件里,直接调用就好了。

写个文件名叫ResponseData.js

var jsonData = {
    "responseBody":{
        "test1": false, 
        "test2": "", 
        "test3": "88"
    }
}

引入文件,直接调用jsonData当返回数据


nodejs。来写个服务器返回。网上随便找个文章。一看就会。js语法


根据你的需求,我推荐你,所有使用ajax的地方都打包成一个方法,跟其它js分开放到合适的js文件里,就像这样:

//获取xx数据。ps.做好备注,等后台接口做好了就方便改了
function getXXData(page,fn){
    $.get('index/index',{page:page},function(data){ //这里url指向一个文本文件,就行了
        if(!data)//这里是要判断是假数据还是真数据,你自己做些区别就行了
            data = {status:1,info:'数据获取成功',data:['这里写些假数据']};
        else
            data = JSON.parse(data);//这里是JSON.parse之类的处理真数据的方法就行了,建议把处理数据的方法也打包。
        fn(data.data);
    });
}

Mock.js (一款模拟数据生成器)


推荐Rap,阿里妈妈团队的一款接口管理工具。包括了接口文档管理,mock数据等。


写死数据到一个文件中,启一个server。请求过来直接返回该文件就可以了。这样可以模拟异步请求,假设觉得麻烦。直接写到js文件中,引入就可以了。启server最简单的恐怕是node


首先,可以从你的问题中看出你想要解决两个疑问:

1. **不希望发布到线上之前改动一大堆;**
2. **希望在‘有时后台有问题或者没开发完’的情况下,前端能正常进行开发调试…**

如果以上两个疑问理解没有误区的话,接下来说一下我自己工作中的实际处理方式:

一,要解决第1个疑问,不进行大的改动?

需要提前对后台[返回接口]进行协议(也就是确定接口文档),协议内容需要包含接口返回的数据类型,状态,结构,数据对象名称等等;有了这样的内容就算后台接口还没有开发也可以开始前端工作啦,而如何开始前端工作是接下来我们要说的。

二,在明确了接口协议后要解决第2个疑问,前端需要自己先构造接口返回数据

有了接口协议构造数据就显得很简单了,根据协议内容的数据类型、结构、对象名称等直接自己简单写点假的数据就好了。举个最简单的例子,项目文件夹内新建一个data.txt文件,写入json格式的数据内容:
`{"objName":"aaaaaaaa","objName2":"bbbbbb","objName3":"cccccccc"}`
以上就完成了构造接口返回数据的内容。
接下来只要搭一个本地服务,使用调用接口的方法正常获取构造的假数据供前端开发使用即可
(注:url指向本地项目中的data.txt,拿到后台开发完成的接口后改变url指向即可)。

* 在没有明确接口协议时,前端依然可以提前开始作业(自己根据项目前端所需构造数据即可),但这样做有可能后期改动比较大,因为我们自己构造的数据结构、对象名称等等和后台定义的也许完全不一致,数据大量时改动地方就很多;一般我会在前端涉及复杂动效与逻辑使用数据的时候提前这样处理,用于跑通前端的复杂动效或逻辑。


约定好数据交换格式,然后就可以自己造了。


跟他们约定好数据格式后自己采用php echo 或者 nodejs return。


后台还没有开发没关系,关键要先有接口文档(接口协议),根据协议造数据就行了。另外,你们需要一个测试桩。


自己懂一门后台,不用太懂,基本会用就行。


直接把json写死阿


https://github.com/livoras/blog/issues/9

【热门文章】
【热门文章】