Najlepszy samouczek Node.js ekspresowe ramy W 2024 r. W tym samouczku możesz dowiedzieć się Ekspresowy profil,Instalacja ekspresowa,Pierwsze wystąpienie ramy ekspresowe,Żądania i odpowiedzi,Routing,pliki statyczne,Metoda GET,metoda POST,Prześlij plik,Zarządzanie Cookie,Informacje pokrewne,
Express jest prosty i elastyczny node.js Web ramy aplikacja, która oferuje szereg zaawansowanych funkcji, aby pomóc w tworzeniu różnorodnych aplikacji internetowych i bogatych narzędzi HTTP.
Korzystanie Express może szybko założyć stronę internetową w pełni funkcjonalny.
Ekspresowe podstawowe cechy: Rama
Middleware można ustawić w odpowiedzi na żądania HTTP.
Definiuje ona tablicę routingu do wykonywania różnych działań żądania HTTP.
Można przekazać parametry do szablonu do dynamicznego renderowania stron HTML.
Instalacja ekspresowa i zapisać go do powoływania się na liście:
$ npm install express --save
Powyższe polecenie ekspresowe rama jest zamontowana directorynode_modules bieżący katalog, katalog zostanie utworzony automatycznie wyrażają katalogu node_modules.Kilka ważnych potrzeb i moduł express jest zainstalowany z ramami:
body-parser - node.js middleware, JSON, surowe, tekstu i danych zakodowanych dla przetwórstwa.
cookie-parser - Jest to narzędzie do analizowania Cookie.Przez req.cookies może dostać się do przejść przez cookie i zamienić je w obiekty.
multer - node.js middleware dla przetwórstwa enctype = "multipart / form-data " ( kodowania MIME formą zestaw) danych formularza.
$ npm install body-parser --save $ npm install cookie-parser --save $ npm install multer --save
Następnie używamy ram Express do wyjścia "Hello World".
Poniższy przykład wprowadziliśmy moduł wyraźne, a klient z prośbą o odpowiedź na "Hello World" string.
Tworzenie express_demo.js pliku, kod jest w następujący sposób:
//express_demo.js 文件 var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("应用实例,访问地址为 http://%s:%s", host, port) })
Wykonanie powyższego kodu:
$ node express_demo.js 应用实例,访问地址为 http://0.0.0.0:8081
Dostęp http://127.0.0.1:8081 w przeglądarce, wyniki, jak pokazano poniżej:
Ekspresowe aplikacja korzysta zparametrów funkcji zwrotnej:obiektów żądania iodpowiedzido obsługi żądań danych i odpowiedzi.
app.get('/', function (req, res) { // -- })
wprowadzenie specjalnegowniosku oraz obiekt odpowiedzi:
Obiekt żądania - żądanie obiekt reprezentuje żądanie HTTP zawiera parametr ciągu żądania zapytania zawartość, atrybuty nagłówka HTTP.Wspólne cechy to:
Odpowiedź obiektów - obiekt odpowiedzi stanowi odpowiedź HTTP, HTTP, który jest, w momencie otrzymania żądania wysłanego do danych odpowiedzi klienta. Wspólne cechy to:
Znamy już podstawowe żądania HTTP aplikacji i drogi wyznaczone przez kogo (określić skrypt) odpowiada na żądania klientów.
W żądaniu HTTP, możemy wyodrębnić routingu URL i GET zlecenia parametru / POST.
Następnie rozszerzyć Hello World, dodać kilka funkcji, aby obsłużyć więcej typów żądań HTTP.
Tworzenie express_demo2.js pliku, kod jest w następujący sposób:
var express = require('express'); var app = express(); // 主页输出 "Hello World" app.get('/', function (req, res) { console.log("主页 GET 请求"); res.send('Hello GET'); }) // POST 请求 app.post('/', function (req, res) { console.log("主页 POST 请求"); res.send('Hello POST'); }) // /del_user 页面响应 app.get('/del_user', function (req, res) { console.log("/del_user 响应 DELETE 请求"); res.send('删除页面'); }) // /list_user 页面 GET 请求 app.get('/list_user', function (req, res) { console.log("/list_user GET 请求"); res.send('用户列表页面'); }) // 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求 app.get('/ab*cd', function(req, res) { console.log("/ab*cd GET 请求"); res.send('正则匹配'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("应用实例,访问地址为 http://%s:%s", host, port) })
Wykonanie powyższego kodu:
$ node express_demo2.js 应用实例,访问地址为 http://0.0.0.0:8081
Następnie można próbować uzyskać dostęp http://127.0.0.1:8081 inny adres, aby zobaczyć efekt.
http://127.0.0.1:8081/list_user dostęp w przeglądarce, wyniki, jak pokazano poniżej:
http://127.0.0.1:8081/abcd dostęp w przeglądarce, wyniki, jak pokazano poniżej:
Dostęp http://127.0.0.1:8081/abcdefg w przeglądarce, wyniki, jak pokazano poniżej:
Express oferuje wbudowaną middlewareexpress.static ustawić statycznych plików takich jak: zdjęcia, CSS, JavaScript i tak dalej.
Można użyćexpress.static middleware ustawić statyczny ścieżkę do pliku.Na przykład, jeśli obraz, CSS, pliki JavaScript w katalogu publicznym, można napisać:
app.use(express.static('public'));
Możemy przejść do katalogu / images publicznych przekazano kilka zdjęć, co następuje:
node_modules server.js public/ public/images public/images/logo.png
Pozwól nam modyfikować następny "Hello Słowo" rozszerzyć funkcjonalność aplikacji do przetwarzania plików statycznych.
Tworzenie express_demo3.js pliku, kod jest w następujący sposób:
var express = require('express'); var app = express(); app.use(express.static('public')); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("应用实例,访问地址为 http://%s:%s", host, port) })
Wykonanie powyższego kodu:
$ node express_demo3.js 应用实例,访问地址为 http://0.0.0.0:8081
Wykonanie powyższego kodu:
Poniższy przykład ilustruje dwa parametry w postaci złożonej metodą GET, możemy użyćprocess_get Router server.js w pliku przetwarzać dane wejściowe:
Kod pliku index.htm przedstawia się następująco:
<html> <body> <form action="http://127.0.0.1:8081/process_get" method="GET"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <input type="submit" value="Submit"> </form> </body> </html>
server.js kod pliku jest następująca:
var express = require('express'); var app = express(); app.use(express.static('public')); app.get('/index.htm', function (req, res) { res.sendFile( __dirname + "/" + "index.htm" ); }) app.get('/process_get', function (req, res) { // 输出 JSON 格式 response = { first_name:req.query.first_name, last_name:req.query.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("应用实例,访问地址为 http://%s:%s", host, port) })
Wykonanie powyższego kodu:
node server.js 应用实例,访问地址为 http://0.0.0.0:8081
dostęp przez przeglądarkę http://127.0.0.1:8081/index.htm, jak pokazano poniżej:
Teraz można wprowadzić dane do formularzy i złożyć następujące prezentacje:
Poniższy przykład ilustruje dwa parametry metodą POST do złożenia formularza, możemy wykorzystać router server.jsprocess_post w pliku przetwarzać dane wejściowe:
Kod pliku index.htm wprowadza się następujące zmiany:
<html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <input type="submit" value="Submit"> </form> </body> </html>
server.js kod pliku wprowadza się następujące zmiany:
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); // 创建 application/x-www-form-urlencoded 编码解析 var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use(express.static('public')); app.get('/index.htm', function (req, res) { res.sendFile( __dirname + "/" + "index.htm" ); }) app.post('/process_post', urlencodedParser, function (req, res) { // 输出 JSON 格式 response = { first_name:req.body.first_name, last_name:req.body.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("应用实例,访问地址为 http://%s:%s", host, port) })
Wykonanie powyższego kodu:
$ node server.js 应用实例,访问地址为 http://0.0.0.0:8081
dostęp przez przeglądarkę http://127.0.0.1:8081/index.htm, jak pokazano poniżej:
Teraz można wprowadzić dane do formularzy i złożyć następujące prezentacje:
Poniżej stworzyć postać do przesyłania plików za pomocą metody POST, atrybut formą enctype ustawiony multipart / form-data.
Kod pliku index.htm wprowadza się następujące zmiany:
<html> <head> <title>文件上传表单</title> </head> <body> <h3>文件上传:</h3> 选择一个文件上传: <br /> <form action="/file_upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" size="50" /> <br /> <input type="submit" value="上传文件" /> </form> </body> </html>
server.js kod pliku wprowadza się następujące zmiany:
var express = require('express'); var app = express(); var fs = require("fs"); var bodyParser = require('body-parser'); var multer = require('multer'); app.use(express.static('public')); app.use(bodyParser.urlencoded({ extended: false })); app.use(multer({ dest: '/tmp/'}).array('image')); app.get('/index.htm', function (req, res) { res.sendFile( __dirname + "/" + "index.htm" ); }) app.post('/file_upload', function (req, res) { console.log(req.files[0]); // 上传的文件信息 var des_file = __dirname + "/" + req.files[0].originalname; fs.readFile( req.files[0].path, function (err, data) { fs.writeFile(des_file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'File uploaded successfully', filename:req.files[0].originalname }; } console.log( response ); res.end( JSON.stringify( response ) ); }); }); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("应用实例,访问地址为 http://%s:%s", host, port) })
Wykonanie powyższego kodu:
$ node server.js 应用实例,访问地址为 http://0.0.0.0:8081
dostęp przez przeglądarkę http://127.0.0.1:8081/index.htm, jak pokazano poniżej:
Teraz można wprowadzić dane do formularzy i złożyć następujące prezentacje:
Możemy użyć middleware wysyła informacje do serwera plików cookie node.js poniższy kod wyprowadza informacje cookie jest wysyłane przez klienta:
// express_cookie.js 文件 var express = require('express') var cookieParser = require('cookie-parser') var app = express() app.use(cookieParser()) app.get('/', function(req, res) { console.log("Cookies: ", req.cookies) }) app.listen(8081)
Wykonanie powyższego kodu:
$ node express_cookie.js
Teraz można uzyskać dostęp i przeglądać http://127.0.0.1:8081 wyjściowy informacji terminala następujące przedstawienia: