精华内容
下载资源
问答
  • 1.首先swagger 的认识先说什么是Swagger... 有时后端改了API的参数或者其他设置, 前端直接看这个Swagger UI就可以, 方便项目管理和团队协作.官网: http://swagger.io/参数文档: https://github.com/swagger-api/swag...

    1.首先swagger 的认识

    先说什么是Swagger, Swagger的使用目的是方便优美的呈现出接口API的各种定义, 生成API文档, 包括参数, 路径之类. 有时后端改了API的参数或者其他设置, 前端直接看这个Swagger UI就可以, 方便项目管理和团队协作.

    官网: http://swagger.io/

    参数文档: https://github.com/swagger-api/swagger-ui#parameters

    这东西咋用呢? 说白了就是安装Swagger套件, 然后API代码里写注释, 用Swagger后端程序跑API来提取注释, 生成一个json文件, 再通关Swagger前端来美化,整理JSON数据.

    就是一个api的管理工具,一种规范,为后端和客户端做便利的一种工具。

    2.安装 后端 也就是 swagger-PHPcomposer require zircote/swagger-php

    执行就可以了就下载下来了,然后项目根目录会增加一个vendor这里面就是所谓的 swagger-PHP

    使用:<?php

    require("vendor/autoload.php");

    $openapi = \OpenApi\scan('/path/to/project');

    header('Content-Type: application/x-yaml');

    echo $openapi->toYaml();

    3.接下来就是怎么写注释 生成json 然后 ui 显示

    会看到里面好多@SWG 这样的注释(参考最新的文档实例),这些就是文档啦,这个插件会自动提取这些注释然后生成一个json文件,然后ui 就可以 读取出来了。

    c5482f2fce0b

    4.生成json文件

    方法1:  我这里是写了一个控制器/方法,直接访问方法名获取最新信息写入到swagger.json里,然后在重定向到页面,如图

    c5482f2fce0b

    方法2:  当然还有命令行的方法:php /phpstudynew/www/swagger/vendor/zircote/swagger-php  /bin/swagger/phpstudynew/www/swagger/application/controllers -o  /phpstudynew/www/swagger/docs/json

    -o前面是自动获取 整个文件夹下面所有的 注释,后面是生成的路径,也是ui访问的路径,这个默认好像是swagger.json就这样成功了

    5.安装前端

    swagger-ui下载git clone https://github.com/swagger-api/swagger-ui.git

    下载之后找到dist目录复制到自己项目一个可以访问的位置, 打开index.html把其中的那一串url改成自己的, 比如http://localhost/yii2/swagger-docs/swagger.json$(function() {

    var url = window.location.search.match(/url=([^&]+)/);

    if(url && url.length > 1) {

    url = decodeURIComponent(url[1]);

    }else{

    url = "你生成的swagger.json文件位置";

    }

    然后访问了自己项目dist/index.html的页面,就出现下面的界面

    c5482f2fce0b

    简单写了下实现swagger的方法,还待学习,总之要看文档学着把文档把例子看好,很多博客可能有时间关系 文档都更新了,所以注释格式会出现错误的现象,所以一定最先去参考文档!。

    展开全文
  • 1.首先swagger 的认识 ... 有时后端改了API的参数或者其他设置, 前端直接看这个Swagger UI就可以, 方便项目管理和团队协作. 官网: http://swagger.io/ 参数文档: https://github.com/swagger-api/s...

    1.首先swagger 的认识
    先说什么是Swagger, Swagger的使用目的是方便优美的呈现出接口API的各种定义, 生成API文档, 包括参数, 路径之类. 有时后端改了API的参数或者其他设置, 前端直接看这个Swagger UI就可以, 方便项目管理和团队协作.

    官网

    参数文档

    这东西咋用呢? 说白了就是安装Swagger套件, 然后API代码里写注释, 用Swagger后端程序跑API来提取注释, 生成一个json文件, 再通关Swagger前端来美化,整理JSON数据.

    就是一个api的管理工具,一种规范,为后端和客户端做便利的一种工具。

    2.安装
    swagger-ui下载

    git clone https://github.com/swagger-api/swagger-ui.git
    

    下载之后找到dist目录复制到自己项目一个可以访问的位置, 打开index.html把其中的那一串url改成自己的, 比如http://localhost/yii2/swagger-docs/swagger.json

    $(function() {
    
    var url = window.location.search.match(/url=([^&]+)/);
    
    if(url && url.length > 1) {        
    
    url = decodeURIComponent(url[1]);      
    
    }else{       
    
     url = "你生成的swagger.json文件位置";     
    
     }
    

    然后访问了自己项目dist/index.html的页面,就出现下面的界面

    在这里插入图片描述
    3.安装 后端 也就是 swagger-PHP

     composer require zircote/swagger-php 
    

    执行就可以了就下载下来了,然后项目根目录会增加一个vendor这里面就是所谓的 swagger-PHP

    4.接下来就是怎么写注释 生成json 然后 ui 显示
    会看到里面好多@SWG 这样的注释(参考最新的文档实例),这些就是文档啦,这个插件会自动提取这些注释然后生成一个json文件,然后ui 就可以 读取出来了。
    在这里插入图片描述

    5.生成json文件
    方法1: 我这里是写了一个控制器/方法,直接访问方法名获取最新信息写入到swagger.json里,然后在重定向到页面,如图

    在这里插入图片描述

    方法2: 当然还有命令行的方法:

    php /phpstudynew/www/swagger/vendor/zircote/swagger-php  /bin/swagger/phpstudynew/www/swagger/application/controllers -o  /phpstudynew/www/swagger/docs/json
    

    -o前面是自动获取 整个文件夹下面所有的 注释,后面是生成的路径,也是ui访问的路径,这个默认好像是swagger.json就这样成功了

    简单写了下实现swagger的方法,还待学习,总之要看文档学着把文档把例子看好,很多博客可能有时间关系 文档都更新了,所以注释格式会出现错误的现象,所以一定最先去参考文档!。

    展开全文
  • Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学。前端如何优雅的调用呢?入门版根据文档,用axios自动来...

    Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学。

    前端如何优雅的调用呢?

    入门版

    根据文档,用axios自动来调用

    // 应用管理相关接口

    import axios from '../interceptors.js'

    // 获取应用列表

    export const getList = (data) => {

    return axios({

    url: '/app/list?sort=createdDate,desc',

    method: 'get',

    params: data

    })

    }

    这里的问题是,有多少个接口,你就要编写多少个函数,且数据结构需要查看文档获取。

    进阶版本

    使用typescript,编写API,通过Type定义数据结构,进行约束。

    问题: 还是需要手写

    优雅版本

    swagger 其实是一个json-schema描述文档,我们可以基于此,自动生成。

    很早之前,写过一个插件 generator-swagger-2-t, 简单的实现了将swagger生成typescript api。

    今天,笔者对这个做了升级,方便支持后端返回的泛型数据结构。

    安装

    需要同时安装 Yeoman 和 -swagger-2-ts

    npm install -g generator-swagger-2-ts

    然后cd到你的工作目录,执行:

    yo swagger-2-ts

    按提示

    可选生成js 或者 typescript

    可以自定义生成的api class名称、api文件名

    API 支持泛型

    也可以通过命令行直接传递参数

    yo swagger-2-ts --swaggerUrl=http://localhost:8080/swagger-ui.html --className=API --type=typescript --outputFile=api.ts

    swaggerUrl: swagger ui url swaggerui地址

    className: API class name 类名

    type: typescript or javascipt

    outputFile: api 文件保存路径

    生成代码demo:

    export type AccountUserInfo = {

    disableTime?: string

    isDisable?: number

    lastLoginIp?: string

    lastLoginPlace?: string

    lastLoginTime?: string

    openId?: string

    }

    export type BasePayloadResponse = {

    data?: object

    desc?: string

    retcode?: string

    }

    /**

    * User Account Controller

    * @class UserAccountAPI

    */

    export class UserAccountAPI {

    /**

    * changeUserState

    * @method

    * @name UserAccountAPI#changeUserState

    * @param accountUserInfo - accountUserInfo

    * @param $domain API域名,没有指定则使用构造函数指定的

    */

    changeUserState(parameters: {

    'accountUserInfo': AccountUserInfo,

    $queryParameters?: any,

    $domain?: string

    }): Promise> {

    let config: AxiosRequestConfig = {

    baseURL: parameters.$domain || this.$defaultDomain,

    url: '/userAccount/changeUserState',

    method: 'PUT'

    }

    config.headers = {}

    config.params = {}

    config.headers[ 'Accept' ] = '*/*'

    config.headers[ 'Content-Type' ] = 'application/json'

    config.data = parameters.accountUserInfo

    return axios.request(config)

    }

    _UserAccountAPI: UserAccountAPI = null;

    /**

    * 获取 User Account Controller API

    * return @class UserAccountAPI

    */

    getUserAccountAPI(): UserAccountAPI {

    if (!this._UserAccountAPI) {

    this._UserAccountAPI = new UserAccountAPI(this.$defaultDomain)

    }

    return this._UserAccountAPI

    }

    }

    /**

    * 管理系统接口描述

    * @class API

    */

    export class API {

    /**

    * API构造函数

    * @param domain API域名

    */

    constructor(domain?: string) {

    this.$defaultDomain = domain || 'http://localhost:8080'

    }

    }

    使用

    import { API } from './http/api/manageApi'

    // in main.ts

    let api = new API("/api/")

    api.getUserAccountAPI().changeUserState({

    isDisable: 1

    openId: 'open id'

    })

    Vue中最佳实践

    main.ts 全局定义

    import { API } from './http/api/manageApi'

    Vue.prototype.$manageApi = new API('/api/')

    增加.d.ts

    增加types文件,方便使用智能提示

    import { API } from '@/http/api/manageApi'

    import { MarkAPI } from '@/http/api/mark-center-api'

    declare module "vue/types/vue" {

    interface Vue {

    $manageApi: API

    $markApi: MarkAPI

    }

    }

    实际使用

    现在可以在vue里直接调用了。

    this.$manageApi

    .getUserAccountAPI().changeUserState({isDisable: 1, openId: 'open id'})

    开源地址

    总结

    到此这篇关于Vue 使用typescript如何优雅的调用swagger API的文章就介绍到这了,更多相关Vue 使用typescript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

    展开全文
  • Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学。前端如何优雅的调用呢?入门版根据文档,用axios自动来...

    Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学。

    前端如何优雅的调用呢?

    入门版

    根据文档,用axios自动来调用

    // 应用管理相关接口

    import axios from '../interceptors.js'

    // 获取应用列表

    export const getList = (data) => {

    return axios({

    url: '/app/list?sort=createdDate,desc',

    method: 'get',

    params: data

    })

    }

    这里的问题是,有多少个接口,你就要编写多少个函数,且数据结构需要查看文档获取。

    进阶版本

    使用typescript,编写API,通过Type定义数据结构,进行约束。

    问题: 还是需要手写

    优雅版本

    swagger 其实是一个json-schema描述文档,我们可以基于此,自动生成。

    很早之前,写过一个插件 generator-swagger-2-t, 简单的实现了将swagger生成typescript api。

    今天,笔者对这个做了升级,方便支持后端返回的泛型数据结构。

    安装

    需要同时安装 Yeoman 和 -swagger-2-ts

    npm install -g generator-swagger-2-ts

    然后cd到你的工作目录,执行:

    yo swagger-2-ts

    按提示

    可选生成js 或者 typescript

    可以自定义生成的api class名称、api文件名

    API 支持泛型

    也可以通过命令行直接传递参数

    yo swagger-2-ts --swaggerUrl=http://localhost:8080/swagger-ui.html --className=API --type=typescript --outputFile=api.ts

    swaggerUrl: swagger ui url swaggerui地址

    className: API class name 类名

    type: typescript or javascipt

    outputFile: api 文件保存路径

    生成代码demo:

    export type AccountUserInfo = {

    disableTime?: string

    isDisable?: number

    lastLoginIp?: string

    lastLoginPlace?: string

    lastLoginTime?: string

    openId?: string

    }

    export type BasePayloadResponse = {

    data?: object

    desc?: string

    retcode?: string

    }

    /**

    * User Account Controller

    * @class UserAccountAPI

    */

    export class UserAccountAPI {

    /**

    * changeUserState

    * @method

    * @name UserAccountAPI#changeUserState

    * @param accountUserInfo - accountUserInfo

    * @param $domain API域名,没有指定则使用构造函数指定的

    */

    changeUserState(parameters: {

    'accountUserInfo': AccountUserInfo,

    $queryParameters?: any,

    $domain?: string

    }): Promise> {

    let config: AxiosRequestConfig = {

    baseURL: parameters.$domain || this.$defaultDomain,

    url: '/userAccount/changeUserState',

    method: 'PUT'

    }

    config.headers = {}

    config.params = {}

    config.headers[ 'Accept' ] = '*/*'

    config.headers[ 'Content-Type' ] = 'application/json'

    config.data = parameters.accountUserInfo

    return axios.request(config)

    }

    _UserAccountAPI: UserAccountAPI = null;

    /**

    * 获取 User Account Controller API

    * return @class UserAccountAPI

    */

    getUserAccountAPI(): UserAccountAPI {

    if (!this._UserAccountAPI) {

    this._UserAccountAPI = new UserAccountAPI(this.$defaultDomain)

    }

    return this._UserAccountAPI

    }

    }

    /**

    * 管理系统接口描述

    * @class API

    */

    export class API {

    /**

    * API构造函数

    * @param domain API域名

    */

    constructor(domain?: string) {

    this.$defaultDomain = domain || 'http://localhost:8080'

    }

    }

    使用

    import { API } from './http/api/manageApi'

    // in main.ts

    let api = new API("/api/")

    api.getUserAccountAPI().changeUserState({

    isDisable: 1

    openId: 'open id'

    })

    Vue中最佳实践

    main.ts 全局定义

    import { API } from './http/api/manageApi'

    Vue.prototype.$manageApi = new API('/api/')

    增加.d.ts

    增加types文件,方便使用智能提示

    import { API } from '@/http/api/manageApi'

    import { MarkAPI } from '@/http/api/mark-center-api'

    declare module "vue/types/vue" {

    interface Vue {

    $manageApi: API

    $markApi: MarkAPI

    }

    }

    实际使用

    现在可以在vue里直接调用了。

    this.$manageApi

    .getUserAccountAPI().changeUserState({isDisable: 1, openId: 'open id'})

    开源地址

    欢迎star!

    作者:Jadepeng

    出处:jqpeng的技术记事本–http://www.cnblogs.com/xiaoqi

    您的支持是对博主最大的鼓励,感谢您的认真阅读。

    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    展开全文
  • 现在流行前后端分离,后端通常会使用swagger生成api文档,提供给前端的同事来调用,一般前端是查看这个文档,根据文档说明编写调用代码。...打开swagger-ui,我们可以看到请求了/v2/api-docs获取api文档信息,其中...
  • 目录 一、新建一个laravel项目 二、集成Swagger ...Swagger是非常好用的一个API文档工具,大大地减轻了前端和后端的沟通成本。在写后端接口的时候,也可以用它来测试接口,非常方便。 整个过程如下: ...
  • 现在互联网技术开发领域,前后端分离开发模式俨然已经成为了主流模式,通常情况下后端工程师只需要做好给前端提供数据的API接口就可以了,而前端开发工程师则负责向后端请求数据并渲染页面。 这样做的好处就是后端...
  • 上一章代码可以在github获取 https://github.com/LawssssCat/v-security/tree/v1.3 两个工具,能实现与前端开发并行工作 ...使用 swagger 自动生成 api 的 html 文档 使用 WireMock 快速伪造...
  • When I try to test the API with a simple Frontend (swagger-ui) i get a CORS-error. (swagger is running on localhost:9090) <p>It works when everything is running on the same domain. <pre><code>c....
  • Swagger技术

    2020-12-18 17:02:00
     swagger是一个简单但功能强大的API表达工具,使用Swagger生成API,我们可以得到交互式文档。简单来说就是前台人员在写代码的时候,可以通过访问连接,获取后台返回的json数据包,进行页面效果测试。后台人员在前端...
  • 如果我的文章对您有帮助,请关注支持下作者的公众号:极客挖掘机,获取最新干货推送:)1. 引言各位在开发的过程中肯定遇到过被接口文档折磨的经历,由于 RESTful 接口的轻量化以及低耦合性,我们在修改接口后文档...
  • swagger2实战

    千次阅读 2018-08-09 16:25:05
    swagger2通过在各Controller控制层加注解的方式,获取对每个接口的输入输出格式和http请求格式,整理成接口,前端 swagger-ui解析该接口数据并展示,还提供了对接口的测试功能。 1) 包依赖...
  • SpringBoot整合Swagger2

    2020-04-20 21:08:31
    Swagger 是一个 简单好用的api开发文档工具 , 在前后端分离时 只需要访问localhost:8080/swagger-ui.html 就可以方便前端人员获取后端信息 依赖 <dependency> <groupId>io.springfox</...
  • 在laravel中集成swagger

    千次阅读 2018-02-18 14:25:19
    swagger是非常好用的一个API文档工具,大大地减轻了前端和后端的沟通成本。在写后端接口的时候,也可以用它来测试接口,非常方便。 整个过程如下。 新建一个laravel项目 composer create-project --prefer-...
  • 现在互联网技术开发领域,前后端分离开发模式俨然已经成为了主流模式,通常情况下后端工程师只需要做好给前端提供数据的API接口就可以了,而前端开发工程师则负责向后端请求数据并渲染页面。这样做的好处就是后端...
  • 还有一个用ReactJS编写的前端部分来显示从API端点获取的数据。必须启动API才能使React App正常工作(客户端应用程序的代码在history.webclient中)。 用法 运行.NET API的步骤: 运行Update-Database生成数据库。 ...
  • 前言目前来说,在 Java 领域使用Springboot构建微服务是比较流行的,在构建微服务时,我们大多数会选择暴漏一个REST API以供调用。又或者公司采用前后端分离的开发模式,让前端和后端的工作由完全不同的工程师进行...
  • 变量可以从一个响应传递到下一个请求,从而创建逼真的场景,以紧密模拟前端或移动应用程序对API的实际使用。Restlet客户端是Restlet平台的一部分:API First Platform具有全面的集成集API开发人员的能力。 为什么...
  • 单一前端仅仅能访问单一后端,不能单一前端访问不同后端获取不同后端的接口文档 * 7.接口文档和实际的接口版本不一致时,还要维护一套接口文档 正是如此apiface的产生是为了针对上述的诸多问题,如果您对apiface感...
  • 后端:AWS无服务器( , , , ,webkitSpeechRecognition, , , , ),Swagger API,PyThon 建筑学 用户->前端(chat.html / AWS S3):用户输入“ hello”启动对话 前端-> API:将用户的消息发送到APIAPI...
  • 1、@ApiParam 是注解APi的参数,也就是用于swagger提供开发者文档,文档生成的注释内容2.@RequestParam,是获取前端传递给后端的参数,可以是get方式,也可以是post方式。其中如果前端传递的参数和后端你接受的...
  • 1.@ApiParam ,是注解api的参数 ,也就是用于swagger提供开发者文档 ,文档中生成的注释内容 。 2.@RequestParam , 是获取前端传递给后端的参数,可以是get方式,也可以是post方式。其中如果前端传递的参数和后端...
  • 使用swagger测试,因为方法里要获取请求头中的token然后解析用户id出来,所以使用swagger会出问题 于是使用前端的页面,用浏览器查看,发现请求成功,但是返回数据为空 到后端控制台上查看,发现报Handler ...
  • mybatis generator插件自定义修改

    千次阅读 2017-08-08 09:22:13
    为了让前端工程师在swagger API文档中看到各个实体类属性的注释说明,而不用再去单独查看数据字典,同时解决在接收和返回日期格式的数据时需要手动对每个日期格式的字段添加相应注解的问题,修改mybatis-generator...
  • 工作中get请求的错用

    2018-05-30 21:01:50
    实现 采取spring boot与swagger2的整合框架书写API,使用GET请求从数据库中获取配置的公告信息,返回list集合信息给前端总结 使用GET请求只有满足两种情况才能使用: 1、满足安全性:外部系统访问该接口时候,其...
  • Java微服务架构163课

    2019-12-26 15:29:59
    132 使用 API Gateway 统一服务接口-Swagger2 生成接口文档 133 使用 API Gateway 统一服务接口-完善 API 网关代码 134 客户端与服务端通信-客户端请求服务端 135 客户端与服务端通信-服务端封装响应结构 136 ...
  • 132 使用 API Gateway 统一服务接口-Swagger2 生成接口文档 133 使用 API Gateway 统一服务接口-完善 API 网关代码 134 客户端与服务端通信-客户端请求服务端 135 客户端与服务端通信-服务端封装响应结构 136 客户端...

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

swagger前端获取api