电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 基于 Swagger 的前后端分离开发实践（2） [打印本页]

作者: look_w 时间: 2018-11-22 19:30 标题: 基于 Swagger 的前后端分离开发实践（2）

构建       Mock Server前后端分离的模式下, 前后端开发人员最先做的事情是定义前后端通讯的 API 接口文档。但是在只有 API 接口文档，而后端服务没有开发完成的时候，前端如何开始开发呢？我们的做法是利用       Swagger API 文档，开发一个简单的 Mock Server 给前端应用使用。
我们使用 swagger-express-mw lib 包来创建基于 Node.js 的 Mock Server，swagger-express-mw       提共一个前端基础框架，这个框架完全可以作为前端代码的开发框架，将 controller       部分实现成真正项目的代码逻辑。因为我们的项目是重构，前端代码需在原有代码基础上做开发，重点重构后端代码。所以只用其作为 Mock Server 来测试前后端的通信，controller       部分的实现只是简单的返回 Rest API 需要的固定的数据。
除了模拟 Rest API 响应，我们还可以扩展 Mock Server 提供的功能，比如加载运行前端 JavaScript 文件的功能，响应 HTTPS 请求，提供 Proxy       Server 的功能，当后端完成相应的 API 开发后，Mock Server 可以将指定 API 请求转发到真正的后端 Service 服务器上。这样就可以随时测试后端新实现的       Rest API。
下面让我们来开始创建 Mock Server，以下安装启动命令全部基于 Windows 平台。
安装

安装 Node.js。Swagger 工程是基于 Node.js 的，所以需要首先安装 Node.js。关于 Node.js 细节请参照。
安装 npm。在 Windows 平台上，安装 Node.js 的同时就会安装 npm，无须单独安装。关于 npm 细节请参照。
安装 Swagger。运行以下命令安装 Swagger：

# npm install -g swagger
安装命令执行完成后，可以运行以下命令来确定 Swagger 是否安装成功：
# swagger -V
创建工程运行以下命令，创建 Mock Server 工程：
# swagger project create YourProjectName
选择要创建的工程的架构，比如 express，具体请参考清单 4：
清单 4. 创建工程

1
2
3
4
5
6
7
8
9
10
11

D:\innovation>swagger project create SwaggerProject
? Framework? express
Project SwaggerProject created in D:\innovation\SwaggerProject
Running "npm install"...
npm
notice created a lockfile as package-lock.json. You should commit this file.

added 223 packages in 9.305s

Success! You may start your new app by running: "swagger project start SwaggerPr
oject"

工程目录介绍进入工程根目录，我们可以看到工程结构如图 2：
图 2. 工程目录

api 文件夹：这里又包含 controllers，helpers，mocks 和 swagger 四个文件夹。其中 controllers 用来放置响应 API 请求的 controller 文件；另外 swagger 用来放置 API 文档 swagger.yaml 文件。这两个是 Mock Server 用到的也是不可缺少的部分。

config 文件夹：这里有默认创建的 default.yaml 文件。这个文件是 Mock Server 的默认配置文件，比如这里定义 Mock Server 去哪里找 API 文件等等，仅仅利用工程做 Mock Server 的话，我们不需要改动这个配置文件。同时你也可以将自己的配置文件放在这里。
test 文件夹：这里包含 api/contollers 和 api/helpers。这里是 API 文件夹对应的测试文件。
app.js：Mock Server 的启动文件。我们可以根据自己项目的需求，在这个文件里添加代码增加 Mock Server 的功能。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)