前端提供给后端一个接口是啥意思

Posted 2023-05-03

不存在前端提供给后端接口。

开发中，不存在前端给后端接口的情况，几乎都是后端给前端接口。提供的接口就是使用者可以通过服务端部署的机器提供出来的URL地址进行动态的数据交互。

通常的工作流为后端跟前端协商定义数据接口格式形成文档，后端实现接口，前端做静态的mock，后端实现服务接口，两边都完成后集成联调。

扩展资料：

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的html和CSS以及javascript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

前端运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

参考资料来源：百度百科-前端

参考技术A 一般不存在前端给后端接口的情况，几乎都是后端给前端接口，所谓接口就是可以通过服务端部署的机器提供出来的URL地址进行动态的数据交互。通常的工作流是后端跟前端协商定义数据接口格式（一般就是JSON格式）形成文档，后端实现接口，前端做静态的mock（可以是直接在页面的JS拼假数据或者通过JSON server按照真实调用服务的方式集成），后端实现服务接口，两边都完成后集成联调。现在有swagger 或者 apiairy 等工具可以更简化这个过程 参考技术B 作为一个5年经验的前端，大部分都是后端把接口给前端，但是有些复杂的功能，前端实现需要自己的json结构，这就需要前端把功能实现，并告诉后端用这种结构。并非上面那2个复制党所说的全是后端提供接口。

怎么给后端返回的json中添加数据

(1) 将如下代码copy之后保存为 server.js
(2) 然后执行: node server.js
var http = require('http');
var url = require('url');
// 访问的json地址与返回的json数据映射关系
var array=[

url:'/signup/index.json',
json:'"tasks":["finishType":"人数优先","gmtEnd":"2015-11-19 11:30:00","gmtStart":"2015-11-17 11:30:00","id":98,"memo":"招新任务01","name":"招新任务01","requireNum":10,"signedupNum":0,"signupStatus":"","taskStatus":"进行中"],"stat":"ok"'
,

url:'/signup/applyCheck.json',
json:'"signupInfo":"alipayAccount":"20881021179902510156","alipayCardNo":"2088102117990251","birthday":"","certifyStatus":null,"city":"","college":"","email":"[e-mail]","gender":null,"gmtCreate":null,"gmtModified":null,"id":2,"identityCardNo":"330283198903120025","identityCardPic":"","major":"","maxWeekHours":0,"minWeekHours":0,"mobile":"18905818799","province":"","qualificationPic":"","realName":"zhulu","recruitSource":"","signupTaskId":98,"status":null,"statusReason":"","student":false,"testScore":0,"trainScore":0,"checkResult":"code":"SUCCESS","message":"处理成功","printResult":true,"success":true,"stat":"ok"'
,

url:'/server/matchSuggest.json',
json:'"TotalHits":88,"errorCode":0,"errorDesc":"no_error","MatchResults":["CatId":"4098","CatTitlePath":"%E5%86%85%E9%83%A8%E7%9F%A5%E8%AF%86%E5%BA%93%3E%E8%B4%A6%E6%88%B7%E5%9F%BA%E7%A1%80%E5%8F%8A%E8%B5%84%E4%BA%A7%E7%AE%A1%E7%90%86%EF%BC%88%E6%96%B0%EF%BC%89%3E%E8%B4%A6%E6%88%B7%E5%9F%BA%E7%A1%80%3E%E5%AF%86%E7%A0%81%3E%E6%89%8B%E5%8A%BF%E5%AF%86%E7%A0%81","ChannelNames":"","Content":"","CreatorName":"%E6%A1%83%E7%98%B4","GmtCreate":"2015-04-07 17:58:42","GmtModified":"2015-05-19 11:48:36","Id":"6056","Keywords":"","ModifierId":"12484","ModifierName":"%E7%89%A7%E6%9A%AE","Status":"PUBLISHED","Title":"%E9%80%9A%E8%BF%87%E6%94%AF%E4%BB%98%E5%AE%9D%E9%92%B1%E5%8C%85%EF%BC%8C%3Cfont+color%3Dred%3E%E5%BF%98%E8%AE%B0%3C%2Ffont%3E%E6%89%8B%E5%8A%BF%3Cfont+color%3Dred%3E%E5%AF%86%E7%A0%81%3C%2Ffont%3E%E7%9A%84%E5%A4%84%E7%90%86%E6%B5%81%E7%A8%8B","Type":"NORMAL","deleted":"N"]'
,

url:'/signup/signup.json',
json:'"stat":"ok"'


];

// var temResult='"TotalHits":88,"errorCode":0,"errorDesc":"no_error","MatchResults":["CatId":"4098","CatTitlePath":"%E5%86%85%E9%83%A8%E7%9F%A5%E8%AF%86%E5%BA%93%3E%E8%B4%A6%E6%88%B7%E5%9F%BA%E7%A1%80%E5%8F%8A%E8%B5%84%E4%BA%A7%E7%AE%A1%E7%90%86%EF%BC%88%E6%96%B0%EF%BC%89%3E%E8%B4%A6%E6%88%B7%E5%9F%BA%E7%A1%80%3E%E5%AF%86%E7%A0%81%3E%E6%89%8B%E5%8A%BF%E5%AF%86%E7%A0%81","ChannelNames":"","Content":"%e7%87%95%e5%ad%90","CreatorName":"%E6%A1%83%E7%98%B4","GmtCreate":"2015-04-07 17:58:42","GmtModified":"2015-05-19 11:48:36","Id":"6056","Keywords":"","ModifierId":"12484","ModifierName":"%E7%89%A7%E6%9A%AE","Status":"PUBLISHED","Title":"%E9%80%9A%E8%BF%87%E6%94%AF%E4%BB%98%E5%AE%9D%E9%92%B1%E5%8C%85%EF%BC%8C%3Cfont+color%3Dred%3E%E5%BF%98%E8%AE%B0%3C%2Ffont%3E%E6%89%8B%E5%8A%BF%3Cfont+color%3Dred%3E%E5%AF%86%E7%A0%81%3C%2Ffont%3E%E7%9A%84%E5%A4%84%E7%90%86%E6%B5%81%E7%A8%8B","Type":"NORMAL","deleted":"N","CatId":"4098","CatTitlePath":"%E5%86%85%E9%83%A8%E7%9F%A5%E8%AF%86%E5%BA%93%3E%E8%B4%A6%E6%88%B7%E5%9F%BA%E7%A1%80%E5%8F%8A%E8%B5%84%E4%BA%A7%E7%AE%A1%E7%90%86%EF%BC%88%E6%96%B0%EF%BC%89%3E%E8%B4%A6%E6%88%B7%E5%9F%BA%E7%A1%80%3E%E5%AF%86%E7%A0%81%3E%E6%89%8B%E5%8A%BF%E5%AF%86%E7%A0%81","ChannelNames":"","Content":"%e7%87%95%e7%aa%9d","CreatorName":"%E6%A1%83%E7%98%B4","GmtCreate":"2015-04-07 17:58:42","GmtModified":"2015-05-19 11:48:36","Id":"6056","Keywords":"","ModifierId":"12484","ModifierName":"%E7%89%A7%E6%9A%AE","Status":"PUBLISHED","Title":"%E9%80%9A%E8%BF%87%E6%94%AF%E4%BB%98%E5%AE%9D%E9%92%B1%E5%8C%85%EF%BC%8C%3Cfont+color%3Dred%3E%E5%BF%98%E8%AE%B0%3C%2Ffont%3E%E6%89%8B%E5%8A%BF%3Cfont+color%3Dred%3E%E5%AF%86%E7%A0%81%3C%2Ffont%3E%E7%9A%84%E5%A4%84%E7%90%86%E6%B5%81%E7%A8%8B","Type":"NORMAL","deleted":"N"]';
http.createServer(function(request, response)

response.writeHead(200,
"Access-Control-Allow-Origin":"http://10.37.187.79:8000",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers":"X-Requested-With",
"Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS",
"X-Powered-By":"3.2.1",
"Content-Type":"application/json;charset=utf-8",
"Connection":"keep-alive"
);

var reqURL=request.url;

var result=reqURL + " 对应的json结果数据是什么?请进行配置";

var i=array.length;
while(i--)

if(reqURL.indexOf(array[i].url)==0)
result= array[i].json;

console.log(111);


// var params = url.parse(request.url, true).query;

// console.log(params);

response.write(result);
response.end();
).listen(8787);

console.log('启动成功...'); 参考技术A 一般使用ajax 请求 json 数据， 在返回结果data中 ，以对象的形式 对数据进行处理即可