乐趣区

关于html5:YApi-可视化接口管理平台-内网部署小计

jiezi

  • 前言

    • 以前还是依据后盾的 swagger 手写 mock 数据，被本人蠢哭~，最近有点工夫了，就钻研了下能不能动静的去弄这些 mock 数据，之后就找到了 yapi，感觉大佬就是牛逼哈
    • 官网说有 docker 部署的形式，我试了，始终不行，所以就用了比拟蠢的办法，手动装置各种环境 ????
    • 差不多就这样了，日常 bb 完结
    • 款式懒得改了，间接从幕布 cv 过去的，凑合着看把????
    • yapi 官网
    • 感激去哪儿前端团队的开源，大佬

  • 纲要

    • 内网部署
    • yapi 和 swagger 的联合应用

  • 内网部署

    • 官网阐明
    • 先决条件，环境要求，楼主比拟蠢，只会手动装置，什么 docker 一毛钱都不会用

    • Windows 手动装置 MongoDB

      • 装置步骤

        • 拜访 https://www.mongodb.com/try/download/community
        • 关上安装包开搞????
        • 抉择装置地位
        • 急躁期待，中途会要个权限，给他就是了
        • 装置结束

      • 创立数据库和账户，创立一个新的数据库给 yapi 部署应用

        • 点开这个文件

        • 查看所有的数据库

          • show dbs
        • use [数据库名称] 有就间接切换，没有就给你创立一个

        • 查看以后数据库

          • db

        • 删除某个数据库

          • use [要删除的数据库]
          • db.dropDatabase()

        • 创立一个数据库管理员账户

          • db.createUser({user: “admin”,pwd: “123456”,roles: [ { role: “userAdminAnyDatabase”, db: “admin”}]})
      • Navicat Premium 15 永恒破解激活

    • 装置 yapi-cli 服务之后，执行如下命令

      • yapi server
      • 拜访 http://127.0.0.1:9090/
      • 输出邮箱，数据库名称，帐号等相干信息，而后点开始部署
      • 看到这个提醒阐明曾经部署胜利了，9090 端口能够敞开了
      • 提醒说让咱们切换到部署门路，执行相干命令~

      • 执行相干命令，就能够用了

        • node vendors/server/app.js
        • 拜访：http://127.0.0.1:3000/
        • 终于进去了，美滋滋~

  • yapi 和 swagger 的联合应用

    • 官网的阐明，记得看看哈

      • https://hellosean1025.github.io/yapi/documents/project.html#%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83

    • 创立一个我的项目我的项目

      • 注册一个帐号
      • 创立一个我的项目

    • swagger 的设置

      • 切换到 swagger 的同步设置
      • 找到后盾的地址：输出下面，而后点保留，之后就急躁期待 2 分钟之后，yapi 会主动同步
      • 如果呈现这种谬误，不必理睬，多点两下 他就会好了
      • 胜利触发 yapi 的同步工作
      • 胜利同步过去，如果同步的不现实，就把 swagger 的同步设置改成全副笼罩就好了

    • 集成到业务零碎

      • 设置申请上下文

        • 找到上下文，配置 mock 数据，把这个地址，放到反向代理的设置外面去，就会有数据了
        • 这些值就都是 yapi 帮咱们 mock 的数据了，开心~~ 再也不必写 mock 数据了，以前本人好蠢 ????

      • 接口页面相干阐明

      • 申请配置，自定义申请头和返回值

        • 官网的阐明

          • https://hellosean1025.github.io/yapi/documents/project.html#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE
        • 你能够在这里设置 1. 申请头 2. 依据不同状态，返回不同的数据格式等

        • 设置申请头

          • context.requestHeader.ergouzi=66666

        • 设置返回值

          • 官网阐明

            • https://hellosean1025.github.io/yapi/documents/adv_mock.html#%E8%87%AA%E5%AE%9A%E4%B9%89-mock-%E8%84%9A%E6%9C%AC

          • 理论应用：默认所有接口都是 ok 的，咱们和后盾约定返回的数据格式是 {data:xxx,resultCode:xxx} 所有的数据都放在 data 外面，resultCode 为 1 示意申请胜利

            • mockJson.resultCode=1
            • 设置失效，之前的随机数变成了 1 搞定收摊

      • 接口 — 编辑页面介绍

        • 例子 1：咱们发现咱们的年龄字段默认随机是一个正数，其实和实在数据相差还是很大的，咱们实在的世界外面能活到 100 岁就很牛逼了，看看怎么设置

          • 能够间接点预览看成果，如下想再业务零碎外面看成果，记得点保留按钮，不然不失效！

        • 例子 2：auditStatus 示意审核状态，审核状态会有很多个，咱们想看多个审核状态怎么搞呢

          • 设置
          • 成果
          • 他会在咱们方才的枚举外面，随机取一个

      • 接口 — 运行页面介绍

        • cross-request 插件

          • 怎么装置请拜访
          • cross-request 被官网下架后的插件装置办法

        • 增加环境

          • 增加你须要的环境并保留，之后就轻易调用了，cross-request 会帮你解决跨域，作者说只有 https 的在 network 才看不到申请，我 http 的也看不到，不晓得什么鬼

  • 结束语

    • 本文如有谬误，欢送斧正，非常感谢
    • 感觉有用的老铁，点个双击，小红心走一波
    • 欢送灌水，来呀，相互挫伤哈 o(∩_∩)o 哈哈
退出移动版