Web開發 專案 前後端分離 介面網域名稱位址 優化

2021-08-11 13:47:31 字數 1303 閱讀 9809

概述:(實時用迅技術 當瀏覽器和伺服器只需要做乙個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以實時的進行資料互相傳送) 這兩種資料傳輸方法比較常用。

問題:但是在做專案時呼叫介面網域名稱的地方很多,小專案可能就幾十個,大的專案就上百或上千之多,再加上專案一般都會有開發環境,測試環境,正式環境共三套環境中,如果是寫死的介面網域名稱,那提麼這時你可能就要哭了!哈哈,沒事慢慢改吧!好了,開個玩笑!

解決辦法:

辦法1、將介面網域名稱做成js格式 或 json格式的配置檔案,如js格式:***.js檔案,內容如下:

const net = ​ 

一般專案都有全域性公共的js檔案(如public.js 沒有就新建乙個吧,每個頁面都載入進去就ok了),然後將上面的***.js檔案載入到這個公共的public.js檔案中來(方法很多:如每個頁面都把***.js載入進去【注意順序,要放在公共public.js之前】,或者ajax,【$.getscript()、$.getjson()】方法等等)來獲取到上面所配置好將介面網域名稱的內容。

思路:此時在這個公共的public.js檔案中用乙個全域性常量或變數(建議用常量,因為常量是一經建立就不要隨意修改,即便是要改也是一改全改),再根據通過判斷各個環境的當前網域名稱來賦予對應的介面網域名稱即可,!**如下:

新建方式: const

(是es6中的常量), var (是es5中的變數,es5中沒有常量關鍵字)  這兩個都可以,這裡就用 es6 中的 const吧

const hd = null; //後端介面網域名稱

var domain = document.domain || window.location.host;  //當前網域名稱

switch(domain)

辦法2、直接將介面網域名稱寫在公共的public.js檔案中,並做判斷和賦值對應的介面網域名稱(這樣就不用向上面那樣去呼叫外部的***.js檔案了),**如下:

新建方式:const (是es6中的常量),var (是es5中的變數,es5中沒有常量關鍵字)  這兩個都可以,這裡就用 es6 中的 const吧

const qd = null; //前端介面網域名稱

const hd = null; //後端介面網域名稱

var domain = document.domain || window.location.host;  //當前網域名稱

switch(domain)

然後就可以根據專案在當前所在的網域名稱下,直接呼叫:

alert(qd) //前端介面網域名稱

alert(hd) //前端介面網域名稱

以上是我個的專案心得,和各們朋友們一起分享,如有更好的方法,希望多指教!

日常筆記 vue專案 前後端分離專案跨域問題解決

開發環境 生產環境 後台主導 cors cors 前端主導 proxy nginx module.exports 配置完proxy之後,我們請求介面的位址需要是當前前端服務的位址 既然要請求自己的位址,那麼就沒有必要寫localhost 8080 直接寫 即可 如果使用 那麼就沒有必要使用.env中...

用Delphi開發前後端分離的Web專案

delphi傳統上是開發cs軟體和windows服務端應用的利器。在過去10年間,delphi已發展為跨平台開發工具,全面支援window android ios linux等32 64位平台。在web開發領域,從傳統的靜態html,到動態伺服器頁面 類似asp jsp php等 再到現代的前後端分...

前後端專案分離 跨域問題

1.跨域 說明最少有兩個域,才會出現跨的這種情況 2.跨域問題出現的本質 a.網域名稱不同,b.埠號不同,c.協議 不同 3,瀏覽器的同源策略 非位址列請求 如a頁面在a服 務器,b頁面在b伺服器,在a頁面請求b頁面的資訊就會出現跨域問題,目的是為了保證使用者資訊保安 如果a頁面可以獲取b頁面資訊,...