十:Express框架基本使用

express框架

  1. 安裝 npm install express --save
  2. 開啟服務
新建一個項目->npm init ->npm install express
    
    
 var express = require('express');
//創(chuàng)建服務對象脚猾,類似于http.createServer
var app = express();
//程序監(jiān)聽9999端口號
// app.listen(9999)
app.listen(9999,function(){
    //監(jiān)聽ok的回調(diào)函數(shù)
    console.log("SERVER RUN")
})
//路由分發(fā),處理以及回應請求
app.get('/',function(req,res){
    res.end("<h1>Hello Express</h1>")
    //1.req
    //獲得「請求主體」/ Cookies
    console.log(req.body)
    //獲取請求路徑
    console.log(req.path)

    //2.res 設置一些返回信息數(shù)據(jù)
    //res.render(view,[locals],callback):渲染一個view企孩,同時向callback傳遞渲染后的字符串,如果在渲染過程中有錯誤發(fā)生next(err)將會被自動調(diào)用。callback將會被傳入一個可能發(fā)生的錯誤以及渲染后的頁面,這樣就不會自動輸出了讶泰。
})

其中

  1. Request參數(shù)對象表示 HTTP 請求信息,比如:req.baseUrl:獲取路由當前安裝的URL路徑
    req.path:獲取請求路徑
  2. Response 對象 表示 HTTP 響應拂到,即在接收到請求時向客戶端發(fā)送的 HTTP 響應數(shù)據(jù) 比如:res.status():設置HTTP狀態(tài)碼

路由

不同路徑請求不同的數(shù)據(jù),當然還要區(qū)分是Get還是POST請求(通過路由提取出請求的URL以及GET/POST參數(shù)痪署。)

//  主頁輸出 "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');
})
//  /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('正則匹配');
})

靜態(tài)文件

圖片/css/動畫js等,express中存在static中間件來設置靜態(tài)文件的路徑,
比如

app.use(express.static('public'))
目錄結(jié)構(gòu)
 ---index.js
 ---public
    ---image
      ---logo.jpg

在public文件夾中有images文件夾兄旬,在images文件夾中有l(wèi)ogo.jpg, 那么就可以在路徑localhost:8888/images/logo.jpg中得到這張圖片

表單的兩種提交方式:POST vs GET

主要區(qū)別是get會通過&符號提交數(shù)據(jù)

  localhost:8888?name=xie&age=19
  1. GET:
<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>
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 格式
   var 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)
 
})

2.POST

<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>
var express = require('express');
var app = express();
//傳遞來的body里面的數(shù)據(jù)解析
var bodyParser = require('body-parser');
 
// 創(chuàng)建 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 格式
   var 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)
 
})

文件上傳

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

RESTful API

rest以及RESTful API的理解
rest是一組架構(gòu)約束條件和原則悯森,符合REST設計標準的API,即RESTful API罐孝。呐馆,REST 通常使用 JSON 數(shù)據(jù)格式 所以RESTful Api就是通過JSON格式的數(shù)據(jù)返回的API,通俗而言就是前后端分離

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末莲兢,一起剝皮案震驚了整個濱河市汹来,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌改艇,老刑警劉巖收班,帶你破解...
    沈念sama閱讀 212,332評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異谒兄,居然都是意外死亡摔桦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邻耕,“玉大人鸥咖,你說我怎么就攤上這事⌒质溃” “怎么了啼辣?”我有些...
    開封第一講書人閱讀 157,812評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長御滩。 經(jīng)常有香客問我鸥拧,道長,這世上最難降的妖魔是什么削解? 我笑而不...
    開封第一講書人閱讀 56,607評論 1 284
  • 正文 為了忘掉前任富弦,我火速辦了婚禮,結(jié)果婚禮上氛驮,老公的妹妹穿的比我還像新娘腕柜。我一直安慰自己,他們只是感情好柳爽,可當我...
    茶點故事閱讀 65,728評論 6 386
  • 文/花漫 我一把揭開白布媳握。 她就那樣靜靜地躺著,像睡著了一般磷脯。 火紅的嫁衣襯著肌膚如雪蛾找。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,919評論 1 290
  • 那天赵誓,我揣著相機與錄音打毛,去河邊找鬼。 笑死俩功,一個胖子當著我的面吹牛幻枉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播诡蜓,決...
    沈念sama閱讀 39,071評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼熬甫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蔓罚?” 一聲冷哼從身側(cè)響起椿肩,我...
    開封第一講書人閱讀 37,802評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎豺谈,沒想到半個月后郑象,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,256評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡茬末,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,576評論 2 327
  • 正文 我和宋清朗相戀三年厂榛,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,712評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡击奶,死狀恐怖辈双,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情柜砾,我是刑警寧澤辐马,帶...
    沈念sama閱讀 34,389評論 4 332
  • 正文 年R本政府宣布,位于F島的核電站局义,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏冗疮。R本人自食惡果不足惜萄唇,卻給世界環(huán)境...
    茶點故事閱讀 40,032評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望术幔。 院中可真熱鬧另萤,春花似錦、人聲如沸诅挑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拔妥。三九已至忿危,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間没龙,已是汗流浹背铺厨。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留硬纤,地道東北人解滓。 一個月前我還...
    沈念sama閱讀 46,473評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像筝家,于是被迫代替她去往敵國和親洼裤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,606評論 2 350

推薦閱讀更多精彩內(nèi)容