Artikel yang menerangkan secara terperinci cara menjana antara muka API secara dinamik di bahagian hadapan

Artikel ini membawakan anda pengetahuan yang berkaitan tentang bahagian hadapan terutamanya cara menjana antara muka API secara dinamik Mari kita lihat bersama-sama.

Dalam era ts, menentukan jenis permintaan antara muka dan parameter pengembalian telah menjadi perkara yang menyusahkan Dalam kes ini, kami boleh menggunakan perkhidmatan nod untuk mengautomasikan pembinaan

1 Bina tersuai. arahan

1.1 Bina projek

Buat folder APISDK Selepas memasuki folder, jalankan arahannpm init -yMulakan fail package.json

. Tambahkan kod berikut pada fail package.json untuk memberitahu package.json bahawa fail yang dilaksanakan oleh tong saya yang dipanggil api-test ialah apiSdk.js

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

1.2 Commander.js

PasangCommander.js Penyelesaian lengkap untuk antara muka baris arahan node.js, diilhamkan oleh Ruby Commander.

Untuk API tertentu, anda boleh pergi terus untuk mempelajari

Kemahiran yang diperlukan untuk cli nod pembangunan bahagian hadapan.

//install 安装命令
npm install commander

Buat fail apiSdk.js dalam folder APISDK dan tulis kod berikut

#!/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 Maksud perenggan ini ialah menggunakan nod untuk mentafsir atur cara skrip , maka anda boleh menggunakan sintaks nod di bawah

1. Fungsi command yang disediakan oleh arahan boleh mencipta arahan anak. Pilihan
yang disediakan oleh
2. optionskomander boleh dengan cepat mentakrifkan parameter baris arahan dan menjana dokumen konfigurasi parameter yang sepadan untuk paparan dalam arahan --help. pilihan boleh menerima berbilang parameter.
Penerangan tentang perintah
3. yang disediakan oleh descriptionkomander.
yang disediakan oleh
4. commandkomander mengendalikan arahan kanak-kanak.

Masukkan perintah npm link dalam terminal folder APISDK (apabila membangunkan pakej npm secara setempat, kami boleh menggunakan perintah npm link untuk memautkan modul pakej npm ke projek yang sedang berjalan, Debug dan uji dengan mudah modul), kemudian kami mencipta folder baharu di luar folder APISDK, jalankan perintah api-test init dan api-test update

dan apabila kami memasukkan arahan yang sepadan, tindakan akan dilaksanakan kaedah dalam.

Kedua, jana api yang sepadan secara dinamik

Tambahkan fail utils/command.js dan utils/http.js di bawah folder APISDK

//文件目录
｜- 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',
},]

Tulis semula fail apiSdk.js dan ubahnya untuk memperkenalkan command.js di atas dan laksanakan arahan yang sepadan dalam tindakan

#!/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 adalah untuk mensimulasikan data antara muka bahagian belakang platform kod disatukan Apabila , kita boleh menggantikannya dengan antara muka untuk mendapatkan semua antara muka dan parameter yang sepadan untuk penulisan yang lebih mendalam, seperti parameter jenis permintaan dan pemulangan antara muka. Jalankan semula perintah api-test init dan api-test update, dan apiSdk.config.json ditulis ke dalam apis (apis menyimpan semua maklumat ringkas antara muka. Apabila terdapat perkhidmatan antara muka yang berbeza di bahagian belakang, kami boleh mendapatkan semua penjanaan perkhidmatan antara muka berdasarkan antara muka dengan cara yang sama dan menjana api), src/api/http.js akan menjana antara muka yang sepadan berdasarkan templat.

Kemudian, kami boleh membungkus APISDK ke dalam SDK mengikut peraturan. [Pembelajaran yang disyorkan: pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara menjana antara muka API secara dinamik di bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!