【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

相关推荐
这是个栗子2 分钟前
【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
javascript·vue.js·pnpm·eslint
花姐夫Jun1 小时前
基于Vue+Python+Orange Pi Zero3的完整视频监控方案
vue.js·python·音视频
zy happy1 小时前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi
Aesopcmc1 小时前
Maven打包时指定输出路径、以时间戳命名包名和路径名,结合IDEA以指令脚本方式动态配置输出目录
java·自动化·maven·intellij-idea
Nan_Shu_6142 小时前
学习:JavaScript(5)
开发语言·javascript·学习
533_2 小时前
[vue3] h函数,阻止事件冒泡
javascript·vue.js·elementui
蒲公英源码2 小时前
php+vue知识付费系统前后端全套源码
vue.js·php
通往曙光的路上2 小时前
day22_用户授权 头像上传
javascript·vue.js·ecmascript
小阳生煎2 小时前
Vue实现全局设置一个刷新按钮 只刷新当面路由页面 不跳转操作功能
vue.js·vue
小光学长2 小时前
基于Vue的儿童手工创意店管理系统as8celp7(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js