后端接口迁移(从 webapi 到 openapi)前端经验总结
此文已由作者张磊授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验。
前情提要
以前用的是 webapi 现在统一切成 openapi,字段结构统统都变了
接入接口 20+,涉及模块的创建等主要流程。
页面基本无改,仅有一个新需求,创建时新增一个字段
其他依赖接口需要接入模块
预想解决方案
20+ 接口,如果根据返回值去更改页面,由于返回值整个结构都变掉了,修改起来这个工程量吃不消,再加上回测,基本上不可能在一个迭代内完成,所以需要一个新的方案。想一下变的是数据结构,不变的是什么,不变的是业务,那么方案就出来了,对接口的发送和数据的接收阶段对数据进行转换不就完美解决了。比如:
// 原请求service.xxx = function (ops) { };// 新请求// 重点都在 transform 这个函数上service.xxx = function (ops) { const newOps = transform.xxx.pre(ops);
return request.xxxNew(newOps).then((res) => { return transform.xxx.post(res);
});
};
采用这样的方案,修改的范围会大大的缩减,基本集中在对接口的修改,对数据的转换上。
实施
页面的接口有些是原子性的,比如 删除 等,仅仅传递少量参数,转换即可。即使是创建,字段比较多,但仅仅对 发送数据阶段进行转换 即可。 问题是出在 返回值 上。以前返回的字段,现在没有返回的,就需要找到该字段,尽量复原有结构。这一阶段需要涉及到和 openapi 开发的反复沟通,确认每一个值怎么取,确认哪些字段是没有用的,总之尽量把数据结构给复原回来。 这里需要特殊说明
列表页的数据结构不完整,可以对部分数据用异步添加的方式,将数据结构补完,这样用户可以尽早的看到列表。 但是详情页,必须是完整的数据结构,因为之前的实现方案,统统没考虑数据延迟拿到时页面的渲染处理,如果不一次性返回所有的数据,出问题的几率就很高。举例
// 列表的接口,需要特别传递 refresh 函数
service.list = function (refresh) { return request.xx().then((list) => {
list.forEach((item) => { // 异步添加
request.xx2().then((detail) => {
Object.assign(item, detail);
refresh();
});
}); // 首先返回主体内容 return list;
});
};// 详情的接口
service.detail = function () { return Promise.all(
request.xx(),
request.xx2(),
).then((detail, help1) => {
Object.assgin(detail, help1); return request.xx3().then((help2) => {
Object.assgin(detail, help2); return detail; // 注意这里 return 的 detail
});
});
};
后端的文档,存在部分无实时更新,部分是错误的情况。 由于是 20+ 的接口,并没有采用手动复制接口的方案,因为手动复制,可能都要占用不少的时间,而且无法保证正确性,采用的是使用 jQuery 在 console 调用对文档进行格式化。脚本例子如下(脚本本身不具备通用性,因为后端写文档的风格不一样)
var result = {};var eles = $('h2').splice(1);
eles.forEach((item, index) => { let cur = $(item); const desc = cur.text(); const info = {
desc,
}; let target; while((cur = cur.next())[0] !== eles[index + 1] && (index !== eles.length - 1)) { if (cur.is('table')) { if (!info[target]) {
info[target] = {};
} const map = [];
[...cur.find('tr:nth-child(1) th')].forEach((item, index) => { const th = $(item); if (th.text().includes('名称')) { // map.push('name');
} if (th.text().includes('类型')) {
map.push('type');
} if (th.text().includes('是否必须')) {
map.push('require');
} if (th.text().includes('描述')) {
map.push('desc');
}
});
[...cur.find('tr td:nth-child(1)')].forEach((item, index) => { const td = $(item); const mapClone = [...map]; let next = td.next(); const key = td.text().trim(); while (next.length) {
info[target][key] = {
[mapClone.shift()]: next.text().trim(),
};
next = next.next();
} if (key === 'Action') {
result[info[target][key].desc.match(/[a-zA-Z]+/)[0]] = info;
info[target][key].value = info[target][key].desc.match(/[a-zA-Z]+/)[0];
} if (key === 'Version') {
info[target][key].value = info[target][key].desc.match(/[\d-]+/)[0];
}
});
} else if (cur.is('p')) { const subDesc = cur.text(); const attr = subDesc.match(/[a-zA-Z]+/)[0].trim();
target = target + '_' + attr;
info[target] = { desc: subDesc,
};
} else { const subDesc = cur.text().replace(/[\r\n]/g, ''); let pass = false; if (subDesc.includes('url')) {
target = 'url';
} if (subDesc.includes('body')) {
target = 'body';
} if (subDesc.includes('返回参数')) {
target = 'response';
} if (subDesc.includes('请求示例')) {
target = 'reqDemo';
pass = true;
} if (subDesc.includes('返回示例')) {
target = 'resDemo';
pass = true;
} if (subDesc.includes('方法')) {
info.method = subDesc.match(/get|post/i)[0].toUpperCase();
} if (target) { if ((target === 'reqDemo' || target === 'resDemo') && !pass) {
info[target].value = subDesc;
} else { if (!info[target]) {
info[target] = { desc: subDesc,
};
}
} }
}
}
});console.log(result);var map = Object.values(result).map((item) => ({query:{Action: item.url.Action.value,Version: item.url.Version.value,},method:item.method})).reduce((a,b) => Object.assign(a, {[b.query.Action]: {url: {query: b.query,method: b.method,path: 'path'}}}), {}); JSON.stringify(map, null, '\t').replace(/"(.*?)":/g, '$1:').replace(/: "path",{0,1}/g, ',');
经验
离数据核心越近,则需要写的转换越少,离数据核心远的话,可能要在多个地方写同样的转换,所以建议不要把转换写在各个地方,另外前端建设 service 层的必要性,不要把接口写的到处都是,很难找的。
其他
顺便简单写一下实践,由实践的例子可以看到对接口的定义,采用了新的方案,这种方案的说明,会在后续的文章进行介绍。
// service 页面define([ 'pro/service/base', './apis/module.js', './transform.js',
], (base, api, transform) => {
const service = base.transformOAI(apis, transform); return service;
});// apis/module.jsdefine([], function () {
const path = '/module'; return { Create: { url: { query: { Action: "Create", Version: "2017-12-14"
}, method: "GET",
path,
}
}, Delete: { url: { query: { Action: "Delete", Version: "2017-12-14"
}, method: "GET",
path,
}
}, DescribeList: { url: { query: { Action: "DescribeList", Version: "2017-12-14"
}, method: "POST",
path,
}
},
};
});// transform.jsdefine([
], () => {
const formatRes = function (res) { return { code: res.Code, msg: res.Message, requestId: res.RequestId,
};
}; return { Create: {
pre(params) { return { query: { InstanceId: params.data.instanceId, Name: params.data.name, Description: base64._$str2b64(params.data.description),
}, config: { noAlert: params.noAlert,
},
};
}, post: formatRes,
}, Delete: {
pre(params) { return { query: { Id: params.data.id,
},
};
}, post: formatRes,
},
};
});
更多网易技术、产品、运营经验分享请点击。
相关文章:
【推荐】 21分钟学会写编译器
【推荐】 “网易有钱”sketch使用分享
后端接口迁移(从 webapi 到 openapi)前端经验总结的更多相关文章
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...
- 基于Node.js的微信JS-SDK后端接口实现
做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分 ...
- 【Node.js】二、基于Express框架 + 连接MongoDB + 写后端接口
在上节,我们讲了如何搭建express环境,现在我们说说如何通过node.js写服务接口给前端调用 1. 首先通过MongoDB建好数据库与表格 例如,我的数据库名字为db_demo,数据库表格为go ...
- vue菜鸟从业记:公司项目里如何进行前后端接口联调
最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言. 在前后端开发人员碰面之后,协商确定好了前端需要的数据接口(扯那么 ...
- SpringCloud微服务之跨服务调用后端接口
SpringCloud微服务系列博客: SpringCloud微服务之快速搭建EurekaServer:https://blog.csdn.net/egg1996911/article/details ...
- 从后端接口下载文件的2种方式:get方式、post方式
从后端接口下载文件的2种方式 一.get方式 直接使用: location.href='http://www.xxx.com/getFile?params1=xxx¶ms2=xxxx' ...
- BugPhobia准备篇章:Beta阶段前后端接口文档
0x00:序言 Two strangers fell in love, Only one knows it wasn’t by chance. To the searching tags, you m ...
随机推荐
- jquery对checkbox的操作汇总
1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...
- C#中生成随机数的几种方法
Random 类 Random类默认的无参构造函数可以根据当前系统时钟为种子,进行一系列算法得出要求范围内的伪随机数 Random rd = new Random() rd.next(,)(生成1~1 ...
- 笨办法学Python(十九)
习题 19: 函数和变量 函数这个概念也许承载了太多的信息量,不过别担心.只要坚持做这些练习,对照上个练习中的检查点检查一遍这次的联系,你最终会明白这些内容的. 有一个你可能没有注意到的细节,我们现在 ...
- April 18 2017 Week 16 Tuesday
Every light has darkness to balance it out. 有光明的地方,必定有黑暗予以平衡. I strive to get a balance between life ...
- POJ-2718 Smallest Difference---DFS
题目链接: https://vjudge.net/problem/POJ-2718 题目大意: 有一列数,对其任意分成两组,每组按一定顺序可以组成一个数.问得到的两个数的差最小是多少. 思路: 直接d ...
- C++11 新特性之 序列for循环
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/lr982330245/article/details/30971195 在C++中在C++中for循 ...
- 【BZOJ3506】[CQOI2014] 排序机械臂(Splay)
点此看题面 大致题意: 给你\(n\)个数.第一次找到最小值所在位置\(P_1\),翻转\([1,P_1]\),第二次找到剩余数中最小值所在位置\(P_2\),翻转\([2,P_2]\),以此类推.求 ...
- A. Kyoya and Colored Balls_排列组合,组合数
Codeforces Round #309 (Div. 1) A. Kyoya and Colored Balls time limit per test 2 seconds memory limit ...
- Centos下Yum安装PHP5.5,5.6
默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...
- 问题 B: C++习题 对象数组输入与输出
题目描述 建立一个对象数组,内放n(n<10)个学生的数据(学号.成绩),用指针指向数组首元素,输出第奇数(1,3,5,7)个学生的数据. 输入 n和n个学生的学号.成绩 输出 奇数学生的数据 ...