【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

相关推荐
前端小D1 小时前
JS核心底层
前端·javascript
Dovis(誓平步青云)2 小时前
启元 T1 Pro 人机相声搭档:语音-触摸双通道的启元机器人节奏引擎设计
开发语言·前端·javascript·microsoft·交互
ruanno_top2 小时前
能点,但 Tab 不到:两个组件把「可操作」做了一半
vue.js
爱吃烧烤的技术渣2 小时前
别再手写 CRUD 了:我把 Element Plus 的工作量压缩成一份列 schema
前端·vue.js
codeejun3 小时前
每日一Go·MySQL-11、覆盖索引 & 回表原理
javascript·数据库·mysql
东莞市壹星自动化设备有限公司3 小时前
透明圆瓶内部特征怎样定位:折射追踪与近远相位分支
嵌入式硬件·自动化·需求分析·几何学·骨骼绑定
用户298698530143 小时前
React 前端将 Excel 工作表导出为图片的技术实践
javascript·react.js·excel
徐小夕4 小时前
万字长文!DeepSeek Super-agent × 企业知识库架构深度拆解与落地实践
前端·vue.js·github
BioTender4 小时前
Xaira 发布 X-Automate:将物理 AI 与智能体 AI 引入实验室自动化
运维·人工智能·自动化
麦麦麦当劳大王14 小时前
【油猴脚本】Boss直聘 岗位职责复制
开发语言·前端·javascript