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

Question

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

Answer 1

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

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

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

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

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

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

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

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

Answer 2

前期前后端把相应的前后端接口、数据类型定义好。在并行开发过程中前端可以使用
https://www.easy-mock.com/login 远程模拟响应式数据。测试时直接换成真实的后端接口。

Answer 3

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

Answer 4

直接把json写死阿

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

根据你的需求，我推荐你，所有使用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);
    });
}

Answer 10

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

Answer 11

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

Answer 12

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

写个文件名叫ResponseData.js

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

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

Answer 13

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

Answer 14

这个在后端接口结构已经定义明确的基础上是很好做的，你可以两种方式来创造数据：
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();
}

Answer 15

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