全站開發(fā)流程（Vue.js+Node+Mongodb）

鄒個(gè)人站點(diǎn)：http://www.itzoujie.com/

不懂后端的前端不是一個(gè)大前端，不懂后端的前端會(huì)大大限制你的發(fā)展空間，所以小鄒在網(wǎng)上找了一篇不錯(cuò)的文章來分享給大伙，這里說一下，小鄒的個(gè)人站點(diǎn)技術(shù)棧是（node+express+vue+mysql）,跟這篇文章的技術(shù)棧略有不同，當(dāng)然站點(diǎn)里面涉及的組件庫和小程序等，小鄒這里就不一一說了。好了，下面直接開始分享：

技術(shù)棧

Vue + vuex + element-ui + webpack + nodeJs + koa2 + mongodb

目錄結(jié)構(gòu)講解

說明：

build - webpack的配置文件
code - 放置代碼文件
config - 項(xiàng)目參數(shù)配置的文件
logs - 日志打印文件
node_modules - 項(xiàng)目依賴模塊
public - 項(xiàng)目靜態(tài)文件的入口例如: public下的 demo.html文件, 可通過 localhost:3000/demo.html 訪問
static - 靜態(tài)資源文件
.babelrc - babel編譯
postcss.config.js - css后處理器配置

build 文件講解

說明：

build.js - 執(zhí)行webpack編譯任務(wù), 還有打包動(dòng)畫等等
get-less-variables.js - 解析less文件, 賦值less全局變量
style-loader.js - 樣式loader配置
vue-config.js - vue配置
webpack.base.conf.js - webpack 基本通用配置
webpack.dev.conf.js - webpack 開發(fā)環(huán)境配置
webpack.prod.conf.js - webpack 生產(chǎn)環(huán)境配置

code 文件

1.admin - 后臺(tái)管理界面源碼

src - 代碼區(qū)域：

components - 組件
filters - 過濾器
font - 字體/字體圖標(biāo)
images - 圖片
router - 路由
store - vuex狀態(tài)管理
styles - 樣式表
utils - 請求封裝
views - 頁面模塊
App.vue - app組件
custom-components.js - 自定義組件導(dǎo)出
main.js - 入口JS
index.html - webpack 模板文件

2.client - web端界面源碼

跟后臺(tái)管理界面的結(jié)構(gòu)基本一樣。

3.server - 服務(wù)端源碼

說明：

controller: 所有接口邏輯代碼
middleware: 所有的中間件
models: 數(shù)據(jù)庫model
router: 路由/接口
app.js: 入口
config.js: 配置文件
index.js: babel編譯
mongodb.js: mongodb配置

其他文件

config - 項(xiàng)目參數(shù)配置的文件
logs - 日志文件
public - 項(xiàng)目靜態(tài)文件的入口
static - 靜態(tài)資源文件
.babelrc - babel編譯
postcss.config.js - css后處理器配置

后臺(tái)管理

開發(fā)中用的一些依賴模塊

vue/vue-router/vuex - Vue全家桶
axios - 一個(gè)現(xiàn)在主流并且很好用的請求庫支持Promise
qs - 用于解決axios POST請求參數(shù)的問題
element-ui - 餓了么出品的vue2.0 pc UI框架
babel-polyfill - 用于實(shí)現(xiàn)瀏覽器不支持原生功能的代碼
highlight.js / marked- 兩者搭配實(shí)現(xiàn)Markdown的常用語法
js-md5 - 用于登陸時(shí)加密
nprogress - 頂部加載條

components

這個(gè)文件夾一般放入常用的組件，比如 Loading組件等等。

views

所有模塊頁面。

store

vuex 用來統(tǒng)一管理公用屬性，和統(tǒng)一管理接口。

登陸

登陸是采用 jsonwebtoken方案 來實(shí)現(xiàn)整個(gè)流程的。

1. jwt.sign(payload,secretOrPrivateKey,[options,callback]) 生成TOKEN

2. jwt.verify(token，secretOrPublicKey，[options，callback]) 驗(yàn)證TOKEN

3.獲取用戶的賬號(hào)密碼。

4.通過 jwt.sign 方法來生成token：

5.每次請求數(shù)據(jù)的時(shí)候通過 jwt.verify 檢測token的合法性 jwt.verify(token,secret)。

權(quán)限

通過不同的權(quán)限來動(dòng)態(tài)修改路由表。

通過 vue的鉤子函數(shù) beforeEach 來控制并展示哪些路由，以及判斷是否需要登陸。

通過調(diào)用 getUserInfo方法傳入 token 獲取用戶信息, 后臺(tái)直接解析 token 獲取里面的信息返回給前臺(tái)。

通過調(diào)用 setRoutes方法動(dòng)態(tài)生成路由。

axios 請求封裝，統(tǒng)一對請求進(jìn)行管理

面包屑 / 標(biāo)簽路徑

通過檢測路由來把當(dāng)前路徑轉(zhuǎn)換成面包屑。
把訪問過的路徑儲(chǔ)存在本地，記錄下來，通過標(biāo)簽直接訪問。

上面介紹了幾個(gè)主要以及必備的后臺(tái)管理功能，其余的功能模塊按照需求增加就好

前臺(tái)

前臺(tái)展示的頁面跟后臺(tái)管理界面差不多，也是用vue+webpack搭建，基本的結(jié)構(gòu)都差不多。

server端

權(quán)限

主要是通過 jsonwebtoken 的verify方法檢測 cookie 里面的 token 驗(yàn)證它的合法性。

日志是采用 log4js 來進(jìn)行管理的， log4js 算 nodeJs 常用的日志處理模塊，用起來額也比較簡單。

log4js 的日志分為九個(gè)等級，各個(gè)級別的名字和權(quán)重如下：

1.圖。

2.設(shè)置 Logger 實(shí)例的類型 logger=log4js.getLogger('cheese')。

3.通過 Appender 來控制文件的名字、路徑、類型。

4.配置到 log4js.configure。

5.便可通過 logger 上的打印方法來輸出日志了 logger.info(JSON.stringify(currTime:當(dāng)前時(shí)間為${Date.now()}s ))。

定制書寫規(guī)范(API)

設(shè)計(jì)思路

當(dāng)應(yīng)用程序啟動(dòng)時(shí)候，讀取指定目錄下的 js 文件，以文件名作為屬性名，掛載在實(shí)例 app 上，然后把文件中的接口函數(shù)，擴(kuò)展到文件對象上。

讀取出來的便是以下形式：

app.controller.admin.other.markdown_upload_img

便能讀取到 markdown_upload_img 方法。

在把該形式的方法賦值過去就行：

router.post('/markdown_upload_img',app.controller.admin.other.markdown_upload_img)

通過 mongoose 鏈接 mongodb

封裝返回的send函數(shù)

通過 koa-static 管理靜態(tài)文件入口

注意事項(xiàng)：

1. cnpm run server 啟動(dòng)服務(wù)器 //沒裝cnpm的使用npm命令

2.啟動(dòng)時(shí)，記得啟動(dòng)mongodb數(shù)據(jù)庫，賬號(hào)密碼可以在 server/config.js 文件下進(jìn)行配置

3. db.createUser({user:"cd",pwd:"123456",roles:[{role:"readWrite",db:'test'}]})(mongodb 注冊用戶)

4. cnpm run dev:admin 啟動(dòng)后臺(tái)管理界面

5.登錄后臺(tái)管理界面錄制數(shù)據(jù)

6.登錄后臺(tái)管理時(shí)需要在數(shù)據(jù)庫創(chuàng)建 users 集合注冊一個(gè)賬號(hào)進(jìn)行登錄

7. cnpm run dev:client 啟動(dòng)前臺(tái)頁面

者：五月君來源：Nodejs技術(shù)棧

“前端如何解決跨域問題?” 這個(gè)是前段在知乎看到的一個(gè)提問，這幾乎是做前端都會(huì)遇到的一個(gè)問題，產(chǎn)生的情況可能會(huì)很多，解決一個(gè)問題還是要先了解下為什么會(huì)產(chǎn)生這樣問題，學(xué)習(xí)最好的方法就是結(jié)合一些實(shí)際的案例來學(xué)習(xí)，理解和掌握也會(huì)更加的深刻，本文結(jié)合 Node.js 寫一些 Demo 看一下跨域問題及解決辦法，最好是自己看完也能夠動(dòng)手操作下～

Cross-origin Resource Sharing 中文名稱 “跨域資源共享” 簡稱 “CORS”，它突破了一個(gè)請求在瀏覽器發(fā)出只能在同源的情況下向服務(wù)器獲取數(shù)據(jù)的限制。

本文會(huì)先從一個(gè)示例開始，分析是瀏覽器還是服務(wù)器的限制，之后講解什么時(shí)候會(huì)產(chǎn)生預(yù)檢請求，在整個(gè)過程中，也會(huì)講解一下解決該問題的實(shí)現(xiàn)方法，文末會(huì)再總結(jié)如何使用 Node.js 中的 cors 模塊和 Nginx 反向代理來解決跨域問題。

文中使用 Node.js 做一些 Demo 的演示，每一小節(jié)之后也會(huì)給予代碼的 Demo 地址。

瀏覽器還是服務(wù)器的限制

先思考下，CORS 是瀏覽器端還是服務(wù)器端的限制?為了更好地說明這個(gè)問題，從一段示例開始。

從一段示例開始

index.html

<body> 
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/fetch/3.0.0/fetch.min.js"></script> --> 
  <script> 
    fetch('http://127.0.0.1:3011/api/data'); 
  </script> 
</body>

client.js

創(chuàng)建 client.js 用來加載上面 index.html。設(shè)置端口為 3010。

const http = require('http'); 
const fs = require('fs'); 
const PORT = 3010; 
http.createServer((req, res) => { 
  fs.createReadStream('index.html').pipe(res); 
}).listen(PORT);

server.js

創(chuàng)建 server.js 開啟一個(gè)服務(wù)，根據(jù)不同的請求返回不同的響應(yīng)。設(shè)置端口為 3011。

const http = require('http'); 
const PORT = 3011; 
 
http.createServer((req, res) => { 
  const url = req.url; 
  console.log('request url: ', url); 
  if (url === '/api/data') { 
    return res.end('ok!'); 
  } 
  if (url === '/script') { 
    return res.end('console.log("hello world!");'); 
  } 
}).listen(PORT); 
 
console.log('Server listening on port ', PORT);

測試分析原因

運(yùn)行上面的 client.js、server.js 瀏覽器輸入 http://127.0.0.1:3010 在 Chrome 瀏覽器中打開 Network 項(xiàng)查看請求信息，如下所示：

左側(cè)是使用 fetch 請求的 127.0.0.1:3011/api/data 接口，在請求頭里可以看到有 Origin 字段，顯示了我們當(dāng)前的請求信息。另外還有三個(gè) Sec-Fetch-* 開頭的字段，這是一個(gè)新的草案 Fetch Metadata Request Headers[1]。

其中 Sec-Fetch-Mode 表示請求的模式，通過左右兩側(cè)結(jié)果對比也可以看出左側(cè)是跨域的。Sec-Fetch-Site 表示的是這個(gè)請求是同源還是跨域，由于我們這兩個(gè)請求都是由 3010 端口發(fā)出去請求 3011 端口，是不符合同源策略的。

看下瀏覽器 Console 下的日志信息，根據(jù)提示得知原因是從 “http://127.0.0.1:3010” 訪問 “http://127.0.0.1:3011/api/data” 被 CORS 策略阻止了，沒有 “Access-Control-Allow-Origin” 標(biāo)頭。

在看下服務(wù)端的日志，因?yàn)檎埱?3011 服務(wù)，所以就看下 3011 服務(wù)的日志信息：

Server listening on port  3011 
request url:  /script 
request url:  /api/data

在服務(wù)端是有收到請求信息的，說明服務(wù)端是正常工作的。

我們也可以在終端通過 curl 命令測試下，在終端脫離瀏覽器環(huán)境也是可以正常請求的。

$ curl http://127.0.0.1:3011/api/data 
ok!

本節(jié)代碼示例：

github.com/qufei1993/http-protocol/tree/master/example/cors/01

總結(jié)回答最開始提出的問題

瀏覽器限制了從腳本內(nèi)發(fā)起的跨源 HTTP 請求，例如 XMLHttpRequest 和我們本示例中使用的 Fetch API 都是遵循的同源策略。

當(dāng)一個(gè)請求在瀏覽器端發(fā)送出去后，服務(wù)端是會(huì)收到的并且也會(huì)處理和響應(yīng)，只不過瀏覽器在解析這個(gè)請求的響應(yīng)之后，發(fā)現(xiàn)不屬于瀏覽器的同源策略(地址里面的協(xié)議、域名和端口號(hào)均相同)也沒有包含正確的 CORS 響應(yīng)頭，返回結(jié)果被瀏覽器給攔截了。

預(yù)檢請求

預(yù)檢請求是在發(fā)送實(shí)際的請求之前，客戶端會(huì)先發(fā)送一個(gè) OPTIONS 方法的請求向服務(wù)器確認(rèn)，如果通過之后，瀏覽器才會(huì)發(fā)起真正的請求，這樣可以避免跨域請求對服務(wù)器的用戶數(shù)據(jù)造成影響。

看到這里你可能有疑問為什么上面的示例沒有預(yù)檢請求?因?yàn)?CORS 將請求分為了兩類：簡單請求和非簡單請求。我們上面的情況屬于簡單請求，所以也就沒有了預(yù)檢請求。

讓我們繼續(xù)在看下簡單請求和非簡單請求是如何定義的。

預(yù)檢請求定義

根據(jù) MDN 的文檔定義，請求方法為：GET、POST、HEAD，請求頭 Content-Type 為：text/plain、multipart/form-data、application/x-www-form-urlencoded 的就屬于 “簡單請求” 不會(huì)觸發(fā) CORS 預(yù)檢請求。

例如，如果請求頭的 Content-Type 為 application/json 就會(huì)觸發(fā) CORS 預(yù)檢請求，這里也會(huì)稱為 “非簡單請求”。

“MDN 文檔 developer.mozilla.org/en-US/docs/Web/HTTP/CORS 簡單請求”[2] 有更多關(guān)于簡單請求的字段定義。

預(yù)檢請求示例

通過一個(gè)示例學(xué)習(xí)下預(yù)檢請求。

設(shè)置客戶端

為 index.html 里的 fetch 方法增加一些設(shè)置，設(shè)置請求的方法為 PUT，請求頭增加一個(gè)自定義字段 Test-Cors。

<script> 
  fetch('http://127.0.0.1:3011/api/data', { 
    method: 'PUT', 
    headers: { 
      'Content-Type': 'text/plain', 
      'Test-Cors': 'abc' 
    } 
  }); 
</script>

上述代碼在瀏覽器執(zhí)行時(shí)會(huì)發(fā)現(xiàn)是一個(gè)非簡單請求，就會(huì)先執(zhí)行一個(gè)預(yù)檢請求，Request Headers 會(huì)有如下信息：

OPTIONS /api/data HTTP/1.1 
Host: 127.0.0.1:3011 
Access-Control-Request-Method: PUT 
Access-Control-Request-Headers: content-type,test-cors 
Origin: http://127.0.0.1:3010 
Sec-Fetch-Mode: cors

可以看到有一個(gè) OPTIONS 是預(yù)檢請求使用的方法，該方法是在 HTTP/1.1 協(xié)議中所定義的，還有一個(gè)重要的字段 Origin 表示請求來自哪個(gè)源，服務(wù)端則可以根據(jù)這個(gè)字段判斷是否是合法的請求源，例如 Websocket 中因?yàn)闆]有了同源策略限制，服務(wù)端可以根據(jù)這個(gè)字段來判斷。

Access-Control-Request-Method 告訴服務(wù)器，實(shí)際請求將使用 PUT 方法。

Access-Control-Request-Headers 告訴服務(wù)器，實(shí)際請求將使用兩個(gè)頭部字段 content-type,test-cors。這里如果 content-type 指定的為簡單請求中的幾個(gè)值，Access-Control-Request-Headers 在告訴服務(wù)器時(shí)，實(shí)際請求將只有 test-cors 這一個(gè)頭部字段。

設(shè)置服務(wù)端

上面講解了客戶端的設(shè)置，同樣的要使請求能夠正常響應(yīng)，還需服務(wù)端的支持。

修改我們的 server.js 重點(diǎn)是設(shè)置 Response Headers 代碼如下所示：

res.writeHead(200, { 
  'Access-Control-Allow-Origin': 'http://127.0.0.1:3010', 
  'Access-Control-Allow-Headers': 'Test-CORS, Content-Type', 
  'Access-Control-Allow-Methods': 'PUT,DELETE', 
  'Access-Control-Max-Age': 86400 
});

為什么是以上配置?首先預(yù)檢請求時(shí)，瀏覽器給了服務(wù)器幾個(gè)重要的信息 Origin、Method 為 PUT、Headers 為 content-type,test-cors 服務(wù)端在收到之后，也要做些設(shè)置，給予回應(yīng)。

Access-Control-Allow-Origin 表示 “http://127.0.0.1:3010” 這個(gè)請求源是可以訪問的，該字段也可以設(shè)置為 “*” 表示允許任意跨源請求。

Access-Control-Allow-Methods 表示服務(wù)器允許客戶端使用 PUT、DELETE 方法發(fā)起請求，可以一次設(shè)置多個(gè)，表示服務(wù)器所支持的所有跨域方法，而不單是當(dāng)前請求那個(gè)方法，這樣好處是為了避免多次預(yù)檢請求。

Access-Control-Allow-Headers 表示服務(wù)器允許請求中攜帶 Test-CORS、Content-Type 字段，也可以設(shè)置多個(gè)。

Access-Control-Max-Age 表示該響應(yīng)的有效期，單位為秒。在有效時(shí)間內(nèi)，瀏覽器無須為同一請求再次發(fā)起預(yù)檢請求。還有一點(diǎn)需要注意，該值要小于瀏覽器自身維護(hù)的最大有效時(shí)間，否則是無效的。

看下增加了預(yù)檢請求的效果，第一次先發(fā)出了 OPTIONS 請求，并且在請求頭設(shè)置了本次請求的方法和 Headers 信息，服務(wù)端在 Response 也做了回應(yīng)，在 OPTIONS 成功之后，瀏覽器緊跟著才發(fā)起了我們本次需要的真實(shí)請求，如圖右側(cè)所示 Resquest Method 為 PUT。

本節(jié)代碼示例：

github.com/qufei1993/http-protocol/tree/master/example/cors/02

CORS 與認(rèn)證

對于跨域的 XMLHttpRequest 或 Fetch 請求，瀏覽器是不會(huì)發(fā)送身份憑證信息的。例如我們要在跨域請求中發(fā)送 Cookie 信息，就要做些設(shè)置：

為了能看到效果，我先自定義了一個(gè) cookie 信息 id=NodejsRoadmap。

重點(diǎn)是設(shè)置認(rèn)證字段，本文中 fetch 示例設(shè)置 credentials: "include" 如果是 XMLHttpRequest 則設(shè)置 withCredentials:"include"

<body> 
  <script> 
    document.cookie = `id=NodejsRoadmap`; 
    fetch('http://127.0.0.1:3011/api/data', { 
      method: 'PUT', 
      headers: { 
        'Content-Type': 'application/json', 
        'Test-Cors': 'abc', 
      }, 
      credentials: "include" 
    }); 
  </script> 
</body>

經(jīng)過以上設(shè)置，瀏覽器發(fā)送實(shí)際請求時(shí)會(huì)向服務(wù)器發(fā)送 Cookies，同時(shí)服務(wù)器也需要在響應(yīng)中設(shè)置 Access-Control-Allow-Credentials 響應(yīng)頭

res.writeHead(200, { 
  'Access-Control-Allow-Origin': 'http://127.0.0.1:3010', 
  'Access-Control-Allow-Credentials': true 
});

如果服務(wù)端不設(shè)置瀏覽器就不會(huì)正常響應(yīng)，會(huì)報(bào)一個(gè)跨域錯(cuò)誤，如下所示：

Access to fetch at 'http://127.0.0.1:3011/api/data' from origin 'http://127.0.0.1:3010' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

還有一點(diǎn)需要注意，如果我們在請求中設(shè)置了 credentials: "include" 服務(wù)端就不能設(shè)置 Access-Control-Allow-Origin: "*" 只能設(shè)置為一個(gè)明確的地址。

本節(jié)代碼示例：

github.com/qufei1993/http-protocol/tree/master/example/cors/03

解決跨域問題的幾種方法

通過上面的分析了解跨域產(chǎn)生的原因之后，解決其實(shí)并不難，上面的講解中其實(shí)也提供了解決方案，例如在 Node.js 中我們可以設(shè)置響應(yīng)頭部字段 Access-Control-Allow-Origin、Access-Control-Expose-Headers、Access-Control-Allow-Methods 等，但是在實(shí)際開發(fā)中這樣設(shè)置難免繁瑣，下面介紹幾種常用的解決方法。

使用 CORS 模塊

在 Node.js 中推薦你使用 cors 模塊 github.com/expressjs/cors[3]。

在我們本節(jié)的示例中，一直使用的 Node.js 原生模塊來編寫我們的示例，在引入 cors 模塊后，可以按照如下方式改寫：

const http = require('http'); 
const PORT = 3011; 
const corsMiddleware = require('cors')({ 
  origin: 'http://127.0.0.1:3010', 
  methods: 'PUT,DELETE', 
  allowedHeaders: 'Test-CORS, Content-Type', 
  maxAge: 1728000, 
  credentials: true, 
}); 
 
http.createServer((req, res) => { 
  const { url, method } = req; 
  console.log('request url:', url, ', request method:', method); 
  const nextFn = () => { 
    if (method === 'PUT' && url === '/api/data') { 
      return res.end('ok!'); 
    } 
    return res.end(); 
  } 
  corsMiddleware(req, res, nextFn); 
}).listen(PORT);

cors 在預(yù)檢請求之后或在預(yù)檢請求里并選項(xiàng)中設(shè)置了 preflightContinue 屬性之后才會(huì)執(zhí)行 nextFn 這個(gè)函數(shù)，如果預(yù)檢失敗就不會(huì)執(zhí)行 nextFn 函數(shù)。

如果你用的 Express.js 框架，使用起來也很簡單，如下所示：

const express = require('express') 
const cors = require('cors') 
const app = express() 
 
app.use(cors());

JSONP

瀏覽器是允許像 link、img、script 標(biāo)簽在路徑上加載一些內(nèi)容進(jìn)行請求，是允許跨域的，那么 jsonp 的實(shí)現(xiàn)原理就是在 script 標(biāo)簽里面加載了一個(gè)鏈接，去訪問服務(wù)器的某個(gè)請求，返回內(nèi)容。

<body> 
  <script> 
    // fetch('http://127.0.0.1:3011/api/data', { 
    //   method: 'PUT', 
    //   headers: { 
    //     'Content-Type': 'application/json', 
    //     'Test-Cors': 'abc', 
    //   }, 
    //   credentials: "include" 
    // }); 
    <srcipt src="http://127.0.0.1:3011/api/data"></srcipt> 
  </script> 
</body>

相比上面 CORS 模塊，JSONP 只支持 GET 請求，顯然是沒有 CORS 模塊強(qiáng)大的。

Nginx 代理服務(wù)器配置跨域

使用 Nginx 代理服務(wù)器之后，請求不會(huì)直接到達(dá)我們的 Node.js 服務(wù)器端，請求會(huì)先經(jīng)過 Nginx 在設(shè)置一些跨域等信息之后再由 Nginx 轉(zhuǎn)發(fā)到我們的 Node.js 服務(wù)端，所以這個(gè)時(shí)候我們的 Nginx 服務(wù)器去監(jiān)聽的 3011 端口，我們把 Node.js 服務(wù)的端口修改為 30011，簡單配置如下所示：

server { 
  listen          3011; 
  server_name     localhost; 
 
  location / { 
    if ($request_method = 'OPTIONS') { 
      add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:3010'; 
      add_header 'Access-Control-Allow-Methods' 'PUT,DELETE'; 
      add_header 'Access-Control-Allow-Headers' 'Test-CORS, Content-Type'; 
      add_header 'Access-Control-Max-Age' 1728000; 
      add_header 'Access-Control-Allow-Credentials' 'true'; 
      add_header 'Content-Length' 0; 
      return 204; 
    } 
 
    add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:3010'; 
    add_header 'Access-Control-Allow-Credentials' 'true'; 
 
    proxy_pass http://127.0.0.1:30011; 
    proxy_set_header Host $host; 
  } 
}

本節(jié)代碼示例：

github.com/qufei1993/http-protocol/tree/master/example/cors/04

總結(jié)

如果你是一個(gè)前端開發(fā)者，在工作難免會(huì)遇到跨域問題，雖然它屬于瀏覽器的同源策略限制，但是要想解決這問題還需瀏覽器端與服務(wù)端的共同支持，希望讀到這篇文章的讀者能夠理解跨域產(chǎn)生的原因，最后給予的幾個(gè)解決方案，也希望能解決你對于跨域這個(gè)問題的困惑。

作者簡介：五月君，軟件設(shè)計(jì)師，公眾號(hào)「Nodejs技術(shù)棧」作者。

參考資料

[1]Fetch Metadata Request Headers: https://w3c.github.io/webappsec-fetch-metadata/

[2]“MDN 文檔 developer.mozilla.org/en-US/docs/Web/HTTP/CORS 簡單請求”: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[3]github.com/expressjs/cors: https://github.com/expressjs/cors

、前端EventLoop

1、什么是eventLoop？

同步任務(wù)和異步任務(wù)在js中是如何執(zhí)行的呢？js的代碼運(yùn)行會(huì)形成一個(gè)主線程和一個(gè)任務(wù)隊(duì)列。主線程會(huì)從上到下一步步執(zhí)行我們的js代碼，形成一個(gè)執(zhí)行棧。同步任務(wù)就會(huì)被放到這個(gè)執(zhí)行棧中依次執(zhí)行。而異步任務(wù)被放入到任務(wù)隊(duì)列中執(zhí)行，執(zhí)行完就會(huì)在任務(wù)隊(duì)列中打一個(gè)標(biāo)記，形成一個(gè)對應(yīng)的事件。當(dāng)執(zhí)行棧中的任務(wù)全部運(yùn)行完畢，js會(huì)去提取并執(zhí)行任務(wù)隊(duì)列中的事件。這個(gè)過程是循環(huán)進(jìn)行的，這就是我們今天想要了解的event loop

2、為什么js是單線程

想要了解event loop我們就要從js的工作原理說起。首先，大家都知道js是單線程的。所謂單線程就是進(jìn)程中只有一個(gè)線程在運(yùn)行。那么，js為什么是單線程而不是做成多線程的呢？個(gè)人理解，js是用來實(shí)現(xiàn)瀏覽器與用戶之間的交互的。如果同時(shí)要處理用戶點(diǎn)擊，用戶輸入，用戶關(guān)閉等操作，瀏覽器無法知道這個(gè)時(shí)間我到底應(yīng)該做什么。所以js是從上至下按順序運(yùn)行下去的

3、什么是宏任務(wù)&&什么是微任務(wù)

宏任務(wù)：需要多次事件循環(huán)才能執(zhí)行完，事件隊(duì)列中的每一個(gè)事件都是一個(gè)宏任務(wù)。瀏覽器為了能夠使得js內(nèi)部宏任務(wù)與DOM任務(wù)有序的執(zhí)行，會(huì)在一個(gè)宏任務(wù)執(zhí)行結(jié)束后，在下一個(gè)宏執(zhí)行開始前，對頁面進(jìn)行重新渲染（task->渲染->task->…）鼠標(biāo)點(diǎn)擊會(huì)觸發(fā)一個(gè)事件回調(diào)，需要執(zhí)行一個(gè)宏任務(wù)，然后解析HTML
微任務(wù)：微任務(wù)是一次性執(zhí)行完的。微任務(wù)通常來說是需要在當(dāng)前task執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)，例如對一些動(dòng)作做出反饋或者異步執(zhí)行任務(wù)又不需要分配一個(gè)新的task，這樣便可以提高一些性能

4、案例

console.log("script start");
?
setTimeout(function(){
   console.log("setTimeout");
},0)
?
newPromise(resolve=>{
   console.log("promise start");
   resolve();
}).then(function(){
   console.log("promise1");
}).then(()=>{
   console.log("promise2");
})
?
console.log("script end");
console.log(1);
?
setTimeout(()=>{
 console.log(2);
})
?
newPromise((resolve)=>{
 console.log(4)
 resolve()
}).then(()=>{
setTimeout(()=>{
     console.log(5);
  })
}).then(()=>{
 console.log(6)
})
?
console.log(7)
setTimeout(() => {
 console.log(5)
? new Promise(resolve => {
    console.log(6)
?    setTimeout(() => {
      console.log(7)
    })
    resolve()
  }).then(() => {
    console.log(8)
  })
}, 500)
new Promise(resolve => {
 console.log(9)
 resolve()
}).then(() => {
 console.log(10)
? setTimeout(() => {
    console.log(11)
  }, 0)
})
?console.log(12)

二、后端EventLoop

1、NodeJS中的宏任務(wù)分類

Timers 類型的宏任務(wù)隊(duì)列

setTimeout()
setInterval

Check 類型的宏任務(wù)隊(duì)列

setImmediate()

Close callback 類型的宏任務(wù)隊(duì)列

socket.on(‘close’, () => {})

Poll 類型的宏任務(wù)隊(duì)列

除了上面幾種的其他所有回調(diào)

2、nodeJs 里面的微任務(wù)隊(duì)列

process.nextTick()Promise.then() process.nextTick()的優(yōu)先級高于所有的微任務(wù),每一次清空微任務(wù)列表的時(shí)候，都是先執(zhí)行process.nextTick()

3、setTimeout && setImmediate執(zhí)行順序

Node 并不能保證 timers 在預(yù)設(shè)時(shí)間到了就會(huì)立即執(zhí)行，因?yàn)?Node 對 timers 的過期檢查不一定靠譜，它會(huì)受機(jī)器上其它運(yùn)行程序影響，或者那個(gè)時(shí)間點(diǎn)主線程不空閑
雖然 setTimeout 延時(shí)為 0，但是一般情況 Node 把 0 會(huì)設(shè)置為 1ms，所以，當(dāng) Node 準(zhǔn)備 event loop 的時(shí)間大于 1ms 時(shí)，進(jìn)入 timers 階段時(shí)，setTimeout 已經(jīng)到期，則會(huì)先執(zhí)行 setTimeout；反之，若進(jìn)入 timers 階段用時(shí)小于 1ms，setTimeout 尚未到期，則會(huì)錯(cuò)過 timers 階段，先進(jìn)入 check 階段，而先執(zhí)行 setImmediate

三、postman的基本使用

1、打開postman之后，首先輸入U(xiǎn)RL，方法選擇GET

2、然后我們在Headers里面輸入我們所需要的內(nèi)容，如果需要Cookie也填寫在這里面即可（不需要可以不填），填寫的時(shí)候可以單個(gè)填寫，也可以點(diǎn)擊【Bulk Edit】進(jìn)行填寫方式切換，切換后可以一次填寫所有內(nèi)容

3、填寫了Headers之后，如果這個(gè)get請求里面有傳參，我們接下來可以填寫參數(shù)，如果不需要也可以不填。填了參數(shù)之后，內(nèi)容就會(huì)拼接在我們的url里面

4、最后，我們點(diǎn)擊send，就可以看到返回值了

post同理

四、項(xiàng)目的基本搭建

一、express生成器搭建項(xiàng)目結(jié)構(gòu)

1、安裝 express-generator

npm install express-generator -g

2、通過express -e生成項(xiàng)目結(jié)構(gòu)

3、安裝依賴

$ cd myapp
$ npm install

4、啟動(dòng)項(xiàng)目

npm start

二、MVC架構(gòu)思想

MVC即Model-View-Controller（模型-視圖-控制器）是一種軟件設(shè)計(jì)模式，最早出現(xiàn)在Smalltalk語言中，后被Sun公司推薦為Java EE平臺(tái)的設(shè)計(jì)模式。
　　MVC把應(yīng)用程序分成了上面3個(gè)核心模塊，這3個(gè)模塊又可被稱為業(yè)務(wù)層-視圖層-控制層。顧名思義，它們?nèi)咴趹?yīng)用程序中的主要作用如下：
業(yè)務(wù)層：負(fù)責(zé)實(shí)現(xiàn)應(yīng)用程序的業(yè)務(wù)邏輯，封裝有各種對數(shù)據(jù)的處理方法。它不關(guān)心它會(huì)如何被視圖層顯示或被控制器調(diào)用，它只接受數(shù)據(jù)并處理，然后返回一個(gè)結(jié)果。
視圖層：負(fù)責(zé)應(yīng)用程序?qū)τ脩舻娘@示，它從用戶那里獲取輸入數(shù)據(jù)并通過控制層傳給業(yè)務(wù)層處理，然后再通過控制層獲取業(yè)務(wù)層返回的結(jié)果并顯示給用戶。
控制層：負(fù)責(zé)控制應(yīng)用程序的流程，它接收從視圖層傳過來的數(shù)據(jù)，然后選擇業(yè)務(wù)層中的某個(gè)業(yè)務(wù)來處理，接收業(yè)務(wù)層返回的結(jié)果并選擇視圖層中的某個(gè)視圖來顯示結(jié)果。
　　可以用下圖來表示MVC模式中三者之間的關(guān)系：

三、圖片上傳

安裝multer模塊

npm install multer

引用模塊它是依賴于express的一個(gè)模塊

//引用express并配置
var express = require("express");
var app = express();
app.listen(3000);
var multer = require('multer');
/*var upload = multer({
    //如果用這種方法上傳，要手動(dòng)添加文明名后綴
        //如果用下面配置的代碼，則可以省略這一句
    dest: 'uploads/'
})*/

配置設(shè)置保存文件的地方，并根據(jù)上傳的文件名對應(yīng)文件添加后綴可以通過filename屬性定制文件保存的格式

屬性值用途destination設(shè)置資源的保存路徑。注意，如果沒有這個(gè)配置項(xiàng)，默認(rèn)會(huì)保存在/tmp/uploads下。此外，路徑需要自己創(chuàng)建filename設(shè)置資源保存在本地的文件名

var storage = multer.diskStorage({
    //設(shè)置上傳后文件路徑，uploads文件夾會(huì)自動(dòng)創(chuàng)建。
    destination: function(req, file, cb) {
        cb(null, './uploads')
    },
    //給上傳文件重命名，獲取添加后綴名
    filename: function(req, file, cb) {
        var fileFormat = (file.originalname).split(".");
        //給圖片加上時(shí)間戳格式防止重名名
        //比如把 abc.jpg圖片切割為數(shù)組[abc,jpg],然后用數(shù)組長度-1來獲取后綴名
        cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
});
var upload = multer({
    storage: storage
});

接受文件 upload.single('xxx')，xxx與表單中的name屬性的值對應(yīng) 這里雖然用到post請求，但實(shí)際上不需要bodyParser模塊處理

app.post('/upload-single', upload.single('logo'), function(req, res, next) {
    console.log(req.file)
    console.log('文件類型：%s', req.file.mimetype);
    console.log('原始文件名：%s', req.file.originalname);
    console.log((req.file.originalname).split("."))
    console.log('文件大小：%s', req.file.size);
    console.log('文件保存路徑：%s', req.file.path);
    res.send({
        ret_code: '0'
    });
});

多圖上傳多圖上傳只要更改一下地方，前端往file輸入框加多一個(gè)multiple="multiple"屬性值，此時(shí)就可以在選圖的時(shí)候多選了，當(dāng)然也可以并列多個(gè)file輸入框(不推薦多個(gè)上傳圖片輸入框)，這樣體驗(yàn)會(huì)不好

<input type="file" name="logo" multiple="multiple" />

后端也需要相應(yīng)的改變

app.post('/upload-single', upload.single('logo'), function(req, res, next) {
//upload.single('logo')變?yōu)閡pload.array('logo', 2)，數(shù)字代表可以接受多少張圖片
app.post('/upload-single', upload.array('logo', 2), function(req, res, next) {

如果不想有圖片數(shù)量上傳限制，我們可以用upload.any()方法

app.post('/upload-single', upload.any(), function(req, res, next) { 
    res.append("Access-Control-Allow-Origin","*");
    res.send({
        wscats_code: '0'
    });
});

前端部分

formData表單提交

<form action="http://localhost:3000/upload-single" method="post" enctype="multipart/form-data">
    <h2>單圖上傳</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

formData表單+ajax提交

<form id="uploadForm">
    <p>指定文件名： <input type="text" name="filename" value="" /></p>
    <p>上傳文件： <input type="file" name="logo" /></ p>
    <input type="button" value="上傳" onclick="doUpload()" />
</form>

FormData對象，是可以使用一系列的鍵值對來模擬一個(gè)完整的表單，然后使用XMLHttpRequest發(fā)送這個(gè)"表單"

注意點(diǎn)

processData設(shè)置為false。因?yàn)閐ata值是FormData對象，不需要對數(shù)據(jù)做處理。
<form>標(biāo)簽添加enctype="multipart/form-data"屬性。
cache設(shè)置為false，上傳文件不需要緩存。
contentType設(shè)置為false。因?yàn)槭怯?lt;form>表單構(gòu)造的FormData對象，且已經(jīng)聲明了屬性enctype="multipart/form-data"，所以這里設(shè)置為false

上傳后，服務(wù)器端代碼需要使用從查詢參數(shù)名為logo獲取文件輸入流對象，因?yàn)?lt;input>中聲明的是name="logo"

function doUpload() {
    $.ajax({
        url: 'http://localhost:3000/upload-single',
        type: 'POST',
        cache: false, //不必須
        data: new FormData($('#uploadForm')[0]),
        processData: false,//必須
        contentType: false,//必須
        success: function(data) {
            console.log(data)
        }
    })
}

四、編寫接口

api接口

RestfulApi 規(guī)范
接口文檔的生成(apidoc)
接口請求方式區(qū)別

跨域解決

cors
jsonp
proxy

五、JWT

JWT

用戶登錄服務(wù)器端產(chǎn)生一個(gè)token (加密字符串) 發(fā)送給前端
前端將token 進(jìn)行保存
前端發(fā)起數(shù)據(jù)請求的時(shí)候攜帶token
服務(wù)端驗(yàn)證token 是否合法如果合法繼續(xù)操作不合法終止操作
token 的使用場景無狀態(tài)請求保持用戶的登錄狀態(tài) 第三方登錄（token+auth2.0）

非對稱加密通過私鑰產(chǎn)生token 通過公鑰解密token

// 1.產(chǎn)生公鑰和私鑰
// 產(chǎn)生私鑰  openssl genrsa -out ./private_key.pem 1024    1024 代表私鑰長度
// 產(chǎn)生公鑰  openssl rsa -in ./private_key.pem -pubout -out ./public_key.pem

 let private_key=fs.readFileSync(path.join(__dirname,'./private_key.pem'))
 let public_key=fs.readFileSync(path.join(__dirname,'./public_key.pem'))
 var token = jwt.sign(palyload, private_key,{ algorithm: 'RS256'});
 console.log(token)
 let  token='eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IueUqOaIt2lkIiwiaWF0IjoxNTUxMTUyNzk1fQ.TI_xDBvObHGAH7EV40WWpQemm5nx077Gdjq-pzDx0NWN5YFd40S7XcLmgoDdYscLM7vMOP0c7z1l83JUixqk7IBjBCU-tMNo_G5_-LGkQjV3vDYq_3TkXTl42lgmFA-EBey7W6W1PgPfYlowyHAyp-07hXaMRevgVkXm2lPEFXo'
?
  var decoded = jwt.verify(token, public_key);

const jwt=require('jsonwebtoken')
const scrict='sdjfksdjflajflasjflasjflksf'
?
function creatToken(palyload){
    // 產(chǎn)生token
    palyload.ctime=Date.now()
    return jwt.sign(palyload,scrict)
}
function checkToken(token){
    return  new Promise((resovle,reject)=>{
        jwt.verify(token,scrict,(err,data)=>{
           if(err){ reject('token 驗(yàn)證失敗')}
           resovle(data)
           })
    })
    
}
module.exports={
    creatToken,checkToken
}

Cookie+Session

const  cookieParse=require('cookie-parser')
const  session = require('express-session')
?
app.use(session({
    secret: 'hubwizApp', //為了安全性的考慮設(shè)置secret屬性
    cookie: {maxAge: 60 * 1000 * 60 * 24 }, //設(shè)置過期時(shí)間
    resave: true, // 即使 session 沒有被修改，也保存 session 值，默認(rèn)為 true
    saveUninitialized: false, //無論有沒有session cookie，每次請求都設(shè)置個(gè)session cookie ，默認(rèn)給個(gè)標(biāo)示為 connect.sid
}));
?

登錄成功

req.session.sign = true;
req.session.name = us;

需要驗(yàn)證的接口判斷是否存在

注銷session

app.get('/out', function(req, res){
    req.session.destroy();
    res.redirect('/');
})

六、登錄驗(yàn)證碼

在線咨詢

上一篇：初識(shí)Html
下一篇：超炫HTML5游戲附游戲源碼

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

全站開發(fā)流程（Vue.js+Node+Mongodb）

技術(shù)棧

目錄結(jié)構(gòu)講解

code 文件

其他文件

后臺(tái)管理

前臺(tái)

server端

定制書寫規(guī)范(API)

通過 koa-static 管理靜態(tài)文件入口

瀏覽器還是服務(wù)器的限制

測試分析原因

總結(jié)回答最開始提出的問題

預(yù)檢請求定義

預(yù)檢請求示例

設(shè)置客戶端

設(shè)置服務(wù)端

CORS 與認(rèn)證

解決跨域問題的幾種方法

JSONP

Nginx 代理服務(wù)器配置跨域

總結(jié)

、前端EventLoop

二、后端EventLoop

三、postman的基本使用

四、項(xiàng)目的基本搭建

一、express生成器搭建項(xiàng)目結(jié)構(gòu)

二、MVC架構(gòu)思想

三、圖片上傳

四、編寫接口

五、JWT

JWT

非對稱加密 通過私鑰產(chǎn)生token 通過公鑰解密token

Cookie+Session

六、登錄驗(yàn)證碼

您的項(xiàng)目需求

非對稱加密通過私鑰產(chǎn)生token 通過公鑰解密token