Swagger+NodeJS Mock前端数据

原创 2017年09月30日 11:36:51

现在Web开发越来越倾向于前后端分离,前端使用AngularJS,React,Vue等,部署在NodeJS上,后面采用SpringBoot发布Rest服务,前后端进行分离。这样的架构灵活且特别适合大型团队的协作开发。 那么问题来了,因为前端都是和后端通过API进行交互的,那么如果后端没有开发完成,前端的进度超前了,难道前端要等后端开发完了才能继续当前或者下一个功能的开发吗? 有没有一种方式可以不必等后端的API实现开发完,前端也能把相应的功能渲染出来呢?其实方案有很多种,比如用deployd, swagger+Node等方式,或者通过Swagger+EasyMock。
其实笔者认为deloyd也挺好用的,大家可以参考这篇文章

但是由于在Swagger提供的功能更为强大,不但可以与SpringBoot集成,还可以与NodeJS集成,还能通过网页进行在线编辑API的接口定义,更为牛的是还能生成的接口网页上直接进行测试。既然功能这么强大,我想其应该有和deployd类似的功能,结果还真被我发现了,只不过配置起来比deployd稍微复杂一些。

1. 首先安装swagger

加上读者已经安装了最新版的nodejs,然后在cmd上输入下面的命令

npm install -g swagger

2. 创建一个swagger的项目

swagger project create movie-collection

创建好后项目结构如下:

-- api  
---- controllers 
------ hello_world.js
---- helpers
---- mocks
---- swagger
------ swagger.yaml

-- config 
---- default.yaml

-- test
---- api
------ controllers
-------- hello_world.js
------ helpers

-- app.js
-- package.json

3. 启动当前的swagger的编辑页面

swagger project edit

将会打开当前的swagger的编辑界面,然后在左边的编辑页面输入下面的swagger的yaml描述

swagger: "2.0"
info:
  version: "0.0.1"
  title: Hello World App
# during dev, should point to your local machine
host: localhost:10010
# basePath prefixes all resource paths
basePath: /
#
schemes:
  # tip: remove http to make production-grade
  - http
  - https
# format of bodies a client can send (Content-Type)
consumes:
  - application/json
# format of the responses to the client (Accepts)
produces:
  - application/json
paths:
  /movie:
    # our controller name
    x-swagger-router-controller: movie
    get:
      #in /movie
      operationId: getAll
      description: get the movies list
      # define the type of response for Success "200" and Error
      responses:
        "200":
          description: Success
          schema:
            $ref: "#/definitions/GetMoviesListResponse"
        default:
          description: Error
          schema:
            $ref: "#/definitions/ErrorResponse"
    post:
      operationId: save
      description: add a new movie to the list
      # movie info to be stored
      parameters:
        - name: title
          description: Movie properties
          in: body
          required: true
          schema:
            $ref: "#/definitions/Movie"
      responses:
        "200":
          description: Success
          schema:
            $ref: "#/definitions/GeneralResponse"
        default:
          description: Error
          schema:
            $ref: "#/definitions/ErrorResponse"
  /movie/{id}:
    # our controller name
    x-swagger-router-controller: movie
    get:
      operationId: getOne
      description: get a movie
      # define the type of response for Success "200" and Error
      parameters:
        - name: id
          type: string
          in: path
          required: true
      responses:
        "200":
          description: Success
          schema:
            $ref: "#/definitions/GetMovieResponse"
        default:
          description: Error
          schema:
            $ref: "#/definitions/ErrorResponse"
    put:
      operationId: update
      description: update a movie
      # define the parameters
      parameters:
        - name: id
          description: Movie id
          type: string
          in: path
          required: true
        - name: title
          description: Movie properties
          in: body
          required: true
          schema:
            $ref: "#/definitions/Movie"
      responses:
        "200":
          description: Success
          schema:
            $ref: "#/definitions/GeneralResponse"
        default:
          description: Error
          schema:
            $ref: "#/definitions/ErrorResponse"
    delete:
      operationId: delMovie
      description: delete a movie
      # define the parameters
      parameters:
        - name: id
          description: Movie id
          type: string
          in: path
          required: true
      responses:
        "200":
          description: Success
          schema:
            $ref: "#/definitions/GeneralResponse"
        default:
          description: Error
          schema:
            $ref: "#/definitions/ErrorResponse"
  /swagger:
    x-swagger-pipe: swagger_raw
# complex objects have schema definitions
definitions:
  GetMoviesListResponse:
    required:
      - movies
    properties:
      # The array of movies
      movies:
        type: array
        items:
          type: object
          properties:
            id:
              type: string
            title:
              type: string
            year:
              type: number
  ErrorResponse:
    required:
      - message
    properties:
      message:
        type: string
  Movie:
    type: object
    properties:
      title:
        type: string
        description: task object name
      year:
        type: number
        description: task description
    required:
      - title
      - year
  GeneralResponse:
    type: object
    properties:
      success:
        type: number
        description: returns 1 if successful
      description:
        type: string
        description: a short comment
    required:
      - success
      - description
  GetMovieResponse:
    required:
      - id
      - title
      - year
    properties:
      id:
        type: string
      title:
        type: string
      year:
        type: number

其定义了下面的一些API REST接口,

这里写图片描述

4. 编辑 在api–>Controllers目录下新建一个movie.js文件

上面的API已经暴露出来了,但是直接调用的话,是调用不成功的。因为我们刚刚生成的swagger项目没有启动,movie-collection,为了返回我们想要的数据,
我们可以修改api–>Controllers–>movie.js文件,在修改文件之前,我们先安装一个nodejs的内存数据库包:crypto ,安装命令如下:

npm install crypto --save

安装好后,修改hello_world.js文件,把下面的代码黏贴上。

'use strict';
    // Include our "db"
    var db = require('../../config/db')();
    // Exports all the functions to perform on the db
    module.exports = {getAll, save, getOne, update, delMovie};

    //GET /movie operationId
    function getAll(req, res, next) {
      res.json({ movies: db.find()});
    }
    //POST /movie operationId
    function save(req, res, next) {
        res.json({success: db.save(req.body), description: "Movie added to the list!"});
    }
    //GET /movie/{id} operationId
    function getOne(req, res, next) {
        var id = req.swagger.params.id.value; //req.swagger contains the path parameters
        var movie = db.find(id);
        if(movie) {
            res.json(movie);
        }else {
            res.status(204).send();
        }
    }
    //PUT /movie/{id} operationId
    function update(req, res, next) {
        var id = req.swagger.params.id.value; //req.swagger contains the path parameters
        var movie = req.body;
        if(db.update(id, movie)){
            res.json({success: 1, description: "Movie updated!"});
        }else{
            res.status(204).send();
        }

    }
    //DELETE /movie/{id} operationId
    function delMovie(req, res, next) {
        var id = req.swagger.params.id.value; //req.swagger contains the path parameters
        if(db.remove(id)){
            res.json({success: 1, description: "Movie deleted!"});
        }else{
            res.status(204).send();
        }

    }

5. 启动movie-collection的swagger项目

通过下面的命令启动swagger的movie-collection项目

swagger project start

注意不能通过下面的命令启动,否则其只会启动debug模式

swagger project start -m

6. 直接swager edit页面进行测试

比如我们新创建一个movie的记录,从下面可以看出其创建成功了。

这里写图片描述

在创建一条,
这里写图片描述

然后,在得到所有的记录,可知前面两条记录创建成功。
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chancein007/article/details/78141172

利用node.js来mock假数据

利用node.js来mock假数据 1:首先要先安装node.js.这个就不说了。可以参考我的这篇文章(ode.js利用gulp 启动webServer服务)http://blog.csdn.net...
  • seven0404
  • seven0404
  • 2016-07-15 11:43:46
  • 3288

前端mock数据

作为前端经常需要模拟后台数据,我们称之为mock。通常的方式为自己搭建一个服务器,返回我们想要的数据。 项目中遇到的请求链接是类似这样子的:www.abc.com/user/login,而不是请求某个...
  • sysuzjz
  • sysuzjz
  • 2015-12-15 18:42:22
  • 12940

Node.js +Swagger Editor + Swagger-UI 环境搭建

安装node.js下载node.js最新版 https://nodejs.org/en/download/ 点击 安装器 node-v6.11.1.pkg 开始安装 一路下一步,安装完成 no...
  • ruglcc
  • ruglcc
  • 2017-07-26 22:02:39
  • 3249

基于Swagger接口,使用nodejs开发微服务的步骤

方法一:使用swagger-node组件 参考https://scotch.io/tutorials/speed-up-your-restful-api-development-in-nod...
  • sd2131512
  • sd2131512
  • 2016-12-20 17:28:26
  • 2858

解决基于NodeJS的Swagger,不能跨机器访问的问题

我们知道,Swagger还能在NodeJS上运行,假设我已经安装了Node平台,然后在命令行输入下面的命令:npm install -g swagger这样,就会把Swagger安装在Node平台上,...
  • chancein007
  • chancein007
  • 2017-09-27 23:29:28
  • 540

Swagger环境搭建之非依赖代码法

前言Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法,参数和模型紧密集成...
  • wantnrun
  • wantnrun
  • 2016-10-08 10:04:47
  • 4800

开源mock server系统

小强软件测试,因为不是天生丽质,所以必须天生励志。 性能、python自动化班长期招生,咨询QQ:2083503238 官网:http://xqtesting.sxl.cn QQ群:...
  • xqtesting
  • xqtesting
  • 2017-02-17 09:56:47
  • 1408

手把手带你入门之Swagger UI

关于Swagger UI,从官网找来一段介绍。 简单的来讲, Swagger UI就是API文档生成和测试利器。 Swagger UI is a dependency-freecollection o...
  • chndata
  • chndata
  • 2016-01-04 15:33:40
  • 9698

(Swagger)一个终端和后台开发对api接口管理工具

Swagger包括库、编辑器、代码生成器等很多部分,这里我们主要讲一下Swagger Editor。这是一个完全开源的项目,并且它也是一个基于Angular的成功案例,我们可以下载源码并自己部署它,也...
  • jiadabin
  • jiadabin
  • 2016-07-18 11:44:05
  • 11241

angular-mocks

angular-mocks前后端分离的开发模式中, 为了能让前端不依赖后端服务而能够并行开发, angular-mocks能模拟一些后台返回的数据,从而使前端看起来已经跟后端对接了一样, 只要与后端商...
  • Excaliburace
  • Excaliburace
  • 2017-05-31 09:03:44
  • 1355
收藏助手
不良信息举报
您举报文章:Swagger+NodeJS Mock前端数据
举报原因:
原因补充:

(最多只允许输入30个字)