Express初識

時間  2019-12-05
標籤 express 简体版
原文   原文鏈接

express的基礎認識和基礎使用

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

安裝

新建nodeexpress文件夾 注意 這裏起名字是不容許起 express的 ，中間件 暫時忽略css

npm init -y
npm install express --save

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

安裝 supervisor 用於熱啓動html

//安裝到 全局
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常見方法java

  • reponse常見方法node

    • 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()

總結：linux

  • 安裝並引用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");
})
複製代碼

在一個掛載點裝載一組中間件express

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-appnpm

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 如何使用

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程