Latest web development tutorials

إطار نود.جي إس إكسبريس

التعبير عن الملف

اكسبرس هو إطار تطبيق نود.جي إس الويب بسيطة ومرنة توفر مجموعة من الميزات القوية لمساعدتك في إنشاء مجموعة متنوعة من تطبيقات الويب، وأدوات HTTP الغنية.

استخدام اكسبريس يمكن المسارعة لموقع على شبكة الانترنت بشكل كامل.

التعبير عن ملامح الإطار أساسية هي:

  • الوسيطة يمكن تعيين للرد على طلبات HTTP.

  • وهو يحدد جدول التوجيه لأداء مختلف إجراءات طلب HTTP.

  • يمكنك تمرير المعلمات إلى قالب لتقديم صفحات HTML حيوي.


التثبيت السريع

التثبيت السريع وحفظه إلى الاعتماد على القائمة:

$ npm install express --save

هي التي شنت الأمر أعلاه سوف يعربون عن إطارnode_modules دليل الدليل الحالي، سيتم إنشاء الدليل تلقائيا تعبير عن دليل node_modules.يتم تثبيت عدة احتياجات ملحة وحدة صريحة مع الإطار:

  • هيئة محلل - نود.جي إس الوسيطة، JSON، الخام، والنص والبيانات المشفرة URL للمعالجة.

  • كعكة محلل - وهذا هو أداة لتحليل كوكي.بواسطة req.cookies يمكن الحصول على تمرير أكثر من الكعكة، وتحويلها إلى أشياء.

  • multer - نود.جي إس الوسيطة لمعالجة enctype = "متعدد الأجزاء / شكل البيانات " ( شكل مجموعة ترميز MIME) بيانات النموذج.

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

على سبيل المثال الإطار الأول معاملات

التالي، ونحن نستخدم إطار اكسبرس لإخراج "مرحبا أيها العالم".

المثال التالي قدمنا ​​حدة صريحة، والعميل الطالبة، وردا على سلسلة "مرحبا أيها العالم".

إنشاء ملف express_demo.js، رمز على النحو التالي:

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

})

تنفيذ التعليمات البرمجية أعلاه:

$ node express_demo.js 
应用实例,访问地址为 http://0.0.0.0:8081

وصول http://127.0.0.1:8081 في المتصفح، فإن النتائج كما هو مبين أدناه:


والاستجابة لطلب

يستخدم تطبيق صريحالمعلمات وظيفة رد: طلب واستجابةالأجسام للتعامل مع طلبات الحصول على البيانات والردود.

app.get('/', function (req, res) {
   // --
})

تقديمطلب محدد وجوه الرد:

طلب كائن - يمثل كائن طلب طلب HTTP يحتوي على معلمة سلسلة طلب الاستعلام، والمحتوى، والصفات رأس HTTP.الصفات المشتركة هي:

  1. req.app: عندما رد على ملف خارجي، مع وصول التعبير عن أمثلة req.app
  2. req.baseUrl: الحصول على URL التوجيه المثبتة حاليا
  3. req.body / req.cookies: الحصول على "نص طلب" / الكوكيز
  4. req.fresh / req.stale: تحديد ما إذا كان الطلب لا يزال "جديدة"
  5. req.hostname / req.ip: الحصول على اسم المضيف وعنوان IP
  6. req.originalUrl: الحصول على URL الطلب الأصلي
  7. req.params: احصل على المعلمات الطريق
  8. req.path: الحصول على مسار الطلب
  9. req.protocol: احصل على نوع البروتوكول
  10. req.query: الحصول على معلمات سلسلة الاستعلام URL
  11. req.route: الحصول على مسار مطابق الحالي
  12. req.subdomains: الحصول فرعي
  13. req.accpets (): التحقق من رأس طلب قبول نوع الطلب
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages
  15. req.get (): يحصل المحدد لطلب HTTP
  16. req.is (): إذا كان الطلب رأس Content-Type نوع MIME

الكائنات استجابة - يمثل الكائن استجابة استجابة HTTP، HTTP هذا هو، عند تلقي طلب إرسالها إلى بيانات استجابة العميل. الصفات المشتركة هي:

  1. res.app: نفس req.app
  2. res.append (): تحديد رأس HTTP إضافية
  3. سوف res.set () أولا قبل res.append () إعادة تعيين إعدادات
  4. res.cookie (الاسم، القيمة [، الخيار]): تعيين كوكي
  5. انتهاء مجال / / httpOnly / maxAge / مسار / آمنة / وقعت: opition
  6. res.clearCookie (): واضح كوكي
  7. res.download (): تحديد مسار انتقال الملف
  8. res.get (): إرجاع رأس HTTP
  9. res.json (): نقل استجابة JSON
  10. res.jsonp (): نقل استجابة JSONP
  11. res.location (): تعيين رؤوس استجابة الموقع HTTP فقط، وليس تعيين أو قريب رمز الحالة استجابة
  12. res.redirect (): تعيين رؤوس استجابة HTTP الموقع، ووضع رمز الحالة 302
  13. res.send (): HTTP نقل استجابة
  14. res.sendFile (المسار [خيارات] [، FN]): تحديد مسار انتقال ملف - يتم تلقائيا تعيين نوع المحتوى تمديد بناء على ملف
  15. res.set (): تعيين رأس HTTP، يمكنك ضبط العديد رئيس كائن واردة
  16. res.status (): تعيين رمز حالة HTTP
  17. res.type (): تعيين نوع المحتوى نوع MIME

التوجيه

ونحن نعلم بالفعل طلبات التطبيق HTTP الأساسية ومسار يحدده منهم (تحديد برنامج نصي) للرد على طلبات العميل.

في طلب HTTP، يمكننا استخراج توجيه URL وطلب GET المعلمة / POST.

التالي نتقدم مرحبا العالم، لإضافة بعض الميزات للتعامل مع أكثر من أنواع طلبات HTTP.

إنشاء ملف express_demo2.js، رمز على النحو التالي:

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)

})

تنفيذ التعليمات البرمجية أعلاه:

$ node express_demo2.js 
应用实例,访问地址为 http://0.0.0.0:8081

ثم يمكنك محاولة الوصول http://127.0.0.1:8081 عنوان مختلف، لمعرفة تأثير.

http://127.0.0.1:8081/list_user الوصول في المتصفح، فإن النتائج كما هو مبين أدناه:

http://127.0.0.1:8081/abcd الوصول في المتصفح، فإن النتائج كما هو مبين أدناه:

وصول http://127.0.0.1:8081/abcdefg في المتصفح، فإن النتائج كما هو مبين أدناه:


الملفات الثابتة

صريحة يوفر المدمج فيexpress.static الوسيطة لتحديد الملفات الثابتة مثل: الصور، CSS، JavaScript و هلم جرا.

يمكنك استخدام الوسيطةexpress.static لتحديد مسار ملف ثابت.على سبيل المثال، إذا كنت تصور، CSS، ملفات الجافا سكربت في الدليل العام، يمكنك إرسال بريد:

app.use(express.static('public'));

يمكننا أن نذهب إلى العامة / صور دليل تفويض بعض الصور على النحو التالي:

node_modules
server.js
public/
public/images
public/images/logo.png

دعونا تعديل المقبل "مرحبا كلمة" إضافة ملفات ثابتة وظائف معالجة الطلب.

إنشاء ملف express_demo3.js، رمز على النحو التالي:

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)

})

تنفيذ التعليمات البرمجية أعلاه:

$ node express_demo3.js 
应用实例,访问地址为 http://0.0.0.0:8081

تنفيذ التعليمات البرمجية أعلاه:


الحصول على الطريقة

يوضح المثال التالي معلمتين في شكل المقدمة من طريقة GET، يمكننا استخدامprocess_get الموجه server.js داخل الملف لمعالجة المدخلات:

كود الملف index.htm هو على النحو التالي:

<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 على النحو التالي:

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)

})

تنفيذ التعليمات البرمجية أعلاه:

node server.js 
应用实例,访问地址为 http://0.0.0.0:8081

متصفح الوصول http://127.0.0.1:8081/index.htm، كما هو مبين:

الآن يمكنك إدخال البيانات إلى أشكال، وتقديم عرض التالي:


أسلوب POST

يوضح المثال التالي معلمتين عبر الأسلوب POST لإرسال النموذج، يمكننا استخدام جهاز التوجيه server.jsprocess_post داخل الملف لمعالجة المدخلات:

كود الملف index.htm تعديل على النحو التالي:

<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 تعديل على النحو التالي:

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)

})

تنفيذ التعليمات البرمجية أعلاه:

$ node server.js
应用实例,访问地址为 http://0.0.0.0:8081

متصفح الوصول http://127.0.0.1:8081/index.htm، كما هو مبين:

الآن يمكنك إدخال البيانات إلى أشكال، وتقديم عرض التالي:


تحميل ملف

أدناه ونحن إنشاء نموذج لتحميل الملفات باستخدام الأسلوب POST، السمة شكل enctype لتعيين متعددة / استمارة البيانات.

كود الملف index.htm تعديل على النحو التالي:

<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 تعديل على النحو التالي:

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)

})

تنفيذ التعليمات البرمجية أعلاه:

$ node server.js 
应用实例,访问地址为 http://0.0.0.0:8081

متصفح الوصول http://127.0.0.1:8081/index.htm، كما هو مبين:

الآن يمكنك إدخال البيانات إلى أشكال، وتقديم عرض التالي:


إدارة كوكي

يمكننا استخدام الوسيطة بإرسال معلومات ملف تعريف الارتباط إلى خادم نود.جي إس، إخراج التعليمة البرمجية التالية يتم إرسال معلومات ملفات تعريف الارتباط من قبل العميل:

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

تنفيذ التعليمات البرمجية أعلاه:

$ node express_cookie.js 

الآن يمكنك الوصول إلى وعرض http://127.0.0.1:8081 انتاج المعلومات الطرفية، ما يلي عرض:


معلومات ذات صلة