chenweiqun / swagger-vue

Swagger to JS & Vue & Axios Codegen

swagger-vue

Swagger to JS & Vue & Axios Codegen

Installation

npm install swagger-vue --dev

Generate

Using NodeJS file

const swaggerGen = require('swagger-vue')
const jsonData = require('../api-docs.json')
const fs = require('fs')
const path = require('path')

let opt = {
  swagger: jsonData,
  moduleName: 'api',
  className: 'api'
}
const codeResult = swaggerGen(opt)
fs.writeFileSync(path.join(__dirname, '../dist/api.js'), codeResult)

Using Grunt task

Create Gruntfile.js

const fs = require('fs')
const path = require('path')
const swaggerGen = require('swagger-vue')

module.exports = function(grunt) {

  grunt.initConfig({
    'pkg': grunt.file.readJSON('package.json'),
    'swagger-vue-codegen': {
      options: {
        swagger: "<%= pkg.swagger.definition %>",
        className: "<%= pkg.swagger.className %>",
        moduleName: "vue-<%= pkg.swagger.moduleName %>",
        dest: 'client/javascript'
      },
      dist: {

      }
    }
  });

  grunt.registerMultiTask('swagger-vue-codegen', function() {
    var callback = this.async();
    var opt = this.options();
    var distFileName = path.join(opt.dest, opt.moduleName + '.js');

    fs.readFile(opt.swagger, function(err, data) {
      if (err) {
        grunt.log.error(err.toString());
        callback(false);
      } else {
        var parsedData = JSON.parse(data);

        var codeResult = swaggerGen({
          swagger: parsedData,
          moduleName: opt.moduleName,
          className: opt.className
        });

        fs.writeFile(distFileName, codeResult, function(err) {
          if (err) {
            grunt.log.error(err.toString());
            callback(false);
          } else {
            grunt.log.writeln('Generated ' + distFileName + ' from ' + opt.swagger);
          }
        })
      }
    });
  });

  grunt.registerTask('vue', ['swagger-vue-codegen']);

};

And set options in package.json

...
  "swagger": {
    "definition": "client/swagger.json",
    "className": "API",
    "moduleName": "api-client"
  }
...

Now you can use grunt vue to run build task

Generated client usage

In Vue.js main file set API domain

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

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

import { user_login as userLogin } from '../lib/api-client.js'

userLogin({
  credentials: {
    username: 'admin',
    password: 'admin'
  }
}).then(function (response) {
  console.log(response.data) // {id: "<token>", ttl: 1209600, created: "2017-01-01T00:00:00.000Z", userId: 1}
})

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

Links

• swagger-js-codegen
• axios

License

MIT

swagger-vue's Issues

set axios instance

Hi, I have an axios instance with request interceptors.
How can I set my axios instance?

insted of (api.js)

import axios from 'axios'

Add file to set the axios instance (index.js)

let axios
function setAxios (vueAxios) {
  axios = vueAxios
}

function getAxios () {
  return axios
}

export { getAxios }
export default setAxios

And then in my api.js , use the custom axios instance (api.js)

import { getAxios } from '../../index'
export default {
  getAlms () {
    return getAxios().get(pathAlms).then(response => {
      return response.data
    })
  }
}

Pass configuration to Axios

Hi chenweiqun!

I am trying to pass a configuration to axios to send credentials in a cross-site call. I've tried (by looking at the source code) this, but it doesn't work. I'm doing something wrong? I've also tried other axios parameters without success.

shopDeleteById({ id: shop.id, $config: { withCredentials: true } }).then(() => {

Thanks a lot! :)

is invalid for option "encoding" 对选项“encoding”无效

is invalid for option "encoding"

对中文生成API过敏，提示：对选项“encoding”无效

Generate Models

Is it possible to generate models similar to the swagger-codegen for javascript?

Wrong replace thread_id by threadId

this YAML

  /thread/settings_sources_keywords:
    post:
      tags:
        - thread
      summary: ThreadSetSourcesKeywords
      description: ThreadSetSourcesKeywords
      operationId: ThreadSetSourcesKeywords
      consumes:
        - application/json
      produces:
        - application/json
      parameters:
        - in: body
          name: body
          description: Thread settings - keywords
          required: true
          schema:
            $ref: '#/definitions/ThreadKeywords'
      responses:
        '200':
          description: Thread settings, set keywords
        '403':
          description: Access denied
        '405':
          description: Invalid input

generated this code

/**
 * ThreadGetSourcesKeywords
 * request: ThreadGetSourcesKeywords
 * url: ThreadGetSourcesKeywordsURL
 * method: ThreadGetSourcesKeywords_TYPE
 * raw_url: ThreadGetSourcesKeywords_RAW_URL
 * @param threadId - thread id
 */
export const ThreadGetSourcesKeywords = function(parameters = {}) {
  const domain = parameters.$domain ? parameters.$domain : getDomain()
  const config = parameters.$config
  let path = '/thread/settings_sources_keywords_get'
  let body
  let queryParameters = {}
  let form = {}
  if (parameters['threadId'] !== undefined) {
    body = parameters['threadId']
  }
  if (parameters['threadId'] === undefined) {
    return Promise.reject(new Error('Missing required  parameter: threadId'))
  }
  if (parameters.$queryParameters) {
    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
    });
  }
  return request('post', domain + path, body, queryParameters, form, config)
}
export const ThreadGetSourcesKeywords_RAW_URL = function() {
  return '/thread/settings_sources_keywords_get'
}
export const ThreadGetSourcesKeywords_TYPE = function() {
  return 'post'
}

BUT
this

  /thread/settings_periods_get:
    post:
      tags:
        - thread
      summary: ThreadGetPeriods
      description: Get thread periods
      operationId: ThreadGetPeriods
      consumes:
        - application/json
      produces:
        - application/json
      parameters:
        - in: body
          name: body
          required: true
          description: thread id
          schema:
            $ref: '#/definitions/ThreadId'
      responses:
        '200':
          description: Thread settings, get time periods
          schema:
            $ref: '#/definitions/ThreadSettingsPeriods'
        '403':
          description: Access denied
        '405':
          description: Invalid input

generated this code

/**
 * Get thread periods
 * request: ThreadGetPeriods
 * url: ThreadGetPeriodsURL
 * method: ThreadGetPeriods_TYPE
 * raw_url: ThreadGetPeriods_RAW_URL
 * @param body - thread id
 */
export const ThreadGetPeriods = function(parameters = {}) {
  const domain = parameters.$domain ? parameters.$domain : getDomain()
  const config = parameters.$config
  let path = '/thread/settings_periods_get'
  let body
  let queryParameters = {}
  let form = {}
  if (parameters['body'] !== undefined) {
    body = parameters['body']
  }
  if (parameters['body'] === undefined) {
    return Promise.reject(new Error('Missing required  parameter: body'))
  }
  if (parameters.$queryParameters) {
    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
    });
  }
  return request('post', domain + path, body, queryParameters, form, config)
}

Why in one case it create threadId (unnecessary behavior) and in another make normal body parameter?

schemes

  ThreadId:
    type: object
    required:
      - thread_id
    properties:
      thread_id:
        type: string
        description: thread_id
  ThreadKeywords:
    type: object
    required:
      - thread_id
      - keywords
      - stopkeywords
    properties:
      thread_id:
        type: string
      keywords:
        type: array
        items:
          type: string
      stopkeywords:
        type: array
        items:
          type: string

Security error with handlebars.js

Hi!

Our SAST shows us the following error caused by handlebars:
"A prototype pollution vulnerability in handlebars may lead to remote code execution if an attacker can control the template in handlebars"

Identifiers:

• RETIRE-JS-baf1b2b5f9a7c1dc0fb152365126e6c3

Links:

• https://snyk.io/vuln/SNYK-JS-HANDLEBARS-174183
• handlebars-lang/handlebars.js#1495
• handlebars-lang/handlebars.js@cd38583

Sen cookies only to POST, not to GET requests

I add two lines (19,20) in generated code for work with cookies.

  config = config || {};
  config.withCredentials = true;

but when i use GET requests, cookie not send to server, but with POST all OK.

P.S. Post request generate another OPTIONS request.

Publish npm

please publish on npm :)

TypeError when used OpenAPI 3.0 specification

The module works well for OAS 2 but not with OAS 3.
Are there any upcoming releases or is it an issue from my side?
Thanks!

/Users/nagnath.masali/Swagger/For Vue/node_modules/swagger-vue-axios/node_modules/swagger-vue/lib/parse.js:152
  swagger.apis.forEach(function (api) {
               ^

TypeError: Cannot read property 'forEach' of undefined
    at getViewForSwagger1 (/Users/nagnath.masali/Swagger/For Vue/node_modules/swagger-vue-axios/node_modules/swagger-vue/lib/parse.js:152:16)
    at parse (/Users/nagnath.masali/Swagger/For Vue/node_modules/swagger-vue-axios/node_modules/swagger-vue/lib/parse.js:206:74)
    at module.exports (/Users/nagnath.masali/Swagger/For Vue/node_modules/swagger-vue-axios/node_modules/swagger-vue/index.js:4:14)
    at Object.<anonymous> (/Users/nagnath.masali/Swagger/For Vue/node_modules/swagger-vue-axios/node_modules/swagger-vue/example/create_api/index.js:10:20)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

可否提供详细教程

你好，是否可以提供详细教程，谢谢！

您好，我们在引用您的组建的时候，不成功，请问是否可以提供有偿服务？

swagger.json with wildcard cause error

My API contain this route path /*. When I execute swagger-vue, it throw an error here (toUpperCase on undefined):

swagger-vue/lib/parse.js

Line 25 in 689037b

return m.toLowerCase() + result[0].toUpperCase() + result.substring(1)

I suggest adding path === '/*' to line 10.

Importing API

Hello chenweiqun,

I found this project when I was searching someway of integrating an swagger api to vue. I'm able with your code, to generate the api.js code, but I have no idea how to integrate that into vue.

Can you explain briefly how to do it? (How to use the generated file)

Thanks!