Un article expliquant en détail comment générer dynamiquement des interfaces API dans le front-end

Cet article vous apporte des connaissances pertinentes sur le front-end. Il présente principalement comment générer dynamiquement des interfaces API dans le front-end. J'espère qu'il vous sera utile.

À l'ère de TS, définir les types de requêtes d'interface et les paramètres de retour est devenu une tâche fastidieuse. Dans ce cas, nous pouvons utiliser le service de nœud pour effectuer une construction automatisée

一 Construire une commande personnalisée

1.1 Construire le. project

Créez le dossier APISDK. Après avoir entré le dossier, exécutez la commande npm init -y pour initialiser le fichier package.jsonnpm init -y初始化package.json文件

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

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

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 init 和 api-test update命令

我们输入对应的命令会执行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 init 和 api-test update

Ajoutez le code suivant au fichier package.json pour indiquer au fichier package.json. package. Le fichier exécuté par json dans mon bac appelé api-test est apiSdk.js

rrreee1.2 Commander.js

🎜InstallationCommander.js🎜 Une solution complète pour l'interface de ligne de commande node.js, sujet à Ruby Commander🎜Inspiration. 🎜🎜🎜Vous pouvez aller directement apprendre les API spécifiques🎜🎜🎜Les compétences nécessaires au développement front-end du nœud cli. 🎜rrreee🎜Créez le fichier apiSdk.js dans le dossier APISDK et écrivez le code suivant🎜rrreee🎜#!/usr/bin/env node Ce passage signifie utiliser le nœud pour le script du programme Interpreter, puis vous peut utiliser la syntaxe de nœud pour ce qui suit 🎜

1. La fonction command fournie par command peut créer des commandes de sous-niveau.
2. Les options options fournies par commander peuvent définir rapidement les paramètres de ligne de commande et générer les documents de configuration des paramètres correspondants à afficher dans la commande --help. les options peuvent recevoir plusieurs paramètres.
3. Commander fournit une description de la commande description.
4. La commande fournie par le commandant gère les commandes de sous-niveau.

🎜Entrez la commande npm link dans le terminal du dossier APISDK (lors du développement local de packages npm, nous pouvons utiliser la commande npm link pour packager npm module est lié au projet en cours d'exécution pour faciliter le débogage et les tests du module), puis nous créons un nouveau dossier en dehors du dossier APISDK et exécutons api-test init et api-test update code> commande🎜🎜Lorsque nous entrons la commande correspondante, la méthode dans l'action sera exécutée. 🎜🎜Deuxièmement, générez dynamiquement l'API correspondante🎜🎜Ajoutez les fichiers utils/command.js et utils/http.js sous le dossier APISDK🎜rrreeerrreeerrreee🎜Réécrivez le fichier apiSdk.js, et le changement consiste à introduire le command.js ci-dessus et ajoutez-le à l'action. La méthode d'exécution de la commande correspondante dans 🎜rrreee🎜http.js consiste à simuler les données de l'interface back-end. Lorsque la plateforme de code est unifiée, nous pouvons la remplacer par une interface pour obtenir toutes les interfaces et correspondantes. paramètres pour une écriture plus approfondie, tels que les requêtes d'interface et les paramètres de type de retour, etc. Réexécutez les commandes api-test init et api-test update, et apiSdk.config.json est écrit dans l'API (l'API stocke toutes les informations simples de l'interface, qui sont différentes dans le backend Lors de la fourniture de services d'interface, nous pouvons de la même manière obtenir toutes les informations de configuration de génération de services d'interface basées sur l'interface et générer une API), et src/api/http.js générera l'interface correspondante basée sur le modèle. 🎜🎜🎜🎜Plus tard, nous pourrons empaqueter l'APISDK dans le SDK selon les règles. [Apprentissage recommandé : 🎜développement web front-end🎜]🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!