具体步骤:登录Apifoxhttps://app.apifox.com/
圈选复制上面的内容粘贴到【接口地址列表】输入框,自动生成脚本代码
新特性:
- 支持切换不同项目前缀
- 支持自定义接口前缀
sgCreateAPI接口代码生成工具源码
<template>
<!--
前往https://blog.csdn.net/qq_37860634/article/details/132709087
查看使用说明
-->
<div :class="$options.name">
<div class="sg-head">接口代码生成工具<el-dropdown
:show-timeout="0"
:split-button="false"
:placement="`bottom`"
@command="$router.push(`/demo?id=${$event}`).catch(() => true)"
>
<el-button
style="margin-left: 10px"
type="primary"
size="mini"
icon="el-icon-more"
plain
title="更多"
circle
/>
<el-dropdown-menu
slot="dropdown"
style="transition: none; overflow-y: auto; max-height: 400px; margin-top: 5px"
>
<el-dropdown-item
:command="item.command"
v-for="(item, index) in dropdownItems"
:key="index"
:divided="item.divided"
v-if="
item.hasOwnProperty('hide')
? typeof item.hide === 'function'
? !item.hide(item)
: !item.hide
: true
"
:active="item.command == dropdownActive"
:disabled="item.command == dropdownActive"
>
<template>
<i :class="item.icon" v-if="item.icon" />{{ item.label }}</template
>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown></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 {
dropdownActive: this.$route.query.id,
dropdownItems: [
{ label: "接口代码生成工具", command: "demoCreateAPI" },
{ label: "接口方法生成工具", command: "demoCreateAPIFunction" },
{ label: "表格列生成工具", command: "demoCreateTableColumn" },
{ label: "表格数据生成工具", command: "demoCreateTableData" },
{ label: "表单生成工具", command: "demoCreateForm" },
{ label: "只读表单生成工具", command: "demoCreateReadonlyForm" },
{ label: "拼音生成工具", command: "demoCreatePinyin" },
],
textareaValue1: "",
textareaValue2: "",
showCustom_prefix: false,
inputValue__prefix: ``,
selectValue_prefix: ``,
selectOptions_prefix: [
{
label: "XX系统",
value: "/sr/",
},
{
label: "XX平台",
value: "/rp/",
default: true,
},
{
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>