Swagger to JS & Vue & Axios Codegen
Swagger to JS & Vue & Axios Codegen
npm install swagger-vue --dev
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)
Create Gruntfile.js ```javascript 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 ```json ... "swagger": { "definition": "client/swagger.json", "className": "API", "moduleName": "api-client" } ...
Now you can use
grunt vueto run build task
In Vue.js main file set API domain
javascript import { setDomain } from './lib/api-client.js' setDomain('http://localhost:3000/api')
Import API function into Vue.js component, for example to log in ```javascript import { user_login as userLogin } from '../lib/api-client.js'
userLogin({ credentials: { username: 'admin', password: 'admin' } }).then(function (response) { console.log(response.data) // {id: "", 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