Dieser Artikel vermittelt Ihnen relevantes Wissen über das Frontend. Er stellt hauptsächlich vor, wie man API-Schnittstellen im Frontend generiert. Ich hoffe, dass es für alle hilfreich ist.
Im Zeitalter von TS ist das Definieren von Arten von Schnittstellenanforderungen und Rückgabeparametern zu einer umständlichen Angelegenheit geworden. In diesem Fall können wir den Knotendienst verwenden, um eine automatisierte Konstruktion durchzuführen.
Erstellen Sie den APISDK-Ordner. Führen Sie nach dem Aufrufen des Ordners den Befehl npm init -y
aus, um die Datei package.json zu initialisieren.
1 2 3 4 |
|
npm init -y
初始化package.json文件在package.json文件中增加如下代码,告诉package.json我的bin叫api-test执行的文件是apiSdk.js
1 2 |
|
1.2 Commander.js
安装Commander.js node.js命令行界面的完整解决方案,受 Ruby Commander启发。
具体api可直接前往学习
前端开发node cli 必备技能。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
在APISDK文件夹下创建apiSdk.js文件,并写入以下代码
1 2 3 4 5 6 7 8 9 |
|
#!/usr/bin/env node
这段话的意思是让使用 node 进行脚本的解释程序,那下面的就可以使用 node 的语法了
command
函数可创建子级命令。options
选项可以快捷定义命令行参数,并生成对应的参数配置文档 在--help 命令中展示。 options 可以接收多个参数。description
命令的描述。command
处理子级命令。在APISDK文件夹终端下输入npm link
命令(在本地开发npm包的时候,我们可以使用npm link
命令,将npm包模块链接到运行项目中去,方便地对模块进行调试和测试),然后我们在APISDK文件夹之外重新创建一个新的文件夹,运行api-test init
和 api-test update
命令
我们输入对应的命令会执行action中的方法。
在APISDK文件夹下新增utils/command.js和utils/http.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
改写apiSdk.js文件,其改动为引入上边的command.js并在action中执行对应命令的方法
rrreeehttp.js是为了模拟后端接口数据,当代码平台统一时,我们可以替换成接口获取所有的接口以及对应参数来进行更深层次的书写,如接口的请求和返回类型参等。
重新运行api-test init
和 api-test update
1.2 Commander.jsInstallationCommander.js
Eine Komplettlösung für die Befehlszeilenschnittstelle von node.js, Betreff zu Ruby Commander#!/usr/bin/env node
Diese Passage bedeutet, dass Sie den Knoten für die Skripterstellung verwenden kann die Knotensyntax für Folgendes verwenden: 🎜command
kann Unterebenenbefehle erstellen. options
-Optionen können schnell Befehlszeilenparameter definieren und entsprechende Parameterkonfigurationsdokumente zur Anzeige im Befehl --help generieren. Optionen können mehrere Parameter erhalten. description
bereit. Befehl
verarbeitet untergeordnete Befehle. npm link
im Terminal des APISDK-Ordners ein (bei der lokalen Entwicklung von npm-Paketen können wir den Befehl npm link
zum npm-Paket verwenden Das Modul ist mit dem laufenden Projekt verknüpft, um das Debuggen und Testen des Moduls zu erleichtern. Dann erstellen wir einen neuen Ordner außerhalb des APISDK-Ordners und führen api-test init
und api-test update aus. Code> Befehl🎜🎜Wenn wir den entsprechenden Befehl eingeben, wird die Methode in der Aktion ausgeführt. 🎜🎜Zweitens generieren Sie dynamisch die entsprechende API.🎜🎜Fügen Sie die Dateien utils/command.js und utils/http.js im APISDK-Ordner hinzu und fügen Sie es der Aktion hinzu. Die Methode zum Ausführen des entsprechenden Befehls in 🎜rrreee🎜http.js besteht darin, die Back-End-Schnittstellendaten zu simulieren. Wenn die Codeplattform vereinheitlicht ist, können wir sie durch eine Schnittstelle ersetzen, um alle Schnittstellen und entsprechende Informationen zu erhalten Parameter für tieferes Schreiben, wie Schnittstellenanforderungen und Rückgabetypparameter usw.
Führen Sie die Befehle api-test init
und api-test update
erneut aus, und apiSdk.config.json wird in APIs geschrieben (APIs speichert alle einfachen Schnittstelleninformationen, was anders ist). Im Backend können wir bei der Bereitstellung von Schnittstellendiensten auf ähnliche Weise alle Konfigurationsinformationen zur Generierung von Schnittstellendiensten basierend auf der Schnittstelle abrufen und eine API generieren, und src/api/http.js generiert die entsprechende Schnittstelle basierend auf der Vorlage. 🎜🎜🎜🎜Später können wir das APISDK gemäß den Regeln in das SDK packen. [Empfohlenes Lernen: 🎜Web-Front-End-Entwicklung🎜]🎜🎜Das obige ist der detaillierte Inhalt vonEin Artikel, der ausführlich erklärt, wie man API-Schnittstellen im Frontend dynamisch generiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!