主要流程：

  1.                   前端开发 --> 自测<br />接口定义 -->                               --> 联调          <br />                     后端开发 --> 自测

一 接口定义

前后端根据业务需求共同确定接口，写到eolinker里。
接口需明确好请求方式（post/get）、请求参数、返回参数。请求与返回参数都需要明确好数据类型及必要的注释，请求与返回参数全部使用小写字母。此外：

  • 请求参数需定义好是否必填项 ；

  • 返回参数中，约定必须返回如下2个字段：

    • result [boolean] ，接口响应情况，返回true/false

    • info [string] ,备注信息，如果result返回false，需在info字段里写明原因，如“数据库连接失败”等

二 前端开发及自测

前端开发过程中，需要模拟接口返回数据来测试页面展示。模拟步骤如下：

  1. 选中一个接口，点击编辑—高级Mock，进入模拟数据配置页面。在该页面中按照mockjs语法配置模拟数据。注意属性值的格式为 : @mock=XXXX 基于eolinker的前后端分离开发及调试流程 - 图1

  2. 配置前端路由。选择任意接口，点击查看详情，查看模拟数据的访问地址：基于eolinker的前后端分离开发及调试流程 - 图2
    在webpackrc.js 文件中，路由配置如下：（根据上图地址进行适当调整）

    1. "/HiatmpPro": {
    2. target: "http://10.16.3.178:8180/eolinker_os",
    3. changeOrigin: true,
    4. pathRewrite: {"^/HiatmpPro/": "/Mock/simple?projectID=3&uri="}
    5. }

  3. 代码编写与测试。 在service层编写接口调用代码，进行测试（约定所有请求都以/HiatmpPro开头）：

    1. // 查询六合一车辆信息
    2. export async function getVehInfo(params) {
    3. return request('/HiatmpPro/scs/common/getVehInfo', {
    4.  method: 'POST',
    5.  body: JSON.stringify(params),
    6. });
    7. }

三 后端开发及自测

后台代码开发完成后，通过eolinker测试接口是否正常。步骤如下（该部分测试也可以用postman代替）：

  1. 配置eolinker测试环境：基于eolinker的前后端分离开发及调试流程 - 图3

  2. 下载并安装chrome浏览器eolinker测试增强插件

  3. 选择需要测试的接口，点击“测试”tab页，输入请求参数点击“发送”进行测试。详细说明见官方帮助手册。注意如果后台开通了sso验证，需要先新开一个浏览器tab页，登录一次后再进行测试。

  4. 自动化测试。针对流程化的一系列接口，预先添加测试用例，自动进行批量测试（如可以依次测试预案的添加 —>查询—>修改—>查询—>删除接口）。详细说明见官方帮助手册。

四 联调

前后端开发完成后，前端工程修改代理地址为后台服务地址，进行联调测试。