express 初識

時間 2019-12-13

標籤 express 简体版

原文原文鏈接

 
    詳情戳這裏！全棧之巔 
   

0 安裝

npm install express

0.1 初始化

創建一個js文件。

如server.js

2 接口搭建--路由快速上手

2.1 引入核心文件，建立實例，監聽端口。

node js和瀏覽器js有個區別。模塊化。

    // 要不從核心包來引用 
  
    // 要不從當前node_module來查找 
  
    // 要不 就指定路徑。 
  
    // https://blog.csdn.net/crystal6918/article/details/74906757/ 
  
    const express = require('express'); 
  
    // 執行這個函數，返回一個實例 
  
    const app = express(); 
  
    // 監聽3000端口，當服務啓動後，輸入 後面的回調中的內容。 
  
    app.listen(3000,()=>{ 
  
    console.log("App is listening on port: 3000!") 
  
    }) 
  
    // 上面沒有定義 接口 或者路由，沒有接口。

這個時候，用瀏覽器打開3000端口，會報錯，can not get

2.2 搭建接口

好比定義一個get 接口。

    // 當get請求4000端口時，給客戶端發送一個Ok 
  
    app.get('/',function(req,res){ 
  
    res.send('ok') 
  
    })

這一步須要初步前端的瞭解http請求。

下面對前端來講展現一下node js的優越性。

    // 當get請求4000端口時，給客戶端發送一個Ok 
  
    app.get('/',function(req,res){ 
  
    res.send([ 
  
    {user:'johnny'} 
  
    ]) 
  
    })

返回json的話，這種形式多是全部編程語言裏最簡單最方便的辦法了！不須要什麼變化，客戶端是JS，服務端也是JS，JSON不須要轉譯，原生JSON就能夠直傳。

客戶端怎麼寫，服務端還怎麼寫！

2.3快速更新服務端更改。

安裝nodemon. 用這個程序運行服務端文件。能夠自動監聽文件更改和重啓。

注意 nodemon要全局安裝，在當前工做區安裝，很差用。

3 靜態文件託管

上一步定義了'/'對根路徑的接口，如今把以前的路由刪除，改成靜態文件的地址。

首先在根目錄創建一個public文件夾，在裏邊放一個index.html文件。

下面這個中間件專門處理靜態文件的託管，這樣public當中的靜態文件就能夠直接被訪問。

    app.use(express.static('public')) 
  

受控訪問

    app.use('static',express.static('public')) 
  

這樣寫，必須經過/static來訪問public中的靜態文件。

4 CORS跨域請求

4.1 什麼是跨域？

    app.get('/products',function (req,res) { 
  
    res.send([ 
  
    {id:1,name:'product1'}, 
  
    {id:2,name:'product2'}, 
  
    {id:3,name:'product3'} 
  
    ]) 
  
    })

在瀏覽器輸入 http://localhost:3000/products ，此時能夠正常打開頁面。

下面在html 中嵌入一段代碼

注意下面的兩步then。第一步返回一個Promise對象，第二步返回真正的數據

    <!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> 
  
    </head> 
  
    <body> 
  
    <h1>苟利國家生死以</h1> 
  
    </body> 
  
    <script> 
  
    fetch('http://localhost:3000/products').then(res => res.json()).then(data => { 
  
    console.log(data); 
  
    }) 
  
    </script> 
  
    </html>

隨後，用golive server插件打開index.html頁面。

可見瀏覽器報錯(想要得到和教程同樣的顯示，請使用chrome)

可見，從5500端口得到3000端口的index.html文件被CORS 規則阻斷了。由於3000端口的服務端，不容許其它域來訪問。 5500端口的響應頭中沒有指出 'Access-Control-Allow-Origin'

4.2 怎麼解決跨域問題？

首先安裝 cors

npm i cors。

隨後使用 cors。

    // cors包require 後返回一個函數，直接執行他，會返回一個express能夠直接使用的中間件 
  
    // 這一行就能夠解決跨域問題 
  
    app.use(require('cors')())

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。