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

html 复制代码
<template>
    <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: '',
        }
    },
    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) {
                    r.push([arr[i], arr[i + 2].split('/rp/')[1]])
                }
            });

            let apis = [];
            r.forEach(v => apis.push(`/* ${v[0]} */${v[1].split('/').slice(1).join('_')}({ data, doing }) { this.__sd("post", \`\${API_ROOT_URL}/${v[1]}\`, data, doing); },`));
            
            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

相关推荐
林恒smileZAZ2 小时前
Vue<前端页面版本检测>
前端·javascript·vue.js
我是Superman丶6 小时前
Element UI 表格某行突出悬浮效果
前端·javascript·vue.js
Huanzhi_Lin7 小时前
关于V8/MajorGC/MinorGC——性能优化
javascript·性能优化·ts·js·v8·新生代·老生代
中海德--陈顺真8 小时前
西屋模块 1C31129G01
自动化
蓝黑20209 小时前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢02119 小时前
前端八股6---v-model双向绑定
前端·javascript·算法
史迪仔01129 小时前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
AI_Claude_code9 小时前
ZLibrary访问困境方案四:利用Cloudflare Workers等边缘计算实现访问
javascript·人工智能·爬虫·python·网络爬虫·边缘计算·爬山算法
ManageEngineITSM10 小时前
IT服务台为什么越忙越低效?
人工智能·自动化·excel·itsm·工单系统