首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

基于 Swagger 的前后端分离开发实践(4)

基于 Swagger 的前后端分离开发实践(4)

支持        HTTPS工程默认创建的 Mock Sever 为 HTTP Server,如果我们需要支持 HTTPS 请求, 可以更新 app.js 代码,支持响应 HTTPS 请求。具体代码参考清单        10:
清单 10. 支持        HTTPS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
          var config = {
    appRoot: __dirname,
    swaggerSecurityHandlers: {
        key: fs.readFileSync('key.perm'),
        cert: fs.readFileSync('cert.perm')
    }
}
var port = process.env.PORT || 10010;
https.createServer({key: fs.readFileSync('key.perm'),
                        cert: fs.readFileSync('cert.perm')
                       }, app)
             .listen(port, function () {
                 console.log('Https Server started, pls try from browser with https://127.0.0.1:%s/docs/test !', port);
             })
    }




前端基于 Mock Server 开发前端可以将自己作为静态文件加载到 Mock Server, 这样就可以直接进行前段可发调试,无须再起一个前端的 Server。具体代码请参考清单 11:
清单 11.        加载静态文件
1
app.use('/docs', express.static(appConfig.webresourcePath));




代码优化鉴于我们在原有 Swagger 工程的基础上添加了其他额外的功能,比如加载前端 JavaScript 代码,支持 HTTPS 请求,转发 API 请求。我们可以提取一个自己的        config 文件,在配置文件中去设置是否加载前端 JavaScript 代码,需要加载的前端代码的路径,是否转发 API 请求,转发哪些 API 请求,API        转发的目的服务器地址、端口,支持 HTTP 或者是 HTTPS 等等。这样我们可以很容易的去改变 Mock Server 的提供的功能。
应用        Mock ServerMock Server 构建完成后,我们开始使用 Mock Server 开始前端开发。首先确定你的配置文件的设置是你需要的。比如 Mock Server 是否加载前端代码,Mock        Server 的响应端口,Mock Server 是否转发请求到其他 Server。比如以下是我们开发过程中用的 Mock Server 配置文件。我们使用 Mock Server        加载前端代码,指定 Mock Server 响应端口在 10010,HTTP 协议,将以 /docs/docsrv 和          /docs/api 开始的 API 请求转发到 docsServeribm.com:80 的 Server        上。具体代码请参考清单 12:
清单 12.        配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "webresource_dir": "C:/Users/IBM_ADMIN/git/docs-webresource/docs-webresource",
  "fake_data_dir": "",
  "fake_server_port": "10010",
  "version": "1.0.0",
  "web_server": "true",
  "mock": "true",
  "protocol": "http",
  "real_server": {
    "protocol": "http",  
    "host": "docsServer.ibm.com",
    "port": "80",
    "pathList": ["/docs/docsrv","/docs/api"]
  },
}




然后打开命令行运行以下命令,将 Mock Server 起动起来:
# swagger project start
因为 Mock Server 加载了前端代码,我们可以在浏览器中以 http://localhost:10010/docs/index.html        直接访问前端的入口页面。如果前端代码起在另一个 Server 上,那么需要将你将前端代码的 API 访问请求配置到 Mock Server        的上,然后访问前端的入口页面。这时已经开发好的功能应该能正常显示。如果不能正常显示,我们需要追踪出错的位置,查看对应 API 的定义调用响应各个环节是否一致,来排除 Mock        Server 响应出错。比如确认代码发出的 API 请求,与 swagger.yaml 文件中定义的 API 是否一致,这决定了 API 是否能在 Mock        Server 中被正确拦截;然后查看响应 API 的 controller 方法的逻辑,是否返回了 API 需要的假数据。如果 Mock Server        响应正确,那么这就是前端代码真正的 BUG,否则需要先修正 Mock Server 的错误。
结束语使用 Swagger API 能很方便的协助实现前后端分离开发,但是需要保证 API 定义的准确和一致性。我们知道随着项目开发的不断进行,API        定义和实现很大可能上会有变更,所以需要在 API 变更的时候同时更新 Mock Server 的 API 文档。目前很多后端语言都有插件支持自动生成 Rest API        文档,所以也可以考虑后端先完成 Rest API 框架部分开发,帮助生成 Mock Server 所需要的 API 文档。这样能更好的保证 Mock Server        的准确性和可用性。
返回列表