文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么在前端中动态生成API接口

2023-07-05 01:47

关注

这篇文章主要介绍“怎么在前端中动态生成API接口”,在日常操作中,相信很多人在怎么在前端中动态生成API接口问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么在前端中动态生成API接口”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一  构建自定义命令

1.1 构建项目

创建APISDK文件夹,进入该文件夹后,运行命令npm init -y初始化package.json文件

在package.json文件中增加如下代码,告诉package.json我的bin叫api-test执行的文件是apiSdk.js

//package.json文件
"bin":{
   "api-test": "apiSdk.js"
 }

怎么在前端中动态生成API接口

1.2 Commander.js

安装Commander.js node.js命令行界面的完整解决方案,受 Ruby Commander启发。

具体api可直接前往学习

前端开发node cli 必备技能。

//install 安装命令
npm install commander

在APISDK文件夹下创建apiSdk.js文件,并写入以下代码

#!/usr/bin/env node
"use strict";

var commander_1 = require("commander");
commander_1.program.name('api-test');
commander_1.program
   .command('init') // 创建命令
   .option('--json2js', '配置文件 json 转 js') // 该命令相关的选项配置
   .description('初始化配置文件') // 命令的描述
   .action(function (d, otherD,cmd) { //处理子级命令
       console.log('我是init')
});
commander_1.program
   .command('update') // 创建命令
   .option('--json2js', '配置文件 json 转 js') // 该命令相关的选项配置
   .description('初始化配置文件') // 命令的描述
   .action(function (d, otherD,cmd) { //处理子级命令
       console.log('我是update')
});
commander_1.program.parse(process.argv);

#!/usr/bin/env node 这段话的意思是让使用 node 进行脚本的解释程序,那下面的就可以使用 node 的语法了

  1. commander 提供的command函数可创建子级命令。

  2. commander 提供的 options 选项可以快捷定义命令行参数,并生成对应的参数配置文档 在--help 命令中展示。 options 可以接收多个参数。

  3. commander 提供的description命令的描述。

  4. commander 提供的command处理子级命令。

在APISDK文件夹终端下输入npm link命令(在本地开发npm包的时候,我们可以使用npm link命令,将npm包模块链接到运行项目中去,方便地对模块进行调试和测试),然后我们在APISDK文件夹之外重新创建一个新的文件夹,运行api-test initapi-test update命令

怎么在前端中动态生成API接口我们输入对应的命令会执行action中的方法。

二 动态生成对应的api

在APISDK文件夹下新增utils/command.js和utils/http.js文件

//文件目录
|- APISDK
  |- node_modules
  |- utils
     |- command.js
     |- http.js
  |- apiSdk.js
  |- package-lock.json
  |- package.json

//command.js文件var path=require("path"); var DEFAULT_CONFIG_FILENAME = 'apiSdk.config.json';var {http} =  require('./http.js')var fs = require("fs");var INITIAL_CONFIG = {    outDir: 'src/api',    services: {},};function writeConfigFile(filename, content) {    fs.writeFileSync(filename, JSON.stringify(content, null, 4));    }// 递归创建目录 同步方法function mkdirsSync(dirname) {    if (fs.existsSync(dirname)) {      return true;    } else {      if (mkdirsSync(path.dirname(dirname))) {        fs.mkdirSync(dirname);        return true;      }    }}const BamConfig = {        init:function (configFilename, content) {                var f = fs.existsSync(DEFAULT_CONFIG_FILENAME);        if (!f) {            throw new Error("already has ".concat(f));        }        writeConfigFile(DEFAULT_CONFIG_FILENAME, INITIAL_CONFIG);        return configFilename;    },    update:function (configFilename, content) {        //判断当前文件是否存在        var f = fs.existsSync(DEFAULT_CONFIG_FILENAME);    console.log('f',fs)        // 同步读取文件数据        var data =  fs.readFileSync(DEFAULT_CONFIG_FILENAME);                //解析当前文件内容        var str = JSON.parse(data.toString())        console.log('str',str)        //同步递归创建文件夹        mkdirsSync(str.outDir)            //配置模版整合需要写入的内容        var api =   http.map(item=>{            var name = item.url.split('/').reverse()[0]            return `//测试接口 ${name} \n export const ${name} = axios.request( '${item.url}' , '${item.method}', params )`        })        //进行写入        fs.writeFileSync(`${str.outDir}/http.js`, api.join('\n\n'));            //替换掉默认配置文件路径,组装好进行写入        INITIAL_CONFIG.outDir = str.outDir        var apis = http.map(item=>`${item.method} ${item.url}`)        INITIAL_CONFIG.apis = apis        writeConfigFile(DEFAULT_CONFIG_FILENAME, INITIAL_CONFIG);        return configFilename;    }}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中执行对应命令的方法

#!/usr/bin/env node
"use strict";
var command = require("./utils/command");
var commander_1 = require("commander");
commander_1.program.name('api-test');
commander_1.program
   .command('init')
   .option('--json2js', '配置文件 json 转 js')
   .description('初始化配置文件')
   .action(function (d, otherD,cmd) {
       console.log('我是init')
       command.bamCommand.init()
});
   console.log('command',command)
commander_1.program
   .command('update')
   .option('--json2js', '配置文件 json 转 js')
   .description('更新文件')
   .action(function (d, otherD,cmd) {
       console.log('我是update')
       command.bamCommand.update()
});
commander_1.program.parse(process.argv);

http.js是为了模拟后端接口数据,当代码平台统一时,我们可以替换成接口获取所有的接口以及对应参数来进行更深层次的书写,如接口的请求和返回类型参等。重新运行api-test initapi-test update命令,apiSdk.config.json写入apis(apis存入所有的接口简易信息,在后端有不同的接口服务时,我们同理可根据接口获取所有接口服务生成配置信息,并 生成api),src/api/http.js 会根据模板生成对应的接口。

怎么在前端中动态生成API接口怎么在前端中动态生成API接口

到此,关于“怎么在前端中动态生成API接口”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯