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

 

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

 

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

---

 

新特性：

1. 支持切换不同项目前缀
2. 支持自定义接口前缀 

sgCreateAPI接口代码生成工具源码 

<template>
  
  <div :class="$options.name">
    <div class="sg-head">接口代码生成工具div>
    <div class="sg-container">
      <div class="sg-start">
        <div style="margin-bottom: 10px">接口地址列表div>
        <div style="display: flex; margin-bottom: 10px">
          <el-select
            :style="{ width: showCustom_prefix ? `100px` : `300px` }"
            v-model="selectValue_prefix"
            @change="
              (d) => {
                showCustom_prefix = d === `custom`;
              }
            "
            :placeholder="`请选择`"
          >
            <el-option
              v-for="(select, index) in selectOptions_prefix"
              :key="index"
              :value="select.value"
              :label="`${select.label}${
                select.value === `custom` ? `` : `(前缀：${select.value})`
              }`"
              :disabled="select.disabled"
            >el-option>
          el-select>
          <el-input
            v-if="showCustom_prefix"
            style="width: 100%; margin-left: 10px"
            ref="input"
            v-model.trim="inputValue__prefix"
            maxlength="20"
            :show-word-limit="false"
            :placeholder="`请输入自定义前缀(注意要有/)`"
            @focus="$refs.input.select()"
            clearable
          />
        div>
 
        <el-input
          style="margin-bottom: 10px"
          type="textarea"
          :placeholder="`请粘贴apifox.com网站的内容`"
          v-model="textareaValue1"
          show-word-limit
        />
 
        <el-button type="primary" @click="createResult">生成接口列表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"
          show-word-limit
        />
 
        <el-button type="primary" @click="copyResult">复制el-button>
      div>
    div>
  div>
template>
 
<script>
export default {
  name: "sgCreateAPI",
  data() {
    return {
      textareaValue1: "",
      textareaValue2: "",
 
      showCustom_prefix: false,
      inputValue__prefix: ``,
      selectValue_prefix: ``,
      selectOptions_prefix: [
        {
          label: "XXXX管理系统",
          value: "/sr/",
          default: true,
        },
        {
          label: "XXXXXXX服务平台",
          value: "/rp/",
        },
        {
          label: "其他",
          value: `custom`,
        },
      ],
    };
  },
  computed: {
    //api路径固定前缀（用于区别哪一个字符串才是路径开头）
    apiPathPrefix() {
      return this.selectValue_prefix === `custom`
        ? this.inputValue__prefix
        : this.selectValue_prefix;
    },
  },
 
  watch: {
    textareaValue1(newValue, oldValue) {
      newValue && this.createResult(newValue);
    },
  },
  created() {
    this.selectValue_prefix = this.selectOptions_prefix.find((v) => v.default).value;
  },
  methods: {
    createResult(d) {
      let texts = this.textareaValue1
        .split("\n")
        .map((v) => v.split("\t").join("").trim());
      texts = texts.filter((v, i, ar) => v !== ``);
 
      let r = [];
      texts.forEach((v, i, arr) => {
        if (i % 3 === 0 && v) {
          let path = arr[i + 2];
          let apiPath = this.apiPathPrefix
            ? path.includes(this.apiPathPrefix)
              ? path.split(this.apiPathPrefix)[1]
              : path
            : 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.copyResult(); //自动复制生成结果
    },
    copyResult(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;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
  }
 
  .sg-container {
    display: flex;
    flex-wrap: nowrap;
    height: calc(100vh - 70px);
 
    & > .sg-start {
      width: calc(50% - 20px);
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
 
    & > .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: calc(50% - 20px);
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
 
    >>> .el-textarea {
      width: 100%;
      height: 100%;
      textarea {
        width: 100%;
        height: 100%;
        max-height: revert;
      }
    }
  }
}
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