哈。github的地址已經更換,求start
https://github.com/mySoul8012
繼續~
Express框架
Express事實上Node內置的http模塊上構建的一層抽象。理論上所有Express實現的功能都能用Node實現
核心特征;
設置中間件響應http請求
定義路由表,執行不同的http請求
先模板傳遞參數,來動態的渲染html文件
一些網址npm的Express https://www.npmjs.com/package...
項目地址 https://github.com/expressjs/...
網址和文檔 http://expressjs.com/
翻譯的中文文檔 http://expressjs.com/zh-cn/
使用npm安裝,并將其保存進入依賴列表中
由于一堵高不可攀的墻大人的問題,所以呢,被迫使用cnpm,使用來自淘寶的鏡像,由淘寶完成鏡像的同步
節省一點點寶貴的時間(^o^)/
全新安裝的需要安裝淘寶的鏡像 https://npm.taobao.org/ 使用cnpm代替npm完成安裝-save 的意思為自動更新依賴文件,依賴文件為package.json
PS C:UsersmingmDesktop estExpress> cnpm install express --save √ Installed 1 packages √ Linked 46 latest versions √ Run 0 scripts Recently updated (since 2018-07-21): 1 packages (detail see file C:UsersmingmDesktop estExpress ode_modules.recently_updates.txt) √ All packages installed (51 packages installed from npm registry, used 3s(network 3s), speed 291.62kB/s, json 47(354.74kB), tarball 535kB) PS C:UsersmingmDesktop estExpress>
查看依賴pacage.json文件
{ "dependencies": { "express": "^4.16.3" } }
可以看到依賴的是express的4.16.3版本
查看一下目錄
PS C:UsersmingmDesktop estExpress> ls 目錄: C:UsersmingmDesktop estExpress Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2018/7/28 18:35 node_modules -a---- 2018/7/28 18:35 53 package.json PS C:UsersmingmDesktop estExpress>
可以查看到有一個node_modules目錄,該目錄保存的是npm包
一些還需要安裝的模塊body-parser 一個node的中間件 用于處理JSON,等和URL的編碼的處理
https://www.npmjs.com/package...
文檔以及項目地址 https://github.com/expressjs/...
cookie-parser 一個負責解析Cookie的工具可以將傳過來的Cookie將其轉換為對象
https://www.npmjs.com/package...
multer node.js的中間件 處理表單數據
項目地址 https://github.com/expressjs/...
npm https://www.npmjs.com/package...
自訴文件 https://github.com/expressjs/...
原版的自述文件 https://github.com/expressjs/...
好啦。一共是一塊安裝了3個模塊
繼續使用淘寶源
PS C:UsersmingmDesktop estExpress> cnpm install body-parser --save √ Installed 1 packages √ Linked 0 latest versions √ Run 0 scripts √ All packages installed (used 248ms(network 242ms), speed 23.48kB/s, json 1(5.68kB), tarball 0B) PS C:UsersmingmDesktop estExpress> cnpm install cookie-parser --save √ Installed 1 packages √ Linked 0 latest versions √ Run 0 scripts √ All packages installed (used 264ms(network 258ms), speed 4.99kB/s, json 1(1.29kB), tarball 0B) PS C:UsersmingmDesktop estExpress> cnpm install multer --save √ Installed 1 packages √ Linked 21 latest versions √ Run 0 scripts √ All packages installed (22 packages installed from npm registry, used 1s(network 1s), speed 307.56kB/s, json 22(92.57kB), tarball 343.86kB) PS C:UsersmingmDesktop estExpress>
完成三個模塊的安裝
查看一下依賴文件
{ "dependencies": { "body-parser": "^1.18.3", "cookie-parser": "^1.4.3", "express": "^4.16.3", "multer": "^1.3.1" } }
依賴四個模塊
創建一個框架實例輸出hello world!
// app.js文件 var express = require("express"); var app = express(); app.get("/", (req, res) => { res.send("hello world!"); }); var server = app.listen(1938, () => { var host = server.address().address; var port = server.address().port; console.log("%s:%s", host, port); })
PS C:UsersmingmDesktopindexExpress> node app.js :::1938
此程序會監聽1938上的連接,當有連接傳入的時候,應用程序會以hello world!進行響應,然后將其返回。
路由路由決定了由誰響應http請求,通過提取GET和POST請求的參數,下面繼續擴展程序
PS C:UsersmingmDesktopindexExpress> node app.js { address: "::", family: "IPv6", port: 1937 }
var express = require("express"); var app = express(); // 輸出hello world app.get("/", (req, res) => { console.log("輸出對于主頁的GET請求"); res.send("Hello GET!"); }); // post請求 app.post("/", (req, res) => { console.log("主頁post請求"); res.send("Hello POST"); }); // 對于/del_user的頁面響應 app.get("/del_user", (req, res) => { console.log("這是對于頁面 /del_user頁面的響應"); res.send("Hello del_user"); res.send("你好哈! 這里已經將頁面進行刪除"); }); // /list_user 頁面的GET請求 app.get("/list_user", (req, res) => { console.log("這里是對 /list_user頁面的請求"); res.send("Hello list_user"); }); // /對頁面abcd abcdxcd ab123cd 的請求進去正則 app.get("ab*cd", (req, res) => { console.log("進行了正則"); res.send("hello 正則!"); }); // 啟動http服務器 var server = app.listen(1937, () => { console.log(server.address()); });
訪問 http://127.0.0.1:1937/del_user
返回 Hello del_user
好啦!(^o^)/
Express使用了中間件 express.static中間件設置靜態文件
事實上是一個http服務器外加一個fs模塊完成封裝的
目錄結構如下
- Express // 站點文件 - image // 圖片文件夾 1.gif // 將要訪問的靜態資源 + node_modules // npm包所在文件夾 app.js // 入口文件 package.json // 配置文件
代碼如下
PS C:UsersmingmDesktopindexExpress> node app.js { address: "::", family: "IPv6", port: 1937 }
var express = require("express"); var app = express(); app.use(express.static("./image")); // 使用中間件 express.static 設置的靜態資源文件夾為image app.get("/", (req, res) => { res.send("hello world!"); }); var server = app.listen(1937, () => { console.log(server.address()); });
訪問 http://127.0.0.1:1937/1.gif
出現靜態資源,(^o^)/
res.sendFile() http://expressjs.com/en/4x/ap...__dirname 獲取當前執行文件所在目錄的完整目錄名
res.sendFlie(path [,options] [,fn]) path必須為絕對路徑,Content-Type 會根據擴展名設置相應的HTTP標頭字段,需要注意的是path必須為絕對路徑__dirname 獲取當前執行文件所在目錄的完整目錄名
__filename 獲取當前執行文件帶有完整絕對路徑的文件名
process.cwd() 獲取當前執行node命令時候的文件夾的目錄名
./ 文件所在目錄req.query 此屬性是一個對象,包含路由中每個查詢字符串參數的屬性。
304請求 一個條件請求,如果有緩存的數據則進行請求,否則將不會進行請求
Hello from
var express = require("express"); var app = express(); app.use(express.static("public")); // 加載中間件 app.get("/index.html", (req, res) => { // 調用中間件指定的靜態資源目錄 public, 然后調用回調函數 res.sendFile( __dirname + "/" + "index.html"); // 輸出html文件的絕對路徑,采取的是拼接字符串的方式,設置http標頭 }); app.get("/process_get", (req, res) => { // 輸出json格式 var response = { "first_name": req.query.first_name, // 將http報文中 查詢到的first_name的值作為屬性值 "last_name": req.query.last_name // 同上 }; console.log(response); // 輸出獲取到的json的值 res.end(JSON.stringify(response)); // 將獲取到的值轉為JSON格式的值,然后進行返回 }); var server = app.listen(1937, () => { console.log(server.address()); });
用瀏覽器查看一下json數據
請求為get 發送的url為 http://127.0.0.1:1937/process_get?first_name=ming&last_name=ming
查詢的字符串為
first_name=ming
last_name=ming
總共,請求頭為
Host: 127.0.0.1:1937 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2 Accept-Encoding: gzip, deflate Referer: http://127.0.0.1:1937/ Cookie: hibext_instdsigdipv2=1 Connection: keep-alive Upgrade-Insecure-Requests: 1
主機地址為127.0.0.1:1937
user-Agent為本地的系統的一些信息
剩下的有點看不懂。。╮(╯▽╰)╭
由于設置的是直接返回JSON數據,所以查看一下響應頭
{"first_name":"ming","last_name":"ming"}
此為響應載荷
報文為
HTTP/1.1 200 OK X-Powered-By: Express Date: Sat, 28 Jul 2018 16:39:08 GMT Connection: keep-alive Content-Length: 40
采用的是http1.1協議,返回的報文為200
同理
DevTol也是如此不在進行闡述
需要使用一個中間件 body-parser,其簡單的文檔 https://www.npmjs.com/package...需要使用一個bodyParser.urlencoded 該對象返回解析urlencoded主體。在返回的body中,將會在req對象上添加一個新的對象,該對象為body。其中的值為字符串和數組,此對象會包含鍵值對。其中的值可以為字符串和數組(此時設置的extended的值為false),其中的值允許為任何類型的需要設置extended的值為last
var express = require("express"); var app = express(); var bodyParser = require("body-parser"); // 加載Express中間件 // 使用中間件提供的bodyParser.urlencoded對來自于post的url進行解析,只允許字符串和數字類型的結果 var urlencodeParser = bodyParser.urlencoded({ extended: false }); app.use(express.static("public")); // 設置靜態資源目錄為public // 進行路由匹配 app.get("/index.html", (req, res) => { res.sendFile(__dirname + "/" + "index.html"); // 路徑的拼接,拼接的是當前文件的所在目錄的絕對地址,由于要請求靜態資源,自動跳到public文件夾下進行返回 }); // post請求的匹配 app.post("/process_post", urlencodeParser, (req, res) => { // 先進行回調第一個函數,將post請求,使用中間件進行處理,處理完后的值進行返回到req和res即下一個回調函數,數據經過兩次回調 // 輸出JSON格式 var response = { "first_name": req.body.first_name, // 進行鍵值對的保存 "last_name": req.body.last_name }; console.log(response); // 將接收到的數據進行輸出 res.end(JSON.stringify(response)); // 將鍵值對保存的對象轉化為JSON格式返回給客戶端 }); var server = app.listen(1937, () => { // 開啟http服務器 console.log(server.address()); });
Hello from
ok~
好啦。訪問 http://127.0.0.1:1937
順便打開瀏覽器開發者工具進行查看返回的JSON數據
{"first_name":"ming","last_name":"ming"}
?(^?^*)完美~
文件上傳使用post方法完成文件的上傳。
from 表單的enctype屬性當method屬性值為post的時候,enctype提交的是from給服務器內容的mime類型,即媒體類型,解釋一下form表單的enctype的三個值
http的post方法,給服務器時,請求主題類型由 Content-Type 指定,通常一個POST請求是通過HTML表單發送的,并返回給服務器返回修改的結果,form表單的enctype屬性是設置上傳的編碼的
application/x-www-form-urlencoded 數據被編碼成為&進行分割的鍵值對同時以=作為分割的鍵值對。非字母和數字的字符會被進行百分比編碼 解釋 https://developer.mozilla.org...
multipart/form-data 將會以二進制的方式進行上傳,上傳文件的時候必須按照這個方法進行提交
text/plain 空格轉化為+號,不對其做任何的處理進行提交
https://developer.mozilla.org...
multer(opts) opts具有一個dest屬性,將會告訴Multer中間件上傳到服務器的位置。
multer(opts)接受鏈式調用.array(fieldname[, maxCount]) 支持一個是否為文件數組
/* var express = require("express"); var app = express(); // 創建框架的類 var fs = require("fs"); var bodyParser = require("body-parser"); // 加載中間件 var multer = require("multer"); var storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "./image") // 文件上傳的目錄 }, filename: (req, file, cb) => { var fileFormat = (file.originalname).split("."); // 先將文件名采用split按照.進行分裂 cb(null, file.fieldname + "-" + Date.now() + "." + fileFormat[fileFormat.length - 1]); // 對文件重命名,加上擴展名 } }); // 確定一下上傳的配置選項 app.use(express.static("public")); // 添加靜態文件,用于處理靜態文件,框架自帶的 app.use(bodyParser.urlencoded({ extended: false })); // 用于處理JSON等數據 app.use(multer({storage: storage}).array("image")); app.get("/index.html", (req, res) => { res.sendFile( __dirname + "/" + "index.html" ); // 對于首頁的請求 }); // 該過程中間經歷了對靜態文件的(static中間件,urlencoded對url的解析,只允許字符串和數字的結果,使用了上傳的multer的中間件,最后到回調函數) app.post("/file_upload", (req, res) => { // 允許上傳多個文件,其中文件數組保存在req.files 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(1937, () => { console.log(server.address()); }); */ 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 fileFormat = (req.files[0].originalname).split("."); var fileName = req.files[0].fieldname + "-" + Date.now() + "." + fileFormat[fileFormat.length - 1]; var des_file = __dirname + "/image/" + fileName; // 將要上傳的地址 console.log(des_file); fs.open( "./image/" + fileName, "a", function(err, fd) { if (err) { return console.error(err); } fs.readFile( req.files[0].path, (err, data) => { fs.writeFile(des_file, data, (err) => { console.log(data); 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) })
思路,是先將文件以追加的方式打開,然后將通過中間件上傳的文件寫入追加打開的文件
Cookie管理文件上傳表單 文件上傳
使用中間件發送Cokie信息。
引入cookie-parser
再引入 util模塊,將對象轉換為字符串
這個很簡單。過
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/96404.html
摘要:一個標準性的事件就是年的橫空出世。引擎快速處理能力和異步編程風格,讓開發者從多線程中解脫了出來。其次,通過異步編程范式將其高并發的能力發揮的淋漓盡致。它也僅僅是一個處理請求并作出響應的函數,并無任何特殊之處。 showImg(https://segmentfault.com/img/remote/1460000010819116); 在正式學習 Express 內容之前,我們有必要從大...
摘要:項目地址腳手架使用過,的同學都清楚,官方推薦的安裝方式是通過專用的來快速搭建一個由編譯打包的項目框架。用在層的模塊化,在中間層實現了模塊化。這樣,從中間層到前端都實現了熱加載。 版權聲明:更多文章請訪問我的個人站Keyon Y,轉載請注明出處。 項目地址:https://github.com/KeyonY/NodeMiddle 腳手架? 使用過angular2,vue2的同學都清楚,官...
摘要:中文官網快速入門安裝項目中引入得到服務器實例綁定服務器接受請求事件,并且添加處理回調函數綁定服務端口,啟動服務器運行項目利用框架可以減少我們的代碼量,比起之前使用核心模塊構建服務器代碼排版更直觀。Express框架是一款簡潔而靈活的node.js web應用框架。前面我們自己手動創建服務器在Express中就是一個API的事情,這就使得我們更加注重業務的功能和開發效率上,不必糾結過多底層的事...
摘要:本文轉載自眾成翻譯譯者網絡埋伏紀事鏈接原文本章我會指導你啟動一個簡單的服務器,并開始為請求服務。現在,我們開始創建第一個服務器我們將模塊,并將服務器綁定到端口來監聽。必須用如下方式啟動服務器總結本章學習了如何從頭開始創建第一個服務器。 本文轉載自:眾成翻譯譯者:網絡埋伏紀事鏈接:http://www.zcfy.cc/article/1750原文:https://blog.risings...
摘要:前言要做一個全沾的工程師,對于后端和數據庫來說,即使不認識也要見個面的。基本了解的概念就好,主要是安裝上數據庫,并進行簡單的增刪操作。 前言:要做一個全沾的工程師,對于后端和數據庫來說,即使不認識也要見個面的。本文給的例子很簡單,也貼出來源碼,只要一步步下來,就可以跑起來啦~~~ 思考一個需求:做一個登錄頁面,自己搭建服務和數據庫,將用戶輸入的登錄信息保存到數據庫如何完成呢:首先選擇...
摘要:使用承諾和異步功能來擺脫回調地獄的應用程序,并簡化錯誤處理。它暴露了自己的和對象,而不是的和對象。因此,可被視為的模塊的抽象,其中是的應用程序框架。這使得中間件對于整個堆棧而言不僅僅是最終應用程序代碼,而且更易于書寫,并更不容易出錯。 Koa 與 Express 此系列文章的應用示例已發布于 GitHub: koa-docs-Zh-CN. 可以 Fork 幫助改進或 Star 關注更新...
閱讀 1239·2021-11-23 09:51
閱讀 685·2021-11-19 09:40
閱讀 1350·2021-10-11 10:58
閱讀 2358·2021-09-30 09:47
閱讀 3735·2021-09-22 15:55
閱讀 2168·2021-09-03 10:49
閱讀 1262·2021-09-03 10:33
閱讀 704·2019-08-29 17:12