Maison > interface Web > js tutoriel > Parlons des requêtes get/post et du middleware dans nodejs

Parlons des requêtes get/post et du middleware dans nodejs

青灯夜游
Libérer: 2021-12-08 19:01:04
avant
2126 Les gens l'ont consulté

Cet article vous guidera à travers le redémarrage à chaud, la demande d'obtention, la demande de publication et le middleware dans node.js J'espère qu'il vous sera utile !

Parlons des requêtes get/post et du middleware dans nodejs

1. Redémarrage à chaud du nœud

1. Installez

npm i nodemon

2.

2. get Request

Généralement dans le développement de sites Web, get est utilisé pour l'acquisition de données et l'interrogation, similaire à l'opération de requête dans la base de données. Lorsque le serveur analyse la ressource frontale, il transmet le contenu correspondant et la chaîne de requête est exécutée. sur l'URL, formant Par exemple :

http://localhost:8080/login?goods1=0001&goods2=0002

Obtenir la demande d'obtention frontale

La demande d'obtention envoyée par l'utilisateur peut être obtenu via req.query, puis via node L'opération renvoie les données correspondantes à l'utilisateur.

Si ce qui est envoyé est :

http://localhost:8080/login?goods1=0001&goods2=0002

La réponse sera par :

req.query
Copier après la connexion

Il obtiendra toutes les données, ou
req.query.goods1
req.query.goods2
Copier après la connexion

seul ou accédez à toutes les données. Bref, différents besoins correspondent à différents métiers, et chacun peut les obtenir selon ses propres besoins

Exemple

Ce qui suit est un résumé de l'obtention des paramètres get à travers un exemple : HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="http://localhost:8080/login" method="get">
            用户:
            <input type="text" name="user" id="user" placeholder="用户名"/>
            <br>
            密码:
            <input type="password" name="password" id="password" placeholder="密码"/>
            <br>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>
Copier après la connexion
;

node:

const express = require("express");
var app = express();

app.get("/",function(req,res){
    res.send("主页");
});

app.get("/login",function(req,res){
    console.log(req.query);
    res.send("登录路由,user为:"+req.query.user+"==>   password为:"+req.query.password);
});

app.listen(8080);
Copier après la connexion

3. À propos de la requête POST

La méthode post est une partie importante de la requête http. Contrairement à get, la requête post s'apparente davantage à des opérations de modification sur le serveur. est généralement utilisé pour les mises à jour des ressources de données. Par rapport aux demandes get, les données demandées par courrier seront plus sécurisées. Dans le chapitre précédent, nous avons constaté que la requête get affichera le nom d'utilisateur et le mot de passe saisis dans la barre d'adresse (convertis en cryptage BASE64 lorsqu'il y a du chinois), tandis que la requête post mettra les données dans le corps du package http, ce qui empêche les autres de voir directement le nom d'utilisateur et le mot de passe !

Comment configurer une demande POST dans Express

1 Nous devons d'abord savoir comment faire une demande de publication dans le formulaire , qui est principalement utilisé pour le téléchargement de fichiers, comme suit :
<form action="#" method="post" enctype="application/x-www-form-urlencoded">
</form>
Copier après la connexion

. 2. Configurez le middleware du corps d'analyse

app.use(express.urlencoded())
Copier après la connexion
enctype属性一般设置为“application/x-www-form-urlencoded”,如果设置成multipart/form-data3. Obtenez les données du corps

req.body.username
Copier après la connexion

Cas de connexion :

HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>登陆</h1>
    <form action="/login" method="POST">
        <div>
            用户名:<input type="text" name="username">
        </div>
        <div>
            密码:<input type="password" name="password">
        </div>
        <button>登陆</button>
    </form>
      
</body>
</html>
Copier après la connexion
APP.JS

var express = require(&#39;express&#39;);
var path = require(&#39;path&#39;)
var app = express();
var sqlQuery = require(&#39;./lcMysql&#39;)

// view engine setup
app.set(&#39;views&#39;, path.join(__dirname, &#39;views&#39;));
app.set(&#39;view engine&#39;, &#39;ejs&#39;);
app.use(express.static(path.join(__dirname, &#39;public&#39;)));
//解析post提交的数据
app.use(express.urlencoded())

//搜索首页
app.get(&#39;/&#39;,(req,res)=>{
  res.render(&#39;index.ejs&#39;)
})

//登陆页
app.get(&#39;/login&#39;,(req,res)=>{
  res.render(&#39;login&#39;)
})
//处理登陆请求
app.post(&#39;/login&#39;,async (req,res)=>{
  //获取用户名和密码
  let username = req.body.username 
  let password = req.body.password
  //查询数据库是否由此用户名和密码
  let sqlStr = &#39;select * from user where username = ? and password = ?&#39;;
  let arr = [username,password];
  let result = await sqlQuery(sqlStr,arr)
  if(result.length == 0 ){
    res.send("登陆失败")
  }else{
    res.send("登陆成功")
  }

})


module.exports = app;
Copier après la connexion

4. nous Je peux comprendre qu'il s'agit probablement d'une opération de proxy intermédiaire. En fait, la même chose est vraie dans la plupart des cas, le middleware effectue une série d'opérations entre la réception d'une requête et l'envoi d'une réponse. En fait, express est un framework Web pour le routage et le middleware, et une application Express est essentiellement une série d'appels de fonctions middleware.

1. Le navigateur envoie une requête

2. Express accepte la requête

Le processus de traitement intermédiaire

3. La fonction de routage gère le rendu (req, res)

4.res.render render

Le middleware. La fonction peut effectuer la tâche suivante :

Exécuter n'importe quel code.

Apportez des modifications aux objets de requête et de réponse.

Terminez la boucle demande/réponse.

    Appelez la prochaine fonction middleware dans la pile.
  • Le middleware est également divisé en middleware de couche d'application, middleware de routage, middleware intégré, middleware de gestion des erreurs et middleware tiers. Les éléments suivants sont expliqués ci-dessous :
  • 1. Middleware de la couche application

Le middleware au niveau de l'application est lié à l'objet app à l'aide de app.use et app.METHOD() - des méthodes qui doivent gérer les requêtes http, telles que comme GET , PUT, POST, remplacez simplement le get ou le post précédent par use. Par exemple, l'exemple suivant :

const express=require("express");

var app=express();

//匹配路由之前的操作
app.use(function(req,res,next()){
    console.log("访问之前");
});

app.get("/",function(req,res){
    res.send("主页");
});

app.listen(8080);
Copier après la connexion
A ce moment, nous constaterons que l'adresse http://localhost:8080/a été chargée, mais la ligne de commande affiche "Avant l'accès", indiquant que le programme ne être exécuté de manière synchrone. Si vous utilisez à côté de Si l'itinéraire continue de correspondre vers le bas, vous pouvez à nouveau obtenir les données de la page d'accueil :
const express=require("express");

var app=express();

//匹配路由之前的操作
app.use(function(req,res,next){
    console.log("访问之前");
    next();
});

app.get("/",function(req,res){
    res.send("主页");
});

app.listen(8080);
Copier après la connexion

Bien sûr, vous pouvez également simplifier l'écriture :

const express=require("express");

var app=express();

app.use(function(req,res,next){
    console.log("访问之前");
    next();
},function(req,res){
    res.send("主页");
});

app.listen(8080);
Copier après la connexion

Par conséquent, vous voulez faire quelque chose avant. effectuer une correspondance d'itinéraire ou lors d'un nouvel enregistrement et continuer à s'exécuter vers le bas, le middleware de la couche d'application est sans aucun doute un bon choix.

2.路由中间件

路由级中间件和应用级中间件类似,只不过他需要绑定express.Router();

var router = express.Router()
Copier après la connexion

在匹配路由时,我们使用 router.use() 或 router.VERB() ,路由中间件结合多次callback可用于用户登录及用户状态检测。

const express = require("express");
var app = express();
var router=express.Router();

router.use("/",function(req,res,next){
    console.log("匹配前");
    next();
});

router.use("/user",function(req,res,next){
    console.log("匹配地址:",req.originalUrl);
    next();
},function(req,res){
    res.send("用户登录");
});

app.use("/",router);

app.listen(8080);
Copier après la connexion

总之在检测用户登录和引导用户应该访问哪个页面是,路由中间件绝对好用。

3.错误处理中间件

顾名思义,它是指当我们匹配不到路由时所执行的操作。错误处理中间件和其他中间件基本一样,只不过其需要开发者提供4个自变量参数。

app.use((err, req, res, next) => {
        res.sendStatus(err.httpStatusCode).json(err);
});
Copier après la connexion

一般情况下,我们把错误处理放在最下面,这样我们即可对错误进行集中处理。

const express=require("express");

var app=express();

app.get("/",function(req,res,next){
    const err=new Error(&#39;Not Found&#39;);
    res.send("主页");
    next(err);
});

app.use("/user",function(err,req,res,next){
    console.log("用户登录");
    next(err);
},function(req,res,next){
    res.send("用户登录");
    next();
});

app.use(function(req,res){
    res.status(404).send("未找到指定页面");
});

app.listen(8080);
Copier après la connexion

4.内置中间件

从版本4.x开始,Express不再依赖Content,也就是说Express以前的内置中间件作为单独模块,express.static是Express的唯一内置中间件。

express.static(root, [options]);
Copier après la connexion

通过express.static我们可以指定要加载的静态资源。

5.第三方中间件

形如之前我们的body-parser,采用引入外部模块的方式来获得更多的应用操作。如后期的cookie和session。

var express = require(&#39;express&#39;);
var app = express();
var cookieParser = require(&#39;cookie-parser&#39;);
Copier après la connexion

以上就是关于express中间件类型,在实际项目中,中间件都是必不可少的,因此熟悉使用各种中间件会加快项目的开发效率。

更多node相关知识,请访问:nodejs 教程!!

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal