【sgCreateAPI】自定义小工具：敏捷开发→自动化生成API接口脚本（接口代码生成工具）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【sgCreateAPI】自定义小工具：敏捷开发→自动化生成API接口脚本（接口代码生成工具）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【sgCreateAPI】自定义小工具：敏捷开发→自动化生成API接口脚本（接口代码生成工具）,Vue.js,自动化,javascript,vue.js

具体步骤：登录Apifoxhttps://app.apifox.com/

【sgCreateAPI】自定义小工具：敏捷开发→自动化生成API接口脚本（接口代码生成工具）,Vue.js,自动化,javascript,vue.js

圈选复制上面的内容粘贴到【接口地址列表】输入框，自动生成脚本代码

【sgCreateAPI】自定义小工具：敏捷开发→自动化生成API接口脚本（接口代码生成工具）,Vue.js,自动化,javascript,vue.js

接口代码生成工具源码

<template>
  <!-- 
前往https://blog.csdn.net/qq_37860634/article/details/132709087
查看使用说明
-->
  <div :class="$options.name">
    <div class="sg-head">接口代码生成工具</div>
    <div class="sg-container">
      <div class="sg-start">
        <div style="margin-bottom: 10px">接口地址列表</div>
        <el-input
          style="margin-bottom: 10px"
          type="textarea"
          :placeholder="`请粘贴apifox.com网站的内容`"
          v-model="textareaValue1"
          :rows="30"
          show-word-limit
        />

        <el-button type="primary" @click="createAPI">生成接口列表</el-button>
      </div>
      <div class="sg-center">→</div>

      <div class="sg-end">
        <div style="margin-bottom: 10px">直接复制</div>
        <el-input
          style="margin-bottom: 10px"
          type="textarea"
          :placeholder="`请复制代码`"
          v-model="textareaValue2"
          :rows="30"
          show-word-limit
        />

        <el-button type="primary" @click="copyAPI">复制</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sgCreateAPI",
  data() {
    return {
      textareaValue1: "",
      textareaValue2: "",
      apiPathPrefix: `/rp/`, //api路径固定前缀（用于区别哪一个字符串才是路径开头）
    };
  },
  watch: {
    textareaValue1(newValue, oldValue) {
      newValue && this.createAPI(newValue);
    },
  },
  methods: {
    createAPI(d) {
      let texts = this.textareaValue1.split("\n").map((v) => v.split("\t").join(""));
      let r = [];
      texts.forEach((v, i, arr) => {
        if (i % 3 === 0 && v) {
          let path = arr[i + 2];
          let apiPath = path.includes(this.apiPathPrefix)
            ? path.split(this.apiPathPrefix)[1]
            : path;
          apiPath.indexOf("/") === 0 && (apiPath = apiPath.substr(1));
          r.push([arr[i], apiPath]);
        }
      });

      let apis = [];
      r.forEach((v) =>
        apis.push(
          `/* ${v[0]} */${v[1]
            .split("/")
            .slice(1)
            .join("_")}({ data, r }) { this.__sd("post", \`\${API_ROOT_URL}/${
            v[1]
          }\`, data, r); },`
        )
      );

      this.textareaValue2 = apis.join("\n");

      this.copyAPI(apis);
    },
    copyAPI(d) {
      this.$g.copy(this.textareaValue2, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.sgCreateAPI {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  padding: 20px;

  .sg-head {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
  }

  .sg-container {
    display: flex;
    flex-wrap: nowrap;

    & > .sg-start {
      width: 50%;
      flex-grow: 1;
    }

    & > .sg-center {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      margin: 0 10px;
      font-size: 24px;
      color: #409eff;
      font-weight: bold;
    }

    & > .sg-end {
      width: 50%;
      flex-shrink: 0;
    }

    >>> textarea {
      max-height: revert;
      height: calc(100vh - 200px);
      word-wrap: break-word;
      word-break: break-all;
      white-space: break-spaces;
    }
  }
}
</style>

生成的接口请求代码是基于【Vue.js最新版】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本_你挚爱的强哥的博客-CSDN博客【代码】【最新版】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本。https://blog.csdn.net/qq_37860634/article/details/129976375文章来源地址https://www.toymoban.com/news/detail-703274.html

到了这里，关于【sgCreateAPI】自定义小工具：敏捷开发→自动化生成API接口脚本（接口代码生成工具）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！