Introduction détaillée au nœud en js-js tutoriel-php.cn

Introduction détaillée au nœud en js

零下一度

Libérer： 2017-06-30 10:52:58

original

1337 Les gens l'ont consulté

Répertoire :

1. Introduction

2. >3. Environnement du nœud de configuration Webstorm

4. Introduction au code

5. 🎜 >6. Nom de domaine personnalisé

7. Autres

1. 🎜 >1. Contexte

Dans le travail quotidien, après s'être mis d'accord sur le format de l'interface avec le backend, la méthode de développement habituelle consiste à créer vous-même un nouveau fichier json, à simuler manuellement un lot de données ; , et effectuez un appel ajax.

Cependant, si l'interface fournie par le backend n'est pas sous le même nom de domaine, vous devez remplacer l'appel ajax ordinaire par le formulaire jsonp.

2. Introduction à la fonction
J'ai donc pensé que je pourrais utiliser node.js pour créer un service http simple pour le développement quotidien. . Fournissez respectivement des appels jsonp/json.
C'est aussi la première fois que j'entre en contact avec le nœud, je ferai donc des enregistrements détaillés de l'installation du nœud, de l'environnement de configuration Webstorm, de l'introduction du module de nœud, etc.

Le code a été téléchargé sur github, adresse :

2. Installation du nœud
Téléchargez le package d'installation pour la plate-forme correspondante à partir du site officiel du nœud. Assurez-vous de sélectionner tous les composants lors de l'installation sous Windows. Une fois l'installation terminée, ouvrez la commande cmd et entrez node -v
Si l'invite suivante apparaît, l'installation est réussie.

Cela signifie que la version de mon nœud est 6.10.0.

3. Environnement du nœud de configuration Webstorm

1. Ouvrez la fenêtre de configuration via file->settings et localisez Node. et NPMOptions

Installez le répertoire node_modulesnpm pour

node et cliquez sur configurer. 3. Détectez s'il peut être utilisé normalement.

1) Créez un nouveau fichier test.js et entrez une ligne de code console.log('hello!');

2) Configurer l'environnement du nœud

②Cliquez sur le signe + et sélectionnez node.js

③ Définir séparément

Nom, fichier javascript, cliquez sur OK.

④ Cliquez sur le petit triangle dans le coin supérieur droit pour démarrer le programme, et vous pourrez voir la sortie bonjour sur le console.

4. Introduction au code

0. Globalement Un idée

1) Créez manuellement de nouveaux fichiers json localement et affichez le code correspondant selon que la requête de l'utilisateur est jsonp ou json et quel fichier json est demandé ;

2) Logique liée au code :

① Déterminer si les paramètres de l'utilisateur sont complets

② Détecter si le fichier json correspondant existe

③ Afficher les résultats correspondants

1. Structure du code

node-jsonp　　🎜> .json

Le fichier json correspondant est stocké dans le dossier json ; getjson.js est le fichier de démarrage du service de nœud.

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');

Copier après la connexion

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

http.createServer(function(request, response){}).listen(3000);

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion