因为最近后端在做微服务的改造，我们根据后端的代码也进行了一下前端api接口的整合，也按照后端微服务的形式
设计成了一个个的模块，每个模块代表一个微服务。
整理完之后，我突然发现，其实前端关于接口方面的代码非常的统一，比较适合做成模版，然后直接拷贝就可以了
比较像Xcode，idea等里面的快捷键设计，就像iOS写UITableVuew一样，代理方法非常多，一个一个的敲代理方法
会比较耗时，我们通常会将这段代码设计成一个代码块，然后设置一个快捷输入，就能够非常快速的把这段代码敲出来
当然我现在写前端比较少，不知道vs code里面是不是也有这种设计，但是今天闲来没事，想设计一个这样的页面，
实现代码的模版导出，首先，我们先整理出接口的前端页面有哪些：
// 接口封装
export function getIceLineCount(data){ // 接口名称
return request({
url:/indexWeb/lineCount, // 接口地址
method:’post’, // method
data,// 请求参数
})
}
// 接口参数
iceLineCountQuery: {
pageNum: 1,
pageSize: 20,
deviceName :’’,
cityCompany: “”,
districtCompany: “”,
sfjnsy:1,
voltageLevel: [],
},
// 接口调用
getIceLineCount() {
getIceLineCount(this.iceLineCountQuery).then((res) => {
console.log(‘getIceLineCount’, res)
})
},
其实主要就是这三部分，接口封装、接口参数、接口调用，我们设计一个UI界面
UI界面比较简单，输入接口名称，接口地址，请求参数，输出：接口封装、接口参数、接口调用，的相应代码
我们定义模版字符串如下：
get result() : string {
return “// 接口封装\nexport function get” + this.methodName + “(data){\n
return request({\n
url:" + this.url + ",\n
method:’post’,\n
data \n
})\n
} \n
// 请求参数\n”+ this.methodName.charAt(0).toLowerCase() + this.methodName.slice(1) + “Query: {\n
“ + this.parmas + “\n
},\n
// 接口调用\nget”+ this.methodName +”() {\n
get”+ this.methodName +”(this.”+ this.methodName.charAt(0).toLowerCase() + this.methodName.slice(1) + “Query).then((res) => {\n
console.log(‘get”+ this.methodName +”‘, res)\n
})\n
},”
然后利用input model的双向绑定特性，只要我们输入方法名，接口地址和参数我们就能动态的变更模版字符串，
然后输出接口模版，这样我们就实现了api模版的导出了，非常简单。