> 웹 프론트엔드 > JS 튜토리얼 > Node.js_node.js용 Express Framework 사용에 대한 시작 가이드

Node.js_node.js용 Express Framework 사용에 대한 시작 가이드

WBOY
풀어 주다: 2016-05-16 15:11:00
원래의
1232명이 탐색했습니다.

익스프레스 소개
npm은 이 장에서 설명할 경량 웹 프레임워크인 Express와 같은 많은 웹 프레임워크를 포함하여 수많은 타사 모듈을 제공합니다.

Express는 간단하고 유연한 node.js 웹 애플리케이션 개발 프레임워크로 템플릿 구문 분석, 정적 파일 제공, 미들웨어, 라우팅 제어 등과 같은 일련의 강력한 기능을 제공하며 플러그인도 사용할 수 있습니다. 또는 통합 기타 모듈을 사용하면 다양한 웹 및 모바일 장치 애플리케이션을 만들 수 있습니다. 현재 가장 널리 사용되는 Node.js 기반의 웹 개발 프레임워크이며 Ejs, jade 및 기타 템플릿을 지원하므로 완전한 기능을 갖춘 웹 사이트를 빠르게 구축할 수 있습니다.

자, 시작해 보겠습니다!

1.NPM 설치

npm install express
로그인 후 복사

2. 견적 받기

var express = require('express');
var app = express();
로그인 후 복사

변수 "app"을 통해 다양한 표현 방법을 호출할 수 있습니다. 이제 재미가 시작되었습니다. 계속해서 좋은 일을 하세요!

애플리케이션 만들기
Express 프레임워크를 알게 된 후 첫 번째 Express 애플리케이션을 만들기 시작했습니다.

기본 프로젝트 메인 파일 app.js에 다음 콘텐츠를 추가합니다.

var express = require('express');
var app = express();
app.get('/', function (request, response) {
  response.send('Hello World!');
});

app.listen(80);

로그인 후 복사

참고: 다음 과정에서는 포트 80을 사용하여 요청을 수신합니다.

추가한 후 오른쪽 열의 "Test Address"를 통해 브라우저 내용을 확인하면 "Hello World!" 내용이 보이면 간단한 Express 애플리케이션이 성공적으로 생성된 것입니다.

요청 받기
앞서 간단한 Express 애플리케이션을 구현했습니다. 이제 구체적인 구현에 대해 자세히 설명하겠습니다. 먼저 Express의 일반적인 방법을 알아보세요.

get 메소드 - 요청 경로에 따라 클라이언트가 발행한 GET 요청을 처리합니다.

형식:

app.get(path,function(request, response));
로그인 후 복사

path는 요청의 경로이고, 두 번째 매개변수는 요청을 처리하기 위한 콜백 함수입니다. 요청 정보와 응답 정보를 나타내는 두 가지 매개변수가 있습니다.

아래 예:

var express = require('express');
var app = express();

app.get('/', function(request, response) {
  response.send('Welcome to the homepage!');
});
app.get('/about', function(request, response) {
  response.send('Welcome to the about page!');
});
app.get("*", function(request, response) {
  response.send("404 error!");
});
app.listen(80);

로그인 후 복사

위의 예에서는 페이지 경로, 루트 경로 및 모든 경로에 대한 처리 방법이 지정되었습니다. 그리고 콜백 함수 내에서 HTTP 응답의 send 메소드를 사용하여 브라우저에 문자열을 보냅니다.

위 코드를 참고하여 get 요청 경로를 직접 설정한 후 브라우저를 통해 해당 주소에 접속하여 요청이 성공할 수 있는지 확인해 보세요.

미들웨어<미들웨어>
1. 미들웨어란?

미들웨어는 HTTP 요청을 처리하는 기능으로, 사용자의 로그인 여부 확인, 데이터 분석, 기타 데이터가 최종적으로 사용자에게 전송되기 전에 완료해야 하는 작업 등 다양한 특정 작업을 완료하는 데 사용됩니다. . 가장 큰 특징은 하나의 미들웨어가 이를 처리한 후 해당 데이터를 다음 미들웨어로 전달할 수 있다는 것입니다.

2. 어떤 작업도 수행하지 않고 요청 객체만 전달하는 미들웨어는 다음과 같습니다.

function Middleware(request, response, next) {
  next();
}
로그인 후 복사

위 코드의 다음은 미들웨어의 콜백 함수입니다. 매개변수를 취하면 오류가 발생한다는 의미이며 매개변수는 오류 텍스트입니다.

function Middleware(request, response, next) {
  next('出错了!');
}
로그인 후 복사

오류가 발생하면 오류 처리 기능을 찾을 때까지 후속 미들웨어가 더 이상 실행되지 않습니다. 다음 메소드가 호출되지 않으면 나중에 등록된 함수는 실행되지 않습니다.

모든 기능의 기본 사용법
get 함수와 달리 app.all() 함수는 모든 HTTP 동사와 일치할 수 있습니다. 즉, all 함수를 사용하여 미들웨어를 정의하면 모든 요청이 통과해야 한다는 의미입니다. 먼저 미들웨어입니다.

형식:

app.all(path,function(request, response));
로그인 후 복사

아래와 같이 all 함수를 사용하여 요청 전에 응답 헤더 속성을 설정합니다.

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

app.all("*", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); //设置响应头属性值
next();
});

app.get("/", function(request, response) {
  response.end("欢迎来到首页!");
});

app.get("/about", function(request, response) {
  response.end("欢迎来到about页面!");
});

app.get("*", function(request, response) {
  response.end("404 - 未找到!");
});

app.listen(80);

로그인 후 복사

위 코드 매개변수의 "*"는 모든 경로에 유효하다는 것을 의미합니다. 이 방법은 특정 접두사 경로나 경로를 요청하더라도 all 함수를 통과할 때 특히 유용합니다. 미리.

표시되는 경우 전체 기능을 건너뛰면 어떻게 되나요?

기본 사용법 1 사용
use는 미들웨어를 호출하는 express의 방식으로, 함수를 반환합니다.

형식:

app.use([path], function(request, response, next){});

//可选参数path默认为"/"。

로그인 후 복사

1. 미들웨어를 사용하세요

app.use(express.static(path.join(__dirname, '/')));
로그인 후 복사

위와 같이 use 함수를 사용하여 express 미들웨어를 호출하여 액세스 경로를 정적 파일 디렉터리(여기서는 루트 경로로 가정)로 설정합니다.

2. 다음 예와 같이 두 개의 미들웨어를 연속적으로 호출하는 방법:

var express = require('express');
var app = express();

app.use(function(request, response, next){
 console.log("method:"+request.method+" ==== "+"url:"+request.url);
 next();
});

app.use(function(request, response){
 response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
 response.end('示例:连续调用两个中间件');
});

app.listen(80);

로그인 후 복사

回调函数的next参数,表示接受其他中间件的调用,函数体中的next(),表示将请求数据传递给下一个中间件。

上面代码先调用第一个中间件,在控制台输出一行信息,然后通过next(),调用第二个中间件,输出HTTP回应。由于第二个中间件没有调用next方法,所以req对象就不再向后传递了。

use基本用法2
use方法不仅可以调用中间件,还可以根据请求的网址,返回不同的网页内容,如下示例:

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

app.use(function(request, response, next) {
  if(request.url == "/") {
    response.send("Welcome to the homepage!");
  }else {
    next();
  }
});

app.use(function(request, response, next) {
  if(request.url == "/about") {
    response.send("Welcome to the about page!");
  }else {
    next();
  }
});
app.use(function(request, response) {
  response.send("404 error!");
});
app.listen(80);

로그인 후 복사

上面代码通过request.url属性,判断请求的网址,从而返回不同的内容。

回调函数
Express回调函数有两个参数,分别是request(简称req)和response(简称res),request代表客户端发来的HTTP请求,request代表发向客户端的HTTP回应,这两个参数都是对象。示例如下:

function(req, res) {
});
로그인 후 복사

在后面的学习中,我们会经常和它打交道,牢牢记住它的格式吧!

获取主机名、路径名
今天我们就先来学习如何使用req对象来处理客户端发来的HTTP请求。

req.host返回请求头里取的主机名(不包含端口号)。

req.path返回请求的URL的路径名。

如下示例:

var express = require('express');
var app = express();

app.get("*", function(req, res) {
  console.log(req.path);
  res.send("req.host获取主机名,req.path获取请求路径名!");
});

app.listen(80);

로그인 후 복사

试一试在浏览器中输入任意一个请求路径,通过req查看主机名或请求路径。

query基本用法
query是一个可获取客户端get请求路径参数的对象属性,包含着被解析过的请求参数对象,默认为{}。

var express = require('express');
var app = express();

app.get("*", function(req, res) {
  console.log(req.query.参数名);
  res.send("测试query属性!");
});

app.listen(80);

로그인 후 복사

通过req.query获取get请求路径的对象参数值。

格式:req.query.参数名;请求路径如下示例:

例1: /search?n=Lenka

req.query.n // "Lenka"
로그인 후 복사

例2: /shoes?order=desc&shoe[color]=blue&shoe[type]=converse

req.query.order // "desc"

req.query.shoe.color // "blue"

req.query.shoe.type // "converse"

로그인 후 복사

试一试get请求一个带参数路径,使用“req.query.参数名”方法获取请求参数值。

param基本用法
和属性query一样,通过req.param我们也可以获取被解析过的请求参数对象的值。

格式:req.param("参数名");请求路径如下示例:

例1: 获取请求根路径的参数值,如/?n=Lenka,方法如下:

var express = require('express');
var app = express();

app.get("/", function(req, res) {

  console.log(req.param("n")); //Lenka

  res.send("使用req.param属性获取请求根路径的参数对象值!");

});
app.listen(80);

로그인 후 복사

例2:我们也可以获取具有相应路由规则的请求对象,假设路由规则为 /user/:name/,请求路径/user/mike,如下:

app.get("/user/:name/", function(req, res) {
  console.log(req.param("name")); //mike
  res.send("使用req.param属性获取具有路由规则的参数对象值!");
});
로그인 후 복사

PS:所谓“路由”,就是指为不同的访问路径,指定不同的处理方法。

看了上面的示例,试一试使用req.param属性解析一个请求路径对象,并获取请求参数值。

params基本用法
和param相似,但params是一个可以解析包含着有复杂命名路由规则的请求对象的属性。

格式:req.params.参数名;

例1. 如上课时请求根路径的例子,我们就可以这样获取,如下:

var express = require('express');
var app = express();

app.get("/user/:name/", function(req, res) {
  console.log(req.params.name); //mike
  res.send("使用req.params属性获取具有路由规则的参数对象值!");
});

app.listen(80);

로그인 후 복사

查看运行结果,和param属性功能是一样的,同样获取name参数值。

例2:当然我们也可以请求复杂的路由规则,如/user/:name/:id,假设请求地址为:/user/mike/123,如下:

app.get("/user/:name/:id", function(req, res) {
  console.log(req.params.id); //"123"
  res.send("使用req.params属性复杂路由规则的参数对象值!");
});
로그인 후 복사

对于请求地址具有路由规则的路径来说,属性params比param属性是不是又强大了那么一点点呢!

send基本用法
send()方法向浏览器发送一个响应信息,并可以智能处理不同类型的数据。格式如下: res.send([body|status], [body]);

1.当参数为一个String时,Content-Type默认设置为"text/html"。

res.send('Hello World'); //Hello World
로그인 후 복사

2.当参数为Array或Object时,Express会返回一个JSON。

res.send({ user: 'tobi' }); //{"user":"tobi"}
res.send([1,2,3]); //[1,2,3]
로그인 후 복사

3.当参数为一个Number时,并且没有上面提到的任何一条在响应体里,Express会帮你设置一个响应体,比如:200会返回字符"OK"。

res.send(200); // OK
res.send(404); // Not Found
res.send(500); // Internal Server Error
로그인 후 복사

send方法在输出响应时会自动进行一些设置,比如HEAD信息、HTTP缓存支持等等。

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿