express的基礎認識和基礎使用

一入前端深似海，只敢悶頭苦學識

安裝

新建nodeexpress資料夾注意這裡起名字是不允許起 express的，中介軟體暫時忽略

npm init -y
npm install express --save

//linux mac
sudo npm install express --save
複製程式碼

安裝 supervisor 用於熱啟動

//安裝到 全域性
sudo npm install supervisor -g
複製程式碼

Start

新建app.js

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

app.get('/',function(req,res){
    res.send("Hello world")
})
app.listen(8081,function(){
    console.log("介面已啟動")
})
複製程式碼

訪問 localhost:8081 這樣一個基礎的網站伺服器就實現了

request&response

request是客戶端向服務端請求的資訊，response是伺服器向客戶端返回的資訊
request常見方法
- request.query
- request.params.id 引數
- 更多方法參考
reponse常見方法
- res.cookie(name，value [，option])：設定Cookie
- res.get()：返回指定的HTTP頭
- res.json()：傳送JSON響應

app.get('/index/:id',function(req,res){
    res.json({
        id:'Hello 【' + req.params.id +'】'
    })
})
複製程式碼

res.jsonp()：傳送JSONP響應
res.redirect()：設定響應的Location HTTP頭，並且設定狀態碼302
res.render()

總結：

安裝並引用express 啟用一個express 例項

app listen 一個埠啟動一個後臺服務 -app.get 設定基礎的路由吐出資料

路由

localhost:8081?username=admin&password=123 這樣可以通過 get 返回的 request.query.username 來獲取
偽靜態

app.get('/index.html',function(req,res){
    res.send('Hello 【'+ req.query.username +'】')
})
複製程式碼

正規表示式構建引數

app.get('index/:id',function(req,res){
    res.send('Hello 【'+ req.params.id +'】')
})
複製程式碼

restful 形式的介面同一個介面訪問的方式不同進行不同的處理這裡只是簡單的提一嘴，關於詳細的 restful 細節化的東西還需要看書請求方法：get 、post、put、delete等

引入靜態檔案

app.use(express.static('public'));
app.get('/index.html',function(req,res){
    res.sendFile(__dirname + "/views/" + "index.html");
})
複製程式碼

新建目錄views用來存放靜態資源模板
靜態資原始檔放入public 目錄下如 css 、js
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    Hello Node
    <script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
複製程式碼

post 請求藉助中介軟體 body-parser
npm install body-parser --save

var express = require('express');
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({
    extended:false
})
var app = express();

app.get('/index',function(req,res){
    res.sendFile(__dirname + '/views/index.html')
})
app.post('/index',urlencodedParser,function(req,res){
    console.log(req.body);
    res.redirect("http://www.baidu.com")//執行跳轉頁面
})
app.listen(8081,function(){
    console.log("介面已啟動")
})
複製程式碼

中介軟體

中介軟體的資料是可以傳輸的

var express = require("express")
var app = express()
app.use(function(req,res,next){
    console.log("必經路由");
    next();
})
app.get('/index',function(req,res,next){
    req.data = 123;
    next();
},function(req,res,next){
    console.log(req.data) //這裡是可以拿到上面的賦值的
    res.send("end")
})
app.listen(8081,function(){
    console.log("介面已啟動")
})
複製程式碼

Express 應用可使用的中介軟體：
- 應用級中介軟體

應用級中介軟體繫結到app 物件使用app.use()和app.METHOD()，其中，METHOD是需要處理的HTTP請求的方法，例如GET、PUT、POST等等，全部小寫。

var app = express();

//沒有掛載路徑的中介軟體，應用的每個請求都會執行該中介軟體
app.use(function(req,res,next){
    console.log("Time:",Date.now());
    next();
})

//掛載至 /user/:id 的中介軟體，任何指向 /user/:id 的請求都會執行它
app.use('/user/:id',function(req,res,next){
    console.log("Request Type:",req.method);
    next();
})

//路由和控制程式碼函式（中介軟體系統），處理指向/user/:id 的GET請求
app.get('/user/:id',function(req,res,next){
    res.send("USER");
})
複製程式碼

在一個掛載點裝載一組中介軟體

app.use('/user/:id',function(req,res,next){
    console.log("Request URL:",req.originalUrl);
    next();
},function(req,res,next){
    console.log('Request Type:',req.method);
    next();
})

複製程式碼

路由級中介軟體

路由級中介軟體和應用級中介軟體一樣，只是它繫結的物件為 express.Router()。與app 用法一樣 router 沒有特別複雜的app裡的api router->只有路由相關的api mini-app

var app = express();
var router = express.Router();
router.use('/user/:id',function(req,res,next){
    console.log("Request URL:",req.originalUrl);
    next();
},function(req,res,next){
    console.log('Request Type:',req.method);
    next();
})
複製程式碼

錯誤處理中介軟體

錯誤處理的中介軟體和其他中介軟體類似，只是要使用4個引數，而不是三個引數為（err, req, res, next）。

app.use(function(err, req, res, next){
    console.log(err.stack);
    res.status(500).send("Something broke!")
})
複製程式碼

內建中介軟體

express.static(root,[options]) 唯一內建的中介軟體。它基於 serve-static ，負責在Express應用種提託管靜態資源。引數 root 是指體哦那個靜態資源的根目錄。 options引數

第三方中介軟體例如： npm install cookie-parser

var express = require("express");
var app = express();
var cookieParser = require('cookie-parser');

//載入用於解析 cookie 的中介軟體
app.use(cookieParser());
複製程式碼

路由進階

基本路由示例

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

app.get('/',function(req,res){
    res.send("hello world");
})
複製程式碼

路由方法

路由方法源於HTTP請求方法，和express 例項相關聯。

// get method
app.get('/',function(req,res){
    res.send('GET request to the homepage');
})
app.post('/',function(req,res){
    res.send('POST requeset to the homepage');
})
複製程式碼

使用多個回撥函式處理路由

app.get('/index/add', function (req, res, next) {
  console.log('the response will be sent by the next function ...')
  next()
}, function (req, res,next) {
  res.send('Hello from B!')
  next()
},function(req,res,next){
    console.log("雖然不可以繼續向客戶端吐資料，但是nodejs程式碼還是可以執行的")
})
複製程式碼

使用回撥函式陣列處理路由器

var cb0 = function (req, res, next) {
  console.log('CB0')
  next()
}

var cb1 = function (req, res, next) {
  console.log('CB1')
  next()
}

var cb2 = function (req, res) {
  res.send('Hello from C!')
}

app.get('/example/c', [cb0, cb1, cb2])
複製程式碼

響應方法參考連結
- res.download() 提示下載檔案。
- res.end() 終結響應處理流程。
- res.json() 傳送一個json格式的響應
- res.redirect() 重定向請求
- res.render() 渲染檢視模板
- res.sendFile() 以八位位元組流的形式傳送檔案
app.route()

app.route('/')
  .get(function (req, res) {
    res.send('Get a random book')
  })
  .post(function (req, res) {
    res.send('Add a book')
  })
  .put(function (req, res) {
    res.send('Update the book')
  })
複製程式碼

express.Router

var express = require('express')
var router = express.Router()

//  該路由使用的中介軟體 所有的路由都會走這裡
router.use(function timeLog (req, res, next) {
  console.log('Time: ', Date.now())
  next()
})
// define the home page route
router.get('/', function (req, res) {
  res.send('Birds home page')
})
// define the about route
router.get('/about', function (req, res) {
  res.send('About birds')
})

module.exports = router
複製程式碼

express 錯誤處理

可以使用log4j.js
自行定義

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

app.get('/',function(req,res,next){
    res.end("Hello world");
})
app.use(logErrors)
app.use(clientErrorHandler)
app.use(errorHandler)

function logErrors (err, req, res, next) {
  console.error(err.stack)
  next(err)
}
function clientErrorHandler (err, req, res, next) {
  if (req.xhr) {
    res.status(500).send({ error: 'Something failed!' })
  } else {
    next(err)
  }
}
function errorHandler (err, req, res, next) {
  res.status(500)
  res.render('error', { error: err })
}
app.listen(8081,function(){
    console.log("介面已啟動")
})
複製程式碼

預設錯誤處理控制程式碼

express內建了一個錯誤處理控制程式碼，它可以捕獲應用種可能出現的任意錯誤。這個預設的錯誤處理中介軟體將被新增到中介軟體堆疊的底部。

function errorHandler (err, req, res, next) {
  if (res.headersSent) {
    return next(err)
  }
  res.status(500)
  res.render('error', { error: err })
}
複製程式碼

express使用模板引擎

新建 public 資料夾用於存放靜態檔案
新建 views 來存放模板
安裝 swig npm install swig
新建layout.html 放入 views目錄下

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}{% endblock %}</title>
  {% block head %}
  {% endblock %}
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>
複製程式碼

新建index.html

{% extends 'layout.html' %}
 
{% block title %}index {{title}} {%endblock%}
 
{% block head %}
{{title}}
{% endblock %}
 
{% block content %}
<p>This is just an awesome page.</p>
{% endblock %}
複製程式碼

配置app.js

var express = require("express");
var app = express();
var swig = require('swig');
app.set('view engine','html');
app.engine('html',swig.renderFile)
app.use(express.static("public"));
app.listen(8081,function(){
    console.log("介面已啟動")
})

app.get('/',function(req,res,next){
    res.render('index',{
        title:'首頁'
    })
})
複製程式碼

總結：

大概的瞭解了一下express 如何使用

Express初識

express的基礎認識和基礎使用

安裝

Start

request&response

路由

引入靜態檔案

中介軟體

路由進階

express 錯誤處理

express使用模板引擎

相關文章