Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Einführung in den Knoten in js

零下一度
Freigeben: 2017-06-30 10:52:58
Original
1345 Leute haben es durchsucht

Verzeichnis:

1. Einführung

2. Knoteninstallation

3. Webstorm-Konfigurationsknotenumgebung

4. Code-Einführung

5 🎜 >6. Benutzerdefinierter Domainname

Sonstiges

1. Einführung

1. Hintergrund

Bei der täglichen Arbeit besteht die übliche Entwicklungsmethode darin, selbst eine neue JSON-Datei zu erstellen und einen Datenstapel manuell zu simulieren , und führen Sie einen Ajax-Aufruf aus. Wenn sich die vom Backend bereitgestellte Schnittstelle jedoch nicht unter demselben Domänennamen befindet, müssen Sie den normalen Ajax-Aufruf in das JSONP-Format ändern.

2. Funktionseinführung

Also dachte ich, ich könnte node.js verwenden, um einen einfachen http-Dienst für die tägliche Entwicklung zu erstellen . . Stellen Sie jeweils JSONP/JSON-Aufrufe bereit. Dies ist auch das erste Mal, dass ich mit Node in Kontakt komme, daher werde ich detaillierte Aufzeichnungen über die Node-Installation, die Webstorm-Konfigurationsumgebung, die Einführung des Node-Moduls usw. erstellen.

Der Code wurde auf Github hochgeladen, Adresse:

2. Node-Installation

Laden Sie das Installationspaket für die entsprechende Plattform von der offiziellen Node-Website herunter.

Nachdem die Installation abgeschlossen ist, öffnen Sie den Befehl cmd und geben Sie

node -v

ein. Wenn die folgende Eingabeaufforderung erscheint, ist die Installation erfolgreich.

Das bedeutet, dass meine Knotenversion 6.10.0 ist.

3. Webstorm-Konfigurationsknotenumgebung

1. Öffnen Sie das Konfigurationsfenster über Datei->Einstellungen und suchen Sie Knoten und NPMOptionen

                                                                                                                                                                                                                                                Installieren Sie das Verzeichnis node_modulesnpm für

node und klicken Sie auf „Konfigurieren“. 3. Ermitteln Sie, ob es normal verwendet werden kann.

1) Erstellen Sie eine neue test.js-Datei und geben Sie eine Codezeile ein console.log('hello!');

2) Konfigurieren Sie die Knotenumgebung

②click das + Zeichen und wählen Sie Node.js

③ Separat festlegen

Name, Javascript-Datei, klicken Sie auf OK.

④ Klicken Sie auf das kleine Dreieck in der oberen rechten Ecke, um das Programm zu starten, und Sie können die Hallo-Ausgabe auf dem sehen Konsole.

4. Codeeinführung

0. Insgesamt An Idee

1) Erstellen Sie manuell einige neue JSON-Dateien lokal und geben Sie den entsprechenden Code aus, je nachdem, ob die Anforderung des Benutzers JSONP oder JSON ist und welche JSON-Datei angefordert wird.

2) Codebezogene Logik:

        ① Bestimmen Sie, ob die Parameter des Benutzers vollständig sind

② Erkennen Sie, ob die entsprechende JSON-Datei vorhanden ist

              ③ Geben Sie die entsprechenden Ergebnisse aus

1. Codestruktur

                                        node-jsonp  🎜>                                                                                                .json

                                                              

Die entsprechende JSON-Datei wird im JSON-Ordner gespeichert ; getjson.js ist die Startdatei des Knotendienstes.

 

        2、涉及到的node模块有:

  HTTP              提供HTTP服务器与客户端,可以搭建一个http服务,捕获和响应请求等。

  URL                用于 URL 处理与解析 

  querystring     用于解析与格式化 URL 查询字符串

  fs                    用于操作文件

  Path               用于处理文件与目录的路径   

 

        3、新建一个起始文件 getjson.js,引用这些模块。              

var http = require('http');var url=require('url');var querystring = require('querystring');var fs=require('fs');var path=require('path');
Nach dem Login kopieren

        

         4、使用http.createServer方法,启动一个http服务,并且监听3000端口。这个端口号随意,只要别跟其他端口冲突。           

http.createServer(function(request, response){}).listen(3000);
Nach dem Login kopieren

 

         5、其他代码就不多作解释了,大家一看就懂。getjson.js完整代码如下:

 1 /** 2  * node.js的入口文件. 3  * 必须的参数:file - 文件名称; callback - jsonp形式调用 4  * 返回jsonp形式 5  */ 6 var http = require('http'); 7 var url=require('url'); 8 var querystring = require('querystring'); 9 var fs=require('fs');10 var path=require('path');11 12 function writeMsg(response,msg){13     response.writeHead(200, {'Content-Type': 'text/plain;charset=utf-8;'});14     response.write(msg);15     response.end();16 }17 18 19 http.createServer(function(request, response){20     //获取url的query21     var arg = url.parse(request.url).query;22     //转换为json形式23     var arg_json = querystring.parse(arg);24     //输出的内容25     var content = '';26     var filepath = arg_json.file;27     var callback =arg_json.callback;28 29     if(filepath){30        //file -- 本地的json文件路径31         filepath = path.resolve('./json/'+filepath);32        //判断文件是否存在33        if(!fs.existsSync(filepath)){34             content='error:文件不存在';35             writeMsg(response,content);36        }else{37            fs.readFile(filepath,'utf-8',function(err,data){38                if(err){39                    console.log(err);40                    content='error:文件读取失败';41                    writeMsg(response,content);42                }else{43                    //读取成功44                    if(callback){45                        //callback -- jsonp形式46                        response.writeHead(200, {'Content-Type': 'application/javascript;charset=utf-8;'});47                        content = callback+'('+data+');';48                        response.write(content);49                        response.end();50                        return false;51                    }52                    else{53                        //callback -- jsonp形式54                        response.writeHead(200, {'Content-Type': 'text/json;charset=utf-8;'});55                        response.write(data);56                        response.end();57                        return false;58                    }59                }60            });61        }62     }else{63         content='error:参数错误';64         writeMsg(response,content);65     }66 67 68 }).listen(3000);
Nach dem Login kopieren
View Code

  

 五、如何使用

        使用方式可以分为两种:

        1、在webstorm中运行

              直接点击右上角的小三角,就可以运行此服务。

              点击控制台左侧的红色正方形,可以关闭服务。 

              

 

        2、在cmd命令中运行

             先定位到getjson.js文件所在的目录,使用命令: node getjson.js 就可以运行此服务。

            按住 ctrl+c,就可以退出服务。

        

       

 

3、测试下自己的服务

     新建一个demo.html页面,引用jquery文件,调用下自己的服务。     

<!DOCTYPE html><html><head><title></title></head><body><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js?1.1.11"></script><script>$(function(){
        $.post('http://127.0.0.1:3000/?file=2.json',function(ret) {
                   document.write(JSON.stringify(ret));
                },'jsonp');
    });</script></body></html>
Nach dem Login kopieren

 

 

六、自定义域名

      如果不想用 localhost 或者127.0.0.1 来访问的话,可以在 hosts 中映射下即可。

      用记事本打开C:\Windows\System32\drivers\etc\hosts文件,新增一行。

127.0.0.1 www.getjson.com
Nach dem Login kopieren

        我把本地的请求,映射到www.getjson.com这个域名下了,当然你也可以改成任意你想要的域名。

       然后就可以在浏览器中输入::3000/?file=2.json 来访问你的服务了。 

 

 七、参考链接

    阮一峰的node教程

    node.js相关的api

    浅试webstorm配置node.js开发环境

   node.js遍历文件生产文件列表   

 

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Knoten in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage