这篇文章主要介绍“怎么在前端中动态生成API接口”,在日常操作中,相信很多人在怎么在前端中动态生成API接口问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么在前端中动态生成API接口”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! 1.1 构建项目创建APISDK文件夹,进入该文件夹后,运行命令npm init -y
初始化package.json文件在package.json文件中增加如下代码,告诉package.json我的bin叫api-test执行的文件是apiSdk.js1.2 Commander.js安装Commander.js node.js命令行界面的完整解决方案,受 Ruby Commander启发。具体api可直接前往学习前端开发node cli 必备技能。在APISDK文件夹下创建apiSdk.js文件,并写入以下代码#!/usr/bin/env node
这段话的意思是让使用 node 进行脚本的解释程序,那下面的就可以使用 node 的语法了commander 提供的command
函数可创建子级命令。commander 提供的 options
选项可以快捷定义命令行参数,并生成对应的参数配置文档 在–help 命令中展示。 options 可以接收多个参数。commander 提供的description
命令的描述。commander 提供的command
处理子级命令。在APISDK文件夹终端下输入npm link
命令(在本地开发npm包的时候,我们可以使用npm link
命令,将npm包模块链接到运行项目中去,方便地对模块进行调试和测试),然后我们在APISDK文件夹之外重新创建一个新的文件夹,运行api-test init
和 api-test update
命令我们输入对应的命令会执行action中的方法。在APISDK文件夹下新增utils/command.js和utils/http.js文件
//command.js文件 varpath=require("path"); /**默认配置文件名*/ varDEFAULT_CONFIG_FILENAME='apiSdk.config.json'; var{http}=require('./http.js') varfs=require("fs"); /**默认配置文件模版*/ varINITIAL_CONFIG={ outDir:'src/api', 免费云主机、域名services:{}, }; functionwriteConfigFile(filename,content){ fs.writeFileSync(filename,JSON.stringify(content,null,4)); } //递归创建目录同步方法 functionmkdirsSync(dirname){ if(fs.existsSync(dirname)){ returntrue; }else{ if(mkdirsSync(path.dirname(dirname))){ fs.mkdirSync(dirname); returntrue; } } } constBamConfig={ /**初始化*/ init:function(configFilename,content){ varf=fs.existsSync(DEFAULT_CONFIG_FILENAME); if(!f){ thrownewError("alreadyhas".concat(f)); } writeConfigFile(DEFAULT_CONFIG_FILENAME,INITIAL_CONFIG); returnconfigFilename; }, update:function(configFilename,content){ //判断当前文件是否存在 varf=fs.existsSync(DEFAULT_CONFIG_FILENAME); console.log('f',fs) //同步读取文件数据 vardata=fs.readFileSync(DEFAULT_CONFIG_FILENAME); //解析当前文件内容 varstr=JSON.parse(data.toString()) console.log('str',str) //同步递归创建文件夹 mkdirsSync(str.outDir) //配置模版整合需要写入的内容 varapi=http.map(item=>{ varname=item.url.split('/').reverse()[0] return`//测试接口${name}nexportconst${name}=axios.request('${item.url}','${item.method}',params)` }) //进行写入 fs.writeFileSync(`${str.outDir}/http.js`,api.join('nn')); //替换掉默认配置文件路径,组装好进行写入 INITIAL_CONFIG.outDir=str.outDir varapis=http.map(item=>`${item.method}${item.url}`) INITIAL_CONFIG.apis=apis writeConfigFile(DEFAULT_CONFIG_FILENAME,INITIAL_CONFIG); returnconfigFilename; } } exports.bamCommand={ init:function(option){ BamConfig.init() }, update:function(option){ BamConfig.update() }, }
//http.js文件 exports.http=[{ url:'localhost:8888/aa/bb/aa', method:'Get', },{ url:'localhost:8888/aa/bb/bb', method:'POST', },{ url:'localhost:8888/aa/bb/cc', method:'Get', },{ url:'localhost:8888/aa/bb/dd', method:'Get', },]
改写apiSdk.js文件,其改动为引入上边的command.js并在action中执行对应命令的方法http.js是为了模拟后端接口数据,当代码平台统一时,我们可以替换成接口获取所有的接口以及对应参数来进行更深层次的书写,如接口的请求和返回类型参等。
重新运行api-test init
和 api-test update
命令,apiSdk.config.json写入apis(apis存入所有的接口简易信息,在后端有不同的接口服务时,我们同理可根据接口获取所有接口服务生成配置信息,并 生成api),src/api/http.js 会根据模板生成对应的接口。到此,关于“怎么在前端中动态生成API接口”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!
本篇内容主要讲解“react白屏如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react白屏如何解决”吧! react白屏的原因是HtmlWebpackPlugin插件在引入bundle.js时,引入的是相…