【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

相关推荐
前端之虎陈随易4 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
2603_955279705 小时前
Cursor + GitOps:自动化运维新姿势
运维·自动化
kyriewen5 小时前
豆包和千问同时关了智能体,我用它们搭的 3 个自动化全废了——迁移方案整理
前端·javascript·ai编程
铁皮饭盒5 小时前
用 Bun.cron 定时 7 月 7 日,为啥? 看图1
javascript
ai_coder_ai6 小时前
编写自动化脚本,在自己后端服务中使用Open Api进行设备相关操作
java·运维·自动化
格子软件7 小时前
2026年GEO贴牌代理:分布式多级分账状态机源码深度解构
java·vue.js·分布式·vue·geo
之歆7 小时前
Vue商品详情与放大镜组件
前端·javascript·vue.js
搬砖柯10 小时前
系列10-接口/UI 自动化怎么验落库?数据工厂与数据库断言实践
数据库·测试工具·ui·开源·自动化
丹宇码农11 小时前
把 HLS 字幕玩出花:zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
iPad协议个微协议12 小时前
企业微信文件上传下载在自动化系统中的处理方式
java·运维·人工智能·机器人·自动化·企业微信