swagger-vue

Swagger to JS & Vue & Axios Codegen

Installation

1npm install swagger-vue --dev

Generate

Using NodeJS file

1const swaggerGen = require('swagger-vue')
2const jsonData = require('../api-docs.json')
3const fs = require('fs')
4const path = require('path')
5
6let opt = {
7  swagger: jsonData,
8  moduleName: 'api',
9  className: 'api'
10}
11const codeResult = swaggerGen.getApi(opt)
12fs.writeFileSync(path.join(__dirname, '../config/api.js'), codeResult)//生成API文档
13
14const filterContent = swaggerGen.getFilter(opt)
15fs.writeFileSync(path.join(__dirname, '../config/filter.js'), filterContent)//生成filter文档及枚举

if api-docs.json from API

1const swaggerGen = require('swagger-vue')
2const fs = require('fs')
3const path = require('path')
4const url = 'http://demo.api.com';
5
6swaggerGen.apiRequest(url).then(jsondata=>{
7  let opt = {
8    swagger: jsonData,
9    moduleName: 'api',
10    className: 'api'
11  }
12
13  // const codeResult = swaggerGen.getApi(opt, [‘xxx’,'xxx']) //1.0.2支持传入生成需要的function,xxx-operationID
14  const codeResult = swaggerGen.getApi(opt)
15  fs.writeFileSync(path.join(__dirname, '../config/api.js'), codeResult)//生成API文档
16
17  const filterContent = swaggerGen.getFilter(opt)
18  fs.writeFileSync(path.join(__dirname, '../config/filter.js'), filterContent)//生成filter文档及枚举
19})

Using Grunt task

Create Gruntfile.js

1const fs = require('fs')
2const path = require('path')
3const swaggerGen = require('swagger-vue')
4
5module.exports = function(grunt) {
6
7  grunt.initConfig({
8    'pkg': grunt.file.readJSON('package.json'),
9    'swagger-vue-codegen': {
10      options: {
11        swagger: "<%= pkg.swagger.definition %>",
12        className: "<%= pkg.swagger.className %>",
13        moduleName: "vue-<%= pkg.swagger.moduleName %>",
14        dest: 'client/javascript'
15      },
16      dist: {
17
18      }
19    }
20  });
21
22  grunt.registerMultiTask('swagger-vue-codegen', function() {
23    var callback = this.async();
24    var opt = this.options();
25    var distFileName = path.join(opt.dest, opt.moduleName + '.js');
26
27    fs.readFile(opt.swagger, function(err, data) {
28      if (err) {
29        grunt.log.error(err.toString());
30        callback(false);
31      } else {
32        var parsedData = JSON.parse(data);
33
34        var codeResult = swaggerGen({
35          swagger: parsedData,
36          moduleName: opt.moduleName,
37          className: opt.className
38        });
39
40        fs.writeFile(distFileName, codeResult, function(err) {
41          if (err) {
42            grunt.log.error(err.toString());
43            callback(false);
44          } else {
45            grunt.log.writeln('Generated ' + distFileName + ' from ' + opt.swagger);
46          }
47        })
48      }
49    });
50  });
51
52  grunt.registerTask('vue', ['swagger-vue-codegen']);
53
54};
55

And set options in package.json

1...
2  "swagger": {
3    "definition": "client/swagger.json",
4    "className": "API",
5    "moduleName": "api-client"
6  }
7...

Now you can use grunt vue to run build task

Generated client usage

In Vue.js main file set API domain

1import { setDomain } from './lib/api-client.js'
2setDomain('http://localhost:3000/api')

Import API function into Vue.js component, for example to log in

1import { user_login as userLogin } from '../lib/api-client.js'
2
3userLogin({
4  credentials: {
5    username: 'admin',
6    password: 'admin'
7  }
8}).then(function (response) {
9  console.log(response.data) // {id: "<token>", ttl: 1209600, created: "2017-01-01T00:00:00.000Z", userId: 1}
10})

All requests use axios module with promise, for more information about that follow axios documentation

Links

• swagger-js-codegen
• axinos

License

MIT

changelog

1.0.0 (2019-08-13)

• swgger2.0生成代码注释错乱优化
• 优化example
• 优化模版
• 修改filter bug
• 暴露Apirequet函数,如果API文件是以接口形式提供的，我们可以调用该函数请求接口，将文档转换为JSON数据
• 修改日志路径
• 新增：抓取swgger枚举变量，生成filter(支持swgger3.0)
• 删除生成api时生成的无用函数
• 暴露生成api和filter的接口,引用方式更改

---

1.0.1 (2019-03-19)

Features

• 取消parameters参数camelCase转换 by lvison
• 兼容openApi by lvison

---

1.0.4 (2020-11-11)

Features

• getApi支持传入过滤function列表，只生成所需要的funciton代码, function值为swagger描述中，每个接口的operationID
• 新增部分代码注释

---

2.0.0 (2020-11-24)

Features

• 新增对openAPI版本requestBody中的入参做详细解析，并在模版方法中新增对应的参数校验（request body默认为object） - 暂时不支持swagger2.0
• 新增部分代码注释

---

2.0.3 (2020-12-10)

Features

• 修复复delete 方法无法接收自定义参数，修复post 、put、patch等方式传参错误bug
• 新增部分代码注释

---