超簡單的前端跨域、前後端分離解決方案

飛翔荷蘭人發表於2018-05-23
前端跨域後端

簡介

LiveNode是一個基於Node.js輕巧的web服務，幫助前端開發者解決本地跨域，程式碼重新整理，以及SPA(單頁應用)前後端服務分離，並且可以用於生產環境專案部署。

Github地址

安裝

全域性安裝livenode腳手架工具

npm install livenode-cli -g
複製程式碼

初始化

建立專案

livenode init
複製程式碼

根據提示輸入專案檔名稱(不輸入則生成預設名稱)

project name:
複製程式碼

輸入要建立的專案模版(不輸入內容即生成多頁專案模板，輸入 spa 則生成單頁面應用專案模版)

project templat:
複製程式碼

cd進入生成的專案目錄後，安裝專案所需依賴

npm install
複製程式碼

專案說明

src 目錄為專案容器目錄，html、css、js等程式碼放入該目錄即可。(注意!不可修改src目錄名稱)

config.js 為服務配置檔案

引數 值 描述
port 必填(number) 服務埠
reload (boolean) 在開發環境下是否自動重新整理程式碼
spaHistory (boolean) 專案是否為spa(單頁面應用)的history模式
notFound (string) 多頁服務中404頁面位置，如'/404.html'
proxyTable (array) 代理介面轉發服務

FAQ

  • 當spaHistory設為true時，此時不應設定notFound引數(設定為''字串即可)，同理假如設定notFound引數後，spaHistory模式即失效。
  • reload為開發環境下的程式碼修改自動重新整理瀏覽器，上線執行npm build啟動服務時預設會關閉該功能。
  • proxyTable為服務轉發設定，可以處理本地開發介面跨域除錯，也可線上上生產環境中處理前後端分離，轉發代理後端介面服務。

proxyTable

配置介面轉發代理

const proxyTable = [
  {
    host: 'http://www.binlive.cn',
    api: '/api/testApi'
  }, {
    host: 'http://www.example.cn',
    api: '/example'
  }
];
複製程式碼

host 為介面域名地址，api 為介面地址，可以配置多個介面轉發。 如需代理restfull API，例如介面為http://www.binlive.cn/api/testApi 和 http://www.binlive.cn/api/testApi2 等介面，只需設定api為

{
    host: 'http://www.binlive.cn',
    api: '/api'
 }
複製程式碼

服務命令

npm start
複製程式碼

啟動開發環境下的node.js服務(⚠️如果已經執行過一次npm start命令，需要先執行npm stop關閉服務，才可以再用 npm start啟動服務，或者可以直接用npm restart 重啟服務)

npm restart
複製程式碼

重啟node.js服務，在開發環境下修改config.js配置檔案後需要執行該命令重啟服務

npm run build
複製程式碼

啟動生產環境下的node.js服務，在生產環境下修改配置檔案不需要再執行npm restart命令重啟，npm run build會預設監聽配置檔案修改並自動重啟服務。

npm stop
複製程式碼

停止node.js服務

npm run list
複製程式碼

檢視node.js服務的狀態

相關文章