express知識點

本篇文章主要內容

• 1.用Express在系統文件夾內搭建一個服務器
• 2.Express的路由(來自 Express 文檔)
• 3.Express的中間件（這纔是關鍵）
• 4.Express的一些零碎的知識（其實吧，官方文檔確實是最好滴）

---

1.用Express在系統文件夾內搭建一個服務器

使用 Vue-cli 打包好的文件靜態打開每每達不到咱們的指望。因此，咱們經常須要搭建個小服務器來打開 index.html 文件

• 首先來講明下爲何，打包後的 index.html 不能直接打開。能夠看見下圖中的<link href=/static/css/app.4f732942728e787a43b1fb9509bc666b.css rel=stylesheet>，這句話使用的是絕對路徑，若想在本地使用，則須要使用./這樣的相對路徑表示纔對，或者在系統中就要用D://xx/x... 這樣的本機內的絕對路徑纔是正確的。不過咱們是要讓它跑到服務器上的，這種修改並不能解決咱們的問題。因此咱們須要一個靜態的服務器。
  
  

• 那麼，怎麼來實現呢？咱們在目錄外層寫一個 server.js，並用 node 啓動它node test.js，便可。

const express = require('express');
const app = express();
// dist內放置的是咱們的目標 index.html，此後訪問 localhost:3000 調用的會是咱們默認的 index.html
app.use(express.static('./dist'));
app.listen(3000);

至此，咱們經過 Express 以一個文件夾爲基礎，搭建了一個小型的服務器。它會自動檢索文件夾內的 index.html 打開它。

2.Express 的路由

路由是指應用程序的端點（URI）如何響應客戶端的請求。是否是有點抽象？簡單點，說話的方式簡單點。它就是門牌號。
好比 www.baidu.com 是 金橋路，那麼 www.baidu.com/book 後面跟的 /book 就是 路由（我將之理解爲具體的門牌號）。

既然咱們知道了路由是門牌號，咱們有什麼樣的自由度來玩弄它呢？前置依賴先寫上：

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

• 咱們也許只是想來參觀、拜訪一下 - GET

app.get('/', function (req, res) {
  res.send('hello world')
})

• 也許咱們是快遞員，來送東西的 - POST

app.post('/', function (req, res) {
  res.send('POST request to the homepage')
})

• 咱們還能夠進行 delete、put 等行爲。

這些都是HTTP的經常使用的請求方法。他們只是讓咱們方便區分咱們的目的，好比說咱們想要刪除，未必要使用 delete，咱們只要修改後臺程序，用 get/post 也能夠用來刪除。就像我對主人說，"我要來你家參觀一下"，只是口頭上的約束，具體的行爲還要看我本人的意願(也許我來你家偷了東西？Delete)。

Express的中間件

我認爲這是 Express 的重點，不過也很簡單。Express自己很簡單，否則爲啥那麼人用嘞~~~

• 你可知什麼叫流水線？就是一道一道的做業。好比生產一個手機，我請機器1幫我製造外殼，我請機器2幫我塞入芯片，一直到一個手機出廠變爲成品賣到你手裏。中間件就是流水線上的工序。

• 咱們發送一個請求，也許要通過一道流水線，被記錄我是誰，再通過一道流水線，審查下我有沒有發送黃色內容（我不是我沒有），再通過一道流水線，你的請求是否合法？服務器能不能響應你的請求？最後，變爲結果，送到你的面前。

const express = require('express');
const path = require('path');
const app = express();
const router = express.Router();
// router的一種寫法，有的時候，門牌號同樣，咱們要進行不一樣的操做能夠用此簡寫
router.route('/')
  .get((req, res, next) => {
    console.log('get');
    next();
  })
  .post((req, res, next) => {
    console.log('post');
    next();
  });
// 中間件1 - 打印時間
app.use((req, res, next) => {
  console.log('Time', +Date.now());
  next();
});
// 中間件2 - 路由
app.use(router);
app.listen(3000);

• 上面，咱們使用了兩個中間件，完成了一個很小的流水線。除了咱們本身定義，也有一些別人寫好的！~唉，API調用程序員，真是簡單舒服啊。

var express = require('express')
var app = express()
var cookieParser = require('cookie-parser')
// load the cookie-parsing middleware
// 這樣咱們就使用了第三方的中間件
app.use(cookieParser())

---

4.零碎的 Express 知識點（用到了再看也不遲）

• 在 router 定義中，參數 req 內的一些屬性是啥？
  req.query: 解析後的 url 中的 querystring，如 ?name=haha，req.query 的值爲 {name: 'haha'}
req.params: 解析 url 中的佔位符，如 /:name，訪問 /haha，req.params 的值爲 {name: 'haha'}
req.body: 解析後請求體，需使用相關的模塊，如 body-parser，請求體爲 {"name": "haha"}，則 req.body 爲 {name: 'haha'}

• 關於設置Express不緩存

router.get('/',(req,res)=>{
    res.setHeader('Cache-Control','no-cache,no-store,must-revalidate');
    res.setHeader('pragma','no-cache');
    res.setHeader('Expires','0');
    res.send('hello,world');
});

• 關於 express(模板引擎的內容) 配合 ejs 而且使用.html做爲後綴，（主要緣由是我不想再多裝一個Sublime ejs的插件）

app.engine('html', ejs.__express);
app.set('view engine','html');

原本的語句是app.set('view engine','ejs')，用改版以後的就能用後綴爲.html的文件不報錯了！

• 關於express設置靜態文件目錄緩存的方法

app.use(express.static(path.join(__dirname, 'public'), {maxAge:1000*60*60}));

來自該回答：https://segmentfault.com/q/1010000007031019
也能夠查express 4.x官網，默認的maxAge爲0.
express.static(root, [options])

• 關於gulp如何使用gulp-nodemon和browser-sync達成熱加載（亂入的，不過乾脆就扔這裏吧）

let gulp=require('gulp'),
    nodemon=require('gulp-nodemon'),
    browser=require('browser-sync');
let reload=browser.reload;
gulp.task('serve',function(){
    browser.init({
        proxy:'http://localhost:3000',
        notify:false,
        port:3001
    });
    let hot_files=['./views/*.html','./views/pages/*.html'];
    gulp.watch(hot_files).on('change',reload);
});
gulp.task('node_app',function(){
    nodemon({
        script:'app.js',
        ext:'js html',
        env:{'NODE_ENV':'development'}
    });
});
gulp.task('default',['node_app','serve']);